@mui/material 5.10.12 → 5.10.14

package/Autocomplete/Autocomplete.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,63 +11,34 @@ Object.defineProperty(exports, "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 _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _utils = require("@mui/utils");
-
 var _base = require("@mui/base");
-
 var _system = require("@mui/system");
-
 var _Popper = _interopRequireDefault(require("../Popper"));
-
 var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
-
 var _Paper = _interopRequireDefault(require("../Paper"));
-
 var _IconButton = _interopRequireDefault(require("../IconButton"));
-
 var _Chip = _interopRequireDefault(require("../Chip"));
-
 var _inputClasses = _interopRequireDefault(require("../Input/inputClasses"));
-
 var _inputBaseClasses = _interopRequireDefault(require("../InputBase/inputBaseClasses"));
-
 var _outlinedInputClasses = _interopRequireDefault(require("../OutlinedInput/outlinedInputClasses"));
-
 var _filledInputClasses = _interopRequireDefault(require("../FilledInput/filledInputClasses"));
-
 var _Close = _interopRequireDefault(require("../internal/svg-icons/Close"));
-
 var _ArrowDropDown = _interopRequireDefault(require("../internal/svg-icons/ArrowDropDown"));
-
 var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-
 var _styled = _interopRequireDefault(require("../styles/styled"));
-
 var _autocompleteClasses = _interopRequireWildcard(require("./autocompleteClasses"));
-
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-
 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", "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", "value"];
-
+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", "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"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -100,7 +70,6 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _base.unstable_composeClasses)(slots, _autocompleteClasses.getAutocompleteUtilityClass, classes);
 };
-
 const AutocompleteRoot = (0, _styled.default)('div', {
   name: 'MuiAutocomplete',
   slot: 'Root',
@@ -133,7 +102,6 @@ const AutocompleteRoot = (0, _styled.default)('div', {
   [`&.${_autocompleteClasses.default.focused} .${_autocompleteClasses.default.clearIndicator}`]: {
     visibility: 'visible'
   },
-
   /* Avoid double tap issue on iOS */
   '@media (pointer: fine)': {
     [`&:hover .${_autocompleteClasses.default.clearIndicator}`]: {
@@ -241,8 +209,8 @@ const AutocompleteEndAdornment = (0, _styled.default)('div', {
   position: 'absolute',
   right: 0,
   top: 'calc(50% - 14px)' // Center vertically
-
 });
+
 const AutocompleteClearIndicator = (0, _styled.default)(_IconButton.default, {
   name: 'MuiAutocomplete',
   slot: 'ClearIndicator',
@@ -393,70 +361,68 @@ const AutocompleteGroupUl = (0, _styled.default)('ul', {
   }
 });
 const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
-
+  var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
   const props = (0, _useThemeProps.default)({
     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 = option => {
-      var _option$label;
-
-      return (_option$label = option.label) != null ? _option$label : option;
-    },
-    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'
-  } = props,
-        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+      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 = option => {
+        var _option$label;
+        return (_option$label = option.label) != null ? _option$label : option;
+      },
+      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);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   const {
@@ -482,8 +448,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     componentName: 'Autocomplete'
   }));
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
-  const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false; // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
+  const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
 
+  // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   const ownerState = (0, _extends2.default)({}, props, {
     disablePortal,
     focused,
@@ -496,13 +463,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   const classes = useUtilityClasses(ownerState);
   let startAdornment;
-
   if (multiple && value.length > 0) {
     const getCustomizedTagProps = params => (0, _extends2.default)({
       className: classes.tag,
       disabled
     }, getTagProps(params));
-
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
@@ -514,10 +479,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       }), ChipProps)));
     }
   }
-
   if (limitTags > -1 && Array.isArray(startAdornment)) {
     const more = startAdornment.length - limitTags;
-
     if (!focused && more > 0) {
       startAdornment = startAdornment.splice(0, limitTags);
       startAdornment.push( /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -526,7 +489,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       }, startAdornment.length));
     }
   }
-
   const defaultRenderGroup = params => /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteGroupLabel, {
       className: classes.groupLabel,
@@ -539,15 +501,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       children: params.children
     })]
   }, params.key);
-
   const renderGroup = renderGroupProp || defaultRenderGroup;
-
   const defaultRenderOption = (props2, option) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", (0, _extends2.default)({}, props2, {
     children: getOptionLabel(option)
   }));
-
   const renderOption = renderOptionProp || defaultRenderOption;
-
   const renderListOption = (option, index) => {
     const optionProps = getOptionProps({
       option,
@@ -560,7 +518,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       inputValue
     });
   };
-
+  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;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteRoot, (0, _extends2.default)({
       ref: ref,
@@ -585,16 +546,16 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
               "aria-label": clearText,
               title: clearText,
               ownerState: ownerState
-            }, componentsProps.clearIndicator, {
-              className: (0, _clsx.default)(classes.clearIndicator, (_componentsProps$clea = componentsProps.clearIndicator) == null ? void 0 : _componentsProps$clea.className),
+            }, 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
-            }, componentsProps.popupIndicator, {
-              className: (0, _clsx.default)(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
+            }, popupIndicatorSlotProps, {
+              className: (0, _clsx.default)(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
               children: popupIcon
             })) : null]
           })
@@ -615,13 +576,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       role: "presentation",
       anchorEl: anchorEl,
       open: popupOpen
-    }, componentsProps.popper, {
-      className: (0, _clsx.default)(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
+    }, popperSlotProps, {
+      className: (0, _clsx.default)(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, (0, _extends2.default)({
         ownerState: ownerState,
         as: PaperComponent
-      }, componentsProps.paper, {
-        className: (0, _clsx.default)(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
+      }, paperSlotProps, {
+        className: (0, _clsx.default)(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
@@ -648,7 +609,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
                 children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
               });
             }
-
             return renderListOption(option, index);
           })
         })) : null]
@@ -656,14 +616,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     })) : null]
   });
 });
-process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * If `true`, the portion of the selected suggestion that has not been typed by the user,
    * known as the completion string, appears inline after the input cursor in the textbox.
@@ -671,13 +628,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default false
    */
   autoComplete: _propTypes.default.bool,
-
   /**
    * If `true`, the first option is automatically highlighted.
    * @default false
    */
   autoHighlight: _propTypes.default.bool,
-
   /**
    * If `true`, the selected option becomes the value of the input
    * when the Autocomplete loses focus unless the user chooses
@@ -685,7 +640,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default false
    */
   autoSelect: _propTypes.default.bool,
-
   /**
    * Control if the input should be blurred when an option is selected:
    *
@@ -696,28 +650,23 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default false
    */
   blurOnSelect: _propTypes.default.oneOfType([_propTypes.default.oneOf(['mouse', 'touch']), _propTypes.default.bool]),
-
   /**
    * Props applied to the [`Chip`](/material-ui/api/chip/) element.
    */
   ChipProps: _propTypes.default.object,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: _propTypes.default.object,
-
   /**
    * @ignore
    */
   className: _propTypes.default.string,
-
   /**
    * The icon to display in place of the default clear icon.
    * @default <ClearIcon fontSize="small" />
    */
   clearIcon: _propTypes.default.node,
-
   /**
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
@@ -726,13 +675,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default !props.freeSolo
    */
   clearOnBlur: _propTypes.default.bool,
-
   /**
    * If `true`, clear all values when the user presses escape and the popup is closed.
    * @default false
    */
   clearOnEscape: _propTypes.default.bool,
-
   /**
    * Override the default text for the *clear* icon button.
    *
@@ -740,7 +687,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default 'Clear'
    */
   clearText: _propTypes.default.string,
-
   /**
    * Override the default text for the *close popup* icon button.
    *
@@ -748,7 +694,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default 'Close'
    */
   closeText: _propTypes.default.string,
-
   /**
    * The props used for each slot inside.
    * @default {}
@@ -759,7 +704,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
     popper: _propTypes.default.object,
     popupIndicator: _propTypes.default.object
   }),
-
   /**
    * The default value. Use when the component is not controlled.
    * @default props.multiple ? [] : null
@@ -768,46 +712,38 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
     if (props.multiple && props.defaultValue !== undefined && !Array.isArray(props.defaultValue)) {
       return new Error(['MUI: The Autocomplete expects the `defaultValue` prop to be an array when `multiple={true}` or undefined.', `However, ${props.defaultValue} was provided.`].join('\n'));
     }
-
     return null;
   }),
-
   /**
    * If `true`, the input can't be cleared.
    * @default false
    */
   disableClearable: _propTypes.default.bool,
-
   /**
    * If `true`, the popup won't close when a value is selected.
    * @default false
    */
   disableCloseOnSelect: _propTypes.default.bool,
-
   /**
    * If `true`, the component is disabled.
    * @default false
    */
   disabled: _propTypes.default.bool,
-
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
    */
   disabledItemsFocusable: _propTypes.default.bool,
-
   /**
    * If `true`, the list box in the popup will not wrap focus.
    * @default false
    */
   disableListWrap: _propTypes.default.bool,
-
   /**
    * If `true`, the `Popper` content will be under the DOM hierarchy of the parent component.
    * @default false
    */
   disablePortal: _propTypes.default.bool,
-
   /**
    * A function that determines the filtered options to be rendered on search.
    *
@@ -816,31 +752,26 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {T[]}
    */
   filterOptions: _propTypes.default.func,
-
   /**
    * If `true`, hide the selected options from the list box.
    * @default false
    */
   filterSelectedOptions: _propTypes.default.bool,
-
   /**
    * Force the visibility display of the popup icon.
    * @default 'auto'
    */
   forcePopupIcon: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.bool]),
-
   /**
    * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
    * @default false
    */
   freeSolo: _propTypes.default.bool,
-
   /**
    * If `true`, the input will take up the full width of its container.
    * @default false
    */
   fullWidth: _propTypes.default.bool,
-
   /**
    * The label to display when the tags are truncated (`limitTags`).
    *
@@ -849,7 +780,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default (more) => `+${more}`
    */
   getLimitTagsText: _propTypes.default.func,
-
   /**
    * Used to determine the disabled state for a given option.
    *
@@ -857,7 +787,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {boolean}
    */
   getOptionDisabled: _propTypes.default.func,
-
   /**
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
@@ -869,7 +798,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default (option) => option.label ?? option
    */
   getOptionLabel: _propTypes.default.func,
-
   /**
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
@@ -878,31 +806,26 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {string}
    */
   groupBy: _propTypes.default.func,
-
   /**
    * If `true`, the component handles the "Home" and "End" keys when the popup is open.
    * It should move focus to the first option and last option, respectively.
    * @default !props.freeSolo
    */
   handleHomeEndKeys: _propTypes.default.bool,
-
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide an id it will fall back to a randomly generated one.
    */
   id: _propTypes.default.string,
-
   /**
    * If `true`, the highlight can move to the input.
    * @default false
    */
   includeInputInList: _propTypes.default.bool,
-
   /**
    * The input value.
    */
   inputValue: _propTypes.default.string,
-
   /**
    * Used to determine if the option represents the given value.
    * Uses strict equality by default.
@@ -913,32 +836,27 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {boolean}
    */
   isOptionEqualToValue: _propTypes.default.func,
-
   /**
    * The maximum number of tags that will be visible when not focused.
    * Set `-1` to disable the limit.
    * @default -1
    */
   limitTags: _utils.integerPropType,
-
   /**
    * The component used to render the listbox.
    * @default 'ul'
    */
   ListboxComponent: _propTypes.default.elementType,
-
   /**
    * Props applied to the Listbox element.
    */
   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, e.g. `options` are empty).
    * @default false
    */
   loading: _propTypes.default.bool,
-
   /**
    * Text to display when in a loading state.
    *
@@ -946,13 +864,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default 'Loading…'
    */
   loadingText: _propTypes.default.node,
-
   /**
    * If `true`, `value` must be an array and the menu will support multiple selections.
    * @default false
    */
   multiple: _propTypes.default.bool,
-
   /**
    * Text to display when there are no options.
    *
@@ -960,7 +876,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default 'No options'
    */
   noOptionsText: _propTypes.default.node,
-
   /**
    * Callback fired when the value changes.
    *
@@ -970,7 +885,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {string} [details]
    */
   onChange: _propTypes.default.func,
-
   /**
    * Callback fired when the popup requests to be closed.
    * Use in controlled mode (see open).
@@ -979,7 +893,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"selectOption"`, `"removeOption"`, `"blur"`.
    */
   onClose: _propTypes.default.func,
-
   /**
    * Callback fired when the highlight option changes.
    *
@@ -988,7 +901,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`.
    */
   onHighlightChange: _propTypes.default.func,
-
   /**
    * Callback fired when the input value changes.
    *
@@ -997,7 +909,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
    */
   onInputChange: _propTypes.default.func,
-
   /**
    * Callback fired when the popup requests to be opened.
    * Use in controlled mode (see open).
@@ -1005,18 +916,15 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {React.SyntheticEvent} event The event source of the callback.
    */
   onOpen: _propTypes.default.func,
-
   /**
    * If `true`, the component is shown.
    */
   open: _propTypes.default.bool,
-
   /**
    * If `true`, the popup will open on input focus.
    * @default false
    */
   openOnFocus: _propTypes.default.bool,
-
   /**
    * Override the default text for the *open popup* icon button.
    *
@@ -1024,36 +932,30 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default 'Open'
    */
   openText: _propTypes.default.string,
-
   /**
    * Array of options.
    */
   options: _propTypes.default.array.isRequired,
-
   /**
    * The component used to render the body of the popup.
    * @default Paper
    */
   PaperComponent: _propTypes.default.elementType,
-
   /**
    * The component used to position the popup.
    * @default Popper
    */
   PopperComponent: _propTypes.default.elementType,
-
   /**
    * The icon to display in place of the default popup icon.
    * @default <ArrowDropDownIcon />
    */
   popupIcon: _propTypes.default.node,
-
   /**
    * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
    * @default false
    */
   readOnly: _propTypes.default.bool,
-
   /**
    * Render the group.
    *
@@ -1061,7 +963,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {ReactNode}
    */
   renderGroup: _propTypes.default.func,
-
   /**
    * Render the input.
    *
@@ -1069,7 +970,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {ReactNode}
    */
   renderInput: _propTypes.default.func.isRequired,
-
   /**
    * Render the option, use `getOptionLabel` by default.
    *
@@ -1079,7 +979,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {ReactNode}
    */
   renderOption: _propTypes.default.func,
-
   /**
    * Render the selected value.
    *
@@ -1089,27 +988,31 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {ReactNode}
    */
   renderTags: _propTypes.default.func,
-
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.
    * @default !props.freeSolo
    */
   selectOnFocus: _propTypes.default.bool,
-
   /**
    * The size of the component.
    * @default 'medium'
    */
-  size: _propTypes.default
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([_propTypes.default.oneOf(['small', 'medium']), _propTypes.default.string]),
-
+  size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['small', 'medium']), _propTypes.default.string]),
+  /**
+   * 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
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-
   /**
    * The value of the autocomplete.
    *
@@ -1120,7 +1023,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
     if (props.multiple && props.value !== undefined && !Array.isArray(props.value)) {
       return new Error(['MUI: The Autocomplete expects the `value` prop to be an array when `multiple={true}` or undefined.', `However, ${props.value} was provided.`].join('\n'));
     }
-
     return null;
   })
 } : void 0;