From 217c773be78c783bafa774fefd698d34b26598a6 Mon Sep 17 00:00:00 2001 From: "Gerardas B." <10091419+GerardasB@users.noreply.github.com> Date: Thu, 5 Mar 2026 12:35:59 +0200 Subject: [PATCH 1/2] [autocomplete] Add `root` slot (#47852) Co-authored-by: ZeeshanTamboli --- docs/pages/material-ui/api/autocomplete.json | 16 ++++++------- .../api-docs/autocomplete/autocomplete.json | 4 ++-- .../src/Autocomplete/Autocomplete.d.ts | 10 ++++++++ .../src/Autocomplete/Autocomplete.js | 24 ++++++++++++------- .../src/Autocomplete/Autocomplete.test.js | 1 + 5 files changed, 37 insertions(+), 18 deletions(-) diff --git a/docs/pages/material-ui/api/autocomplete.json b/docs/pages/material-ui/api/autocomplete.json index a1834c31c072d3..176873d6835f46 100644 --- a/docs/pages/material-ui/api/autocomplete.json +++ b/docs/pages/material-ui/api/autocomplete.json @@ -205,14 +205,14 @@ "slotProps": { "type": { "name": "shape", - "description": "{ chip?: func
| object, clearIndicator?: func
| object, listbox?: func
| object, paper?: func
| object, popper?: func
| object, popupIndicator?: func
| object }" + "description": "{ chip?: func
| object, clearIndicator?: func
| object, listbox?: func
| object, paper?: func
| object, popper?: func
| object, popupIndicator?: func
| object, root?: func
| 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", diff --git a/docs/translations/api-docs/autocomplete/autocomplete.json b/docs/translations/api-docs/autocomplete/autocomplete.json index 190b47c18055fb..4ced38894aaeac 100644 --- a/docs/translations/api-docs/autocomplete/autocomplete.json +++ b/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." } } diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts b/packages/mui-material/src/Autocomplete/Autocomplete.d.ts index d9fd4b44c81ff9..571286dfd771f7 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.d.ts +++ b/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 + >; chip: SlotProps< React.ElementType>>, {}, diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js index bbfdccc3af66cc..3c48a1e024ccd6 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.js +++ b/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 ( - + {renderInput({ id, disabled, @@ -733,7 +739,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(inProps, ref) { ...getInputProps(), }, })} - + {anchorEl ? ( @@ -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. diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.test.js b/packages/mui-material/src/Autocomplete/Autocomplete.test.js index 0fa1eb0dfa5d4a..5cd4baf0fa8acc 100644 --- a/packages/mui-material/src/Autocomplete/Autocomplete.test.js +++ b/packages/mui-material/src/Autocomplete/Autocomplete.test.js @@ -60,6 +60,7 @@ describe('', () => { refInstanceof: window.HTMLDivElement, testComponentPropWith: 'div', slots: { + root: { expectedClassName: classes.root }, listbox: { expectedClassName: classes.listbox }, paper: { expectedClassName: classes.paper }, popper: { expectedClassName: classes.popper, testWithElement: null }, From 51de1d277c5e506e3a41b2d34b8a65665297a37c Mon Sep 17 00:00:00 2001 From: ZeeshanTamboli Date: Thu, 5 Mar 2026 16:09:22 +0530 Subject: [PATCH 2/2] rerun CI