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

package/modern/Popper/Popper.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
 import { Popper as BasePopper } from '@mui/base/Popper';
 import useTheme from '@mui/system/useThemeWithoutDefault';
 import refType from '@mui/utils/refType';
@@ -36,25 +33,25 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     name: 'MuiPopper'
   });
   const {
-      anchorEl,
-      component,
-      components,
-      componentsProps,
-      container,
-      disablePortal,
-      keepMounted,
-      modifiers,
-      open,
-      placement,
-      popperOptions,
-      popperRef,
-      transition,
-      slots,
-      slotProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    anchorEl,
+    component,
+    components,
+    componentsProps,
+    container,
+    disablePortal,
+    keepMounted,
+    modifiers,
+    open,
+    placement,
+    popperOptions,
+    popperRef,
+    transition,
+    slots,
+    slotProps,
+    ...other
+  } = props;
   const RootComponent = slots?.root ?? components?.Root;
-  const otherProps = _extends({
+  const otherProps = {
     anchorEl,
     container,
     disablePortal,
@@ -64,18 +61,19 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     placement,
     popperOptions,
     popperRef,
-    transition
-  }, other);
-  return /*#__PURE__*/_jsx(PopperRoot, _extends({
+    transition,
+    ...other
+  };
+  return /*#__PURE__*/_jsx(PopperRoot, {
     as: component,
     direction: theme?.direction,
     slots: {
       root: RootComponent
     },
-    slotProps: slotProps ?? componentsProps
-  }, otherProps, {
+    slotProps: slotProps ?? componentsProps,
+    ...otherProps,
     ref: ref
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Radio/Radio.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checked", "checkedIcon", "color", "icon", "name", "onChange", "size", "className", "disableRipple"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -28,7 +25,10 @@ const useUtilityClasses = ownerState => {
   const slots = {
     root: ['root', `color${capitalize(color)}`, size !== 'medium' && `size${capitalize(size)}`]
   };
-  return _extends({}, classes, composeClasses(slots, getRadioUtilityClass, classes));
+  return {
+    ...classes,
+    ...composeClasses(slots, getRadioUtilityClass, classes)
+  };
 };
 const RadioRoot = styled(SwitchBase, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -57,7 +57,7 @@ const RadioRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
       }
     }
-  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color,
       disableRipple: false
@@ -67,7 +67,7 @@ const RadioRoot = styled(SwitchBase, {
         backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
       }
     }
-  })), ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette && palette.main).map(([color]) => ({
     props: {
       color
     },
@@ -109,22 +109,23 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     name: 'MuiRadio'
   });
   const {
-      checked: checkedProp,
-      checkedIcon = defaultCheckedIcon,
-      color = 'primary',
-      icon = defaultIcon,
-      name: nameProp,
-      onChange: onChangeProp,
-      size = 'medium',
-      className,
-      disableRipple = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    checked: checkedProp,
+    checkedIcon = defaultCheckedIcon,
+    color = 'primary',
+    icon = defaultIcon,
+    name: nameProp,
+    onChange: onChangeProp,
+    size = 'medium',
+    className,
+    disableRipple = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disableRipple,
     color,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const radioGroup = useRadioGroup();
   let checked = checkedProp;
@@ -138,7 +139,7 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
       name = radioGroup.name;
     }
   }
-  return /*#__PURE__*/_jsx(RadioRoot, _extends({
+  return /*#__PURE__*/_jsx(RadioRoot, {
     type: "radio",
     icon: /*#__PURE__*/React.cloneElement(icon, {
       fontSize: defaultIcon.props.fontSize ?? size
@@ -152,8 +153,9 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
     checked: checked,
     onChange: onChange,
     ref: ref,
-    className: clsx(classes.root, className)
-  }, other));
+    className: clsx(classes.root, className),
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Radio/RadioButtonIcon.js

@@ -1,6 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
@@ -51,9 +50,10 @@ function RadioButtonIcon(props) {
     classes = {},
     fontSize
   } = props;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     checked
-  });
+  };
   return /*#__PURE__*/_jsxs(RadioButtonIconRoot, {
     className: classes.root,
     ownerState: ownerState,

package/modern/RadioGroup/RadioGroup.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["actions", "children", "className", "defaultValue", "name", "onChange", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -27,17 +24,17 @@ const useUtilityClasses = props => {
 };
 const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref) {
   const {
-      // private
-      // eslint-disable-next-line react/prop-types
-      actions,
-      children,
-      className,
-      defaultValue,
-      name: nameProp,
-      onChange,
-      value: valueProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    // private
+    // eslint-disable-next-line react/prop-types
+    actions,
+    children,
+    className,
+    defaultValue,
+    name: nameProp,
+    onChange,
+    value: valueProp,
+    ...other
+  } = props;
   const rootRef = React.useRef(null);
   const classes = useUtilityClasses(props);
   const [value, setValueState] = useControlled({
@@ -70,13 +67,13 @@ const RadioGroup = /*#__PURE__*/React.forwardRef(function RadioGroup(props, ref)
   }), [name, onChange, setValueState, value]);
   return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(FormGroup, _extends({
+    children: /*#__PURE__*/_jsx(FormGroup, {
       role: "radiogroup",
       ref: handleRef,
-      className: clsx(classes.root, className)
-    }, other, {
+      className: clsx(classes.root, className),
+      ...other,
       children: children
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? RadioGroup.propTypes /* remove-proptypes */ = {

package/modern/Rating/Rating.js

@@ -1,9 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["value"],
-  _excluded2 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -189,8 +185,13 @@ const RatingDecimal = styled('span', {
   }]
 });
 function IconContainer(props) {
-  const other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx("span", _extends({}, other));
+  const {
+    value,
+    ...other
+  } = props;
+  return /*#__PURE__*/_jsx("span", {
+    ...other
+  });
 }
 process.env.NODE_ENV !== "production" ? IconContainer.propTypes = {
   value: PropTypes.number.isRequired
@@ -228,32 +229,35 @@ function RatingItem(props) {
     as: IconContainerComponent,
     value: itemValue,
     className: clsx(classes.icon, isFilled ? classes.iconFilled : classes.iconEmpty, isHovered && classes.iconHover, isFocused && classes.iconFocus, isActive && classes.iconActive),
-    ownerState: _extends({}, ownerState, {
+    ownerState: {
+      ...ownerState,
       iconEmpty: !isFilled,
       iconFilled: isFilled,
       iconHover: isHovered,
       iconFocus: isFocused,
       iconActive: isActive
-    }),
+    },
     children: emptyIcon && !isFilled ? emptyIcon : icon
   });
   if (readOnly) {
-    return /*#__PURE__*/_jsx("span", _extends({}, labelProps, {
+    return /*#__PURE__*/_jsx("span", {
+      ...labelProps,
       children: container
-    }));
+    });
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsxs(RatingLabel, _extends({
-      ownerState: _extends({}, ownerState, {
+    children: [/*#__PURE__*/_jsxs(RatingLabel, {
+      ownerState: {
+        ...ownerState,
         emptyValueFocused: undefined
-      }),
-      htmlFor: id
-    }, labelProps, {
+      },
+      htmlFor: id,
+      ...labelProps,
       children: [container, /*#__PURE__*/_jsx("span", {
         className: classes.visuallyHidden,
         children: getLabelText(itemValue)
       })]
-    })), /*#__PURE__*/_jsx("input", {
+    }), /*#__PURE__*/_jsx("input", {
       className: classes.visuallyHidden,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -306,27 +310,27 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     props: inProps
   });
   const {
-      className,
-      defaultValue = null,
-      disabled = false,
-      emptyIcon = defaultEmptyIcon,
-      emptyLabelText = 'Empty',
-      getLabelText = defaultLabelText,
-      highlightSelectedOnly = false,
-      icon = defaultIcon,
-      IconContainerComponent = IconContainer,
-      max = 5,
-      name: nameProp,
-      onChange,
-      onChangeActive,
-      onMouseLeave,
-      onMouseMove,
-      precision = 1,
-      readOnly = false,
-      size = 'medium',
-      value: valueProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
+    className,
+    defaultValue = null,
+    disabled = false,
+    emptyIcon = defaultEmptyIcon,
+    emptyLabelText = 'Empty',
+    getLabelText = defaultLabelText,
+    highlightSelectedOnly = false,
+    icon = defaultIcon,
+    IconContainerComponent = IconContainer,
+    max = 5,
+    name: nameProp,
+    onChange,
+    onChangeActive,
+    onMouseLeave,
+    onMouseMove,
+    precision = 1,
+    readOnly = false,
+    size = 'medium',
+    value: valueProp,
+    ...other
+  } = props;
   const name = useId(nameProp);
   const [valueDerived, setValueState] = useControlled({
     controlled: valueProp,
@@ -452,7 +456,8 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     }));
   };
   const [emptyValueFocused, setEmptyValueFocused] = React.useState(false);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     defaultValue,
     disabled,
     emptyIcon,
@@ -466,17 +471,17 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
     precision,
     readOnly,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(RatingRoot, _extends({
+  return /*#__PURE__*/_jsxs(RatingRoot, {
     ref: handleRef,
     onMouseMove: handleMouseMove,
     onMouseLeave: handleMouseLeave,
     className: clsx(classes.root, className, readOnly && 'MuiRating-readOnly'),
     ownerState: ownerState,
     role: readOnly ? 'img' : null,
-    "aria-label": readOnly ? getLabelText(value) : null
-  }, other, {
+    "aria-label": readOnly ? getLabelText(value) : null,
+    ...other,
     children: [Array.from(new Array(max)).map((_, index) => {
       const itemValue = index + 1;
       const ratingItemProps = {
@@ -508,7 +513,8 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
           iconActive: isActive,
           children: items.map(($, indexDecimal) => {
             const itemDecimalValue = roundValueToPrecision(itemValue - 1 + (indexDecimal + 1) * precision, precision);
-            return /*#__PURE__*/_jsx(RatingItem, _extends({}, ratingItemProps, {
+            return /*#__PURE__*/_jsx(RatingItem, {
+              ...ratingItemProps,
               // The icon is already displayed as active
               isActive: false,
               itemValue: itemDecimalValue,
@@ -519,14 +525,15 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
                   position: 'absolute'
                 }
               }
-            }), itemDecimalValue);
+            }, itemDecimalValue);
           })
         }, itemValue);
       }
-      return /*#__PURE__*/_jsx(RatingItem, _extends({}, ratingItemProps, {
+      return /*#__PURE__*/_jsx(RatingItem, {
+        ...ratingItemProps,
         isActive: isActive,
         itemValue: itemValue
-      }), itemValue);
+      }, itemValue);
     }), !readOnly && !disabled && /*#__PURE__*/_jsxs(RatingLabel, {
       className: clsx(classes.label, classes.labelEmptyValue),
       ownerState: ownerState,
@@ -545,7 +552,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
         children: emptyLabelText
       })]
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Rating.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/ScopedCssBaseline/ScopedCssBaseline.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "component", "enableColorScheme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -37,14 +34,17 @@ const ScopedCssBaselineRoot = styled('div', {
       };
     });
   }
-  return _extends({}, html(theme, ownerState.enableColorScheme), body(theme), {
+  return {
+    ...html(theme, ownerState.enableColorScheme),
+    ...body(theme),
     '& *, & *::before, & *::after': {
       boxSizing: 'inherit'
     },
     '& strong, & b': {
       fontWeight: theme.typography.fontWeightBold
-    }
-  }, colorSchemeStyles);
+    },
+    ...colorSchemeStyles
+  };
 });
 const ScopedCssBaseline = /*#__PURE__*/React.forwardRef(function ScopedCssBaseline(inProps, ref) {
   const props = useThemeProps({
@@ -52,20 +52,23 @@ const ScopedCssBaseline = /*#__PURE__*/React.forwardRef(function ScopedCssBaseli
     name: 'MuiScopedCssBaseline'
   });
   const {
-      className,
-      component = 'div'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = 'div',
+    enableColorScheme,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ScopedCssBaselineRoot, _extends({
+  return /*#__PURE__*/_jsx(ScopedCssBaselineRoot, {
     as: component,
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other));
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? ScopedCssBaseline.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Select/Select.js

@@ -1,9 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"],
-  _excluded2 = ["root"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -42,29 +38,29 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     props: inProps
   });
   const {
-      autoWidth = false,
-      children,
-      classes: classesProp = {},
-      className,
-      defaultOpen = false,
-      displayEmpty = false,
-      IconComponent = ArrowDropDownIcon,
-      id,
-      input,
-      inputProps,
-      label,
-      labelId,
-      MenuProps,
-      multiple = false,
-      native = false,
-      onClose,
-      onOpen,
-      open,
-      renderValue,
-      SelectDisplayProps,
-      variant: variantProp = 'outlined'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    autoWidth = false,
+    children,
+    classes: classesProp = {},
+    className,
+    defaultOpen = false,
+    displayEmpty = false,
+    IconComponent = ArrowDropDownIcon,
+    id,
+    input,
+    inputProps,
+    label,
+    labelId,
+    MenuProps,
+    multiple = false,
+    native = false,
+    onClose,
+    onOpen,
+    open,
+    renderValue,
+    SelectDisplayProps,
+    variant: variantProp = 'outlined',
+    ...other
+  } = props;
   const inputComponent = native ? NativeSelectInput : SelectInput;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
@@ -73,12 +69,16 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
     states: ['variant', 'error']
   });
   const variant = fcs.variant || variantProp;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     variant,
     classes: classesProp
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const restOfClasses = _objectWithoutPropertiesLoose(classes, _excluded2);
+  const {
+    root,
+    ...restOfClasses
+  } = classes;
   const InputComponent = input || {
     standard: /*#__PURE__*/_jsx(StyledInput, {
       ownerState: ownerState
@@ -93,44 +93,50 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
   }[variant];
   const inputComponentRef = useForkRef(ref, InputComponent.ref);
   return /*#__PURE__*/_jsx(React.Fragment, {
-    children: /*#__PURE__*/React.cloneElement(InputComponent, _extends({
+    children: /*#__PURE__*/React.cloneElement(InputComponent, {
       // Most of the logic is implemented in `SelectInput`.
       // The `Select` component is a simple API wrapper to expose something better to play with.
       inputComponent,
-      inputProps: _extends({
+      inputProps: {
         children,
         error: fcs.error,
         IconComponent,
         variant,
         type: undefined,
         // We render a select. We can ignore the type provided by the `Input`.
-        multiple
-      }, native ? {
-        id
-      } : {
-        autoWidth,
-        defaultOpen,
-        displayEmpty,
-        labelId,
-        MenuProps,
-        onClose,
-        onOpen,
-        open,
-        renderValue,
-        SelectDisplayProps: _extends({
+        multiple,
+        ...(native ? {
           id
-        }, SelectDisplayProps)
-      }, inputProps, {
-        classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses
-      }, input ? input.props.inputProps : {})
-    }, (multiple && native || displayEmpty) && variant === 'outlined' ? {
-      notched: true
-    } : {}, {
+        } : {
+          autoWidth,
+          defaultOpen,
+          displayEmpty,
+          labelId,
+          MenuProps,
+          onClose,
+          onOpen,
+          open,
+          renderValue,
+          SelectDisplayProps: {
+            id,
+            ...SelectDisplayProps
+          }
+        }),
+        ...inputProps,
+        classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses,
+        ...(input ? input.props.inputProps : {})
+      },
+      ...((multiple && native || displayEmpty) && variant === 'outlined' ? {
+        notched: true
+      } : {}),
       ref: inputComponentRef,
-      className: clsx(InputComponent.props.className, className, classes.root)
-    }, !input && {
-      variant
-    }, other))
+      className: clsx(InputComponent.props.className, className, classes.root),
+      // If a custom input is provided via 'input' prop, do not allow 'variant' to be propagated to it's root element. See https://github.com/mui/material-ui/issues/33894.
+      ...(!input && {
+        variant
+      }),
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Select.propTypes /* remove-proptypes */ = {