[material-ui][TextField] Deprecate *Props props

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -1024,6 +1024,35 @@ Here's how to migrate:
   },
 ```
 
+## TextField
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#text-field-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@next deprecations/text-field-props <path>
+```
+
+### \*Props props
+
+All of the TextField's slot props (`*Props`) props were deprecated in favor of equivalent `slotProps` entries:
+
+```diff
+ <TextField
+-    InputProps={CustomInputProps}
+-    inputProps={CustomHtmlInputProps}
+-    SelectProps={CustomSelectProps}
+-    InputLabelProps={CustomInputLabelProps}
+-    FormHelperTextProps={CustomFormHelperProps}
++    slotProps={{
++        input: CustomInputProps
++        htmlInput: CustomHtmlInputProps
++        select: CustomSelectProps
++        inputLabel: CustomInputLabelProps
++        formHelper: CustomFormHelperProps
++    }}
+ />
+```
+
 ## StepLabel
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#step-label-props) below to migrate the code as described in the following sections:

docs/pages/material-ui/api/text-field.json

@@ -13,13 +13,29 @@
     "defaultValue": { "type": { "name": "any" } },
     "disabled": { "type": { "name": "bool" }, "default": "false" },
     "error": { "type": { "name": "bool" }, "default": "false" },
-    "FormHelperTextProps": { "type": { "name": "object" } },
+    "FormHelperTextProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.formHelperText</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "fullWidth": { "type": { "name": "bool" }, "default": "false" },
     "helperText": { "type": { "name": "node" } },
     "id": { "type": { "name": "string" } },
-    "InputLabelProps": { "type": { "name": "object" } },
-    "inputProps": { "type": { "name": "object" } },
-    "InputProps": { "type": { "name": "object" } },
+    "InputLabelProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.inputLabel</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
+    "inputProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.htmlInput</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
+    "InputProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.input</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "inputRef": { "type": { "name": "custom", "description": "ref" } },
     "label": { "type": { "name": "node" } },
     "margin": {
@@ -41,13 +57,31 @@
     "required": { "type": { "name": "bool" }, "default": "false" },
     "rows": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
     "select": { "type": { "name": "bool" }, "default": "false" },
-    "SelectProps": { "type": { "name": "object" } },
+    "SelectProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.select</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "size": {
       "type": {
         "name": "union",
         "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       }
     },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ formHelperText?: func<br>&#124;&nbsp;object, htmlInput?: func<br>&#124;&nbsp;object, input?: func<br>&#124;&nbsp;object, inputLabel?: func<br>&#124;&nbsp;object, select?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ formHelperText?: elementType, htmlInput?: elementType, input?: elementType, inputLabel?: elementType, select?: elementType }"
+      },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -70,6 +104,38 @@
     "import TextField from '@mui/material/TextField';",
     "import { TextField } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "input",
+      "description": "The component that renders the input.",
+      "default": "OutlinedInput",
+      "class": null
+    },
+    {
+      "name": "inputLabel",
+      "description": "The component that renders the input's label.",
+      "default": "InputLabel",
+      "class": null
+    },
+    {
+      "name": "htmlInput",
+      "description": "The html input element.",
+      "default": "'input'",
+      "class": null
+    },
+    {
+      "name": "formHelperText",
+      "description": "The component that renders the helper text.",
+      "default": "FormHelperText",
+      "class": null
+    },
+    {
+      "name": "select",
+      "description": "The component that renders the select.",
+      "default": "Select",
+      "class": null
+    }
+  ],
   "classes": [
     {
       "key": "root",
@@ -81,7 +147,6 @@
   "spread": true,
   "themeDefaultProps": true,
   "muiName": "MuiTextField",
-  "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/mui-material/src/TextField/TextField.js",
   "inheritance": { "component": "FormControl", "pathname": "/material-ui/api/form-control/" },
   "demos": "<ul><li><a href=\"/material-ui/react-autocomplete/\">Autocomplete</a></li>\n<li><a href=\"/material-ui/react-text-field/\">Text Field</a></li></ul>",

docs/src/pages/premium-themes/onepirate/modules/components/TextField.js

@@ -119,18 +119,21 @@ TextField.propTypes = {
   /**
    * Props applied to the [`InputLabel`](/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
+   * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   InputLabelProps: PropTypes.object,
   /**
    * Props applied to the Input element.
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   InputProps: PropTypes.object,
   noBorder: PropTypes.bool,
   /**
    * Props applied to the [`Select`](/material-ui/api/select/) element.
+   * @deprecated Use `slotProps.select` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   SelectProps: PropTypes.object,
   size: PropTypes.oneOf(['large', 'medium', 'small', 'xlarge']),

docs/src/pages/premium-themes/onepirate/modules/form/RFTextField.js

@@ -51,6 +51,7 @@ RFTextField.propTypes = {
    * It will be a [`FilledInput`](/material-ui/api/filled-input/),
    * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
    * component depending on the `variant` prop value.
+   * @deprecated Use `slotProps.input` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   InputProps: PropTypes.object,
   meta: PropTypes.shape({

docs/translations/api-docs/text-field/text-field.json

@@ -70,6 +70,8 @@
       "description": "Props applied to the <a href=\"/material-ui/api/select/\"><code>Select</code></a> element."
     },
     "size": { "description": "The size of the component." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -81,5 +83,12 @@
     },
     "variant": { "description": "The variant to use." }
   },
-  "classDescriptions": { "root": { "description": "Styles applied to the root element." } }
+  "classDescriptions": { "root": { "description": "Styles applied to the root element." } },
+  "slotDescriptions": {
+    "formHelperText": "The component that renders the helper text.",
+    "htmlInput": "The html input element.",
+    "input": "The component that renders the input.",
+    "inputLabel": "The component that renders the input&#39;s label.",
+    "select": "The component that renders the select."
+  }
 }

packages/mui-codemod/CONTRIBUTING.md

@@ -13,6 +13,7 @@ The codemods for CSS files are based on [postcss](https://github.com/postcss/pos
 1. Create a new folder in `packages/mui-codemod/src/*/*` with the name of the codemod.
 2. The folder should include:
    - `<codemod>.js` - the transform implementation
+   - `index.js` - exports the transform function
    - `postcss-plugin.js` - the postcss plugin (optional)
    - `postcss.config.js` - the postcss config file (optional)
    - `<codemod>.test.js` - tests for the codemods (use jscodeshift from the `testUtils` folder)

packages/mui-codemod/README.md

@@ -993,6 +993,29 @@ npx @mui/codemod@next deprecations/pagination-item-props <path>
 npx @mui/codemod@next deprecations/slider-props <path>
 ```
 
+#### `text-field-props`
+
+```diff
+ <TextField
+-    InputProps={CustomInputProps}
+-    inputProps={CustomHtmlInputProps}
+-    SelectProps={CustomSelectProps}
+-    InputLabelProps={CustomInputLabelProps}
+-    FormHelperTextProps={CustomFormHelperProps}
++    slotProps={{
++        input: CustomInputProps
++        htmlInput: CustomHtmlInputProps
++        select: CustomSelectProps
++        inputLabel: CustomInputLabelProps
++        formHelper: CustomFormHelperProps
++    }}
+ />
+```
+
+```bash
+npx @mui/codemod@next deprecations/text-field-props <path>
+```
+
 #### `toggle-button-group-classes`
 
 JS transforms:

packages/mui-codemod/src/deprecations/all/deprecations-all.js

@@ -13,6 +13,7 @@ import transformStepLabelProps from '../step-label-props';
 import transformBackdropProps from '../backdrop-props';
 import transformStepConnectorClasses from '../step-connector-classes';
 import transformSpeedDialProps from '../speed-dial-props';
+import transformTextFieldProps from '../text-field-props';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -34,6 +35,7 @@ export default function deprecationsAll(file, api, options) {
   file.source = transformBackdropProps(file, api, options);
   file.source = transformStepConnectorClasses(file, api, options);
   file.source = transformSpeedDialProps(file, api, options);
+  file.source = transformTextFieldProps(file, api, options);
 
   return file.source;
 }

packages/mui-codemod/src/deprecations/text-field-props/index.js

@@ -0,0 +1 @@
+export { default } from './text-field-props';

packages/mui-codemod/src/deprecations/text-field-props/test-cases/actual.js

@@ -0,0 +1,24 @@
+import TextField from '@mui/material/TextField';
+import { TextField as MyTextField } from '@mui/material';
+
+<TextField
+  InputProps={CustomInputProps}
+  inputProps={CustomHtmlInputProps}
+  SelectProps={CustomSelectProps}
+  InputLabelProps={CustomInputLabelProps}
+  FormHelperTextProps={CustomFormHelperProps}
+/>;
+<MyTextField
+  InputProps={CustomInputProps}
+  inputProps={CustomHtmlInputProps}
+  SelectProps={CustomSelectProps}
+  InputLabelProps={CustomInputLabelProps}
+  FormHelperTextProps={CustomFormHelperProps}
+/>;
+<NonMuiTextField
+  InputProps={CustomInputProps}
+  inputProps={CustomHtmlInputProps}
+  SelectProps={CustomSelectProps}
+  InputLabelProps={CustomInputLabelProps}
+  FormHelperTextProps={CustomFormHelperProps}
+/>;

packages/mui-codemod/src/deprecations/text-field-props/test-cases/expected.js

@@ -0,0 +1,26 @@
+import TextField from '@mui/material/TextField';
+import { TextField as MyTextField } from '@mui/material';
+
+<TextField
+  slotProps={{
+    input: CustomInputProps,
+    htmlInput: CustomHtmlInputProps,
+    select: CustomSelectProps,
+    inputLabel: CustomInputLabelProps,
+    formHelperText: CustomFormHelperProps
+  }} />;
+<MyTextField
+  slotProps={{
+    input: CustomInputProps,
+    htmlInput: CustomHtmlInputProps,
+    select: CustomSelectProps,
+    inputLabel: CustomInputLabelProps,
+    formHelperText: CustomFormHelperProps
+  }} />;
+<NonMuiTextField
+  InputProps={CustomInputProps}
+  inputProps={CustomHtmlInputProps}
+  SelectProps={CustomSelectProps}
+  InputLabelProps={CustomInputLabelProps}
+  FormHelperTextProps={CustomFormHelperProps}
+/>;

packages/mui-codemod/src/deprecations/text-field-props/test-cases/theme.actual.js

@@ -0,0 +1,11 @@
+fn({
+  MuiTextField: {
+    defaultProps: {
+      InputProps: CustomInputProps,
+      inputProps: CustomHtmlInputProps,
+      SelectProps: CustomSelectProps,
+      InputLabelProps: CustomInputLabelProps,
+      FormHelperTextProps: CustomFormHelperProps
+    },
+  },
+});

packages/mui-codemod/src/deprecations/text-field-props/test-cases/theme.expected.js

@@ -0,0 +1,13 @@
+fn({
+  MuiTextField: {
+    defaultProps: {
+      slotProps: {
+        input: CustomInputProps,
+        htmlInput: CustomHtmlInputProps,
+        select: CustomSelectProps,
+        inputLabel: CustomInputLabelProps,
+        formHelperText: CustomFormHelperProps
+      }
+    },
+  },
+});

packages/mui-codemod/src/deprecations/text-field-props/text-field-props.js

@@ -0,0 +1,48 @@
+import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+
+/**
+ * @param {import('jscodeshift').FileInfo} file
+ * @param {import('jscodeshift').API} api
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const printOptions = options.printOptions;
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TextField',
+    propName: 'InputProps',
+    slotName: 'input',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TextField',
+    propName: 'inputProps',
+    slotName: 'htmlInput',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TextField',
+    propName: 'SelectProps',
+    slotName: 'select',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TextField',
+    propName: 'InputLabelProps',
+    slotName: 'inputLabel',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'TextField',
+    propName: 'FormHelperTextProps',
+    slotName: 'formHelperText',
+  });
+
+  return root.toSource(printOptions);
+}