@mui/material 6.0.0-alpha.6 → 6.0.0-alpha.7

package/umd/material-ui.development.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.6
+ * @mui/material v6.0.0-alpha.7
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -482,12 +482,11 @@
   function _objectWithoutPropertiesLoose(source, excluded) {
     if (source == null) return {};
     var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
+    for (var key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+      }
     }
     return target;
   }
@@ -9513,12 +9512,12 @@
     if (defaultScheme) {
       // default color scheme vars should be merged last to set as default
       var _cssVarsParser3 = cssVarsParser(defaultScheme, parserConfig),
-        _css = _cssVarsParser3.css,
+        css = _cssVarsParser3.css,
         vars = _cssVarsParser3.vars,
         varsWithDefaults = _cssVarsParser3.varsWithDefaults;
       themeVars = deepmerge(themeVars, varsWithDefaults);
       colorSchemesMap[defaultColorScheme] = {
-        css: _css,
+        css: css,
         vars: vars
       };
     }
@@ -9544,8 +9543,8 @@
         rest = _objectWithoutProperties(colorSchemesMap, [colorScheme].map(toPropertyKey));
       if (defaultSchemeVal) {
         // default color scheme has to come before other color schemes
-        var _css2 = defaultSchemeVal.css;
-        insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, _extends({}, _css2))) || "[".concat(theme.attribute || 'data-color-scheme', "=\"").concat(colorScheme, "\"]"), _css2);
+        var _css = defaultSchemeVal.css;
+        insertStyleSheet((getSelector == null ? void 0 : getSelector(colorScheme, _extends({}, _css))) || "[".concat(theme.attribute || 'data-color-scheme', "=\"").concat(colorScheme, "\"]"), _css);
       }
       Object.entries(rest).forEach(function (_ref7) {
         var _ref8 = _slicedToArray(_ref7, 2),
@@ -23672,22 +23671,24 @@
         size = ownerState.size;
       return [_defineProperty({}, "& .".concat(autocompleteClasses$1.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses$1.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses$1.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses$1.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses$1.input), inputFocused && styles.inputFocused), styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
     }
-  })((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "&.".concat(autocompleteClasses$1.focused, " .").concat(autocompleteClasses$1.clearIndicator), {
-    visibility: 'visible'
-  }), '@media (pointer: fine)', _defineProperty({}, "&:hover .".concat(autocompleteClasses$1.clearIndicator), {
-    visibility: 'visible'
-  })), "& .".concat(autocompleteClasses$1.tag), {
+  })((_styled = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_styled, "& .".concat(autocompleteClasses$1.tag), {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
-  }), "& .".concat(autocompleteClasses$1.inputRoot), _defineProperty(_defineProperty(_defineProperty({
-    flexWrap: 'wrap'
-  }, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
+  }), "& .".concat(autocompleteClasses$1.inputRoot), _defineProperty(_defineProperty(_defineProperty({}, ".".concat(autocompleteClasses$1.hasPopupIcon, "&, .").concat(autocompleteClasses$1.hasClearIcon, "&"), {
     paddingRight: 26 + 4
   }), ".".concat(autocompleteClasses$1.hasPopupIcon, ".").concat(autocompleteClasses$1.hasClearIcon, "&"), {
     paddingRight: 52 + 4
   }), "& .".concat(autocompleteClasses$1.input), {
     width: 0,
     minWidth: 30
+  })), "&.".concat(autocompleteClasses$1.focused), _defineProperty(_defineProperty({}, "& .".concat(autocompleteClasses$1.clearIndicator), {
+    visibility: 'visible'
+  }), "& .".concat(autocompleteClasses$1.input), {
+    minWidth: 0
+  })), '@media (pointer: fine)', _defineProperty(_defineProperty({}, "&:hover .".concat(autocompleteClasses$1.clearIndicator), {
+    visibility: 'visible'
+  }), "&:hover .".concat(autocompleteClasses$1.input), {
+    minWidth: 0
   })), "& .".concat(inputClasses$1.root), {
     paddingBottom: 1,
     '& .MuiInput-input': {
@@ -23765,6 +23766,13 @@
     style: _defineProperty({}, "& .".concat(autocompleteClasses$1.input), {
       opacity: 1
     })
+  }, {
+    props: {
+      multiple: true
+    },
+    style: _defineProperty({}, "& .".concat(autocompleteClasses$1.inputRoot), {
+      flexWrap: 'wrap'
+    })
   }])));
   var AutocompleteEndAdornment = styled$1('div', {
     name: 'MuiAutocomplete',
@@ -23947,7 +23955,6 @@
     paddingLeft: 24
   }));
   var Autocomplete = /*#__PURE__*/React__namespace.forwardRef(function Autocomplete(inProps, ref) {
-    var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
     var props = useThemeProps$1p({
       props: inProps,
       name: 'MuiAutocomplete'
@@ -23958,7 +23965,7 @@
       props.autoHighlight;
       props.autoSelect;
       props.blurOnSelect;
-      var ChipProps = props.ChipProps,
+      var ChipPropsProp = props.ChipProps,
       className = props.className,
       _props$clearIcon = props.clearIcon,
       clearIcon = _props$clearIcon === void 0 ? _ClearIcon || (_ClearIcon = /*#__PURE__*/jsxRuntime_1(ClearIcon, {
@@ -23971,8 +23978,7 @@
       clearText = _props$clearText === void 0 ? 'Clear' : _props$clearText,
       _props$closeText = props.closeText,
       closeText = _props$closeText === void 0 ? 'Close' : _props$closeText,
-      _props$componentsProp = props.componentsProps,
-      componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
+      componentsProps = props.componentsProps,
       _props$defaultValue = props.defaultValue;
       _props$defaultValue === void 0 ? props.multiple ? [] : null : _props$defaultValue;
       var _props$disableClearab = props.disableClearable,
@@ -24008,9 +24014,8 @@
       props.inputValue;
       var _props$limitTags = props.limitTags,
       limitTags = _props$limitTags === void 0 ? -1 : _props$limitTags,
-      _props$ListboxCompone = props.ListboxComponent,
-      ListboxComponent = _props$ListboxCompone === void 0 ? 'ul' : _props$ListboxCompone,
-      ListboxProps = props.ListboxProps,
+      ListboxComponentProp = props.ListboxComponent,
+      ListboxPropsProp = props.ListboxProps,
       _props$loading = props.loading,
       loading = _props$loading === void 0 ? false : _props$loading,
       _props$loadingText = props.loadingText,
@@ -24029,10 +24034,8 @@
       var _props$openText = props.openText,
       openText = _props$openText === void 0 ? 'Open' : _props$openText;
       props.options;
-      var _props$PaperComponent = props.PaperComponent,
-      PaperComponent = _props$PaperComponent === void 0 ? Paper$1 : _props$PaperComponent,
-      _props$PopperComponen = props.PopperComponent,
-      PopperComponent = _props$PopperComponen === void 0 ? Popper$1 : _props$PopperComponen,
+      var PaperComponentProp = props.PaperComponent,
+      PopperComponentProp = props.PopperComponent,
       _props$popupIcon = props.popupIcon,
       popupIcon = _props$popupIcon === void 0 ? _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/jsxRuntime_1(ArrowDropDownIcon, {})) : _props$popupIcon,
       _props$readOnly = props.readOnly,
@@ -24045,10 +24048,12 @@
       _props$selectOnFocus === void 0 ? !props.freeSolo : _props$selectOnFocus;
       var _props$size = props.size,
       size = _props$size === void 0 ? 'medium' : _props$size,
+      _props$slots = props.slots,
+      slots = _props$slots === void 0 ? {} : _props$slots,
       _props$slotProps = props.slotProps,
       slotProps = _props$slotProps === void 0 ? {} : _props$slotProps;
       props.value;
-      var other = _objectWithoutProperties(props, ["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"]);
+      var other = _objectWithoutProperties(props, ["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", "slots", "slotProps", "value"]);
     /* eslint-enable @typescript-eslint/no-unused-vars */
     var _useAutocomplete = useAutocomplete(_extends({}, props, {
         componentName: 'Autocomplete'
@@ -24076,12 +24081,9 @@
     var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
     var _getInputProps = getInputProps(),
       handleInputMouseDown = _getInputProps.onMouseDown;
-    var _ref15 = ListboxProps != null ? ListboxProps : {},
-      externalListboxRef = _ref15.ref;
     var _getListboxProps = getListboxProps(),
       listboxRef = _getListboxProps.ref,
       otherListboxProps = _objectWithoutProperties(_getListboxProps, ["ref"]);
-    var combinedListboxRef = useForkRef(listboxRef, externalListboxRef);
     var defaultGetOptionLabel = function defaultGetOptionLabel(option) {
       var _option$label;
       return (_option$label = option.label) != null ? _option$label : option;
@@ -24102,6 +24104,55 @@
       size: size
     });
     var classes = useUtilityClasses$1y(ownerState);
+    var externalForwardedProps = {
+      slots: _extends({
+        listbox: ListboxComponentProp,
+        paper: PaperComponentProp,
+        popper: PopperComponentProp
+      }, slots),
+      slotProps: _extends({
+        chip: ChipPropsProp,
+        listbox: ListboxPropsProp
+      }, componentsProps, slotProps)
+    };
+    var _useSlot = useSlot('listbox', {
+        elementType: 'ul',
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState,
+        className: classes.listbox,
+        additionalProps: otherListboxProps,
+        ref: listboxRef
+      }),
+      _useSlot2 = _slicedToArray(_useSlot, 2),
+      ListboxSlot = _useSlot2[0],
+      listboxProps = _useSlot2[1];
+    var _useSlot3 = useSlot('paper', {
+        elementType: Paper$1,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState,
+        className: classes.paper
+      }),
+      _useSlot4 = _slicedToArray(_useSlot3, 2),
+      PaperSlot = _useSlot4[0],
+      paperProps = _useSlot4[1];
+    var _useSlot5 = useSlot('popper', {
+        elementType: Popper$1,
+        externalForwardedProps: externalForwardedProps,
+        ownerState: ownerState,
+        className: classes.popper,
+        additionalProps: {
+          disablePortal: disablePortal,
+          style: {
+            width: anchorEl ? anchorEl.clientWidth : null
+          },
+          role: 'presentation',
+          anchorEl: anchorEl,
+          open: popupOpen
+        }
+      }),
+      _useSlot6 = _slicedToArray(_useSlot5, 2),
+      PopperSlot = _useSlot6[0],
+      popperProps = _useSlot6[1];
     var startAdornment;
     if (multiple && value.length > 0) {
       var getCustomizedTagProps = function getCustomizedTagProps(params) {
@@ -24114,12 +24165,15 @@
         startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
       } else {
         startAdornment = value.map(function (option, index) {
+          var _getCustomizedTagProp = getCustomizedTagProps({
+              index: index
+            }),
+            key = _getCustomizedTagProp.key,
+            customTagProps = _objectWithoutProperties(_getCustomizedTagProp, ["key"]);
           return /*#__PURE__*/jsxRuntime_1(Chip$1, _extends({
             label: getOptionLabel(option),
             size: size
-          }, getCustomizedTagProps({
-            index: index
-          }), ChipProps));
+          }, customTagProps, externalForwardedProps.slotProps.chip), key);
         });
       }
     }
@@ -24168,28 +24222,15 @@
         inputValue: inputValue
       }, ownerState);
     };
-    var clearIndicatorSlotProps = (_slotProps$clearIndic = slotProps.clearIndicator) != null ? _slotProps$clearIndic : componentsProps.clearIndicator;
-    var paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
-    var popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
-    var popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
+    var clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
+    var popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
     var renderAutocompletePopperChildren = function renderAutocompletePopperChildren(children) {
       return /*#__PURE__*/jsxRuntime_1(AutocompletePopper, _extends({
-        as: PopperComponent,
-        disablePortal: disablePortal,
-        style: {
-          width: anchorEl ? anchorEl.clientWidth : null
-        },
-        ownerState: ownerState,
-        role: "presentation",
-        anchorEl: anchorEl,
-        open: popupOpen
-      }, popperSlotProps, {
-        className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
+        as: PopperSlot
+      }, popperProps, {
         children: /*#__PURE__*/jsxRuntime_1(AutocompletePaper, _extends({
-          ownerState: ownerState,
-          as: PaperComponent
-        }, paperSlotProps, {
-          className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+          as: PaperSlot
+        }, paperProps, {
           children: children
         }))
       }));
@@ -24197,11 +24238,8 @@
     var autocompletePopper = null;
     if (groupedOptions.length > 0) {
       autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/jsxRuntime_1(AutocompleteListbox, _extends({
-        as: ListboxComponent,
-        className: classes.listbox,
-        ownerState: ownerState
-      }, otherListboxProps, ListboxProps, {
-        ref: combinedListboxRef,
+        as: ListboxSlot
+      }, listboxProps, {
         children: groupedOptions.map(function (option, index) {
           if (groupBy) {
             return renderGroup({
@@ -24324,6 +24362,7 @@
     blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),
     /**
      * Props applied to the [`Chip`](/material-ui/api/chip/) element.
+     * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     ChipProps: PropTypes.object,
     /**
@@ -24368,7 +24407,7 @@
     closeText: PropTypes.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.shape({
       clearIndicator: PropTypes.object,
@@ -24526,10 +24565,12 @@
     /**
      * The component used to render the listbox.
      * @default 'ul'
+     * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     ListboxComponent: PropTypes.elementType,
     /**
      * Props applied to the Listbox element.
+     * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     ListboxProps: PropTypes.object,
     /**
@@ -24624,11 +24665,13 @@
     /**
      * The component used to render the body of the popup.
      * @default Paper
+     * @deprecated Use `slots.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     PaperComponent: PropTypes.elementType,
     /**
      * The component used to position the popup.
      * @default Popper
+     * @deprecated Use `slots.popper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     PopperComponent: PropTypes.elementType,
     /**
@@ -24689,11 +24732,22 @@
      * The props used for each slot inside.
      * @default {}
      */
-    slotProps: PropTypes.shape({
-      clearIndicator: PropTypes.object,
-      paper: PropTypes.object,
-      popper: PropTypes.object,
-      popupIndicator: PropTypes.object
+    slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
+      chip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+      popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    }),
+    /**
+     * The components used for each slot inside.
+     * @default {}
+     */
+    slots: PropTypes.shape({
+      listbox: PropTypes.elementType,
+      paper: PropTypes.elementType,
+      popper: PropTypes.elementType
     }),
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.