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

#41875)
mui · May 8, 2024 · d8a5f53 · d8a5f53
1 parent 2f61ff7
commit d8a5f53
Show file tree

Hide file tree

Showing 20 changed files with 608 additions and 110 deletions.
diff --git a/docs/data/material/components/autocomplete/GitHubLabel.js b/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>

diff --git a/docs/data/material/components/autocomplete/GitHubLabel.tsx b/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>

diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js
@@ -140,13 +140,15 @@ export default function Virtualize() {
     <Autocomplete
       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,
+      }}
     />
   );
 }
diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx
@@ -140,15 +140,17 @@ export default function Virtualize() {
     <Autocomplete
       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,
+      }}
     />
   );
 }
diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx.preview b/docs/data/material/components/autocomplete/Virtualize.tsx.preview
@@ -1,13 +1,15 @@
 <Autocomplete
   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,
+  }}
 />
diff --git a/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/...rial/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
@@ -227,6 +227,46 @@ 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@next deprecations/autocomplete-props <path>
+```
+
+### \*Component props
+
+All of the Autocomplete's slot (`*Component`) props were deprecated in favor of equivalent `slots` entries:
+
+```diff
+ <Autocomplete
+-    ListboxComponent={CustomListboxComponent}
+-    PaperComponent={CustomPaperComponent}
+-    PopperComponent={CustomPopperComponent}
++    slots={{
++        listbox: CustomListboxComponent,
++        paper: CustomPaperComponent,
++        popper: CustomPopperComponent,
++    }}
+ />
+```
+
+### \*Props props
+
+All of the Autocomplete's slot props (`*Props`) props were deprecated in favor of equivalent `slotProps` entries:
+
+```diff
+ <Autocomplete
+-    ChipProps={CustomChipProps}
+-    ListboxProps={CustomListboxProps}
++    slotProps={{
++        chip: CustomChipProps,
++        listbox: CustomListboxProps,
++    }}
+ />
+```
+
 ## 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:

diff --git a/docs/pages/material-ui/api/autocomplete.json b/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. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "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. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "ListboxProps": {
+      "type": { "name": "object" },
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slotProps.listbox</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "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. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
+    "PopperComponent": {
+      "type": { "name": "elementType" },
+      "default": "Popper",
+      "deprecated": true,
+      "deprecationInfo": "Use <code>slots.popper</code> instead. This prop will be removed in v7. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
+    },
     "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",
@@ -351,7 +383,6 @@
   "spread": true,
   "themeDefaultProps": true,
   "muiName": "MuiAutocomplete",
-  "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/mui-material/src/Autocomplete/Autocomplete.js",
   "inheritance": null,
   "demos": "<ul><li><a href=\"/material-ui/react-autocomplete/\">Autocomplete</a></li></ul>",

diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/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."
   }
 }
diff --git a/packages/mui-codemod/README.md b/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

diff --git a/packages/mui-codemod/src/deprecations/all/deprecations-all.js b/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';
@@ -21,6 +22,7 @@ import transformSpeedDialProps from '../speed-dial-props';
  */
 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);