use exact children type to allow React type augmentation

mui · Sep 8, 2023 · b3a314d · b3a314d
1 parent 95e41fd
commit b3a314d
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 23 deletions.
diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
@@ -39,7 +39,7 @@
     "release": "yarn build && npm publish build",
     "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.{js,ts,tsx}'",
     "typescript": "tslint -p tsconfig.json \"{src,test}/**/*.{spec,d}.{ts,tsx}\" && tsc -p tsconfig.json",
-    "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
+    "typescript:augmentation": "node scripts/testAugmentation.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",

diff --git a/...aterial/scripts/testModuleAugmentation.js → .../mui-material/scripts/testAugmentation.js b/...aterial/scripts/testModuleAugmentation.js → .../mui-material/scripts/testAugmentation.js
@@ -21,7 +21,7 @@ async function test(tsconfigPath) {
 }
 
 /**
- * Tests various module augmentation scenarios.
+ * Tests various augmentation scenarios.
  * We can't run them with a single `tsc` run since these apply globally.
  * Running them all would mean they're not isolated.
  * Each test case represents a section in our docs.
@@ -30,7 +30,7 @@ async function test(tsconfigPath) {
  * This script also allows us to test in parallel which we can't do with our mocha tests.
  */
 async function main() {
-  const tsconfigPaths = await glob('test/typescript/moduleAugmentation/*.tsconfig.json', {
+  const tsconfigPaths = await glob('test/typescript/*Augmentation/*.tsconfig.json', {
     absolute: true,
     cwd: packageRoot,
   });

diff --git a/packages/mui-material/src/FormControl/FormControl.d.ts b/packages/mui-material/src/FormControl/FormControl.d.ts
@@ -8,11 +8,8 @@ import { FormControlClasses } from './formControlClasses';
 export interface FormControlPropsSizeOverrides {}
 export interface FormControlPropsColorOverrides {}
 
-export interface FormControlOwnProps {
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
+export interface FormControlOwnProps
+  extends Pick<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   /**
    * Override or extend the styles applied to the component.
    */

diff --git a/packages/mui-material/src/FormLabel/FormLabel.d.ts b/packages/mui-material/src/FormLabel/FormLabel.d.ts
@@ -12,11 +12,7 @@ export interface FormLabelPropsColorOverrides {}
  */
 export type FormLabelBaseProps = React.LabelHTMLAttributes<HTMLLabelElement>;
 
-export interface FormLabelOwnProps {
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
+export interface FormLabelOwnProps extends Pick<FormLabelBaseProps, 'children'> {
   /**
    * Override or extend the styles applied to the component.
    */

diff --git a/packages/mui-material/src/InputLabel/InputLabel.d.ts b/packages/mui-material/src/InputLabel/InputLabel.d.ts
@@ -8,11 +8,7 @@ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export interface InputLabelPropsSizeOverrides {}
 
-export interface InputLabelOwnProps {
-  /**
-   * The content of the component.
-   */
-  children?: React.ReactNode;
+export interface InputLabelOwnProps extends Pick<FormLabelProps, 'children'> {
   /**
    * Override or extend the styles applied to the component.
    */

diff --git a/packages/mui-material/src/TextField/TextField.d.ts b/packages/mui-material/src/TextField/TextField.d.ts
@@ -33,10 +33,6 @@ export interface BaseTextFieldProps
    * @default false
    */
   autoFocus?: boolean;
-  /**
-   * @ignore
-   */
-  children?: React.ReactNode;
   /**
    * Override or extend the styles applied to the component.
    */

diff --git a/packages/mui-material/test/typescript/reactAugmentation/children.spec.tsx b/packages/mui-material/test/typescript/reactAugmentation/children.spec.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+
+type AugmentedChildren = React.ReactNode | Record<string, unknown>;
+
+// Update React's children prop type
+declare module 'react' {
+  interface HTMLAttributes<T> {
+    children?: AugmentedChildren | Iterable<AugmentedChildren>;
+  }
+}
+
+// Rendering a TextField for the Autocomplete should work
+<Autocomplete options={[{ label: 'test' }]} renderInput={(params) => <TextField {...params} />} />;
diff --git a/packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json b/packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "skipLibCheck": true
+  },
+  "extends": "../../../../../tsconfig",
+  "files": ["children.spec.tsx"]
+}
diff --git a/packages/mui-material/tsconfig.json b/packages/mui-material/tsconfig.json
@@ -1,5 +1,9 @@
 {
   "extends": "../../tsconfig",
   "include": ["src/**/*", "test/**/*"],
-  "exclude": ["test/typescript/moduleAugmentation", "src/types/OverridableComponentAugmentation.ts"]
+  "exclude": [
+    "test/typescript/moduleAugmentation",
+    "test/typescript/reactAugmentation",
+    "src/types/OverridableComponentAugmentation.ts"
+  ]
 }