[Autocomplete] deprecate *Component and *Props for v6

docs/data/material/components/autocomplete/GitHubLabel.js

@@ -192,7 +192,6 @@ export default function GitHubLabel() {
                 setPendingValue(newValue);
               }}
               disableCloseOnSelect
-              PopperComponent={PopperComponent}
               renderTags={() => null}
               noOptionsText="No labels"
               renderOption={(props, option, { selected }) => (
@@ -255,6 +254,9 @@ export default function GitHubLabel() {
                   placeholder="Filter labels"
                 />
               )}
+              slots={{
+                popper: PopperComponent,
+              }}
             />
           </div>
         </ClickAwayListener>

docs/data/material/components/autocomplete/GitHubLabel.tsx

@@ -198,7 +198,6 @@ export default function GitHubLabel() {
                 setPendingValue(newValue);
               }}
               disableCloseOnSelect
-              PopperComponent={PopperComponent}
               renderTags={() => null}
               noOptionsText="No labels"
               renderOption={(props, option, { selected }) => (
@@ -261,6 +260,9 @@ export default function GitHubLabel() {
                   placeholder="Filter labels"
                 />
               )}
+              slots={{
+                popper: PopperComponent,
+              }}
             />
           </div>
         </ClickAwayListener>

docs/data/material/components/autocomplete/Virtualize.js

@@ -141,13 +141,15 @@ export default function Virtualize() {
       id="virtualize-demo"
       sx={{ width: 300 }}
       disableListWrap
-      PopperComponent={StyledPopper}
-      ListboxComponent={ListboxComponent}
       options={OPTIONS}
       groupBy={(option) => option[0].toUpperCase()}
       renderInput={(params) => <TextField {...params} label="10,000 options" />}
       renderOption={(props, option, state) => [props, option, state.index]}
       renderGroup={(params) => params}
+      slots={{
+        popper: StyledPopper,
+        listbox: ListboxComponent,
+      }}
     />
   );
 }

docs/data/material/components/autocomplete/Virtualize.tsx

@@ -141,15 +141,17 @@ export default function Virtualize() {
       id="virtualize-demo"
       sx={{ width: 300 }}
       disableListWrap
-      PopperComponent={StyledPopper}
-      ListboxComponent={ListboxComponent}
       options={OPTIONS}
       groupBy={(option) => option[0].toUpperCase()}
       renderInput={(params) => <TextField {...params} label="10,000 options" />}
       renderOption={(props, option, state) =>
         [props, option, state.index] as React.ReactNode
       }
       renderGroup={(params) => params as any}
+      slots={{
+        popper: StyledPopper,
+        listbox: ListboxComponent,
+      }}
     />
   );
 }

docs/data/material/components/autocomplete/Virtualize.tsx.preview

@@ -2,13 +2,15 @@
   id="virtualize-demo"
   sx={{ width: 300 }}
   disableListWrap
-  PopperComponent={StyledPopper}
-  ListboxComponent={ListboxComponent}
   options={OPTIONS}
   groupBy={(option) => option[0].toUpperCase()}
   renderInput={(params) => <TextField {...params} label="10,000 options" />}
   renderOption={(props, option, state) =>
     [props, option, state.index] as React.ReactNode
   }
   renderGroup={(params) => params as any}
+  slots={{
+    popper: StyledPopper,
+    listbox: ListboxComponent,
+  }}
 />

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.popper</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;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 transformFormControlLabelProps from '../form-control-label-props';
 import transformAvatarProps from '../avatar-props';
 import transformDividerProps from '../divider-props';
@@ -19,6 +20,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 = transformFormControlLabelProps(file, api, options);
   file.source = transformAvatarProps(file, api, options);
   file.source = transformDividerProps(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);
+}