[material-ui][Autocomplete] deprecate *Component and *Props for v6

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

@@ -227,6 +227,14 @@ Here's how to migrate:
  },
 ```
 
+## Autocomplete
+
+Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#autocomplete-props) below to migrate the code as described in the following sections:
+
+```bash
+npx @mui/codemod@latest deprecations/autocomplete-props <path>
+```
+
 ## Avatar
 
 Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#avatar-props) below to migrate the code as described in the following sections:

docs/pages/material-ui/api/autocomplete.json

@@ -16,7 +16,11 @@
       },
       "default": "false"
     },
-    "ChipProps": { "type": { "name": "object" } },
+    "ChipProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.chip</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "clearIcon": { "type": { "name": "node" }, "default": "<ClearIcon fontSize=\"small\" />" },
     "clearOnBlur": { "type": { "name": "bool" }, "default": "!props.freeSolo" },
@@ -92,8 +96,17 @@
       }
     },
     "limitTags": { "type": { "name": "custom", "description": "integer" }, "default": "-1" },
-    "ListboxComponent": { "type": { "name": "elementType" }, "default": "'ul'" },
-    "ListboxProps": { "type": { "name": "object" } },
+    "ListboxComponent": {
+      "type": { "name": "elementType" },
+      "default": "'ul'",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.listbox</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
+    "ListboxProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.listbox</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "loading": { "type": { "name": "bool" }, "default": "false" },
     "loadingText": { "type": { "name": "node" }, "default": "'Loading…'" },
     "multiple": { "type": { "name": "bool" }, "default": "false" },
@@ -136,8 +149,18 @@
     "open": { "type": { "name": "bool" } },
     "openOnFocus": { "type": { "name": "bool" }, "default": "false" },
     "openText": { "type": { "name": "string" }, "default": "'Open'" },
-    "PaperComponent": { "type": { "name": "elementType" }, "default": "Paper" },
-    "PopperComponent": { "type": { "name": "elementType" }, "default": "Popper" },
+    "PaperComponent": {
+      "type": { "name": "elementType" },
+      "default": "Paper",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.paper</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
+    "PopperComponent": {
+      "type": { "name": "elementType" },
+      "default": "Popper",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.listbox</code> instead. This prop will be removed in v7. <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">How to migrate</a>."
+    },
     "popupIcon": { "type": { "name": "node" }, "default": "<ArrowDropDownIcon />" },
     "readOnly": { "type": { "name": "bool" }, "default": "false" },
     "renderGroup": {
@@ -172,7 +195,14 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ clearIndicator?: object, paper?: object, popper?: object, popupIndicator?: object }"
+        "description": "{ chip?: func<br>&#124;&nbsp;{ avatar?: element, children?: any, classes?: any<br>&#124;&nbsp;object, className?: any<br>&#124;&nbsp;string, clickable?: any<br>&#124;&nbsp;bool, color?: 'default'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;any, component?: elementType, deleteIcon?: element, disabled?: any<br>&#124;&nbsp;bool, icon?: element, label?: any<br>&#124;&nbsp;node, onDelete?: any<br>&#124;&nbsp;func, size?: 'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;any, skipFocusWhenDisabled?: any<br>&#124;&nbsp;bool, style?: any<br>&#124;&nbsp;object, sx?: any, tabIndex?: any<br>&#124;&nbsp;number, variant?: 'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;any }<br>&#124;&nbsp;{ component?: elementType, key?: any, sx?: Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object }, clearIndicator?: func<br>&#124;&nbsp;object, listbox?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, popper?: func<br>&#124;&nbsp;object, popupIndicator?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": {
+        "name": "shape",
+        "description": "{ listbox?: elementType, paper?: elementType, popper?: elementType }"
       },
       "default": "{}"
     },
@@ -190,6 +220,26 @@
     "import Autocomplete from '@mui/material/Autocomplete';",
     "import { Autocomplete } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "listbox",
+      "description": "The component used to render the listbox.",
+      "default": "'ul'",
+      "class": "MuiAutocomplete-listbox"
+    },
+    {
+      "name": "paper",
+      "description": "The component used to render the body of the popup.",
+      "default": "Paper",
+      "class": "MuiAutocomplete-paper"
+    },
+    {
+      "name": "popper",
+      "description": "The component used to position the popup.",
+      "default": "Popper",
+      "class": "MuiAutocomplete-popper"
+    }
+  ],
   "classes": [
     {
       "key": "clearIndicator",
@@ -269,12 +319,6 @@
       "description": "Styles applied to the Input element.",
       "isGlobal": false
     },
-    {
-      "key": "listbox",
-      "className": "MuiAutocomplete-listbox",
-      "description": "Styles applied to the listbox component.",
-      "isGlobal": false
-    },
     {
       "key": "loading",
       "className": "MuiAutocomplete-loading",
@@ -293,18 +337,6 @@
       "description": "Styles applied to the option elements.",
       "isGlobal": false
     },
-    {
-      "key": "paper",
-      "className": "MuiAutocomplete-paper",
-      "description": "Styles applied to the Paper component.",
-      "isGlobal": false
-    },
-    {
-      "key": "popper",
-      "className": "MuiAutocomplete-popper",
-      "description": "Styles applied to the popper element.",
-      "isGlobal": false
-    },
     {
       "key": "popperDisablePortal",
       "className": "MuiAutocomplete-popperDisablePortal",

docs/translations/api-docs/autocomplete/autocomplete.json

@@ -189,6 +189,7 @@
     },
     "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."
     },
@@ -245,10 +246,6 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the Input element"
     },
-    "listbox": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the listbox component"
-    },
     "loading": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the loading wrapper"
@@ -261,14 +258,6 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the option elements"
     },
-    "paper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the Paper component"
-    },
-    "popper": {
-      "description": "Styles applied to {{nodeName}}.",
-      "nodeName": "the popper element"
-    },
     "popperDisablePortal": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the popper element",
@@ -299,5 +288,10 @@
       "nodeName": "the tag elements",
       "conditions": "for example the chips if <code>size=\"small\"</code>"
     }
+  },
+  "slotDescriptions": {
+    "listbox": "The component used to render the listbox.",
+    "paper": "The component used to render the body of the popup.",
+    "popper": "The component used to position the popup."
   }
 }

packages/mui-codemod/README.md

@@ -259,6 +259,52 @@ npx @mui/codemod@next deprecations/alert-classes <path>
 npx @mui/codemod@next deprecations/alert-props <path>
 ```
 
+#### `autocomplete-props`
+
+```diff
+ <Autocomplete
+-  ChipProps={{ height: 10 }}
+-  PaperComponent={CustomPaper}
+-  PopperComponent={CustomPopper}
+-  ListboxComponent={CustomListbox}
+-  ListboxProps={{ height: 12 }}
++  slots={{
++    paper: CustomPaper,
++    popper: CustomPopper,
++    listbox: CustomListbox,
++  }}
++  slotProps={{
++    chip: { height: 10 },
++    listbox: { height: 12 },
++  }}
+ />
+```
+
+```diff
+ MuiAutocomplete: {
+   defaultProps: {
+-    ChipProps: { height: 10 },
+-    PaperComponent: CustomPaper,
+-    PopperComponent: CustomPopper,
+-    ListboxComponent: CustomListbox,
+-    ListboxProps: { height: 12 },
++    slots: {
++      paper: CustomPaper,
++      popper: CustomPopper,
++      listbox: CustomListbox,
++    },
++    slotProps: {
++      chip: { height: 10 },
++      listbox: { height: 12 },
++    },
+   },
+ },
+```
+
+```bash
+npx @mui/codemod@next deprecations/autocomplete-props <path>
+```
+
 #### `avatar-props`
 
 ```diff

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

@@ -1,4 +1,5 @@
 import transformAccordionProps from '../accordion-props';
+import transformAutocompleteProps from '../autocomplete-props';
 import transformAvatarProps from '../avatar-props';
 import transformDividerProps from '../divider-props';
 import transformAccordionClasses from '../accordion-summary-classes';
@@ -18,6 +19,7 @@ import transformStepConnectorClasses from '../step-connector-classes';
  */
 export default function deprecationsAll(file, api, options) {
   file.source = transformAccordionProps(file, api, options);
+  file.source = transformAutocompleteProps(file, api, options);
   file.source = transformAvatarProps(file, api, options);
   file.source = transformDividerProps(file, api, options);
   file.source = transformAccordionClasses(file, api, options);

packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js

@@ -0,0 +1,49 @@
+import movePropIntoSlots from '../utils/movePropIntoSlots';
+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;
+
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'Autocomplete',
+    propName: 'PaperComponent',
+    slotName: 'paper',
+  });
+
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'Autocomplete',
+    propName: 'PopperComponent',
+    slotName: 'popper',
+  });
+
+  movePropIntoSlots(j, {
+    root,
+    componentName: 'Autocomplete',
+    propName: 'ListboxComponent',
+    slotName: 'listbox',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Autocomplete',
+    propName: 'ListboxProps',
+    slotName: 'listbox',
+  });
+
+  movePropIntoSlotProps(j, {
+    root,
+    componentName: 'Autocomplete',
+    propName: 'ChipProps',
+    slotName: 'chip',
+  });
+
+  return root.toSource(printOptions);
+}

packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.test.js

@@ -0,0 +1,53 @@
+import path from 'path';
+import { expect } from 'chai';
+import { jscodeshift } from '../../../testUtils';
+import transform from './autocomplete-props';
+import readFile from '../../util/readFile';
+
+function read(fileName) {
+  return readFile(path.join(__dirname, fileName));
+}
+
+describe('@mui/codemod', () => {
+  describe('deprecations', () => {
+    describe('autocomplete-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {});
+
+        const expected = read('./test-cases/expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+
+    describe('[theme] autocomplete-props', () => {
+      it('transforms props as needed', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.actual.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+
+      it('should be idempotent', () => {
+        const actual = transform(
+          { source: read('./test-cases/theme.expected.js') },
+          { jscodeshift },
+          {},
+        );
+
+        const expected = read('./test-cases/theme.expected.js');
+        expect(actual).to.equal(expected, 'The transformed version should be correct');
+      });
+    });
+  });
+});

packages/mui-codemod/src/deprecations/autocomplete-props/index.js

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

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

@@ -0,0 +1,37 @@
+import Autocomplete from '@mui/material/Autocomplete';
+import {Autocomplete as MyAutocomplete} from '@mui/material';
+
+<Autocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+/>;
+
+<Autocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+  slotProps={{
+    popupIndicator: { width: 20 }
+  }}
+/>;
+
+<MyAutocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+/>;
+
+<CustomAutocomplete
+  ChipProps={{ height: 10 }}
+  PaperComponent={CustomPaper}
+  PopperComponent={CustomPopper}
+  ListboxComponent={CustomListbox}
+  ListboxProps={{ height: 12 }}
+/>