@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/node/Autocomplete/Autocomplete.js

@@ -8,21 +8,18 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "createFilterOptions", {
   enumerable: true,
   get: function () {
-    return _base.createFilterOptions;
+    return _useAutocomplete.createFilterOptions;
   }
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
+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 _base = require("@mui/base");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
+var _useAutocomplete = _interopRequireWildcard(require("../useAutocomplete"));
 var _Popper = _interopRequireDefault(require("../Popper"));
 var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
 var _Paper = _interopRequireDefault(require("../Paper"));
@@ -35,16 +32,15 @@ var _filledInputClasses = _interopRequireDefault(require("../FilledInput/filledI
 var _Close = _interopRequireDefault(require("../internal/svg-icons/Close"));
 var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _autocompleteClasses = _interopRequireWildcard(require("./autocompleteClasses"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _ClearIcon, _ArrowDropDownIcon;
-const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionKey", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
-  _excluded2 = ["ref"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAutocomplete');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -118,7 +114,6 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
     maxWidth: 'calc(100% - 6px)'
   },
   [`& .${_autocompleteClasses.default.inputRoot}`]: {
-    flexWrap: 'wrap',
     [`.${_autocompleteClasses.default.hasPopupIcon}&, .${_autocompleteClasses.default.hasClearIcon}&`]: {
       paddingRight: 26 + 4
     },
@@ -236,6 +231,15 @@ const AutocompleteRoot = (0, _zeroStyled.styled)('div', {
         opacity: 1
       }
     }
+  }, {
+    props: {
+      multiple: true
+    },
+    style: {
+      [`& .${_autocompleteClasses.default.inputRoot}`]: {
+        flexWrap: 'wrap'
+      }
+    }
   }]
 });
 const AutocompleteEndAdornment = (0, _zeroStyled.styled)('div', {
@@ -263,7 +267,10 @@ const AutocompletePopupIndicator = (0, _zeroStyled.styled)(_IconButton.default,
   slot: 'PopupIndicator',
   overridesResolver: ({
     ownerState
-  }, styles) => (0, _extends2.default)({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
+  }, styles) => ({
+    ...styles.popupIndicator,
+    ...(ownerState.popupOpen && styles.popupIndicatorOpen)
+  })
 })({
   padding: 2,
   marginRight: -2,
@@ -287,7 +294,7 @@ const AutocompletePopper = (0, _zeroStyled.styled)(_Popper.default, {
       [`& .${_autocompleteClasses.default.option}`]: styles.option
     }, styles.popper, ownerState.disablePortal && styles.popperDisablePortal];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   zIndex: (theme.vars || theme).zIndex.modal,
@@ -299,41 +306,42 @@ const AutocompletePopper = (0, _zeroStyled.styled)(_Popper.default, {
       position: 'absolute'
     }
   }]
-}));
+})));
 const AutocompletePaper = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiAutocomplete',
   slot: 'Paper',
   overridesResolver: (props, styles) => styles.paper
-})(({
+})((0, _memoTheme.default)(({
   theme
-}) => (0, _extends2.default)({}, theme.typography.body1, {
+}) => ({
+  ...theme.typography.body1,
   overflow: 'auto'
-}));
+})));
 const AutocompleteLoading = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
   slot: 'Loading',
   overridesResolver: (props, styles) => styles.loading
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
-}));
+})));
 const AutocompleteNoOptions = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
   slot: 'NoOptions',
   overridesResolver: (props, styles) => styles.noOptions
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   color: (theme.vars || theme).palette.text.secondary,
   padding: '14px 16px'
-}));
+})));
 const AutocompleteListbox = (0, _zeroStyled.styled)('div', {
   name: 'MuiAutocomplete',
   slot: 'Listbox',
   overridesResolver: (props, styles) => styles.listbox
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   listStyle: 'none',
@@ -387,17 +395,17 @@ const AutocompleteListbox = (0, _zeroStyled.styled)('div', {
       }
     }
   }
-}));
+})));
 const AutocompleteGroupLabel = (0, _zeroStyled.styled)(_ListSubheader.default, {
   name: 'MuiAutocomplete',
   slot: 'GroupLabel',
   overridesResolver: (props, styles) => styles.groupLabel
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   backgroundColor: (theme.vars || theme).palette.background.paper,
   top: -8
-}));
+})));
 const AutocompleteGroupUl = (0, _zeroStyled.styled)('ul', {
   name: 'MuiAutocomplete',
   slot: 'GroupUl',
@@ -409,66 +417,80 @@ const AutocompleteGroupUl = (0, _zeroStyled.styled)('ul', {
   }
 });
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiAutocomplete'
   });
 
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
-      autoComplete = false,
-      autoHighlight = false,
-      autoSelect = false,
-      blurOnSelect = false,
-      ChipProps,
-      className,
-      clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
-        fontSize: "small"
-      })),
-      clearOnBlur = !props.freeSolo,
-      clearOnEscape = false,
-      clearText = 'Clear',
-      closeText = 'Close',
-      componentsProps = {},
-      defaultValue = props.multiple ? [] : null,
-      disableClearable = false,
-      disableCloseOnSelect = false,
-      disabled = false,
-      disabledItemsFocusable = false,
-      disableListWrap = false,
-      disablePortal = false,
-      filterSelectedOptions = false,
-      forcePopupIcon = 'auto',
-      freeSolo = false,
-      fullWidth = false,
-      getLimitTagsText = more => `+${more}`,
-      getOptionLabel: getOptionLabelProp,
-      groupBy,
-      handleHomeEndKeys = !props.freeSolo,
-      includeInputInList = false,
-      limitTags = -1,
-      ListboxComponent = 'ul',
-      ListboxProps,
-      loading = false,
-      loadingText = 'Loading…',
-      multiple = false,
-      noOptionsText = 'No options',
-      openOnFocus = false,
-      openText = 'Open',
-      PaperComponent = _Paper.default,
-      PopperComponent = _Popper.default,
-      popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArrowDropDown.default, {})),
-      readOnly = false,
-      renderGroup: renderGroupProp,
-      renderInput,
-      renderOption: renderOptionProp,
-      renderTags,
-      selectOnFocus = !props.freeSolo,
-      size = 'medium',
-      slotProps = {}
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+    autoComplete = false,
+    autoHighlight = false,
+    autoSelect = false,
+    blurOnSelect = false,
+    ChipProps: ChipPropsProp,
+    className,
+    clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Close.default, {
+      fontSize: "small"
+    })),
+    clearOnBlur = !props.freeSolo,
+    clearOnEscape = false,
+    clearText = 'Clear',
+    closeText = 'Close',
+    componentsProps,
+    defaultValue = props.multiple ? [] : null,
+    disableClearable = false,
+    disableCloseOnSelect = false,
+    disabled = false,
+    disabledItemsFocusable = false,
+    disableListWrap = false,
+    disablePortal = false,
+    filterOptions,
+    filterSelectedOptions = false,
+    forcePopupIcon = 'auto',
+    freeSolo = false,
+    fullWidth = false,
+    getLimitTagsText = more => `+${more}`,
+    getOptionDisabled,
+    getOptionKey,
+    getOptionLabel: getOptionLabelProp,
+    isOptionEqualToValue,
+    groupBy,
+    handleHomeEndKeys = !props.freeSolo,
+    id: idProp,
+    includeInputInList = false,
+    inputValue: inputValueProp,
+    limitTags = -1,
+    ListboxComponent: ListboxComponentProp,
+    ListboxProps: ListboxPropsProp,
+    loading = false,
+    loadingText = 'Loading…',
+    multiple = false,
+    noOptionsText = 'No options',
+    onChange,
+    onClose,
+    onHighlightChange,
+    onInputChange,
+    onOpen,
+    open,
+    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,
+    selectOnFocus = !props.freeSolo,
+    size = 'medium',
+    slots = {},
+    slotProps = {},
+    value: valueProp,
+    ...other
+  } = props;
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   const {
@@ -491,31 +513,25 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     setAnchorEl,
     inputValue,
     groupedOptions
-  } = (0, _base.useAutocomplete)((0, _extends2.default)({}, props, {
+  } = (0, _useAutocomplete.default)({
+    ...props,
     componentName: 'Autocomplete'
-  }));
+  });
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const {
     onMouseDown: handleInputMouseDown
   } = getInputProps();
   const {
-    ref: externalListboxRef
-  } = ListboxProps != null ? ListboxProps : {};
-  const _getListboxProps = getListboxProps(),
-    {
-      ref: listboxRef
-    } = _getListboxProps,
-    otherListboxProps = (0, _objectWithoutPropertiesLoose2.default)(_getListboxProps, _excluded2);
-  const combinedListboxRef = (0, _useForkRef.default)(listboxRef, externalListboxRef);
-  const defaultGetOptionLabel = option => {
-    var _option$label;
-    return (_option$label = option.label) != null ? _option$label : option;
-  };
+    ref: listboxRef,
+    ...otherListboxProps
+  } = getListboxProps();
+  const defaultGetOptionLabel = option => option.label ?? option;
   const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
-  const ownerState = (0, _extends2.default)({}, props, {
+  const ownerState = {
+    ...props,
     disablePortal,
     expanded,
     focused,
@@ -526,23 +542,75 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     inputFocused: focusedTag === -1,
     popupOpen,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots: {
+      listbox: ListboxComponentProp,
+      paper: PaperComponentProp,
+      popper: PopperComponentProp,
+      ...slots
+    },
+    slotProps: {
+      chip: ChipPropsProp,
+      listbox: ListboxPropsProp,
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [ListboxSlot, listboxProps] = (0, _useSlot.default)('listbox', {
+    elementType: 'ul',
+    externalForwardedProps,
+    ownerState,
+    className: classes.listbox,
+    additionalProps: otherListboxProps,
+    ref: listboxRef
+  });
+  const [PaperSlot, paperProps] = (0, _useSlot.default)('paper', {
+    elementType: _Paper.default,
+    externalForwardedProps,
+    ownerState,
+    className: classes.paper
+  });
+  const [PopperSlot, popperProps] = (0, _useSlot.default)('popper', {
+    elementType: _Popper.default,
+    externalForwardedProps,
+    ownerState,
+    className: classes.popper,
+    additionalProps: {
+      disablePortal,
+      style: {
+        width: anchorEl ? anchorEl.clientWidth : null
+      },
+      role: 'presentation',
+      anchorEl,
+      open: popupOpen
+    }
+  });
   let startAdornment;
   if (multiple && value.length > 0) {
-    const getCustomizedTagProps = params => (0, _extends2.default)({
+    const getCustomizedTagProps = params => ({
       className: classes.tag,
-      disabled
-    }, getTagProps(params));
+      disabled,
+      ...getTagProps(params)
+    });
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
-      startAdornment = value.map((option, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, (0, _extends2.default)({
-        label: getOptionLabel(option),
-        size: size
-      }, getCustomizedTagProps({
-        index
-      }), ChipProps)));
+      startAdornment = value.map((option, index) => {
+        const {
+          key,
+          ...customTagProps
+        } = getCustomizedTagProps({
+          index
+        });
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chip.default, {
+          label: getOptionLabel(option),
+          size: size,
+          ...customTagProps,
+          ...externalForwardedProps.slotProps.chip
+        }, key);
+      });
     }
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
@@ -570,9 +638,14 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const renderGroup = renderGroupProp || defaultRenderGroup;
   const defaultRenderOption = (props2, option) => {
     // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
-    return /*#__PURE__*/(0, _react.createElement)("li", (0, _extends2.default)({}, props2, {
-      key: props2.key
-    }), getOptionLabel(option));
+    const {
+      key,
+      ...otherProps
+    } = props2;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+      ...otherProps,
+      children: getOptionLabel(option)
+    }, key);
   };
   const renderOption = renderOptionProp || defaultRenderOption;
   const renderListOption = (option, index) => {
@@ -580,46 +653,31 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       option,
       index
     });
-    return renderOption((0, _extends2.default)({}, optionProps, {
+    return renderOption({
+      ...optionProps,
       className: classes.option
-    }), option, {
+    }, option, {
       selected: optionProps['aria-selected'],
       index,
       inputValue
     }, ownerState);
   };
-  const clearIndicatorSlotProps = (_slotProps$clearIndic = slotProps.clearIndicator) != null ? _slotProps$clearIndic : componentsProps.clearIndicator;
-  const paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
-  const popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
-  const popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
-  const renderAutocompletePopperChildren = children => /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, (0, _extends2.default)({
-    as: PopperComponent,
-    disablePortal: disablePortal,
-    style: {
-      width: anchorEl ? anchorEl.clientWidth : null
-    },
-    ownerState: ownerState,
-    role: "presentation",
-    anchorEl: anchorEl,
-    open: popupOpen
-  }, popperSlotProps, {
-    className: (0, _clsx.default)(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePaper, (0, _extends2.default)({
-      ownerState: ownerState,
-      as: PaperComponent
-    }, paperSlotProps, {
-      className: (0, _clsx.default)(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+  const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
+  const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
+  const renderAutocompletePopperChildren = children => /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
+    as: PopperSlot,
+    ...popperProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePaper, {
+      as: PaperSlot,
+      ...paperProps,
       children: children
-    }))
-  }));
+    })
+  });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteListbox, (0, _extends2.default)({
-      as: ListboxComponent,
-      className: classes.listbox,
-      ownerState: ownerState
-    }, otherListboxProps, ListboxProps, {
-      ref: combinedListboxRef,
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteListbox, {
+      as: ListboxSlot,
+      ...listboxProps,
       children: groupedOptions.map((option, index) => {
         if (groupBy) {
           return renderGroup({
@@ -630,7 +688,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         }
         return renderListOption(option, index);
       })
-    })));
+    }));
   } else if (loading && groupedOptions.length === 0) {
     autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
       className: classes.loading,
@@ -650,18 +708,18 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }));
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteRoot, (0, _extends2.default)({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteRoot, {
       ref: ref,
       className: (0, _clsx.default)(classes.root, className),
-      ownerState: ownerState
-    }, getRootProps(other), {
+      ownerState: ownerState,
+      ...getRootProps(other),
       children: renderInput({
         id,
         disabled,
         fullWidth: true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
-        InputProps: (0, _extends2.default)({
+        InputProps: {
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
@@ -669,36 +727,40 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             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, (0, _extends2.default)({}, getClearProps(), {
-              "aria-label": clearText,
-              title: clearText,
-              ownerState: ownerState
-            }, clearIndicatorSlotProps, {
-              className: (0, _clsx.default)(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
-              children: clearIcon
-            })) : null, hasPopupIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopupIndicator, (0, _extends2.default)({}, getPopupIndicatorProps(), {
-              disabled: disabled,
-              "aria-label": popupOpen ? closeText : openText,
-              title: popupOpen ? closeText : openText,
-              ownerState: ownerState
-            }, popupIndicatorSlotProps, {
-              className: (0, _clsx.default)(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
-              children: popupIcon
-            })) : null]
+          },
+          ...((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,
+                ownerState: ownerState,
+                ...popupIndicatorSlotProps,
+                className: (0, _clsx.default)(classes.popupIndicator, popupIndicatorSlotProps?.className),
+                children: popupIcon
+              }) : null]
+            })
           })
-        }),
-        inputProps: (0, _extends2.default)({
+        },
+        inputProps: {
           className: classes.input,
           disabled,
-          readOnly
-        }, getInputProps())
+          readOnly,
+          ...getInputProps()
+        }
       })
-    })), anchorEl ? autocompletePopper : null]
+    }), anchorEl ? autocompletePopper : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {
@@ -784,7 +846,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   closeText: _propTypes.default.string,
   /**
    * The props used for each slot inside.
-   * @default {}
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps: _propTypes.default.shape({
     clearIndicator: _propTypes.default.object,
@@ -1003,7 +1065,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    * @param {string} value The new value of the text input.
-   * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
+   * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`, `"blur"`, `"selectOption"`, `"removeOption"`
    */
   onInputChange: _propTypes.default.func,
   /**
@@ -1034,7 +1096,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   openText: _propTypes.default.string,
   /**
-   * Array of options.
+   * A list of options that will be shown in the Autocomplete.
    */
   options: _propTypes.default.array.isRequired,
   /**
@@ -1105,11 +1167,22 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: _propTypes.default.shape({
-    clearIndicator: _propTypes.default.object,
-    paper: _propTypes.default.object,
-    popper: _propTypes.default.object,
-    popupIndicator: _propTypes.default.object
+  slotProps: _propTypes.default /* @typescript-to-proptypes-ignore */.shape({
+    chip: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    clearIndicator: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
+    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])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    listbox: _propTypes.default.elementType,
+    paper: _propTypes.default.elementType,
+    popper: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.