[Autocomplete] Support full slots for clearIndicator and popupIndicator

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",

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": "<code>disablePortal={true}</code>"
     },
-    "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."
   }
 }

packages/mui-material/src/Autocomplete/Autocomplete.d.ts

@@ -114,6 +114,16 @@ export interface AutocompleteRenderInputParams {
 export interface AutocompletePropsSizeOverrides {}
 
 export interface AutocompleteSlots {
+  /**
+   * The component used to render the clear indicator element.
+   * @default IconButton
+   */
+  clearIndicator: React.JSXElementConstructor<IconButtonProps>;
+  /**
+   * The component used to render the popup indicator element.
+   * @default IconButton
+   */
+  popupIndicator: React.JSXElementConstructor<IconButtonProps>;
   /**
    * The component used to render the listbox.
    * @default 'ul'

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 (
     <React.Fragment>
       <AutocompleteRoot
@@ -693,30 +717,10 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
               endAdornment: (
                 <AutocompleteEndAdornment className={classes.endAdornment} ownerState={ownerState}>
                   {hasClearIcon ? (
-                    <AutocompleteClearIndicator
-                      {...getClearProps()}
-                      aria-label={clearText}
-                      title={clearText}
-                      ownerState={ownerState}
-                      {...clearIndicatorSlotProps}
-                      className={clsx(classes.clearIndicator, clearIndicatorSlotProps?.className)}
-                    >
-                      {clearIcon}
-                    </AutocompleteClearIndicator>
+                    <ClearIndicatorSlot {...clearIndicatorProps}>{clearIcon}</ClearIndicatorSlot>
                   ) : null}
-
                   {hasPopupIcon ? (
-                    <AutocompletePopupIndicator
-                      {...getPopupIndicatorProps()}
-                      disabled={disabled}
-                      aria-label={popupOpen ? closeText : openText}
-                      title={popupOpen ? closeText : openText}
-                      ownerState={ownerState}
-                      {...popupIndicatorSlotProps}
-                      className={clsx(classes.popupIndicator, popupIndicatorSlotProps?.className)}
-                    >
-                      {popupIcon}
-                    </AutocompletePopupIndicator>
+                    <PopupIndicatorSlot {...popupIndicatorProps}>{popupIcon}</PopupIndicatorSlot>
                   ) : null}
                 </AutocompleteEndAdornment>
               ),
@@ -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.

packages/mui-material/src/Autocomplete/Autocomplete.test.js

@@ -83,7 +83,12 @@ describe('<Autocomplete />', () => {
         clearIndicator: { expectedClassName: classes.clearIndicator },
         popupIndicator: { expectedClassName: classes.popupIndicator },
       },
-      only: ['slotPropsProp'],
+      only: [
+        'slotsProp',
+        'slotPropsProp',
+        'slotPropsCallback',
+        'slotPropsCallbackWithPropsAsOwnerState',
+      ],
     }),
   );