[material-ui][Autocomplete] Deprecate componentsProps props (#42179)

mui · May 14, 2024 · 7f474ab · 7f474ab
1 parent 40492b7
commit 7f474ab
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 9 deletions.
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
@@ -267,6 +267,26 @@ All of the Autocomplete's slot props (`*Props`) props were deprecated in favor o
  />
 ```
 
+### componentsProps
+
+The Autocomplete's `componentsProps` prop was deprecated in favor of `slotProps`:
+
+```diff
+ <Autocomplete
+-  componentsProps={{
+-    clearIndicator: { width: 10 },
+-    paper: { width: 12 },
+-    popper: { width: 14 },
+-    popupIndicator: { width: 16 },
++  slotProps={{
++    clearIndicator: { width: 10 },
++    paper: { width: 12 },
++    popper: { width: 14 },
++    popupIndicator: { width: 16 },
+    }}
+ />
+```
+
 ## 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
@@ -32,7 +32,8 @@
         "name": "shape",
         "description": "{ clearIndicator?: object, paper?: object, popper?: object, popupIndicator?: object }"
       },
-      "default": "{}"
+      "deprecated": true,
+      "deprecationInfo": "Use the <code>slotProps</code> prop 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."
     },
     "defaultValue": {
       "type": { "name": "custom", "description": "any" },

diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
@@ -268,6 +268,12 @@ npx @mui/codemod@next deprecations/alert-props <path>
 -  PopperComponent={CustomPopper}
 -  ListboxComponent={CustomListbox}
 -  ListboxProps={{ height: 12 }}
+-  componentsProps={{
+-    clearIndicator: { width: 10 },
+-    paper: { width: 12 },
+-    popper: { width: 14 },
+-    popupIndicator: { width: 16 },
+-  }}
 +  slots={{
 +    paper: CustomPaper,
 +    popper: CustomPopper,
@@ -276,6 +282,10 @@ npx @mui/codemod@next deprecations/alert-props <path>
 +  slotProps={{
 +    chip: { height: 10 },
 +    listbox: { height: 12 },
++    clearIndicator: { width: 10 },
++    paper: { width: 12 },
++    popper: { width: 14 },
++    popupIndicator: { width: 16 },
 +  }}
  />
 ```
@@ -288,6 +298,12 @@ npx @mui/codemod@next deprecations/alert-props <path>
 -    PopperComponent: CustomPopper,
 -    ListboxComponent: CustomListbox,
 -    ListboxProps: { height: 12 },
+-    componentsProps: {
+-       clearIndicator: { width: 10 },
+-       paper: { width: 12 },
+-       popper: { width: 14 },
+-       popupIndicator: { width: 16 },
+-     }
 +    slots: {
 +      paper: CustomPaper,
 +      popper: CustomPopper,
@@ -296,6 +312,10 @@ npx @mui/codemod@next deprecations/alert-props <path>
 +    slotProps: {
 +      chip: { height: 10 },
 +      listbox: { height: 12 },
++      clearIndicator: { width: 10 },
++      paper: { width: 12 },
++      popper: { width: 14 },
++      popupIndicator: { width: 16 },
 +    },
    },
  },

diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js b/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js
@@ -1,5 +1,6 @@
 import movePropIntoSlots from '../utils/movePropIntoSlots';
 import movePropIntoSlotProps from '../utils/movePropIntoSlotProps';
+import replaceComponentsWithSlots from '../utils/replaceComponentsWithSlots';
 
 /**
  * @param {import('jscodeshift').FileInfo} file
@@ -45,5 +46,7 @@ export default function transformer(file, api, options) {
     slotName: 'chip',
   });
 
+  replaceComponentsWithSlots(j, { root, componentName: 'Autocomplete' });
+
   return root.toSource(printOptions);
 }
diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/actual.js b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/actual.js
@@ -7,6 +7,12 @@ import {Autocomplete as MyAutocomplete} from '@mui/material';
   PopperComponent={CustomPopper}
   ListboxComponent={CustomListbox}
   ListboxProps={{ height: 12 }}
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
 />;
 
 <Autocomplete
@@ -18,6 +24,12 @@ import {Autocomplete as MyAutocomplete} from '@mui/material';
   slotProps={{
     popupIndicator: { width: 20 }
   }}
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
 />;
 
 <MyAutocomplete
@@ -26,6 +38,12 @@ import {Autocomplete as MyAutocomplete} from '@mui/material';
   PopperComponent={CustomPopper}
   ListboxComponent={CustomListbox}
   ListboxProps={{ height: 12 }}
+  componentsProps={{
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 },
+  }}
 />;
 
 <CustomAutocomplete

diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/expected.js b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/expected.js
@@ -9,14 +9,25 @@ import {Autocomplete as MyAutocomplete} from '@mui/material';
   }}
   slotProps={{
     listbox: { height: 12 },
-    chip: { height: 10 }
+    chip: { height: 10 },
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 }
   }} />;
 
 <Autocomplete
   slotProps={{
-    popupIndicator: { width: 20 },
     listbox: { height: 12 },
-    chip: { height: 10 }
+    chip: { height: 10 },
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+
+    popupIndicator: {
+      ...{ width: 16 },
+      ...{ width: 20 }
+    }
   }}
   slots={{
     paper: CustomPaper,
@@ -32,7 +43,11 @@ import {Autocomplete as MyAutocomplete} from '@mui/material';
   }}
   slotProps={{
     listbox: { height: 12 },
-    chip: { height: 10 }
+    chip: { height: 10 },
+    clearIndicator: { width: 10 },
+    paper: { width: 12 },
+    popper: { width: 14 },
+    popupIndicator: { width: 16 }
   }} />;
 
 <CustomAutocomplete

diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/theme.actual.js b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/theme.actual.js
@@ -6,6 +6,12 @@ fn({
       PopperComponent: CustomPopper,
       ListboxComponent: CustomListbox,
       ListboxProps: { height: 12 },
+      componentsProps: {
+        clearIndicator: { width: 10 },
+        paper: { width: 12 },
+        popper: { width: 14 },
+        popupIndicator: { width: 16 },
+      }
     },
   },
 });
@@ -21,6 +27,12 @@ fn({
       slotProps: {
         popupIndicator: { width: 20 }
       },
+      componentsProps: {
+        clearIndicator: { width: 10 },
+        paper: { width: 12 },
+        popper: { width: 14 },
+        popupIndicator: { width: 16 },
+      }
     },
   },
 });
diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/theme.expected.js b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/theme.expected.js
@@ -8,6 +8,10 @@ fn({
       },
 
       slotProps: {
+        clearIndicator: { width: 10 },
+        paper: { width: 12 },
+        popper: { width: 14 },
+        popupIndicator: { width: 16 },
         listbox: { height: 12 },
         chip: { height: 10 }
       }
@@ -19,7 +23,15 @@ fn({
   MuiAutocomplete: {
     defaultProps: {
       slotProps: {
-        popupIndicator: { width: 20 },
+        clearIndicator: { width: 10 },
+        paper: { width: 12 },
+        popper: { width: 14 },
+
+        popupIndicator: {
+          ...{ width: 16 },
+          ...{ width: 20 }
+        },
+
         listbox: { height: 12 },
         chip: { height: 10 }
       },

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts
@@ -193,7 +193,7 @@ export interface AutocompleteProps<
   closeText?: string;
   /**
    * The props used for each slot inside.
-   * @default {}
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps?: {
     clearIndicator?: Partial<IconButtonProps>;

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -434,7 +434,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
     clearOnEscape = false,
     clearText = 'Clear',
     closeText = 'Close',
-    componentsProps = {},
+    componentsProps,
     defaultValue = props.multiple ? [] : null,
     disableClearable = false,
     disableCloseOnSelect = false,
@@ -867,7 +867,7 @@ Autocomplete.propTypes /* remove-proptypes */ = {
   closeText: PropTypes.string,
   /**
    * The props used for each slot inside.
-   * @default {}
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps: PropTypes.shape({
     clearIndicator: PropTypes.object,