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

package/modern/FormHelperText/FormHelperText.js

@@ -1,9 +1,6 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
 var _span;
-const _excluded = ["children", "className", "component", "disabled", "error", "filled", "focused", "margin", "required", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -42,9 +39,9 @@ const FormHelperTextRoot = styled('p', {
   }
 })(({
   theme
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.caption, {
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.caption,
   textAlign: 'left',
   marginTop: 3,
   marginRight: 0,
@@ -79,18 +76,26 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     name: 'MuiFormHelperText'
   });
   const {
-      children,
-      className,
-      component = 'p'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    component = 'p',
+    disabled,
+    error,
+    filled,
+    focused,
+    margin,
+    required,
+    variant,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['variant', 'size', 'disabled', 'error', 'filled', 'focused', 'required']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     component,
     contained: fcs.variant === 'filled' || fcs.variant === 'outlined',
     variant: fcs.variant,
@@ -100,20 +105,23 @@ const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inP
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  });
+  };
+
+  // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
+  delete ownerState.ownerState;
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(FormHelperTextRoot, _extends({
+  return /*#__PURE__*/_jsx(FormHelperTextRoot, {
     as: component,
-    ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
+    ownerState: ownerState,
     children: children === ' ' ? // notranslate needed while Google Translate will not fix zero-width space issue
     _span || (_span = /*#__PURE__*/_jsx("span", {
       className: "notranslate",
       children: "\u200B"
     })) : children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormHelperText.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/FormLabel/FormLabel.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 = ["children", "className", "color", "component", "disabled", "error", "filled", "focused", "required"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,17 +33,21 @@ export const FormLabelRoot = styled('label', {
   overridesResolver: ({
     ownerState
   }, styles) => {
-    return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
+    return {
+      ...styles.root,
+      ...(ownerState.color === 'secondary' && styles.colorSecondary),
+      ...(ownerState.filled && styles.filled)
+    };
   }
 })(({
   theme
-}) => _extends({
-  color: (theme.vars || theme).palette.text.secondary
-}, theme.typography.body1, {
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  ...theme.typography.body1,
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main).map(([color]) => ({
     props: {
       color
     },
@@ -84,18 +85,25 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     name: 'MuiFormLabel'
   });
   const {
-      children,
-      className,
-      component = 'label'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    color,
+    component = 'label',
+    disabled,
+    error,
+    filled,
+    focused,
+    required,
+    ...other
+  } = props;
   const muiFormControl = useFormControl();
   const fcs = formControlState({
     props,
     muiFormControl,
     states: ['color', 'required', 'focused', 'disabled', 'error', 'filled']
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     color: fcs.color || 'primary',
     component,
     disabled: fcs.disabled,
@@ -103,21 +111,21 @@ const FormLabel = /*#__PURE__*/React.forwardRef(function FormLabel(inProps, ref)
     filled: fcs.filled,
     focused: fcs.focused,
     required: fcs.required
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(FormLabelRoot, _extends({
+  return /*#__PURE__*/_jsxs(FormLabelRoot, {
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [children, fcs.required && /*#__PURE__*/_jsxs(AsteriskComponent, {
       ownerState: ownerState,
       "aria-hidden": true,
       className: classes.asterisk,
       children: ["\u2009", '*']
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? FormLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/GlobalStyles/GlobalStyles.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 { GlobalStyles as SystemGlobalStyles } from '@mui/system';
@@ -8,10 +7,11 @@ import defaultTheme from '../styles/defaultTheme';
 import THEME_ID from '../styles/identifier';
 import { jsx as _jsx } from "react/jsx-runtime";
 function GlobalStyles(props) {
-  return /*#__PURE__*/_jsx(SystemGlobalStyles, _extends({}, props, {
+  return /*#__PURE__*/_jsx(SystemGlobalStyles, {
+    ...props,
     defaultTheme: defaultTheme,
     themeId: THEME_ID
-  }));
+  });
 }
 process.env.NODE_ENV !== "production" ? GlobalStyles.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Grid/Grid.js

@@ -10,9 +10,6 @@
 //
 // Follow this flexbox Guide to better understand the underlying model:
 // - https://css-tricks.com/snippets/css/a-guide-to-flexbox/
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "columns", "columnSpacing", "component", "container", "direction", "item", "rowSpacing", "spacing", "wrap", "zeroMinWidth"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -87,11 +84,12 @@ export function generateGrid({
 
       // Close to the bootstrap implementation:
       // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
-      styles = _extends({
+      styles = {
         flexBasis: width,
         flexGrow: 0,
-        maxWidth: width
-      }, more);
+        maxWidth: width,
+        ...more
+      };
     }
 
     // No need for a media query for the first size.
@@ -302,18 +300,22 @@ const GridRoot = styled('div', {
   }
 })(({
   ownerState
-}) => _extends({
-  boxSizing: 'border-box'
-}, ownerState.container && {
-  display: 'flex',
-  flexWrap: 'wrap',
-  width: '100%'
-}, ownerState.item && {
-  margin: 0 // For instance, it's useful when used with a `figure` element.
-}, ownerState.zeroMinWidth && {
-  minWidth: 0
-}, ownerState.wrap !== 'wrap' && {
-  flexWrap: ownerState.wrap
+}) => ({
+  boxSizing: 'border-box',
+  ...(ownerState.container && {
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: '100%'
+  }),
+  ...(ownerState.item && {
+    margin: 0 // For instance, it's useful when used with a `figure` element.
+  }),
+  ...(ownerState.zeroMinWidth && {
+    minWidth: 0
+  }),
+  ...(ownerState.wrap !== 'wrap' && {
+    flexWrap: ownerState.wrap
+  })
 }), generateDirection, generateRowGap, generateColumnGap, generateGrid);
 export function resolveSpacingClasses(spacing, breakpoints) {
   // undefined/null or `spacing` <= 0
@@ -374,19 +376,19 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   } = useTheme();
   const props = extendSxProp(themeProps);
   const {
-      className,
-      columns: columnsProp,
-      columnSpacing: columnSpacingProp,
-      component = 'div',
-      container = false,
-      direction = 'row',
-      item = false,
-      rowSpacing: rowSpacingProp,
-      spacing = 0,
-      wrap = 'wrap',
-      zeroMinWidth = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    columns: columnsProp,
+    columnSpacing: columnSpacingProp,
+    component = 'div',
+    container = false,
+    direction = 'row',
+    item = false,
+    rowSpacing: rowSpacingProp,
+    spacing = 0,
+    wrap = 'wrap',
+    zeroMinWidth = false,
+    ...other
+  } = props;
   const rowSpacing = rowSpacingProp || spacing;
   const columnSpacing = columnSpacingProp || spacing;
   const columnsContext = React.useContext(GridContext);
@@ -394,14 +396,17 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
   // columns set with default breakpoint unit of 12
   const columns = container ? columnsProp || 12 : columnsContext;
   const breakpointsValues = {};
-  const otherFiltered = _extends({}, other);
+  const otherFiltered = {
+    ...other
+  };
   breakpoints.keys.forEach(breakpoint => {
     if (other[breakpoint] != null) {
       breakpointsValues[breakpoint] = other[breakpoint];
       delete otherFiltered[breakpoint];
     }
   });
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     columns,
     container,
     direction,
@@ -410,19 +415,20 @@ const Grid = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
     columnSpacing,
     wrap,
     zeroMinWidth,
-    spacing
-  }, breakpointsValues, {
+    spacing,
+    ...breakpointsValues,
     breakpoints: breakpoints.keys
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(GridContext.Provider, {
     value: columns,
-    children: /*#__PURE__*/_jsx(GridRoot, _extends({
+    children: /*#__PURE__*/_jsx(GridRoot, {
       ownerState: ownerState,
       className: clsx(classes.root, className),
       as: component,
-      ref: ref
-    }, otherFiltered))
+      ref: ref,
+      ...otherFiltered
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ = {
@@ -556,7 +562,9 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
 if (process.env.NODE_ENV !== 'production') {
   const requireProp = requirePropFactory('Grid', Grid);
   // eslint-disable-next-line no-useless-concat
-  Grid['propTypes' + ''] = _extends({}, Grid.propTypes, {
+  Grid['propTypes' + ''] = {
+    // eslint-disable-next-line react/forbid-foreign-prop-types
+    ...Grid.propTypes,
     direction: requireProp('container'),
     lg: requireProp('item'),
     md: requireProp('item'),
@@ -565,6 +573,6 @@ if (process.env.NODE_ENV !== 'production') {
     wrap: requireProp('container'),
     xs: requireProp('item'),
     zeroMinWidth: requireProp('item')
-  });
+  };
 }
 export default Grid;

package/modern/Grow/Grow.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 = ["addEndListener", "appear", "children", "easing", "in", "onEnter", "onEntered", "onEntering", "onExit", "onExited", "onExiting", "style", "timeout", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import useTimeout from '@mui/utils/useTimeout';
@@ -39,23 +36,23 @@ const isWebKit154 = typeof navigator !== 'undefined' && /^((?!chrome|android).)*
  */
 const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
   const {
-      addEndListener,
-      appear = true,
-      children,
-      easing,
-      in: inProp,
-      onEnter,
-      onEntered,
-      onEntering,
-      onExit,
-      onExited,
-      onExiting,
-      style,
-      timeout = 'auto',
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = Transition
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    addEndListener,
+    appear = true,
+    children,
+    easing,
+    in: inProp,
+    onEnter,
+    onEntered,
+    onEntering,
+    onExit,
+    onExited,
+    onExiting,
+    style,
+    timeout = 'auto',
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Transition,
+    ...other
+  } = props;
   const timer = useTimeout();
   const autoTimeout = React.useRef();
   const theme = useTheme();
@@ -152,7 +149,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       addEndListener(nodeRef.current, next);
     }
   };
-  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  return /*#__PURE__*/_jsx(TransitionComponent, {
     appear: appear,
     in: inProp,
     nodeRef: nodeRef,
@@ -163,19 +160,23 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
     onExited: handleExited,
     onExiting: handleExiting,
     addEndListener: handleAddEndListener,
-    timeout: timeout === 'auto' ? null : timeout
-  }, other, {
+    timeout: timeout === 'auto' ? null : timeout,
+    ...other,
     children: (state, childProps) => {
-      return /*#__PURE__*/React.cloneElement(children, _extends({
-        style: _extends({
+      return /*#__PURE__*/React.cloneElement(children, {
+        style: {
           opacity: 0,
           transform: getScale(0.75),
-          visibility: state === 'exited' && !inProp ? 'hidden' : undefined
-        }, styles[state], style, children.props.style),
-        ref: handleRef
-      }, childProps));
+          visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
+          ...styles[state],
+          ...style,
+          ...children.props.style
+        },
+        ref: handleRef,
+        ...childProps
+      });
     }
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Hidden/Hidden.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 = ["implementation", "lgDown", "lgUp", "mdDown", "mdUp", "smDown", "smUp", "xlDown", "xlUp", "xsDown", "xsUp"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import HiddenJs from './HiddenJs';
@@ -14,21 +11,21 @@ import HiddenCss from './HiddenCss';
 import { jsx as _jsx } from "react/jsx-runtime";
 function Hidden(props) {
   const {
-      implementation = 'js',
-      lgDown = false,
-      lgUp = false,
-      mdDown = false,
-      mdUp = false,
-      smDown = false,
-      smUp = false,
-      xlDown = false,
-      xlUp = false,
-      xsDown = false,
-      xsUp = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    implementation = 'js',
+    lgDown = false,
+    lgUp = false,
+    mdDown = false,
+    mdUp = false,
+    smDown = false,
+    smUp = false,
+    xlDown = false,
+    xlUp = false,
+    xsDown = false,
+    xsUp = false,
+    ...other
+  } = props;
   if (implementation === 'js') {
-    return /*#__PURE__*/_jsx(HiddenJs, _extends({
+    return /*#__PURE__*/_jsx(HiddenJs, {
       lgDown: lgDown,
       lgUp: lgUp,
       mdDown: mdDown,
@@ -38,10 +35,11 @@ function Hidden(props) {
       xlDown: xlDown,
       xlUp: xlUp,
       xsDown: xsDown,
-      xsUp: xsUp
-    }, other));
+      xsUp: xsUp,
+      ...other
+    });
   }
-  return /*#__PURE__*/_jsx(HiddenCss, _extends({
+  return /*#__PURE__*/_jsx(HiddenCss, {
     lgDown: lgDown,
     lgUp: lgUp,
     mdDown: mdDown,
@@ -51,8 +49,9 @@ function Hidden(props) {
     xlDown: xlDown,
     xlUp: xlUp,
     xsDown: xsDown,
-    xsUp: xsUp
-  }, other));
+    xsUp: xsUp,
+    ...other
+  });
 }
 process.env.NODE_ENV !== "production" ? Hidden.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Hidden/HiddenCss.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 = ["children", "className", "only"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -37,26 +34,28 @@ const HiddenCssRoot = styled('div', {
   const hidden = {
     display: 'none'
   };
-  return _extends({}, ownerState.breakpoints.map(({
-    breakpoint,
-    dir
-  }) => {
-    if (dir === 'only') {
-      return {
-        [theme.breakpoints.only(breakpoint)]: hidden
+  return {
+    ...ownerState.breakpoints.map(({
+      breakpoint,
+      dir
+    }) => {
+      if (dir === 'only') {
+        return {
+          [theme.breakpoints.only(breakpoint)]: hidden
+        };
+      }
+      return dir === 'up' ? {
+        [theme.breakpoints.up(breakpoint)]: hidden
+      } : {
+        [theme.breakpoints.down(breakpoint)]: hidden
       };
-    }
-    return dir === 'up' ? {
-      [theme.breakpoints.up(breakpoint)]: hidden
-    } : {
-      [theme.breakpoints.down(breakpoint)]: hidden
-    };
-  }).reduce((r, o) => {
-    Object.keys(o).forEach(k => {
-      r[k] = o[k];
-    });
-    return r;
-  }, {}));
+    }).reduce((r, o) => {
+      Object.keys(o).forEach(k => {
+        r[k] = o[k];
+      });
+      return r;
+    }, {})
+  };
 });
 
 /**
@@ -64,11 +63,11 @@ const HiddenCssRoot = styled('div', {
  */
 function HiddenCss(props) {
   const {
-      children,
-      className,
-      only
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    only,
+    ...other
+  } = props;
   const theme = useTheme();
   if (process.env.NODE_ENV !== 'production') {
     const unknownProps = Object.keys(other).filter(propName => {
@@ -108,9 +107,10 @@ function HiddenCss(props) {
       });
     });
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     breakpoints
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(HiddenCssRoot, {
     className: clsx(classes.root, className),

package/modern/Hidden/withWidth.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["initialWidth", "width"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import getDisplayName from '@mui/utils/getDisplayName';
@@ -35,16 +32,15 @@ const withWidth = (options = {}) => Component => {
   function WithWidth(props) {
     const contextTheme = useTheme();
     const theme = props.theme || contextTheme;
-    const _getThemeProps = getThemeProps({
-        theme,
-        name: 'MuiWithWidth',
-        props
-      }),
-      {
-        initialWidth,
-        width
-      } = _getThemeProps,
-      other = _objectWithoutPropertiesLoose(_getThemeProps, _excluded);
+    const {
+      initialWidth,
+      width,
+      ...other
+    } = getThemeProps({
+      theme,
+      name: 'MuiWithWidth',
+      props
+    });
     const [mountedState, setMountedState] = React.useState(false);
     useEnhancedEffect(() => {
       setMountedState(true);
@@ -61,11 +57,13 @@ const withWidth = (options = {}) => Component => {
       const matches = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;
     }, null);
-    const more = _extends({
-      width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption
-    }, withThemeOption ? {
-      theme
-    } : {}, other);
+    const more = {
+      width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption,
+      ...(withThemeOption ? {
+        theme
+      } : {}),
+      ...other
+    };
 
     // When rendering the component on the server,
     // we have no idea about the client browser screen width.
@@ -76,7 +74,9 @@ const withWidth = (options = {}) => Component => {
     if (more.width === undefined) {
       return null;
     }
-    return /*#__PURE__*/_jsx(Component, _extends({}, more));
+    return /*#__PURE__*/_jsx(Component, {
+      ...more
+    });
   }
   process.env.NODE_ENV !== "production" ? WithWidth.propTypes = {
     /**