diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index 2ed4d05fa466ac..a1834c31c072d3 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -212,7 +212,7 @@ "slots": { "type": { "name": "shape", - "description": "{ listbox?: elementType, paper?: elementType, popper?: elementType }" + "description": "{ clearIndicator?: elementType, listbox?: elementType, paper?: elementType, popper?: elementType, popupIndicator?: elementType }" }, "default": "{}" }, @@ -231,6 +231,18 @@ "import { Autocomplete } from '@mui/material';" ], "slots": [ + { + "name": "clearIndicator", + "description": "The component used to render the clear indicator element.", + "default": "IconButton", + "class": "MuiAutocomplete-clearIndicator" + }, + { + "name": "popupIndicator", + "description": "The component used to render the popup indicator element.", + "default": "IconButton", + "class": "MuiAutocomplete-popupIndicator" + }, { "name": "listbox", "description": "The component used to render the listbox.", @@ -251,12 +263,6 @@ } ], "classes": [ - { - "key": "clearIndicator", - "className": "MuiAutocomplete-clearIndicator", - "description": "Styles applied to the clear indicator.", - "isGlobal": false - }, { "key": "endAdornment", "className": "MuiAutocomplete-endAdornment", @@ -353,12 +359,6 @@ "description": "Styles applied to the popper element if `disablePortal={true}`.", "isGlobal": false }, - { - "key": "popupIndicator", - "className": "MuiAutocomplete-popupIndicator", - "description": "Styles applied to the popup indicator.", - "isGlobal": false - }, { "key": "popupIndicatorOpen", "className": "MuiAutocomplete-popupIndicatorOpen", diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index e7a33cf97ac42d..190b47c18055fb 100644 --- a/docs/translations/api-docs/autocomplete/autocomplete.json +++ b/docs/translations/api-docs/autocomplete/autocomplete.json @@ -253,10 +253,6 @@ } }, "classDescriptions": { - "clearIndicator": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the clear indicator" - }, "endAdornment": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the endAdornment element" @@ -318,10 +314,6 @@ "nodeName": "the popper element", "conditions": "disablePortal={true}" }, - "popupIndicator": { - "description": "Styles applied to {{nodeName}}.", - "nodeName": "the popup indicator" - }, "popupIndicatorOpen": { "description": "Styles applied to {{nodeName}} if {{conditions}}.", "nodeName": "the popup indicator", @@ -345,8 +337,10 @@ } }, "slotDescriptions": { + "clearIndicator": "The component used to render the clear indicator element.", "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." + "popper": "The component used to position the popup.", + "popupIndicator": "The component used to render the popup indicator element." } } diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index 07260b1fd87659..d9fd4b44c81ff9 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts @@ -113,6 +113,16 @@ export interface AutocompleteRenderInputParams { export interface AutocompletePropsSizeOverrides {} export interface AutocompleteSlots { + /** + * The component used to render the clear indicator element. + * @default IconButton + */ + clearIndicator: React.JSXElementConstructor; + /** + * The component used to render the popup indicator element. + * @default IconButton + */ + popupIndicator: React.JSXElementConstructor; /** * The component used to render the listbox. * @default 'ul' diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index 07ffc0ff2ec46f..bbfdccc3af66cc 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.js @@ -576,6 +576,33 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { }, }); + const [ClearIndicatorSlot, clearIndicatorProps] = useSlot('clearIndicator', { + elementType: AutocompleteClearIndicator, + externalForwardedProps, + ownerState, + className: classes.clearIndicator, + shouldForwardComponentProp: true, + additionalProps: { + ...getClearProps(), + 'aria-label': clearText, + title: clearText, + }, + }); + + const [PopupIndicatorSlot, popupIndicatorProps] = useSlot('popupIndicator', { + elementType: AutocompletePopupIndicator, + externalForwardedProps, + ownerState, + className: classes.popupIndicator, + shouldForwardComponentProp: true, + additionalProps: { + ...getPopupIndicatorProps(), + disabled, + 'aria-label': popupOpen ? closeText : openText, + title: popupOpen ? closeText : openText, + }, + }); + let startAdornment; const getCustomizedItemProps = (params) => ({ @@ -663,9 +690,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { ); }; - const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator; - const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator; - return ( {hasClearIcon ? ( - - {clearIcon} - + {clearIcon} ) : null} - {hasPopupIcon ? ( - - {popupIcon} - + {popupIcon} ) : null} ), @@ -1223,9 +1227,11 @@ Autocomplete.propTypes /* remove-proptypes */ = { * @default {} */ slots: PropTypes.shape({ + clearIndicator: PropTypes.elementType, listbox: PropTypes.elementType, paper: PropTypes.elementType, popper: PropTypes.elementType, + popupIndicator: PropTypes.elementType, }), /** * The system prop that allows defining system overrides as well as additional CSS styles. diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index be0494c2cd10d4..6e172adf65ee3d 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -83,7 +83,12 @@ describe('', () => { clearIndicator: { expectedClassName: classes.clearIndicator }, popupIndicator: { expectedClassName: classes.popupIndicator }, }, - only: ['slotPropsProp'], + only: [ + 'slotsProp', + 'slotPropsProp', + 'slotPropsCallback', + 'slotPropsCallbackWithPropsAsOwnerState', + ], }), );