[autocomplete] Add root slot (@GerardasB)

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

@@ -205,14 +205,14 @@
     "slotProps": {
       "type": {
         "name": "shape",
-        "description": "{ chip?: func<br>&#124;&nbsp;object, clearIndicator?: func<br>&#124;&nbsp;object, listbox?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, popper?: func<br>&#124;&nbsp;object, popupIndicator?: func<br>&#124;&nbsp;object }"
+        "description": "{ chip?: func<br>&#124;&nbsp;object, clearIndicator?: func<br>&#124;&nbsp;object, listbox?: func<br>&#124;&nbsp;object, paper?: func<br>&#124;&nbsp;object, popper?: func<br>&#124;&nbsp;object, popupIndicator?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
       },
       "default": "{}"
     },
     "slots": {
       "type": {
         "name": "shape",
-        "description": "{ clearIndicator?: elementType, listbox?: elementType, paper?: elementType, popper?: elementType, popupIndicator?: elementType }"
+        "description": "{ clearIndicator?: elementType, listbox?: elementType, paper?: elementType, popper?: elementType, popupIndicator?: elementType, root?: elementType }"
       },
       "default": "{}"
     },
@@ -231,6 +231,12 @@
     "import { Autocomplete } from '@mui/material';"
   ],
   "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root.",
+      "default": "'div'",
+      "class": "MuiAutocomplete-root"
+    },
     {
       "name": "clearIndicator",
       "description": "The component used to render the clear indicator element.",
@@ -365,12 +371,6 @@
       "description": "Styles applied to the popup indicator if the popup is open.",
       "isGlobal": false
     },
-    {
-      "key": "root",
-      "className": "MuiAutocomplete-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
-    },
     {
       "key": "tag",
       "className": "MuiAutocomplete-tag",

docs/translations/api-docs/autocomplete/autocomplete.json

@@ -319,7 +319,6 @@
       "nodeName": "the popup indicator",
       "conditions": "the popup is open"
     },
-    "root": { "description": "Styles applied to the root element." },
     "tag": {
       "description": "Styles applied to {{nodeName}}, {{conditions}}.",
       "nodeName": "the tag elements",
@@ -341,6 +340,7 @@
     "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.",
-    "popupIndicator": "The component used to render the popup indicator element."
+    "popupIndicator": "The component used to render the popup indicator element.",
+    "root": "The component that renders the root."
   }
 }

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

@@ -113,6 +113,11 @@ export interface AutocompleteRenderInputParams {
 export interface AutocompletePropsSizeOverrides {}
 
 export interface AutocompleteSlots {
+  /**
+   * The component that renders the root.
+   * @default 'div'
+   */
+  root: React.ElementType;
   /**
    * The component used to render the clear indicator element.
    * @default IconButton
@@ -149,6 +154,11 @@ export type AutocompleteSlotsAndSlotProps<
 > = CreateSlotsAndSlotProps<
   AutocompleteSlots,
   {
+    root: SlotProps<
+      'div',
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
     chip: SlotProps<
       React.ElementType<Partial<ChipProps<ChipComponent>>>,
       {},

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

@@ -1,7 +1,6 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
@@ -546,6 +545,18 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
     },
   };
 
+  const [RootSlot, rootProps] = useSlot('root', {
+    ref,
+    className: [classes.root, className],
+    elementType: AutocompleteRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other,
+    },
+    getSlotProps: getRootProps,
+    ownerState,
+  });
+
   const [ListboxSlot, listboxProps] = useSlot('listbox', {
     elementType: AutocompleteListbox,
     externalForwardedProps,
@@ -692,12 +703,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
 
   return (
     <React.Fragment>
-      <AutocompleteRoot
-        ref={ref}
-        className={clsx(classes.root, className)}
-        ownerState={ownerState}
-        {...getRootProps(other)}
-      >
+      <RootSlot {...rootProps}>
         {renderInput({
           id,
           disabled,
@@ -733,7 +739,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) {
             ...getInputProps(),
           },
         })}
-      </AutocompleteRoot>
+      </RootSlot>
       {anchorEl ? (
         <AutocompletePopper as={PopperSlot} {...popperProps}>
           <AutocompletePaper as={PaperSlot} {...paperProps}>
@@ -1221,6 +1227,7 @@ Autocomplete.propTypes /* remove-proptypes */ = {
     paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }),
   /**
    * The components used for each slot inside.
@@ -1232,6 +1239,7 @@ Autocomplete.propTypes /* remove-proptypes */ = {
     paper: PropTypes.elementType,
     popper: PropTypes.elementType,
     popupIndicator: PropTypes.elementType,
+    root: PropTypes.elementType,
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

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

@@ -60,6 +60,7 @@ describe('<Autocomplete />', () => {
       refInstanceof: window.HTMLDivElement,
       testComponentPropWith: 'div',
       slots: {
+        root: { expectedClassName: classes.root },
         listbox: { expectedClassName: classes.listbox },
         paper: { expectedClassName: classes.paper },
         popper: { expectedClassName: classes.popper, testWithElement: null },