From d22419d885dfa591753f629839db74b6ae6d8121 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Fri, 12 Apr 2024 22:12:18 +0200 Subject: [PATCH 01/20] deprecate *Component and *Props with codemod --- .../migrating-from-deprecated-apis.md | 8 + docs/pages/material-ui/api/autocomplete.json | 80 ++++++--- .../api-docs/autocomplete/autocomplete.json | 18 +- packages/mui-codemod/README.md | 46 +++++ .../src/deprecations/all/deprecations-all.js | 2 + .../autocomplete-props/autocomplete-props.js | 49 ++++++ .../autocomplete-props.test.js | 53 ++++++ .../deprecations/autocomplete-props/index.js | 1 + .../autocomplete-props/test-cases/actual.js | 37 ++++ .../autocomplete-props/test-cases/expected.js | 44 +++++ .../test-cases/theme.actual.js | 26 +++ .../test-cases/theme.expected.js | 34 ++++ .../src/Autocomplete/Autocomplete.d.ts | 87 +++++++-- .../src/Autocomplete/Autocomplete.js | 165 +++++++++++++----- 14 files changed, 560 insertions(+), 90 deletions(-) create mode 100644 packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js create mode 100644 packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.test.js create mode 100644 packages/mui-codemod/src/deprecations/autocomplete-props/index.js create mode 100644 packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/actual.js create mode 100644 packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/expected.js create mode 100644 packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/theme.actual.js create mode 100644 packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/theme.expected.js 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 122b9fe800b153..efb481017ff3fa 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 @@ -227,6 +227,14 @@ 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@latest deprecations/autocomplete-props +``` + ## 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 e0e4d60b0a7e5a..1a8b5e5bf9fca1 100644 --- 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 slotProps.chip instead. This prop will be removed in v7. How to migrate." + }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clearIcon": { "type": { "name": "node" }, "default": "" }, "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 slots.listbox instead. This prop will be removed in v7. How to migrate." + }, + "ListboxProps": { + "type": { "name": "object" }, + "deprecated": true, + "deprecationInfo": "Use slotProps.listbox instead. This prop will be removed in v7. How to migrate." + }, "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 slots.paper instead. This prop will be removed in v7. How to migrate." + }, + "PopperComponent": { + "type": { "name": "elementType" }, + "default": "Popper", + "deprecated": true, + "deprecationInfo": "Use slots.listbox instead. This prop will be removed in v7. How to migrate." + }, "popupIcon": { "type": { "name": "node" }, "default": "" }, "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
| { avatar?: element, children?: any, classes?: any
| object, className?: any
| string, clickable?: any
| bool, color?: 'default'
| 'error'
| 'info'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| any, component?: elementType, deleteIcon?: element, disabled?: any
| bool, icon?: element, label?: any
| node, onDelete?: any
| func, size?: 'medium'
| 'small'
| any, skipFocusWhenDisabled?: any
| bool, style?: any
| object, sx?: any, tabIndex?: any
| number, variant?: 'filled'
| 'outlined'
| any }
| { component?: elementType, key?: any, sx?: Array<func
| object
| bool>
| func
| object }, clearIndicator?: func
| object, listbox?: func
| object, paper?: func
| object, popper?: func
| object, popupIndicator?: func
| 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", diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index b257a40f8d3e01..9eaf631c6855cc 100644 --- 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 size=\"small\"" } + }, + "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 index ac15226a678a07..675e61a723abea 100644 --- a/packages/mui-codemod/README.md +++ b/packages/mui-codemod/README.md @@ -259,6 +259,52 @@ npx @mui/codemod@next deprecations/alert-classes npx @mui/codemod@next deprecations/alert-props ``` +#### `autocomplete-props` + +```diff + +``` + +```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 +``` + #### `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 index 3a6ca47eeb1072..599b7f22e85433 100644 --- 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 transformAvatarProps from '../avatar-props'; import transformDividerProps from '../divider-props'; import transformAccordionClasses from '../accordion-summary-classes'; @@ -18,6 +19,7 @@ import transformStepConnectorClasses from '../step-connector-classes'; */ export default function deprecationsAll(file, api, options) { file.source = transformAccordionProps(file, api, options); + file.source = transformAutocompleteProps(file, api, options); file.source = transformAvatarProps(file, api, options); file.source = transformDividerProps(file, api, options); file.source = transformAccordionClasses(file, api, options); diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js b/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js new file mode 100644 index 00000000000000..3b5204f0bd642d --- /dev/null +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.js @@ -0,0 +1,49 @@ +import movePropIntoSlots from '../utils/movePropIntoSlots'; +import movePropIntoSlotProps from '../utils/movePropIntoSlotProps'; + +/** + * @param {import('jscodeshift').FileInfo} file + * @param {import('jscodeshift').API} api + */ +export default function transformer(file, api, options) { + const j = api.jscodeshift; + const root = j(file.source); + const printOptions = options.printOptions; + + movePropIntoSlots(j, { + root, + componentName: 'Autocomplete', + propName: 'PaperComponent', + slotName: 'paper', + }); + + movePropIntoSlots(j, { + root, + componentName: 'Autocomplete', + propName: 'PopperComponent', + slotName: 'popper', + }); + + movePropIntoSlots(j, { + root, + componentName: 'Autocomplete', + propName: 'ListboxComponent', + slotName: 'listbox', + }); + + movePropIntoSlotProps(j, { + root, + componentName: 'Autocomplete', + propName: 'ListboxProps', + slotName: 'listbox', + }); + + movePropIntoSlotProps(j, { + root, + componentName: 'Autocomplete', + propName: 'ChipProps', + slotName: 'chip', + }); + + return root.toSource(printOptions); +} diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.test.js b/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.test.js new file mode 100644 index 00000000000000..e5909cad32dab3 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/autocomplete-props.test.js @@ -0,0 +1,53 @@ +import path from 'path'; +import { expect } from 'chai'; +import { jscodeshift } from '../../../testUtils'; +import transform from './autocomplete-props'; +import readFile from '../../util/readFile'; + +function read(fileName) { + return readFile(path.join(__dirname, fileName)); +} + +describe('@mui/codemod', () => { + describe('deprecations', () => { + describe('autocomplete-props', () => { + it('transforms props as needed', () => { + const actual = transform({ source: read('./test-cases/actual.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform({ source: read('./test-cases/expected.js') }, { jscodeshift }, {}); + + const expected = read('./test-cases/expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + + describe('[theme] autocomplete-props', () => { + it('transforms props as needed', () => { + const actual = transform( + { source: read('./test-cases/theme.actual.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + + it('should be idempotent', () => { + const actual = transform( + { source: read('./test-cases/theme.expected.js') }, + { jscodeshift }, + {}, + ); + + const expected = read('./test-cases/theme.expected.js'); + expect(actual).to.equal(expected, 'The transformed version should be correct'); + }); + }); + }); +}); diff --git a/packages/mui-codemod/src/deprecations/autocomplete-props/index.js b/packages/mui-codemod/src/deprecations/autocomplete-props/index.js new file mode 100644 index 00000000000000..b2b9a74aa9c035 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/index.js @@ -0,0 +1 @@ +export { default } from './autocomplete-props'; 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 new file mode 100644 index 00000000000000..8003251b598cf3 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/actual.js @@ -0,0 +1,37 @@ +import Autocomplete from '@mui/material/Autocomplete'; +import {Autocomplete as MyAutocomplete} from '@mui/material'; + +; + +; + +; + + 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 new file mode 100644 index 00000000000000..f816b74b646c81 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/expected.js @@ -0,0 +1,44 @@ +import Autocomplete from '@mui/material/Autocomplete'; +import {Autocomplete as MyAutocomplete} from '@mui/material'; + +; + +; + +; + + 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 new file mode 100644 index 00000000000000..0bc3ca5dc4d4bf --- /dev/null +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/theme.actual.js @@ -0,0 +1,26 @@ +fn({ + MuiAutocomplete: { + defaultProps: { + ChipProps: { height: 10 }, + PaperComponent: CustomPaper, + PopperComponent: CustomPopper, + ListboxComponent: CustomListbox, + ListboxProps: { height: 12 }, + }, + }, +}); + +fn({ + MuiAutocomplete: { + defaultProps: { + ChipProps: { height: 10 }, + PaperComponent: CustomPaper, + PopperComponent: CustomPopper, + ListboxComponent: CustomListbox, + ListboxProps: { height: 12 }, + slotProps: { + popupIndicator: { width: 20 } + }, + }, + }, +}); 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 new file mode 100644 index 00000000000000..bc7b33f0055781 --- /dev/null +++ b/packages/mui-codemod/src/deprecations/autocomplete-props/test-cases/theme.expected.js @@ -0,0 +1,34 @@ +fn({ + MuiAutocomplete: { + defaultProps: { + slots: { + paper: CustomPaper, + popper: CustomPopper, + listbox: CustomListbox + }, + + slotProps: { + listbox: { height: 12 }, + chip: { height: 10 } + } + }, + }, +}); + +fn({ + MuiAutocomplete: { + defaultProps: { + slotProps: { + popupIndicator: { width: 20 }, + listbox: { height: 12 }, + chip: { height: 10 } + }, + + slots: { + paper: CustomPaper, + popper: CustomPopper, + listbox: CustomListbox + } + }, + }, +}); diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index bc93447fab6e13..9abb26e4a94178 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -17,6 +17,7 @@ import { ChipProps, ChipTypeMap } from '@mui/material/Chip'; import { PaperProps } from '@mui/material/Paper'; import { PopperProps } from '@mui/material/Popper'; import { AutocompleteClasses } from './autocompleteClasses'; +import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export { AutocompleteChangeDetails, @@ -84,6 +85,74 @@ export interface AutocompleteRenderInputParams { export interface AutocompletePropsSizeOverrides {} +export interface AutocompleteSlots { + /** + * The component used to render the listbox. + * @default 'ul' + */ + listbox: React.JSXElementConstructor>; + /** + * The component used to render the body of the popup. + * @default Paper + */ + paper: React.JSXElementConstructor>; + /** + * The component used to position the popup. + * @default Popper + */ + popper: React.JSXElementConstructor; +} + +export type AutocompleteSlotsAndSlotProps< + Value, + Multiple extends boolean | undefined, + DisableClearable extends boolean | undefined, + FreeSolo extends boolean | undefined, + ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'], +> = CreateSlotsAndSlotProps< + AutocompleteSlots, + { + chip: SlotProps< + React.JSXElementConstructor>, + {}, + AutocompleteOwnerState + >; + clearIndicator: SlotProps< + React.JSXElementConstructor>, + {}, + AutocompleteOwnerState + >; + /** + * Props applied to the Listbox element. + */ + listbox: SlotProps< + React.JSXElementConstructor< + ReturnType['getListboxProps']> & { + sx?: SxProps; + ref?: React.Ref; + } + >, + {}, + AutocompleteOwnerState + >; + paper: SlotProps< + React.JSXElementConstructor, + {}, + AutocompleteOwnerState + >; + popper: SlotProps< + React.JSXElementConstructor>, + {}, + AutocompleteOwnerState + >; + popupIndicator: SlotProps< + React.JSXElementConstructor>, + {}, + AutocompleteOwnerState + >; + } +>; + export interface AutocompleteProps< Value, Multiple extends boolean | undefined, @@ -91,9 +160,11 @@ export interface AutocompleteProps< FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'], > extends UseAutocompleteProps, - StandardProps, 'defaultValue' | 'onChange' | 'children'> { + StandardProps, 'defaultValue' | 'onChange' | 'children'>, + AutocompleteSlotsAndSlotProps { /** * Props applied to the [`Chip`](/material-ui/api/chip/) element. + * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ ChipProps?: ChipProps; /** @@ -160,10 +231,12 @@ export interface AutocompleteProps< /** * The component used to render the listbox. * @default 'ul' + * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ ListboxComponent?: React.JSXElementConstructor>; /** * Props applied to the Listbox element. + * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ ListboxProps?: ReturnType['getListboxProps']> & { sx?: SxProps; @@ -208,11 +281,13 @@ export interface AutocompleteProps< /** * The component used to render the body of the popup. * @default Paper + * @deprecated Use `slots.paper` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ PaperComponent?: React.JSXElementConstructor>; /** * The component used to position the popup. * @default Popper + * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ PopperComponent?: React.JSXElementConstructor; /** @@ -272,16 +347,6 @@ export interface AutocompleteProps< * @default 'medium' */ size?: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>; - /** - * The props used for each slot inside. - * @default {} - */ - slotProps?: { - clearIndicator?: Partial; - paper?: PaperProps; - popper?: Partial; - popupIndicator?: Partial; - }; /** * The system prop that allows defining system overrides as well as additional CSS styles. */ diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 2aea5bf347fb6b..306f90e65683ee 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -21,7 +21,7 @@ import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown'; import { styled, createUseThemeProps } from '../zero-styled'; import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses'; import capitalize from '../utils/capitalize'; -import useForkRef from '../utils/useForkRef'; +import useSlot from '../utils/useSlot'; const useThemeProps = createUseThemeProps('MuiAutocomplete'); @@ -412,7 +412,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { autoHighlight = false, autoSelect = false, blurOnSelect = false, - ChipProps, + ChipProps: ChipPropsProp, className, clearIcon = , clearOnBlur = !props.freeSolo, @@ -443,8 +443,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { includeInputInList = false, inputValue: inputValueProp, limitTags = -1, - ListboxComponent = 'ul', - ListboxProps, + ListboxComponent: ListboxComponentProp, + ListboxProps: ListboxPropsProp, loading = false, loadingText = 'Loading…', multiple = false, @@ -458,8 +458,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { openOnFocus = false, openText = 'Open', options, - PaperComponent = Paper, - PopperComponent = Popper, + PaperComponent: PaperComponentProp, + PopperComponent: PopperComponentProp, popupIcon = , readOnly = false, renderGroup: renderGroupProp, @@ -468,6 +468,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { renderTags, selectOnFocus = !props.freeSolo, size = 'medium', + slots = {}, slotProps = {}, value: valueProp, ...other @@ -500,11 +501,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false; const { onMouseDown: handleInputMouseDown } = getInputProps(); - const { ref: externalListboxRef } = ListboxProps ?? {}; const { ref: listboxRef, ...otherListboxProps } = getListboxProps(); - const combinedListboxRef = useForkRef(listboxRef, externalListboxRef); - const defaultGetOptionLabel = (option) => option.label ?? option; const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel; @@ -525,6 +523,51 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { const classes = useUtilityClasses(ownerState); + const externalForwardedProps = { + slots: { + listbox: ListboxComponentProp, + paper: PaperComponentProp, + popper: PopperComponentProp, + ...slots, + }, + slotProps: { + chip: ChipPropsProp, + listbox: ListboxPropsProp, + ...componentsProps, + ...slotProps, + }, + }; + + const [ListboxSlot, listboxProps] = useSlot('listbox', { + elementType: 'ul', + externalForwardedProps, + ownerState, + className: classes.listbox, + additionalProps: otherListboxProps, + ref: listboxRef, + }); + + const [PaperSlot, paperProps] = useSlot('paper', { + elementType: Paper, + externalForwardedProps, + ownerState, + className: classes.paper, + }); + + const [PopperSlot, popperProps] = useSlot('popper', { + elementType: Popper, + externalForwardedProps, + ownerState, + className: classes.popper, + additionalProps: { + disablePortal, + style: { width: anchorEl ? anchorEl.clientWidth : null }, + role: 'presentation', + anchorEl, + open: popupOpen, + }, + }); + let startAdornment; if (multiple && value.length > 0) { @@ -542,7 +585,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { label={getOptionLabel(option)} size={size} {...getCustomizedTagProps({ index })} - {...ChipProps} + {...externalForwardedProps.slotProps.chip} /> )); } @@ -601,29 +644,12 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { ); }; - const clearIndicatorSlotProps = slotProps.clearIndicator ?? componentsProps.clearIndicator; - const paperSlotProps = slotProps.paper ?? componentsProps.paper; - const popperSlotProps = slotProps.popper ?? componentsProps.popper; - const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator; + const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator; + const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator; const renderAutocompletePopperChildren = (children) => ( - - + + {children} @@ -632,14 +658,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { let autocompletePopper = null; if (groupedOptions.length > 0) { autocompletePopper = renderAutocompletePopperChildren( - + {groupedOptions.map((option, index) => { if (groupBy) { return renderGroup({ @@ -784,6 +803,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]), /** * Props applied to the [`Chip`](/material-ui/api/chip/) element. + * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ ChipProps: PropTypes.object, /** @@ -991,10 +1011,12 @@ Autocomplete.propTypes /* remove-proptypes */ = { /** * The component used to render the listbox. * @default 'ul' + * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ ListboxComponent: PropTypes.elementType, /** * Props applied to the Listbox element. + * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ ListboxProps: PropTypes.object, /** @@ -1089,11 +1111,13 @@ Autocomplete.propTypes /* remove-proptypes */ = { /** * The component used to render the body of the popup. * @default Paper + * @deprecated Use `slots.paper` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ PaperComponent: PropTypes.elementType, /** * The component used to position the popup. * @default Popper + * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ PopperComponent: PropTypes.elementType, /** @@ -1158,10 +1182,65 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @default {} */ slotProps: PropTypes.shape({ - clearIndicator: PropTypes.object, - paper: PropTypes.object, - popper: PropTypes.object, - popupIndicator: PropTypes.object, + chip: PropTypes.oneOfType([ + PropTypes.func, + PropTypes.shape({ + avatar: PropTypes.element, + children: PropTypes.any, + classes: PropTypes.oneOfType([PropTypes.any, PropTypes.object]), + className: PropTypes.oneOfType([PropTypes.any, PropTypes.string]), + clickable: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]), + color: PropTypes.oneOfType([ + PropTypes.oneOf([ + 'default', + 'error', + 'info', + 'primary', + 'secondary', + 'success', + 'warning', + ]), + PropTypes.any, + ]), + component: PropTypes.elementType, + deleteIcon: PropTypes.element, + disabled: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]), + icon: PropTypes.element, + label: PropTypes.oneOfType([PropTypes.any, PropTypes.node]), + onDelete: PropTypes.oneOfType([PropTypes.any, PropTypes.func]), + size: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.any]), + skipFocusWhenDisabled: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]), + style: PropTypes.oneOfType([PropTypes.any, PropTypes.object]), + sx: PropTypes.any, + tabIndex: PropTypes.oneOfType([PropTypes.any, PropTypes.number]), + variant: PropTypes.oneOfType([PropTypes.oneOf(['filled', 'outlined']), PropTypes.any]), + }), + PropTypes.shape({ + component: PropTypes.elementType, + key: PropTypes.any, + sx: PropTypes.oneOfType([ + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]), + ), + PropTypes.func, + PropTypes.object, + ]), + }), + ]), + clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + }), + /** + * The components used for each slot inside. + * @default {} + */ + slots: PropTypes.shape({ + listbox: PropTypes.elementType, + paper: PropTypes.elementType, + popper: PropTypes.elementType, }), /** * The system prop that allows defining system overrides as well as additional CSS styles. From 3014b3a2913ca41ac63b53ff1ea510a9ca84cfc3 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert <77863078+lhilgert9@users.noreply.github.com> Date: Thu, 25 Apr 2024 14:50:06 +0200 Subject: [PATCH 02/20] Update packages/mui-material/src/Autocomplete/Autocomplete.d.ts Co-authored-by: Diego Andai Signed-off-by: Lucas Hilgert <77863078+lhilgert9@users.noreply.github.com> --- packages/mui-material/src/Autocomplete/Autocomplete.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 9abb26e4a94178..355c0f9068368c 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -287,7 +287,7 @@ export interface AutocompleteProps< /** * The component used to position the popup. * @default Popper - * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slots.popper` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ PopperComponent?: React.JSXElementConstructor; /** From 9f03ceae30d911d35a1a2edda51c07ea397721c4 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Thu, 25 Apr 2024 16:01:44 +0200 Subject: [PATCH 03/20] use same props as in component props --- .../src/Autocomplete/Autocomplete.d.ts | 52 ++++--------------- 1 file changed, 11 insertions(+), 41 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 355c0f9068368c..4ff50e8056d25a 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -17,7 +17,7 @@ import { ChipProps, ChipTypeMap } from '@mui/material/Chip'; import { PaperProps } from '@mui/material/Paper'; import { PopperProps } from '@mui/material/Popper'; import { AutocompleteClasses } from './autocompleteClasses'; -import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; +import { CreateSlotsAndSlotProps } from '../utils/types'; export { AutocompleteChangeDetails, @@ -104,52 +104,22 @@ export interface AutocompleteSlots { } export type AutocompleteSlotsAndSlotProps< - Value, - Multiple extends boolean | undefined, - DisableClearable extends boolean | undefined, - FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'], > = CreateSlotsAndSlotProps< AutocompleteSlots, { - chip: SlotProps< - React.JSXElementConstructor>, - {}, - AutocompleteOwnerState - >; - clearIndicator: SlotProps< - React.JSXElementConstructor>, - {}, - AutocompleteOwnerState - >; + chip: ChipProps; + clearIndicator: Partial; /** * Props applied to the Listbox element. */ - listbox: SlotProps< - React.JSXElementConstructor< - ReturnType['getListboxProps']> & { - sx?: SxProps; - ref?: React.Ref; - } - >, - {}, - AutocompleteOwnerState - >; - paper: SlotProps< - React.JSXElementConstructor, - {}, - AutocompleteOwnerState - >; - popper: SlotProps< - React.JSXElementConstructor>, - {}, - AutocompleteOwnerState - >; - popupIndicator: SlotProps< - React.JSXElementConstructor>, - {}, - AutocompleteOwnerState - >; + listbox: ReturnType['getListboxProps']> & { + sx?: SxProps; + ref?: React.Ref; + }; + paper: PaperProps; + popper: Partial; + popupIndicator: Partial; } >; @@ -161,7 +131,7 @@ export interface AutocompleteProps< ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'], > extends UseAutocompleteProps, StandardProps, 'defaultValue' | 'onChange' | 'children'>, - AutocompleteSlotsAndSlotProps { + AutocompleteSlotsAndSlotProps { /** * Props applied to the [`Chip`](/material-ui/api/chip/) element. * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). From ee9d5575ae7f2c6de0eabb7b6d1ba0a7560ea46b Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Thu, 25 Apr 2024 16:04:57 +0200 Subject: [PATCH 04/20] Fix paper slots and slotProps types --- packages/mui-material/src/Autocomplete/Autocomplete.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 4ff50e8056d25a..072cb49fbbfca9 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -95,7 +95,7 @@ export interface AutocompleteSlots { * The component used to render the body of the popup. * @default Paper */ - paper: React.JSXElementConstructor>; + paper: React.JSXElementConstructor; /** * The component used to position the popup. * @default Popper @@ -117,7 +117,7 @@ export type AutocompleteSlotsAndSlotProps< sx?: SxProps; ref?: React.Ref; }; - paper: PaperProps; + paper: Partial; popper: Partial; popupIndicator: Partial; } From 7b9e3b6caa8b006a906c5d5f8da7b370b3dd3ce5 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Fri, 26 Apr 2024 20:07:23 +0200 Subject: [PATCH 05/20] fix proptypes --- .../src/Autocomplete/Autocomplete.d.ts | 2 +- .../src/Autocomplete/Autocomplete.js | 77 +++++++------------ 2 files changed, 27 insertions(+), 52 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 072cb49fbbfca9..85604320064bbc 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -108,7 +108,7 @@ export type AutocompleteSlotsAndSlotProps< > = CreateSlotsAndSlotProps< AutocompleteSlots, { - chip: ChipProps; + chip: Partial>; clearIndicator: Partial; /** * Props applied to the Listbox element. diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 306f90e65683ee..10c3019e509167 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -1117,7 +1117,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { /** * The component used to position the popup. * @default Popper - * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slots.popper` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). */ PopperComponent: PropTypes.elementType, /** @@ -1182,56 +1182,31 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @default {} */ slotProps: PropTypes.shape({ - chip: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({ - avatar: PropTypes.element, - children: PropTypes.any, - classes: PropTypes.oneOfType([PropTypes.any, PropTypes.object]), - className: PropTypes.oneOfType([PropTypes.any, PropTypes.string]), - clickable: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]), - color: PropTypes.oneOfType([ - PropTypes.oneOf([ - 'default', - 'error', - 'info', - 'primary', - 'secondary', - 'success', - 'warning', - ]), - PropTypes.any, - ]), - component: PropTypes.elementType, - deleteIcon: PropTypes.element, - disabled: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]), - icon: PropTypes.element, - label: PropTypes.oneOfType([PropTypes.any, PropTypes.node]), - onDelete: PropTypes.oneOfType([PropTypes.any, PropTypes.func]), - size: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.any]), - skipFocusWhenDisabled: PropTypes.oneOfType([PropTypes.any, PropTypes.bool]), - style: PropTypes.oneOfType([PropTypes.any, PropTypes.object]), - sx: PropTypes.any, - tabIndex: PropTypes.oneOfType([PropTypes.any, PropTypes.number]), - variant: PropTypes.oneOfType([PropTypes.oneOf(['filled', 'outlined']), PropTypes.any]), - }), - PropTypes.shape({ - component: PropTypes.elementType, - key: PropTypes.any, - sx: PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]), - ), - PropTypes.func, - PropTypes.object, - ]), - }), - ]), - clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + chip: PropTypes.shape({ + avatar: PropTypes.element, + children: PropTypes.any, + classes: PropTypes.any, + className: PropTypes.any, + clickable: PropTypes.any, + color: PropTypes.any, + component: PropTypes.elementType, + deleteIcon: PropTypes.element, + disabled: PropTypes.any, + icon: PropTypes.element, + label: PropTypes.any, + onDelete: PropTypes.any, + size: PropTypes.any, + skipFocusWhenDisabled: PropTypes.any, + style: PropTypes.any, + sx: PropTypes.any, + tabIndex: PropTypes.any, + variant: PropTypes.any, + }), + clearIndicator: PropTypes.object, + listbox: PropTypes.object, + paper: PropTypes.object, + popper: PropTypes.object, + popupIndicator: PropTypes.object, }), /** * The components used for each slot inside. From 8bc86ad4343137decd6314bffd925c96059ea7f8 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Fri, 26 Apr 2024 21:02:20 +0200 Subject: [PATCH 06/20] run docs:api --- docs/pages/material-ui/api/autocomplete.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index 1a8b5e5bf9fca1..826993e5ae3413 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -159,7 +159,7 @@ "type": { "name": "elementType" }, "default": "Popper", "deprecated": true, - "deprecationInfo": "Use slots.listbox instead. This prop will be removed in v7. How to migrate." + "deprecationInfo": "Use slots.popper instead. This prop will be removed in v7. How to migrate." }, "popupIcon": { "type": { "name": "node" }, "default": "" }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, @@ -195,7 +195,7 @@ "slotProps": { "type": { "name": "shape", - "description": "{ chip?: func
| { avatar?: element, children?: any, classes?: any
| object, className?: any
| string, clickable?: any
| bool, color?: 'default'
| 'error'
| 'info'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| any, component?: elementType, deleteIcon?: element, disabled?: any
| bool, icon?: element, label?: any
| node, onDelete?: any
| func, size?: 'medium'
| 'small'
| any, skipFocusWhenDisabled?: any
| bool, style?: any
| object, sx?: any, tabIndex?: any
| number, variant?: 'filled'
| 'outlined'
| any }
| { component?: elementType, key?: any, sx?: Array<func
| object
| bool>
| func
| object }, clearIndicator?: func
| object, listbox?: func
| object, paper?: func
| object, popper?: func
| object, popupIndicator?: func
| object }" + "description": "{ chip?: { avatar?: element, children?: any, classes?: any, className?: any, clickable?: any, color?: any, component?: elementType, deleteIcon?: element, disabled?: any, icon?: element, label?: any, onDelete?: any, size?: any, skipFocusWhenDisabled?: any, style?: any, sx?: any, tabIndex?: any, variant?: any }, clearIndicator?: object, listbox?: object, paper?: object, popper?: object, popupIndicator?: object }" }, "default": "{}" }, From 834d1e17d173cdcd55e1c4a88127bc3e0b533645 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Fri, 26 Apr 2024 21:13:11 +0200 Subject: [PATCH 07/20] fix slots props to be optional --- packages/mui-material/src/Autocomplete/Autocomplete.d.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 85604320064bbc..a914e8d14203d1 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -90,17 +90,17 @@ export interface AutocompleteSlots { * The component used to render the listbox. * @default 'ul' */ - listbox: React.JSXElementConstructor>; + listbox?: React.JSXElementConstructor>; /** * The component used to render the body of the popup. * @default Paper */ - paper: React.JSXElementConstructor; + paper?: React.JSXElementConstructor; /** * The component used to position the popup. * @default Popper */ - popper: React.JSXElementConstructor; + popper?: React.JSXElementConstructor; } export type AutocompleteSlotsAndSlotProps< From 44f5c0b8fdd2e0d1a5a0bfc1cb13e9e354040f29 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Tue, 30 Apr 2024 21:44:07 +0200 Subject: [PATCH 08/20] change demos to use slots and slotProps --- .../components/autocomplete/GitHubLabel.js | 4 ++- .../components/autocomplete/GitHubLabel.tsx | 4 ++- .../components/autocomplete/Virtualize.js | 6 +++-- .../components/autocomplete/Virtualize.tsx | 6 +++-- .../autocomplete/Virtualize.tsx.preview | 27 ++++++++++--------- 5 files changed, 28 insertions(+), 19 deletions(-) diff --git a/docs/data/material/components/autocomplete/GitHubLabel.js b/docs/data/material/components/autocomplete/GitHubLabel.js index 22396f95ee43b1..404687f7112a04 100644 --- 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, + }} /> diff --git a/docs/data/material/components/autocomplete/GitHubLabel.tsx b/docs/data/material/components/autocomplete/GitHubLabel.tsx index 1b93212d7a0cb8..ec4c222d4abc71 100644 --- 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, + }} /> diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js index 7b62b6c4f7b938..e5c812f9e366cc 100644 --- a/docs/data/material/components/autocomplete/Virtualize.js +++ b/docs/data/material/components/autocomplete/Virtualize.js @@ -141,13 +141,15 @@ export default function Virtualize() { id="virtualize-demo" sx={{ width: 300 }} disableListWrap - PopperComponent={StyledPopper} - ListboxComponent={ListboxComponent} options={OPTIONS} groupBy={(option) => option[0].toUpperCase()} renderInput={(params) => } 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 index cd6eee98854ff5..3e61456f3f6339 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx +++ b/docs/data/material/components/autocomplete/Virtualize.tsx @@ -141,8 +141,6 @@ export default function Virtualize() { id="virtualize-demo" sx={{ width: 300 }} disableListWrap - PopperComponent={StyledPopper} - ListboxComponent={ListboxComponent} options={OPTIONS} groupBy={(option) => option[0].toUpperCase()} renderInput={(params) => } @@ -150,6 +148,10 @@ export default function Virtualize() { [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 index 7aa80fd1fd266e..8ef2e99db69c2b 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx.preview +++ b/docs/data/material/components/autocomplete/Virtualize.tsx.preview @@ -1,14 +1,15 @@ option[0].toUpperCase()} - renderInput={(params) => } - renderOption={(props, option, state) => - [props, option, state.index] as React.ReactNode - } - renderGroup={(params) => params as any} -/> \ No newline at end of file +id="virtualize-demo" +sx={{ width: 300 }} +disableListWrap +options={OPTIONS} +groupBy={(option) => option[0].toUpperCase()} +renderInput={(params) => } +renderOption={(props, option, state) => + [props, option, state.index] as React.ReactNode +} +renderGroup={(params) => params as any} +slots={{ + popper: StyledPopper, + listbox: ListboxComponent +}} /> \ No newline at end of file From dfdbf4d78c15da11640fff5d962bece23da18405 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Tue, 30 Apr 2024 23:45:06 +0200 Subject: [PATCH 09/20] pnpm docs:typescript:formatted --- .../autocomplete/Virtualize.tsx.preview | 29 ++++++++++--------- 1 file changed, 15 insertions(+), 14 deletions(-) diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx.preview b/docs/data/material/components/autocomplete/Virtualize.tsx.preview index 8ef2e99db69c2b..d243091ed77894 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx.preview +++ b/docs/data/material/components/autocomplete/Virtualize.tsx.preview @@ -1,15 +1,16 @@ option[0].toUpperCase()} -renderInput={(params) => } -renderOption={(props, option, state) => - [props, option, state.index] as React.ReactNode -} -renderGroup={(params) => params as any} -slots={{ - popper: StyledPopper, - listbox: ListboxComponent -}} /> \ No newline at end of file + id="virtualize-demo" + sx={{ width: 300 }} + disableListWrap + options={OPTIONS} + groupBy={(option) => option[0].toUpperCase()} + renderInput={(params) => } + renderOption={(props, option, state) => + [props, option, state.index] as React.ReactNode + } + renderGroup={(params) => params as any} + slots={{ + popper: StyledPopper, + listbox: ListboxComponent, + }} +/> \ No newline at end of file From fe2401d39179f28db9227183c05edb303fdbee96 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Wed, 1 May 2024 09:18:42 +0200 Subject: [PATCH 10/20] fix proptypes --- docs/pages/material-ui/api/autocomplete.json | 2 +- .../src/Autocomplete/Autocomplete.js | 23 ++----------------- 2 files changed, 3 insertions(+), 22 deletions(-) diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index 826993e5ae3413..7198540d2949fa 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -195,7 +195,7 @@ "slotProps": { "type": { "name": "shape", - "description": "{ chip?: { avatar?: element, children?: any, classes?: any, className?: any, clickable?: any, color?: any, component?: elementType, deleteIcon?: element, disabled?: any, icon?: element, label?: any, onDelete?: any, size?: any, skipFocusWhenDisabled?: any, style?: any, sx?: any, tabIndex?: any, variant?: any }, clearIndicator?: object, listbox?: object, paper?: object, popper?: object, popupIndicator?: object }" + "description": "{ chip?: object, clearIndicator?: object, listbox?: object, paper?: object, popper?: object, popupIndicator?: object }" }, "default": "{}" }, diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 10c3019e509167..c6a94406808e5f 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -1181,27 +1181,8 @@ Autocomplete.propTypes /* remove-proptypes */ = { * The props used for each slot inside. * @default {} */ - slotProps: PropTypes.shape({ - chip: PropTypes.shape({ - avatar: PropTypes.element, - children: PropTypes.any, - classes: PropTypes.any, - className: PropTypes.any, - clickable: PropTypes.any, - color: PropTypes.any, - component: PropTypes.elementType, - deleteIcon: PropTypes.element, - disabled: PropTypes.any, - icon: PropTypes.element, - label: PropTypes.any, - onDelete: PropTypes.any, - size: PropTypes.any, - skipFocusWhenDisabled: PropTypes.any, - style: PropTypes.any, - sx: PropTypes.any, - tabIndex: PropTypes.any, - variant: PropTypes.any, - }), + slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({ + chip: PropTypes.object, clearIndicator: PropTypes.object, listbox: PropTypes.object, paper: PropTypes.object, From 7cea30a9f2a02a8aca9129ab223b12eba0562879 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Thu, 2 May 2024 10:02:00 +0200 Subject: [PATCH 11/20] fix slotProps types to accept functions --- docs/pages/material-ui/api/autocomplete.json | 2 +- .../src/Autocomplete/Autocomplete.d.ts | 53 +++++++++++++++---- .../src/Autocomplete/Autocomplete.js | 12 ++--- 3 files changed, 49 insertions(+), 18 deletions(-) diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index 7198540d2949fa..50688e1e7185fe 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -195,7 +195,7 @@ "slotProps": { "type": { "name": "shape", - "description": "{ chip?: object, clearIndicator?: object, listbox?: object, paper?: object, popper?: object, popupIndicator?: object }" + "description": "{ chip?: func
| object, clearIndicator?: func
| object, listbox?: func
| object, paper?: func
| object, popper?: func
| object, popupIndicator?: func
| object }" }, "default": "{}" }, diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index a914e8d14203d1..60bf63833e07e6 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -17,7 +17,7 @@ import { ChipProps, ChipTypeMap } from '@mui/material/Chip'; import { PaperProps } from '@mui/material/Paper'; import { PopperProps } from '@mui/material/Popper'; import { AutocompleteClasses } from './autocompleteClasses'; -import { CreateSlotsAndSlotProps } from '../utils/types'; +import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types'; export { AutocompleteChangeDetails, @@ -104,22 +104,53 @@ export interface AutocompleteSlots { } export type AutocompleteSlotsAndSlotProps< + Value, + Multiple extends boolean | undefined, + DisableClearable extends boolean | undefined, + FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'], > = CreateSlotsAndSlotProps< AutocompleteSlots, { - chip: Partial>; - clearIndicator: Partial; + chip: SlotProps< + React.ElementType>>, + {}, + AutocompleteOwnerState + >; + clearIndicator: SlotProps< + React.ElementType>, + {}, + AutocompleteOwnerState + >; /** * Props applied to the Listbox element. */ - listbox: ReturnType['getListboxProps']> & { - sx?: SxProps; - ref?: React.Ref; - }; - paper: Partial; - popper: Partial; - popupIndicator: Partial; + listbox: SlotProps< + React.ElementType< + ReturnType['getListboxProps']> & { + sx?: SxProps; + ref?: React.Ref; + } + >, + {}, + AutocompleteOwnerState + >; + + paper: SlotProps< + React.ElementType>, + {}, + AutocompleteOwnerState + >; + popper: SlotProps< + React.ElementType>, + {}, + AutocompleteOwnerState + >; + popupIndicator: SlotProps< + React.ElementType>, + {}, + AutocompleteOwnerState + >; } >; @@ -131,7 +162,7 @@ export interface AutocompleteProps< ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'], > extends UseAutocompleteProps, StandardProps, 'defaultValue' | 'onChange' | 'children'>, - AutocompleteSlotsAndSlotProps { + AutocompleteSlotsAndSlotProps { /** * Props applied to the [`Chip`](/material-ui/api/chip/) element. * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index c6a94406808e5f..f83ae5f126f015 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -1182,12 +1182,12 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @default {} */ slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({ - chip: PropTypes.object, - clearIndicator: PropTypes.object, - listbox: PropTypes.object, - paper: PropTypes.object, - popper: PropTypes.object, - popupIndicator: PropTypes.object, + chip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), }), /** * The components used for each slot inside. From c5ffabe984ae2e161cfbce96df85d741cbda755b Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Sat, 4 May 2024 13:54:00 +0200 Subject: [PATCH 12/20] add explanation for deprecated api's --- .../migrating-from-deprecated-apis.md | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) 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 99b33af38a2460..dca2d92815eddb 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 @@ -235,6 +235,38 @@ Use the [codemod](https://github.com/mui/material-ui/tree/HEAD/packages/mui-code npx @mui/codemod@latest deprecations/autocomplete-props ``` +### \*Component props + +All of the Autocomplete's slot (`*Component`) props were deprecated in favor of equivalent `slots` entries: + +```diff + +``` + +### \*Props props + +All of the Autocomplete's slot props (`*Props`) props were deprecated in favor of equivalent `slotProps` entries: + +```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: From be30a7197d0fd792579546f314763f4f0289e0a2 Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Sat, 4 May 2024 15:02:03 +0200 Subject: [PATCH 13/20] fix missing "," --- .../migrating-from-deprecated-apis.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 dca2d92815eddb..cc0cbb821ebaf5 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 @@ -245,9 +245,9 @@ All of the Autocomplete's slot (`*Component`) props were deprecated in favor of - PaperComponent={CustomPaperComponent} - PopperComponent={CustomPopperComponent} + slots={{ -+ listbox: CustomListboxComponent -+ paper: CustomPaperComponent -+ popper: CustomPopperComponent ++ listbox: CustomListboxComponent, ++ paper: CustomPaperComponent, ++ popper: CustomPopperComponent, + }} /> ``` @@ -261,8 +261,8 @@ All of the Autocomplete's slot props (`*Props`) props were deprecated in favor o - ChipProps={CustomChipProps} - ListboxProps={CustomListboxProps} + slotProps={{ -+ chip: CustomChipProps -+ listbox: CustomListboxProps ++ chip: CustomChipProps, ++ listbox: CustomListboxProps, + }} /> ``` From 1a8ebb93367d3d7c808a0df5c1c707ab83aa6f0c Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Sat, 4 May 2024 21:34:07 +0200 Subject: [PATCH 14/20] migrate Autocomplete tests to not use deprecated apis --- .../src/Autocomplete/Autocomplete.test.js | 20 +++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index f6a04adaebb858..8583c6e4580a10 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -247,10 +247,14 @@ 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 ; + slots={{ + popper: (props) => { + const { disablePortal, anchorEl, open, ...other } = props; + return ; + }, + }} + slotProps={{ + listbox: { style: { padding: 0, maxHeight: '100px' } }, }} />, ); @@ -2739,9 +2743,11 @@ describe('', () => { defaultValue={options[0]} onHighlightChange={handleHighlightChange} options={options} - ListboxProps={{ ref }} open renderInput={(params) => } + slotProps={{ + listbox: { ref }, + }} />, ); expect(handleHighlightChange.callCount).to.equal( @@ -3285,7 +3291,9 @@ describe('', () => { open options={getOptions(5)} renderInput={(params) => } - ListboxProps={{ style: { maxHeight: '100px' } }} + slotProps={{ + listbox: { style: { maxHeight: '100px' } }, + }} />, ); const listbox = getByRole('listbox'); From 8ffaab628a5b81e2cd818d346b404ec2718a1590 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Tue, 7 May 2024 11:26:52 -0400 Subject: [PATCH 15/20] Revert "migrate Autocomplete tests to not use deprecated apis" This reverts commit 1a8ebb93367d3d7c808a0df5c1c707ab83aa6f0c. --- .../src/Autocomplete/Autocomplete.test.js | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index 8583c6e4580a10..f6a04adaebb858 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -247,14 +247,10 @@ describe('', () => { open options={['one', 'two', 'three', 'four', 'five']} renderInput={(params) => } - slots={{ - popper: (props) => { - const { disablePortal, anchorEl, open, ...other } = props; - return ; - }, - }} - slotProps={{ - listbox: { style: { padding: 0, maxHeight: '100px' } }, + ListboxProps={{ style: { padding: 0, maxHeight: '100px' } }} + PopperComponent={(props) => { + const { disablePortal, anchorEl, open, ...other } = props; + return ; }} />, ); @@ -2743,11 +2739,9 @@ describe('', () => { defaultValue={options[0]} onHighlightChange={handleHighlightChange} options={options} + ListboxProps={{ ref }} open renderInput={(params) => } - slotProps={{ - listbox: { ref }, - }} />, ); expect(handleHighlightChange.callCount).to.equal( @@ -3291,9 +3285,7 @@ describe('', () => { open options={getOptions(5)} renderInput={(params) => } - slotProps={{ - listbox: { style: { maxHeight: '100px' } }, - }} + ListboxProps={{ style: { maxHeight: '100px' } }} />, ); const listbox = getByRole('listbox'); From 0f8665c1328cc1b8ac4086b1935dc2f29f4cd3c0 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Tue, 7 May 2024 11:39:23 -0400 Subject: [PATCH 16/20] Update migrating guide link messages --- docs/pages/material-ui/api/autocomplete.json | 10 +++++----- .../mui-material/src/Autocomplete/Autocomplete.d.ts | 10 +++++----- packages/mui-material/src/Autocomplete/Autocomplete.js | 10 +++++----- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index 50688e1e7185fe..8be9e541246486 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -19,7 +19,7 @@ "ChipProps": { "type": { "name": "object" }, "deprecated": true, - "deprecationInfo": "Use slotProps.chip instead. This prop will be removed in v7. How to migrate." + "deprecationInfo": "Use slotProps.chip instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details." }, "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "clearIcon": { "type": { "name": "node" }, "default": "" }, @@ -100,12 +100,12 @@ "type": { "name": "elementType" }, "default": "'ul'", "deprecated": true, - "deprecationInfo": "Use slots.listbox instead. This prop will be removed in v7. How to migrate." + "deprecationInfo": "Use slots.listbox instead. This prop will be removed in v7. 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 v7. How to migrate." + "deprecationInfo": "Use slotProps.listbox instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details." }, "loading": { "type": { "name": "bool" }, "default": "false" }, "loadingText": { "type": { "name": "node" }, "default": "'Loading…'" }, @@ -153,13 +153,13 @@ "type": { "name": "elementType" }, "default": "Paper", "deprecated": true, - "deprecationInfo": "Use slots.paper instead. This prop will be removed in v7. How to migrate." + "deprecationInfo": "Use slots.paper instead. This prop will be removed in v7. 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 v7. How to migrate." + "deprecationInfo": "Use slots.popper instead. This prop will be removed in v7. See Migrating from deprecated APIs for more details." }, "popupIcon": { "type": { "name": "node" }, "default": "" }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 60bf63833e07e6..70772d58b3756e 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -165,7 +165,7 @@ export interface AutocompleteProps< AutocompleteSlotsAndSlotProps { /** * Props applied to the [`Chip`](/material-ui/api/chip/) element. - * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ ChipProps?: ChipProps; /** @@ -232,12 +232,12 @@ export interface AutocompleteProps< /** * The component used to render the listbox. * @default 'ul' - * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ ListboxComponent?: React.JSXElementConstructor>; /** * Props applied to the Listbox element. - * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ ListboxProps?: ReturnType['getListboxProps']> & { sx?: SxProps; @@ -282,13 +282,13 @@ export interface AutocompleteProps< /** * The component used to render the body of the popup. * @default Paper - * @deprecated Use `slots.paper` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slots.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ PaperComponent?: React.JSXElementConstructor>; /** * The component used to position the popup. * @default Popper - * @deprecated Use `slots.popper` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slots.popper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ PopperComponent?: React.JSXElementConstructor; /** diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index f83ae5f126f015..f3e1b3e4846606 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -803,7 +803,7 @@ Autocomplete.propTypes /* remove-proptypes */ = { blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]), /** * Props applied to the [`Chip`](/material-ui/api/chip/) element. - * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ ChipProps: PropTypes.object, /** @@ -1011,12 +1011,12 @@ Autocomplete.propTypes /* remove-proptypes */ = { /** * The component used to render the listbox. * @default 'ul' - * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. 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 v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ ListboxProps: PropTypes.object, /** @@ -1111,13 +1111,13 @@ Autocomplete.propTypes /* remove-proptypes */ = { /** * The component used to render the body of the popup. * @default Paper - * @deprecated Use `slots.paper` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slots.paper` instead. This prop will be removed in v7. 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 v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/). + * @deprecated Use `slots.popper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details. */ PopperComponent: PropTypes.elementType, /** From e7a5e56078a91bdf115d8877ca342d0c1aed74a5 Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Tue, 7 May 2024 11:39:47 -0400 Subject: [PATCH 17/20] Update codemod install version --- .../migrating-from-deprecated-apis.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 cc0cbb821ebaf5..af17a0b9f66f9a 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 @@ -232,7 +232,7 @@ Here's how to migrate: 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@latest deprecations/autocomplete-props +npx @mui/codemod@next deprecations/autocomplete-props ``` ### \*Component props From 496055904fd65a276a1c4a62bec326ce9cd4689a Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Tue, 7 May 2024 11:56:15 -0400 Subject: [PATCH 18/20] Update tests --- .../src/Autocomplete/Autocomplete.test.js | 50 +++++++++++++++---- 1 file changed, 40 insertions(+), 10 deletions(-) diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index f6a04adaebb858..26852846f74ddd 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -59,20 +59,50 @@ describe('', () => { testStateOverrides: { prop: 'fullWidth', value: true, styleKey: 'fullWidth' }, refInstanceof: window.HTMLDivElement, testComponentPropWith: 'div', - testLegacyComponentsProp: true, slots: { - clearIndicator: { expectedClassName: classes.clearIndicator }, + listbox: { expectedClassName: classes.listbox }, paper: { expectedClassName: classes.paper }, - popper: { expectedClassName: classes.popper }, + popper: { expectedClassName: classes.popper, testWithElement: null }, + }, + skip: ['componentProp', 'componentsProp', 'reactTestRenderer'], + }), + ); + + describeConformance( + } + />, + () => ({ + classes, + render, + muiName: 'MuiAutocomplete', + slots: { + clearIndicator: { expectedClassName: classes.clearIndicator }, popupIndicator: { expectedClassName: classes.popupIndicator }, }, - skip: [ - 'componentProp', - 'componentsProp', - 'slotsProp', - 'reactTestRenderer', - 'slotPropsCallback', // not supported yet - ], + only: ['slotPropsProp'], + }), + ); + + describeConformance( + } + />, + () => ({ + classes, + render, + muiName: 'MuiAutocomplete', + slots: { + chip: {}, + }, + only: ['slotPropsProp'], }), ); From 96d8b77ab3dcefd88dac6561c05494382c49528d Mon Sep 17 00:00:00 2001 From: Lucas Hilgert Date: Tue, 7 May 2024 21:30:12 +0200 Subject: [PATCH 19/20] pnpm docs:api --- docs/pages/material-ui/api/autocomplete.json | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index 8be9e541246486..fcb754234fd1ba 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -383,7 +383,6 @@ "spread": true, "themeDefaultProps": true, "muiName": "MuiAutocomplete", - "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/Autocomplete/Autocomplete.js", "inheritance": null, "demos": "", From d859029465594b06c3962f0687d3c0f2e0cdfe6e Mon Sep 17 00:00:00 2001 From: Diego Andai Date: Wed, 8 May 2024 15:33:32 -0400 Subject: [PATCH 20/20] trigger ci