allow iterable ReactI18NextChildren as children (#1669)

index.d.ts

@@ -52,7 +52,10 @@ type ReactI18NextChildren = React.ReactNode | ObjectOrNever;
 
 declare module 'react' {
   interface HTMLAttributes<T> {
-    children?: ReactI18NextChildren;
+    // This union is inspired by the typings for React.ReactNode. We do this to fix "This JSX tag's 'children' prop
+    // expects a single child of type 'ReactI18NextChildren', but multiple children were provided":
+    // https://github.com/DefinitelyTyped/DefinitelyTyped/blob/5a1e9f91ed0143adede394adb3f540e650455f71/types/react/index.d.ts#L268
+    children?: ReactI18NextChildren | Iterable<ReactI18NextChildren>;
   }
 }
 

package.json

@@ -75,6 +75,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^11.2.7",
     "@testing-library/react-hooks": "^3.4.2",
+    "@types/react": "^18.2.21",
     "all-contributors-cli": "^6.26.0",
     "babel-core": "^7.0.0-bridge.0",
     "babel-jest": "^24.8.0",

test/typescript/Trans.test.tsx

@@ -96,3 +96,12 @@ function extraDivProps() {
     </>
   );
 }
+
+function objectChild() {
+  return (
+    <Trans>
+      {/* @ts-expect-error */}
+      <span>This {{ var: '' }} is an error since `allowObjectInHTMLChildren` is disabled</span>
+    </Trans>
+  );
+}

test/typescript/custom-types/Trans.test.tsx

@@ -95,3 +95,23 @@ function withTfunctionAndKeyPrefixAndWrongKey() {
     </Trans>
   );
 }
+
+function withTextAndInterpolation() {
+  return <Trans>foo {{ var: '' }}</Trans>;
+}
+
+function withInterpolationInHTMLElement() {
+  return (
+    <Trans>
+      foo <strong>{{ var: '' }}</strong>
+    </Trans>
+  );
+}
+
+function withTextAndInterpolationChildrenInHTMLElement() {
+  return (
+    <Trans>
+      <span>foo {{ var: '' }}</span>
+    </Trans>
+  );
+}

test/typescript/custom-types/custom-types.d.ts

@@ -3,6 +3,7 @@ import 'i18next';
 declare module 'i18next' {
   interface CustomTypeOptions {
     defaultNS: 'custom';
+    allowObjectInHTMLChildren: true;
     resources: {
       custom: {
         foo: 'foo';