[material-ui][TextField][FormLabel][InputLabel][FormControl] Use exact children type to allow React children type augmentation

.circleci/config.yml

@@ -276,7 +276,7 @@ jobs:
       - run:
           name: Test module augmentation
           command: |
-            yarn workspace @mui/material typescript:module-augmentation
+            yarn workspace @mui/material typescript:augmentation
             yarn workspace @mui/base typescript:module-augmentation
             yarn workspace @mui/joy typescript:module-augmentation
       - run:

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": "tsc -p tsconfig.json",
-    "typescript:module-augmentation": "node scripts/testModuleAugmentation.js"
+    "typescript:augmentation": "node scripts/testAugmentation.js"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.5",

packages/mui-material/scripts/testModuleAugmentation.js → packages/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,
   });

packages/mui-material/src/FormControl/FormControl.d.ts

@@ -12,7 +12,7 @@ export interface FormControlOwnProps {
   /**
    * The content of the component.
    */
-  children?: React.ReactNode;
+  children?: React.HTMLAttributes<HTMLDivElement>['children'];
   /**
    * Override or extend the styles applied to the component.
    */

packages/mui-material/src/FormLabel/FormLabel.d.ts

@@ -16,7 +16,7 @@ export interface FormLabelOwnProps {
   /**
    * The content of the component.
    */
-  children?: React.ReactNode;
+  children?: React.LabelHTMLAttributes<HTMLLabelElement>['children'];
   /**
    * Override or extend the styles applied to the component.
    */

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.
    */

packages/mui-material/src/TextField/TextField.d.ts

@@ -36,7 +36,7 @@ export interface BaseTextFieldProps
   /**
    * @ignore
    */
-  children?: React.ReactNode;
+  children?: FormControlProps['children'];
   /**
    * Override or extend the styles applied to the component.
    */

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} />} />;

packages/mui-material/test/typescript/reactAugmentation/children.tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "skipLibCheck": true
+  },
+  "extends": "../../../../../tsconfig",
+  "files": ["children.spec.tsx"]
+}

packages/mui-material/tsconfig.json

@@ -1,5 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src/**/*", "test/**/*"],
-  "exclude": ["test/typescript/moduleAugmentation", "src/types/OverridableComponentAugmentation.ts"]
+  "exclude": [
+    "test/typescript/moduleAugmentation",
+    "test/typescript/reactAugmentation",
+    "src/types/OverridableComponentAugmentation.ts"
+  ]
 }