[Autocomplete] Extend componentsProps to include popper and popupIndicator slots

docs/pages/material-ui/api/autocomplete.json

@@ -20,7 +20,10 @@
     "clearText": { "type": { "name": "string" }, "default": "'Clear'" },
     "closeText": { "type": { "name": "string" }, "default": "'Close'" },
     "componentsProps": {
-      "type": { "name": "shape", "description": "{ clearIndicator?: object, paper?: object }" },
+      "type": {
+        "name": "shape",
+        "description": "{ clearIndicator?: object, paper?: object, popper?: object, popupIndicator?: object }"
+      },
       "default": "{}"
     },
     "defaultValue": {

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

@@ -120,6 +120,8 @@ export interface AutocompleteProps<
   componentsProps?: {
     clearIndicator?: Partial<IconButtonProps>;
     paper?: PaperProps;
+    popper?: Partial<PopperProps>;
+    popupIndicator?: Partial<IconButtonProps>;
   };
   /**
    * If `true`, the component is disabled.

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

@@ -570,8 +570,12 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
                       disabled={disabled}
                       aria-label={popupOpen ? closeText : openText}
                       title={popupOpen ? closeText : openText}
-                      className={clsx(classes.popupIndicator)}
                       ownerState={ownerState}
+                      {...componentsProps.popupIndicator}
+                      className={clsx(
+                        classes.popupIndicator,
+                        componentsProps.popupIndicator?.className,
+                      )}
                     >
                       {popupIcon}
                     </AutocompletePopupIndicator>
@@ -591,7 +595,6 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
       {popupOpen && anchorEl ? (
         <AutocompletePopper
           as={PopperComponent}
-          className={clsx(classes.popper)}
           disablePortal={disablePortal}
           style={{
             width: anchorEl ? anchorEl.clientWidth : null,
@@ -600,6 +603,8 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
           role="presentation"
           anchorEl={anchorEl}
           open
+          {...componentsProps.popper}
+          className={clsx(classes.popper, componentsProps.popper?.className)}
         >
           <AutocompletePaper
             ownerState={ownerState}
@@ -739,6 +744,8 @@ Autocomplete.propTypes /* remove-proptypes */ = {
   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.

packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx

@@ -88,7 +88,12 @@ function AutocompleteComponentsProps() {
     <Autocomplete
       options={['one', 'two', 'three']}
       renderInput={(params) => <TextField {...params} />}
-      componentsProps={{ paper: { elevation: 2 } }}
+      componentsProps={{
+        clearIndicator: { size: 'large' },
+        paper: { elevation: 2 },
+        popper: { placement: 'bottom-end' },
+        popupIndicator: { size: 'large' },
+      }}
     />
   );
 }

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

@@ -18,6 +18,7 @@ import Autocomplete, {
   createFilterOptions,
 } from '@mui/material/Autocomplete';
 import { paperClasses } from '@mui/material/Paper';
+import { iconButtonClasses } from '@mui/material/IconButton';
 
 function checkHighlightIs(listbox, expected) {
   const focused = listbox.querySelector(`.${classes.focused}`);
@@ -2430,6 +2431,28 @@ describe('<Autocomplete />', () => {
   });
 
   describe('prop: componentsProps', () => {
+    it('should apply the props on the AutocompleteClearIndicator component', () => {
+      render(
+        <Autocomplete
+          open
+          options={['one', 'two']}
+          value="one"
+          renderInput={(params) => <TextField {...params} />}
+          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(
         <Autocomplete
@@ -2446,6 +2469,44 @@ describe('<Autocomplete />', () => {
       expect(paperRoot).to.have.class(paperClasses.elevation2);
       expect(paperRoot).to.have.class('my-class');
     });
+
+    it('should apply the props on the Popper component', () => {
+      render(
+        <Autocomplete
+          open
+          options={['one', 'two']}
+          renderInput={(params) => <TextField {...params} />}
+          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(
+        <Autocomplete
+          open
+          options={['one', 'two']}
+          renderInput={(params) => <TextField {...params} />}
+          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: readOnly', () => {