@mui/material 9.0.0-alpha.2 → 9.0.0-alpha.4

package/Autocomplete/Autocomplete.d.mts

@@ -71,18 +71,35 @@ export interface AutocompleteRenderInputParams {
   disabled: boolean;
   fullWidth: boolean;
   size: 'small' | undefined;
-  InputLabelProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
-  InputProps: {
-    ref: React.Ref<any>;
-    className: string;
-    startAdornment: React.ReactNode;
-    endAdornment: React.ReactNode;
-    onMouseDown: React.MouseEventHandler;
+  slotProps: {
+    inputLabel: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
+    input: {
+      ref: React.Ref<any>;
+      className: string;
+      startAdornment: React.ReactNode;
+      endAdornment: React.ReactNode;
+      onMouseDown: React.MouseEventHandler;
+    };
+    htmlInput: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
   };
-  inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
 }
 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
+   */
+  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'
@@ -100,6 +117,7 @@ export interface AutocompleteSlots {
   popper: React.JSXElementConstructor<PopperProps & AutocompletePopperSlotPropsOverrides>;
 }
 export type AutocompleteSlotsAndSlotProps<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = CreateSlotsAndSlotProps<AutocompleteSlots, {
+  root: SlotProps<'div', {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
   chip: SlotProps<React.ElementType<Partial<ChipProps<ChipComponent>>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
   clearIndicator: SlotProps<React.ElementType<Partial<IconButtonProps>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
   /**
@@ -114,11 +132,6 @@ export type AutocompleteSlotsAndSlotProps<Value, Multiple extends boolean | unde
   popupIndicator: SlotProps<React.ElementType<Partial<IconButtonProps>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
 }>;
 export interface AutocompleteProps<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>, StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'>, AutocompleteSlotsAndSlotProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> {
-  /**
-   * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
-   * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ChipProps?: ChipProps<ChipComponent> | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -142,16 +155,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default 'Close'
    */
   closeText?: string | undefined;
-  /**
-   * The props used for each slot inside.
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps?: {
-    clearIndicator?: Partial<IconButtonProps> | undefined;
-    paper?: PaperProps | undefined;
-    popper?: Partial<PopperProps> | undefined;
-    popupIndicator?: Partial<IconButtonProps> | undefined;
-  } | undefined;
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -180,20 +183,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default (more) => `+${more}`
    */
   getLimitTagsText?: ((more: number) => React.ReactNode) | undefined;
-  /**
-   * The component used to render the listbox.
-   * @default 'ul'
-   * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>> | undefined;
-  /**
-   * Props applied to the Listbox element.
-   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxProps?: (ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
-    sx?: SxProps<Theme> | undefined;
-    ref?: React.Ref<Element> | undefined;
-  }) | undefined;
   /**
    * If `true`, the component is in a loading state.
    * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
@@ -230,18 +219,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default 'Open'
    */
   openText?: string | undefined;
-  /**
-   * The component used to render the body of the popup.
-   * @default Paper
-   * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PaperComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>> | undefined;
-  /**
-   * The component used to position the popup.
-   * @default Popper
-   * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PopperComponent?: React.JSXElementConstructor<PopperProps> | undefined;
   /**
    * The icon to display in place of the default popup icon.
    * @default <ArrowDropDownIcon />
@@ -285,17 +262,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
   renderOption?: ((props: React.HTMLAttributes<HTMLLIElement> & {
     key: React.Key;
   }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode) | undefined;
-  /**
-   * Render the selected value when doing multiple selections.
-   *
-   * @deprecated Use `renderValue` prop instead
-   *
-   * @param {Value[]} value The `value` provided to the component.
-   * @param {function} getTagProps A tag props getter.
-   * @param {object} ownerState The state of the Autocomplete component.
-   * @returns {ReactNode}
-   */
-  renderTags?: ((value: Value[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode) | undefined;
   /**
    * Renders the selected value(s) as rich content in the input for both single and multiple selections.
    *

package/Autocomplete/Autocomplete.d.ts

@@ -71,18 +71,35 @@ export interface AutocompleteRenderInputParams {
   disabled: boolean;
   fullWidth: boolean;
   size: 'small' | undefined;
-  InputLabelProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
-  InputProps: {
-    ref: React.Ref<any>;
-    className: string;
-    startAdornment: React.ReactNode;
-    endAdornment: React.ReactNode;
-    onMouseDown: React.MouseEventHandler;
+  slotProps: {
+    inputLabel: ReturnType<ReturnType<typeof useAutocomplete>['getInputLabelProps']>;
+    input: {
+      ref: React.Ref<any>;
+      className: string;
+      startAdornment: React.ReactNode;
+      endAdornment: React.ReactNode;
+      onMouseDown: React.MouseEventHandler;
+    };
+    htmlInput: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
   };
-  inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
 }
 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
+   */
+  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'
@@ -100,6 +117,7 @@ export interface AutocompleteSlots {
   popper: React.JSXElementConstructor<PopperProps & AutocompletePopperSlotPropsOverrides>;
 }
 export type AutocompleteSlotsAndSlotProps<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = CreateSlotsAndSlotProps<AutocompleteSlots, {
+  root: SlotProps<'div', {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
   chip: SlotProps<React.ElementType<Partial<ChipProps<ChipComponent>>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
   clearIndicator: SlotProps<React.ElementType<Partial<IconButtonProps>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
   /**
@@ -114,11 +132,6 @@ export type AutocompleteSlotsAndSlotProps<Value, Multiple extends boolean | unde
   popupIndicator: SlotProps<React.ElementType<Partial<IconButtonProps>>, {}, AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>>;
 }>;
 export interface AutocompleteProps<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>, StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'>, AutocompleteSlotsAndSlotProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> {
-  /**
-   * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
-   * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ChipProps?: ChipProps<ChipComponent> | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
@@ -142,16 +155,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default 'Close'
    */
   closeText?: string | undefined;
-  /**
-   * The props used for each slot inside.
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps?: {
-    clearIndicator?: Partial<IconButtonProps> | undefined;
-    paper?: PaperProps | undefined;
-    popper?: Partial<PopperProps> | undefined;
-    popupIndicator?: Partial<IconButtonProps> | undefined;
-  } | undefined;
   /**
    * If `true`, the component is disabled.
    * @default false
@@ -180,20 +183,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default (more) => `+${more}`
    */
   getLimitTagsText?: ((more: number) => React.ReactNode) | undefined;
-  /**
-   * The component used to render the listbox.
-   * @default 'ul'
-   * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>> | undefined;
-  /**
-   * Props applied to the Listbox element.
-   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxProps?: (ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
-    sx?: SxProps<Theme> | undefined;
-    ref?: React.Ref<Element> | undefined;
-  }) | undefined;
   /**
    * If `true`, the component is in a loading state.
    * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
@@ -230,18 +219,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @default 'Open'
    */
   openText?: string | undefined;
-  /**
-   * The component used to render the body of the popup.
-   * @default Paper
-   * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PaperComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>> | undefined;
-  /**
-   * The component used to position the popup.
-   * @default Popper
-   * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PopperComponent?: React.JSXElementConstructor<PopperProps> | undefined;
   /**
    * The icon to display in place of the default popup icon.
    * @default <ArrowDropDownIcon />
@@ -285,17 +262,6 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
   renderOption?: ((props: React.HTMLAttributes<HTMLLIElement> & {
     key: React.Key;
   }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode) | undefined;
-  /**
-   * Render the selected value when doing multiple selections.
-   *
-   * @deprecated Use `renderValue` prop instead
-   *
-   * @param {Value[]} value The `value` provided to the component.
-   * @param {function} getTagProps A tag props getter.
-   * @param {object} ownerState The state of the Autocomplete component.
-   * @returns {ReactNode}
-   */
-  renderTags?: ((value: Value[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode) | undefined;
   /**
    * Renders the selected value(s) as rich content in the input for both single and multiple selections.
    *

package/Autocomplete/Autocomplete.js

@@ -15,7 +15,6 @@ Object.defineProperty(exports, "createFilterOptions", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
@@ -418,7 +417,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     autoHighlight = false,
     autoSelect = false,
     blurOnSelect = false,
-    ChipProps: ChipPropsProp,
     className,
     clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
       fontSize: "small"
@@ -427,7 +425,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     clearOnEscape = false,
     clearText = 'Clear',
     closeText = 'Close',
-    componentsProps,
     defaultValue = props.multiple ? [] : null,
     disableClearable = false,
     disableCloseOnSelect = false,
@@ -451,8 +448,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     includeInputInList = false,
     inputValue: inputValueProp,
     limitTags = -1,
-    ListboxComponent: ListboxComponentProp,
-    ListboxProps: ListboxPropsProp,
     loading = false,
     loadingText = 'Loading…',
     multiple = false,
@@ -466,14 +461,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     openOnFocus = false,
     openText = 'Open',
     options,
-    PaperComponent: PaperComponentProp,
-    PopperComponent: PopperComponentProp,
     popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})),
     readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
     renderOption: renderOptionProp,
-    renderTags,
     renderValue,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
@@ -536,18 +528,20 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
-    slots: {
-      paper: PaperComponentProp,
-      popper: PopperComponentProp,
-      ...slots
-    },
-    slotProps: {
-      chip: ChipPropsProp,
-      listbox: ListboxPropsProp,
-      ...componentsProps,
-      ...slotProps
-    }
+    slots,
+    slotProps
   };
+  const [RootSlot, rootProps] = (0, _useSlot.default)('root', {
+    ref,
+    className: [classes.root, className],
+    elementType: AutocompleteRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    getSlotProps: getRootProps,
+    ownerState
+  });
   const [ListboxSlot, listboxProps] = (0, _useSlot.default)('listbox', {
     elementType: AutocompleteListbox,
     externalForwardedProps,
@@ -577,6 +571,31 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       open: popupOpen
     }
   });
+  const [ClearIndicatorSlot, clearIndicatorProps] = (0, _useSlot.default)('clearIndicator', {
+    elementType: AutocompleteClearIndicator,
+    externalForwardedProps,
+    ownerState,
+    className: classes.clearIndicator,
+    shouldForwardComponentProp: true,
+    additionalProps: {
+      ...getClearProps(),
+      'aria-label': clearText,
+      title: clearText
+    }
+  });
+  const [PopupIndicatorSlot, popupIndicatorProps] = (0, _useSlot.default)('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 => ({
     className: classes.tag,
@@ -585,9 +604,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   if (multiple) {
     if (value.length > 0) {
-      if (renderTags) {
-        startAdornment = renderTags(value, getCustomizedItemProps, ownerState);
-      } else if (renderValue) {
+      if (renderValue) {
         startAdornment = renderValue(value, getCustomizedItemProps, ownerState);
       } else {
         startAdornment = value.map((option, index) => {
@@ -658,59 +675,45 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       inputValue
     }, ownerState);
   };
-  const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
-  const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteRoot, {
-      ref: ref,
-      className: (0, _clsx.default)(classes.root, className),
-      ownerState: ownerState,
-      ...getRootProps(other),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
+      ...rootProps,
       children: renderInput({
         id,
         disabled,
         fullWidth: props.fullWidth ?? true,
         size: size === 'small' ? 'small' : undefined,
-        InputLabelProps: getInputLabelProps(),
-        InputProps: {
-          ref: setAnchorEl,
-          className: classes.inputRoot,
-          startAdornment,
-          onMouseDown: event => {
-            if (event.target === event.currentTarget) {
-              handleInputMouseDown(event);
-            }
-          },
-          ...((hasClearIcon || hasPopupIcon) && {
-            endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
-              className: classes.endAdornment,
-              ownerState: ownerState,
-              children: [hasClearIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteClearIndicator, {
-                ...getClearProps(),
-                "aria-label": clearText,
-                title: clearText,
-                ownerState: ownerState,
-                ...clearIndicatorSlotProps,
-                className: (0, _clsx.default)(classes.clearIndicator, clearIndicatorSlotProps?.className),
-                children: clearIcon
-              }) : null, hasPopupIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopupIndicator, {
-                ...getPopupIndicatorProps(),
-                disabled: disabled,
-                "aria-label": popupOpen ? closeText : openText,
-                title: popupOpen ? closeText : openText,
+        slotProps: {
+          inputLabel: getInputLabelProps(),
+          input: {
+            ref: setAnchorEl,
+            className: classes.inputRoot,
+            startAdornment,
+            onMouseDown: event => {
+              if (event.target === event.currentTarget) {
+                handleInputMouseDown(event);
+              }
+            },
+            ...((hasClearIcon || hasPopupIcon) && {
+              endAdornment: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompleteEndAdornment, {
+                className: classes.endAdornment,
                 ownerState: ownerState,
-                ...popupIndicatorSlotProps,
-                className: (0, _clsx.default)(classes.popupIndicator, popupIndicatorSlotProps?.className),
-                children: popupIcon
-              }) : null]
+                children: [hasClearIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ClearIndicatorSlot, {
+                  ...clearIndicatorProps,
+                  children: clearIcon
+                }) : null, hasPopupIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(PopupIndicatorSlot, {
+                  ...popupIndicatorProps,
+                  children: popupIcon
+                }) : null]
+              })
             })
-          })
-        },
-        inputProps: {
-          className: classes.input,
-          disabled,
-          readOnly,
-          ...getInputProps()
+          },
+          htmlInput: {
+            className: classes.input,
+            disabled,
+            readOnly,
+            ...getInputProps()
+          }
         }
       })
     }), anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
@@ -733,7 +736,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           },
           children: noOptionsText
         }) : null, groupedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListboxSlot, {
-          as: ListboxComponentProp,
           ...listboxProps,
           children: groupedOptions.map((option, index) => {
             if (groupBy) {
@@ -787,11 +789,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @default false
    */
   blurOnSelect: _propTypes.default.oneOfType([_propTypes.default.oneOf(['mouse', 'touch']), _propTypes.default.bool]),
-  /**
-   * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
-   * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ChipProps: _propTypes.default.object,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -832,16 +829,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @default 'Close'
    */
   closeText: _propTypes.default.string,
-  /**
-   * The props used for each slot inside.
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps: _propTypes.default.shape({
-    clearIndicator: _propTypes.default.object,
-    paper: _propTypes.default.object,
-    popper: _propTypes.default.object,
-    popupIndicator: _propTypes.default.object
-  }),
   /**
    * The default value. Use when the component is not controlled.
    * @default props.multiple ? [] : null
@@ -990,17 +977,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @default -1
    */
   limitTags: _integerPropType.default,
-  /**
-   * The component used to render the listbox.
-   * @default 'ul'
-   * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxComponent: _propTypes.default.elementType,
-  /**
-   * Props applied to the Listbox element.
-   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ListboxProps: _propTypes.default.object,
   /**
    * If `true`, the component is in a loading state.
    * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, for example `options` are empty).
@@ -1090,18 +1066,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * A list of options that will be shown in the Autocomplete.
    */
   options: _propTypes.default.array.isRequired,
-  /**
-   * The component used to render the body of the popup.
-   * @default Paper
-   * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PaperComponent: _propTypes.default.elementType,
-  /**
-   * The component used to position the popup.
-   * @default Popper
-   * @deprecated Use `slots.popper` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PopperComponent: _propTypes.default.elementType,
   /**
    * The icon to display in place of the default popup icon.
    * @default <ArrowDropDownIcon />
@@ -1143,17 +1107,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {ReactNode}
    */
   renderOption: _propTypes.default.func,
-  /**
-   * Render the selected value when doing multiple selections.
-   *
-   * @deprecated Use `renderValue` prop instead
-   *
-   * @param {Value[]} value The `value` provided to the component.
-   * @param {function} getTagProps A tag props getter.
-   * @param {object} ownerState The state of the Autocomplete component.
-   * @returns {ReactNode}
-   */
-  renderTags: _propTypes.default.func,
   /**
    * Renders the selected value(s) as rich content in the input for both single and multiple selections.
    *
@@ -1184,16 +1137,20 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
     listbox: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     paper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
     popper: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    popupIndicator: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+    popupIndicator: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: _propTypes.default.shape({
+    clearIndicator: _propTypes.default.elementType,
     listbox: _propTypes.default.elementType,
     paper: _propTypes.default.elementType,
-    popper: _propTypes.default.elementType
+    popper: _propTypes.default.elementType,
+    popupIndicator: _propTypes.default.elementType,
+    root: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.