diff --git a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md b/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
index 0e34e999e9c5ee..1a3d0834fdfa11 100644
--- a/docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md
+++ b/docs/data/material/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
+
+```
+
## 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
index fcb754234fd1ba..a351cf39d96bd8 100644
--- 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 slotProps
prop instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details."
},
"defaultValue": {
"type": { "name": "custom", "description": "any" },
diff --git a/packages/mui-codemod/README.md b/packages/mui-codemod/README.md
index 20cda885755eed..954cb42810be90 100644
--- a/packages/mui-codemod/README.md
+++ b/packages/mui-codemod/README.md
@@ -268,6 +268,12 @@ npx @mui/codemod@next deprecations/alert-props
- 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
+ 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
- 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
+ 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
index 3b5204f0bd642d..9e9099616050d1 100644
--- 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
index 8003251b598cf3..e8cbd448f45d9f 100644
--- 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 },
+ }}
/>;
;
;
;
;
;
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index 701c779625cb52..b82b5b202155f8 100644
--- 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,