diff --git a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md index 365e5fc42c06b7..0e2cfdc73de838 100644 --- a/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md +++ b/docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md @@ -231,6 +231,191 @@ The `autoFocus` prop in `MenuList` does not set `tabindex="0"` on the `List` com APIs that were deprecated earlier have been removed in v9. +#### Autocomplete deprecated props removed + +Use the [autocomplete-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#autocomplete-props) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/autocomplete-props +``` + +The following deprecated props have been removed from the `Autocomplete` component: + +- `ChipProps` → use `slotProps.chip` +- `componentsProps` → use `slotProps` +- `ListboxComponent` → use `slots.listbox` +- `ListboxProps` → use `slotProps.listbox` +- `PaperComponent` → use `slots.paper` +- `PopperComponent` → use `slots.popper` +- `renderTags` → use `renderValue` + +##### ChipProps prop + +The deprecated `ChipProps` prop has been removed. Use `slotProps.chip` instead. + +```diff + +``` + +##### componentsProps prop + +The deprecated `componentsProps` prop has been removed. Use `slotProps` instead. + +```diff + } +- componentsProps={{ +- clearIndicator: { size: 'large' }, +- paper: { elevation: 2 }, +- popper: { placement: 'bottom-end' }, +- popupIndicator: { size: 'large' }, +- }} ++ slotProps={{ ++ clearIndicator: { size: 'large' }, ++ paper: { elevation: 2 }, ++ popper: { placement: 'bottom-end' }, ++ popupIndicator: { size: 'large' }, ++ }} + /> +``` + +##### ListboxComponent and ListboxProps props + +The deprecated `ListboxComponent` and `ListboxProps` props have been removed. + +Use `slots.listbox` instead of `ListboxComponent`: + +```diff + } +- ListboxComponent={CustomListbox} ++ slots={{ listbox: CustomListbox }} + /> +``` + +Use `slotProps.listbox` instead of `ListboxProps`: + +```diff + } +- ListboxProps={{ style: { maxHeight: 200 } }} ++ slotProps={{ listbox: { style: { maxHeight: 200 } } }} + /> +``` + +If you were passing a `ref` via `ListboxProps`, move it to `slotProps.listbox.ref`: + +```diff + } +- ListboxProps={{ ref }} ++ slotProps={{ listbox: { ref } }} + /> +``` + +##### PaperComponent and PopperComponent props + +The deprecated `PaperComponent` and `PopperComponent` props have been removed. Use `slots.paper` and `slots.popper` instead. + +```diff + } +- PaperComponent={CustomPaper} +- PopperComponent={CustomPopper} ++ slots={{ ++ paper: CustomPaper, ++ popper: CustomPopper, ++ }} + /> +``` + +If you were providing an inline component: + +```diff + } +- PopperComponent={(props) => { +- const { disablePortal, anchorEl, open, ...other } = props; +- return ; +- }} ++ slots={{ ++ popper: (props) => { ++ const { disablePortal, anchorEl, open, ...other } = props; ++ return ; ++ }, ++ }} + /> +``` + +##### renderTags prop + +The deprecated `renderTags` prop has been removed. Use `renderValue` instead. + +```diff + +- value.map((option, index) => ( +- +- )) +- } ++ renderValue={(value, getItemProps, ownerState) => ++ value.map((option, index) => ( ++ ++ )) ++ } + /> +``` + +--- + +#### useAutocomplete deprecated fields removed + +Use the [autocomplete-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#autocomplete-props) below to migrate the code as described in the following section: + +```bash +npx @mui/codemod@latest deprecations/autocomplete-props +``` + +The following deprecated members have been removed from the `useAutocomplete` hook return value: + +- `getTagProps` → use `getItemProps` +- `focusedTag` → use `focusedItem` + +##### getTagProps + +```diff + const { +- getTagProps, ++ getItemProps, + } = useAutocomplete(props); + + // ... +- ++ +``` + +##### focusedTag + +```diff + const { +- focusedTag, ++ focusedItem, + } = useAutocomplete(props); +``` + #### TextField deprecated props removed Use the [text-field-props codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod#text-field-props) below to migrate the code as described in the following section: diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index a53dc01f2c8409..0b9b94583efd08 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -16,25 +16,12 @@ }, "default": "false" }, - "ChipProps": { - "type": { "name": "object" }, - "deprecated": true, - "deprecationInfo": "Use slotProps.chip instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clearIcon": { "type": { "name": "node" }, "default": "" }, "clearOnBlur": { "type": { "name": "bool" }, "default": "!props.freeSolo" }, "clearOnEscape": { "type": { "name": "bool" }, "default": "false" }, "clearText": { "type": { "name": "string" }, "default": "'Clear'" }, "closeText": { "type": { "name": "string" }, "default": "'Close'" }, - "componentsProps": { - "type": { - "name": "shape", - "description": "{ clearIndicator?: object, paper?: object, popper?: object, popupIndicator?: object }" - }, - "deprecated": true, - "deprecationInfo": "Use the slotProps prop instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "defaultValue": { "type": { "name": "custom", "description": "any" }, "default": "props.multiple ? [] : null" @@ -97,17 +84,6 @@ } }, "limitTags": { "type": { "name": "custom", "description": "integer" }, "default": "-1" }, - "ListboxComponent": { - "type": { "name": "elementType" }, - "default": "'ul'", - "deprecated": true, - "deprecationInfo": "Use slotProps.listbox.component instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, - "ListboxProps": { - "type": { "name": "object" }, - "deprecated": true, - "deprecationInfo": "Use slotProps.listbox instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "loading": { "type": { "name": "bool" }, "default": "false" }, "loadingText": { "type": { "name": "node" }, "default": "'Loading…'" }, "multiple": { "type": { "name": "bool" }, "default": "false" }, @@ -150,18 +126,6 @@ "open": { "type": { "name": "bool" } }, "openOnFocus": { "type": { "name": "bool" }, "default": "false" }, "openText": { "type": { "name": "string" }, "default": "'Open'" }, - "PaperComponent": { - "type": { "name": "elementType" }, - "default": "Paper", - "deprecated": true, - "deprecationInfo": "Use slots.paper instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, - "PopperComponent": { - "type": { "name": "elementType" }, - "default": "Popper", - "deprecated": true, - "deprecationInfo": "Use slots.popper instead. This prop will be removed in a future major release. See Migrating from deprecated APIs for more details." - }, "popupIcon": { "type": { "name": "node" }, "default": "" }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, "renderGroup": { @@ -178,15 +142,6 @@ "describedArgs": ["props", "option", "state", "ownerState"] } }, - "renderTags": { - "type": { "name": "func" }, - "deprecated": true, - "deprecationInfo": "Use renderValue prop instead", - "signature": { - "type": "function(value: Array, getTagProps: function, ownerState: object) => ReactNode", - "describedArgs": ["value", "getTagProps", "ownerState"] - } - }, "renderValue": { "type": { "name": "func" }, "signature": { diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index 4ced38894aaeac..938898270bdc4e 100644 --- a/docs/translations/api-docs/autocomplete/autocomplete.json +++ b/docs/translations/api-docs/autocomplete/autocomplete.json @@ -13,9 +13,6 @@ "blurOnSelect": { "description": "

Control if the input should be blurred when an option is selected:

\n
    \n
  • false the input is not blurred.
    • \n
  • true the input is always blurred.
    • \n
  • touch the input is blurred after a touch event.
    • \n
  • mouse the input is blurred after a mouse event.
    • \n
\n" }, - "ChipProps": { - "description": "Props applied to the Chip element." - }, "classes": { "description": "Override or extend the styles applied to the component." }, "clearIcon": { "description": "The icon to display in place of the default clear icon." }, "clearOnBlur": { @@ -30,7 +27,6 @@ "closeText": { "description": "Override the default text for the close popup icon button.
For localization purposes, you can use the provided translations." }, - "componentsProps": { "description": "The props used for each slot inside." }, "defaultValue": { "description": "The default value. Use when the component is not controlled." }, @@ -117,8 +113,6 @@ "limitTags": { "description": "The maximum number of tags that will be visible when not focused. Set -1 to disable the limit." }, - "ListboxComponent": { "description": "The component used to render the listbox." }, - "ListboxProps": { "description": "Props applied to the Listbox element." }, "loading": { "description": "If true, the component is in a loading state. This shows the loadingText in place of suggestions (only if there are no suggestions to show, for example options are empty)." }, @@ -186,8 +180,6 @@ "description": "Override the default text for the open popup icon button.
For localization purposes, you can use the provided translations." }, "options": { "description": "A list of options that will be shown in the Autocomplete." }, - "PaperComponent": { "description": "The component used to render the body of the popup." }, - "PopperComponent": { "description": "The component used to position the popup." }, "popupIcon": { "description": "The icon to display in place of the default popup icon." }, "readOnly": { "description": "If true, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted." @@ -211,20 +203,6 @@ } } }, - "renderTags": { - "description": "Render the selected value when doing multiple selections.", - "typeDescriptions": { - "value": { - "name": "value", - "description": "The value provided to the component." - }, - "getTagProps": { "name": "getTagProps", "description": "A tag props getter." }, - "ownerState": { - "name": "ownerState", - "description": "The state of the Autocomplete component." - } - } - }, "renderValue": { "description": "Renders the selected value(s) as rich content in the input for both single and multiple selections.", "typeDescriptions": { diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 19fa0c560112f2..cf58f50550c5e3 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -214,11 +214,6 @@ export interface AutocompleteProps< UseAutocompleteProps, StandardProps, 'defaultValue' | 'onChange' | 'children'>, AutocompleteSlotsAndSlotProps { - /** - * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element. - * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ChipProps?: ChipProps | undefined; /** * Override or extend the styles applied to the component. */ @@ -242,18 +237,6 @@ export interface AutocompleteProps< * @default 'Close' */ closeText?: string | undefined; - /** - * The props used for each slot inside. - * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - componentsProps?: - | { - clearIndicator?: Partial | undefined; - paper?: PaperProps | undefined; - popper?: Partial | undefined; - popupIndicator?: Partial | undefined; - } - | undefined; /** * If `true`, the component is disabled. * @default false @@ -282,22 +265,6 @@ export interface AutocompleteProps< * @default (more) => `+${more}` */ getLimitTagsText?: ((more: number) => React.ReactNode) | undefined; - /** - * The component used to render the listbox. - * @default 'ul' - * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ListboxComponent?: React.JSXElementConstructor> | undefined; - /** - * Props applied to the Listbox element. - * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ListboxProps?: - | (ReturnType['getListboxProps']> & { - sx?: SxProps | undefined; - ref?: React.Ref | undefined; - }) - | undefined; /** * If `true`, the component is in a loading state. * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty). @@ -336,18 +303,6 @@ export interface AutocompleteProps< * @default 'Open' */ openText?: string | undefined; - /** - * The component used to render the body of the popup. - * @default Paper - * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - PaperComponent?: React.JSXElementConstructor> | undefined; - /** - * The component used to position the popup. - * @default Popper - * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - PopperComponent?: React.JSXElementConstructor | undefined; /** * The icon to display in place of the default popup icon. * @default @@ -402,29 +357,6 @@ export interface AutocompleteProps< >, ) => React.ReactNode) | undefined; - /** - * Render the selected value when doing multiple selections. - * - * @deprecated Use `renderValue` prop instead - * - * @param {Value[]} value The `value` provided to the component. - * @param {function} getTagProps A tag props getter. - * @param {object} ownerState The state of the Autocomplete component. - * @returns {ReactNode} - */ - renderTags?: - | (( - value: Value[], - getTagProps: AutocompleteRenderGetTagProps, - ownerState: AutocompleteOwnerState< - Value, - Multiple, - DisableClearable, - FreeSolo, - ChipComponent - >, - ) => React.ReactNode) - | undefined; /** * Renders the selected value(s) as rich content in the input for both single and multiple selections. * diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index fcf42573950567..8c022d595cf346 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -419,14 +419,12 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { autoHighlight = false, autoSelect = false, blurOnSelect = false, - ChipProps: ChipPropsProp, className, clearIcon = , clearOnBlur = !props.freeSolo, clearOnEscape = false, clearText = 'Clear', closeText = 'Close', - componentsProps, defaultValue = props.multiple ? [] : null, disableClearable = false, disableCloseOnSelect = false, @@ -450,8 +448,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { includeInputInList = false, inputValue: inputValueProp, limitTags = -1, - ListboxComponent: ListboxComponentProp, - ListboxProps: ListboxPropsProp, loading = false, loadingText = 'Loading…', multiple = false, @@ -465,14 +461,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { openOnFocus = false, openText = 'Open', options, - PaperComponent: PaperComponentProp, - PopperComponent: PopperComponentProp, popupIcon = , readOnly = false, renderGroup: renderGroupProp, renderInput, renderOption: renderOptionProp, - renderTags, renderValue, selectOnFocus = !props.freeSolo, size = 'medium', @@ -532,17 +525,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { const classes = useUtilityClasses(ownerState); const externalForwardedProps = { - slots: { - paper: PaperComponentProp, - popper: PopperComponentProp, - ...slots, - }, - slotProps: { - chip: ChipPropsProp, - listbox: ListboxPropsProp, - ...componentsProps, - ...slotProps, - }, + slots, + slotProps, }; const [RootSlot, rootProps] = useSlot('root', { @@ -624,9 +608,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { if (multiple) { if (value.length > 0) { - if (renderTags) { - startAdornment = renderTags(value, getCustomizedItemProps, ownerState); - } else if (renderValue) { + if (renderValue) { startAdornment = renderValue(value, getCustomizedItemProps, ownerState); } else { startAdornment = value.map((option, index) => { @@ -767,7 +749,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { ) : null} {groupedOptions.length > 0 ? ( - + {groupedOptions.map((option, index) => { if (groupBy) { return renderGroup({ @@ -826,11 +808,6 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @default false */ blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]), - /** - * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element. - * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ChipProps: PropTypes.object, /** * Override or extend the styles applied to the component. */ @@ -871,16 +848,6 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @default 'Close' */ closeText: PropTypes.string, - /** - * The props used for each slot inside. - * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - componentsProps: PropTypes.shape({ - clearIndicator: PropTypes.object, - paper: PropTypes.object, - popper: PropTypes.object, - popupIndicator: PropTypes.object, - }), /** * The default value. Use when the component is not controlled. * @default props.multiple ? [] : null @@ -1034,17 +1001,6 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @default -1 */ limitTags: integerPropType, - /** - * The component used to render the listbox. - * @default 'ul' - * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ListboxComponent: PropTypes.elementType, - /** - * Props applied to the Listbox element. - * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - ListboxProps: PropTypes.object, /** * If `true`, the component is in a loading state. * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty). @@ -1134,18 +1090,6 @@ Autocomplete.propTypes /* remove-proptypes */ = { * A list of options that will be shown in the Autocomplete. */ options: PropTypes.array.isRequired, - /** - * The component used to render the body of the popup. - * @default Paper - * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - PaperComponent: PropTypes.elementType, - /** - * The component used to position the popup. - * @default Popper - * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. - */ - PopperComponent: PropTypes.elementType, /** * The icon to display in place of the default popup icon. * @default @@ -1187,17 +1131,6 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @returns {ReactNode} */ renderOption: PropTypes.func, - /** - * Render the selected value when doing multiple selections. - * - * @deprecated Use `renderValue` prop instead - * - * @param {Value[]} value The `value` provided to the component. - * @param {function} getTagProps A tag props getter. - * @param {object} ownerState The state of the Autocomplete component. - * @returns {ReactNode} - */ - renderTags: PropTypes.func, /** * Renders the selected value(s) as rich content in the input for both single and multiple selections. * diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx index 4f231b5d4280cc..cf9baa121a2e52 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx +++ b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx @@ -32,7 +32,7 @@ function MyAutocomplete< // Test for ChipComponent generic type options={['1', '2', '3']} - renderTags={(value, getTagProps, ownerState) => { + renderValue={(value, getItemProps, ownerState) => { expectType, typeof ownerState>( ownerState, ); @@ -63,7 +63,7 @@ function MyAutocomplete< // Tests presence of sx prop in ListboxProps null} />; @@ -149,7 +149,7 @@ function AutocompleteComponentsProps() { } - componentsProps={{ + slotProps={{ clearIndicator: { size: 'large' }, paper: { elevation: 2 }, popper: { placement: 'bottom-end' }, @@ -165,7 +165,7 @@ function CustomListboxRef() { } options={['one', 'two', 'three']} - ListboxProps={{ ref }} + slotProps={{ listbox: { ref } }} /> ); } diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index e5e896f379d881..6e74852e34c43b 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -18,8 +18,6 @@ import Autocomplete, { autocompleteClasses as classes, createFilterOptions, } from '@mui/material/Autocomplete'; -import { paperClasses } from '@mui/material/Paper'; -import { iconButtonClasses } from '@mui/material/IconButton'; import InputAdornment from '@mui/material/InputAdornment'; import Tooltip from '@mui/material/Tooltip'; import describeConformance from '../../test/describeConformance'; @@ -322,10 +320,12 @@ describe('', () => { open options={['one', 'two', 'three', 'four', 'five']} renderInput={(params) => } - ListboxProps={{ style: { padding: 0, maxHeight: '100px' } }} - PopperComponent={(props) => { - const { disablePortal, anchorEl, open, ...other } = props; - return ; + slotProps={{ listbox: { style: { padding: 0, maxHeight: '100px' } } }} + slots={{ + popper: (props) => { + const { disablePortal, anchorEl, open, ...other } = props; + return ; + }, }} />, ); @@ -3303,91 +3303,14 @@ describe('', () => { expect(handleSubmit.callCount).to.equal(1); }); - describe('prop: componentsProps', () => { - it('should apply the props on the AutocompleteClearIndicator component', () => { - render( - } - componentsProps={{ - clearIndicator: { - 'data-testid': 'clearIndicator', - size: 'large', - className: 'my-class', - }, - }} - />, - ); - - const clearIndicator = screen.getByTestId('clearIndicator'); - expect(clearIndicator).to.have.class(iconButtonClasses.sizeLarge); - expect(clearIndicator).to.have.class('my-class'); - }); - - it('should apply the props on the Paper component', () => { - render( - } - componentsProps={{ - paper: { 'data-testid': 'paperRoot', elevation: 2, className: 'my-class' }, - }} - />, - ); - - const paperRoot = screen.getByTestId('paperRoot'); - expect(paperRoot).to.have.class(paperClasses.elevation2); - expect(paperRoot).to.have.class('my-class'); - }); - - it('should apply the props on the Popper component', () => { - render( - } - componentsProps={{ - popper: { 'data-testid': 'popperRoot', placement: 'bottom-end', className: 'my-class' }, - }} - />, - ); - - const popperRoot = screen.getByTestId('popperRoot'); - expect(popperRoot).to.have.attribute('data-popper-placement', 'bottom-end'); - expect(popperRoot).to.have.class('my-class'); - }); - - it('should apply the props on the AutocompletePopupIndicator component', () => { - render( - } - componentsProps={{ - popupIndicator: { - 'data-testid': 'popupIndicator', - size: 'large', - className: 'my-class', - }, - }} - />, - ); - - const popupIndicator = screen.getByTestId('popupIndicator'); - expect(popupIndicator).to.have.class(iconButtonClasses.sizeLarge); - expect(popupIndicator).to.have.class('my-class'); - }); - + describe('prop: slotProps', () => { it('should keep AutocompletePopper mounted if keepMounted is true in popper props', () => { // Autocomplete is not opened render( } - componentsProps={{ + slotProps={{ popper: { 'data-testid': 'popperRoot', keepMounted: true }, }} />, @@ -3666,7 +3589,7 @@ describe('', () => { open options={getOptions(5)} renderInput={(params) => } - ListboxProps={{ style: { maxHeight: '100px' } }} + slotProps={{ listbox: { style: { maxHeight: '100px' } } }} />, ); const listbox = screen.getByRole('listbox'); diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts b/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts index 48eb5e2f551cb5..31020a545e6b5f 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts @@ -437,12 +437,6 @@ export interface UseAutocompleteReturnValue< * @returns props that should be spread on the popup icon */ getPopupIndicatorProps: () => React.HTMLAttributes; - /** - * @deprecated Use `getItemProps` instead - * - * A tag props getter. - */ - getTagProps: AutocompleteGetTagProps; /** * Resolver for the listbox component's props. * @returns props that should be spread on the listbox component @@ -497,12 +491,6 @@ export interface UseAutocompleteReturnValue< * Index of the focused item for the component. */ focusedItem: number; - /** - * @deprecated Use `focusedItem` instead - * - * Index of the focused tag for the component. - */ - focusedTag: number; /** * The options to render. * - If `groupBy` is provided, the options are grouped and represented as `AutocompleteGroupedOption[]`. diff --git a/packages/mui-material/src/useAutocomplete/useAutocomplete.js b/packages/mui-material/src/useAutocomplete/useAutocomplete.js index 4f528b2ec8e1b8..1ba6b6bc318dbc 100644 --- a/packages/mui-material/src/useAutocomplete/useAutocomplete.js +++ b/packages/mui-material/src/useAutocomplete/useAutocomplete.js @@ -269,9 +269,7 @@ function useAutocomplete(props) { if (itemToFocus === -1) { inputRef.current.focus(); } else { - // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is gone. - const indexType = renderValue ? 'data-item-index' : 'data-tag-index'; - anchorEl.querySelector(`[${indexType}="${itemToFocus}"]`).focus(); + anchorEl.querySelector(`[data-item-index="${itemToFocus}"]`).focus(); } }); @@ -743,9 +741,7 @@ function useAutocomplete(props) { return -1; } - // Using `data-tag-index` for deprecated `renderTags`. Remove when `renderTags` is removed. - const indexType = renderValue ? 'data-item-index' : 'data-tag-index'; - const option = anchorEl.querySelector(`[${indexType}="${nextFocus}"]`); + const option = anchorEl.querySelector(`[data-item-index="${nextFocus}"]`); // Same logic as MenuList.js if ( @@ -1244,7 +1240,7 @@ function useAutocomplete(props) { }), getItemProps: ({ index = 0 } = {}) => ({ ...(multiple && { key: index }), - ...(renderValue ? { 'data-item-index': index } : { 'data-tag-index': index }), + 'data-item-index': index, tabIndex: -1, ...(!readOnly && { onDelete: multiple ? handleItemDelete(index) : handleSingleItemDelete }), }), @@ -1253,13 +1249,6 @@ function useAutocomplete(props) { type: 'button', onClick: handlePopupIndicator, }), - // deprecated - getTagProps: ({ index }) => ({ - key: index, - 'data-tag-index': index, - tabIndex: -1, - ...(!readOnly && { onDelete: handleItemDelete(index) }), - }), getListboxProps: () => ({ role: 'listbox', id: `${id}-listbox`, @@ -1300,8 +1289,6 @@ function useAutocomplete(props) { anchorEl, setAnchorEl, focusedItem, - // deprecated - focusedTag: focusedItem, groupedOptions, }; } diff --git a/test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx b/test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx index 49cbe3f63cc603..776ed8abb820bf 100644 --- a/test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx +++ b/test/e2e/fixtures/Autocomplete/HoverMaterialAutocomplete.tsx @@ -8,7 +8,7 @@ function HoverMaterialAutocomplete() { open options={['one', 'two', 'three', 'four', 'five']} sx={{ width: 300 }} - ListboxProps={{ sx: { height: '100px' } }} + slotProps={{ listbox: { sx: { height: '100px' } } }} renderInput={(params) => } /> );