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,