@mui/material 5.13.1 → 5.13.3

package/Grow/Grow.js

@@ -1,3 +1,6 @@
+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 { elementAcceptingRef } from '@mui/utils';
@@ -33,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,
-    ...other
-  } = props;
+      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);
   const timer = React.useRef();
   const autoTimeout = React.useRef();
   const theme = useTheme();
@@ -151,7 +154,7 @@ const Grow = /*#__PURE__*/React.forwardRef(function Grow(props, ref) {
       clearTimeout(timer.current);
     };
   }, []);
-  return /*#__PURE__*/_jsx(TransitionComponent, {
+  return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     appear: appear,
     in: inProp,
     nodeRef: nodeRef,
@@ -162,23 +165,19 @@ 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, {
-        style: {
+      return /*#__PURE__*/React.cloneElement(children, _extends({
+        style: _extends({
           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/Hidden/Hidden.js

@@ -1,3 +1,6 @@
+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';
@@ -9,21 +12,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,
-    ...other
-  } = props;
+      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);
   if (implementation === 'js') {
-    return /*#__PURE__*/_jsx(HiddenJs, {
+    return /*#__PURE__*/_jsx(HiddenJs, _extends({
       lgDown: lgDown,
       lgUp: lgUp,
       mdDown: mdDown,
@@ -33,11 +36,10 @@ function Hidden(props) {
       xlDown: xlDown,
       xlUp: xlUp,
       xsDown: xsDown,
-      xsUp: xsUp,
-      ...other
-    });
+      xsUp: xsUp
+    }, other));
   }
-  return /*#__PURE__*/_jsx(HiddenCss, {
+  return /*#__PURE__*/_jsx(HiddenCss, _extends({
     lgDown: lgDown,
     lgUp: lgUp,
     mdDown: mdDown,
@@ -47,9 +49,8 @@ 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 --------------------------------
@@ -79,22 +80,22 @@ process.env.NODE_ENV !== "production" ? Hidden.propTypes /* remove-proptypes */
    */
   initialWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   lgDown: PropTypes.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   lgUp: PropTypes.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   mdDown: PropTypes.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   mdUp: PropTypes.bool,
@@ -103,32 +104,32 @@ process.env.NODE_ENV !== "production" ? Hidden.propTypes /* remove-proptypes */
    */
   only: PropTypes.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']).isRequired)]),
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   smDown: PropTypes.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   smUp: PropTypes.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xlDown: PropTypes.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xlUp: PropTypes.bool,
   /**
-   * If `true`, screens this size and down are hidden.
+   * If `true`, component is hidden on screens below (but not including) this size.
    * @default false
    */
   xsDown: PropTypes.bool,
   /**
-   * If `true`, screens this size and up are hidden.
+   * If `true`, component is hidden on screens this size and above.
    * @default false
    */
   xsUp: PropTypes.bool

package/Hidden/HiddenCss.js

@@ -1,3 +1,6 @@
+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';
@@ -32,28 +35,26 @@ const HiddenCssRoot = styled('div', {
   const hidden = {
     display: 'none'
   };
-  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 _extends({}, ownerState.breakpoints.map(({
+    breakpoint,
+    dir
+  }) => {
+    if (dir === 'only') {
+      return {
+        [theme.breakpoints.only(breakpoint)]: hidden
       };
-    }).reduce((r, o) => {
-      Object.keys(o).forEach(k => {
-        r[k] = o[k];
-      });
-      return r;
-    }, {})
-  };
+    }
+    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;
+  }, {}));
 });
 
 /**
@@ -61,11 +62,11 @@ const HiddenCssRoot = styled('div', {
  */
 function HiddenCss(props) {
   const {
-    children,
-    className,
-    only,
-    ...other
-  } = props;
+      children,
+      className,
+      only
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const theme = useTheme();
   if (process.env.NODE_ENV !== 'production') {
     const unknownProps = Object.keys(other).filter(propName => {
@@ -105,10 +106,9 @@ function HiddenCss(props) {
       });
     });
   }
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     breakpoints
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(HiddenCssRoot, {
     className: clsx(classes.root, className),

package/Hidden/withWidth.js

@@ -1,3 +1,6 @@
+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';
@@ -16,7 +19,7 @@ export const isWidthUp = (breakpoint, width, inclusive = true) => {
   return breakpointKeys.indexOf(breakpoint) < breakpointKeys.indexOf(width);
 };
 
-// By default, returns true if screen width is the same or less than the given breakpoint.
+// By default, returns true if screen width is less than the given breakpoint.
 export const isWidthDown = (breakpoint, width, inclusive = false) => {
   if (inclusive) {
     return breakpointKeys.indexOf(width) <= breakpointKeys.indexOf(breakpoint);
@@ -32,15 +35,16 @@ const withWidth = (options = {}) => Component => {
   function WithWidth(props) {
     const contextTheme = useTheme();
     const theme = props.theme || contextTheme;
-    const {
-      initialWidth,
-      width,
-      ...other
-    } = getThemeProps({
-      theme,
-      name: 'MuiWithWidth',
-      props
-    });
+    const _getThemeProps = getThemeProps({
+        theme,
+        name: 'MuiWithWidth',
+        props
+      }),
+      {
+        initialWidth,
+        width
+      } = _getThemeProps,
+      other = _objectWithoutPropertiesLoose(_getThemeProps, _excluded);
     const [mountedState, setMountedState] = React.useState(false);
     useEnhancedEffect(() => {
       setMountedState(true);
@@ -57,13 +61,11 @@ const withWidth = (options = {}) => Component => {
       const matches = useMediaQuery(theme.breakpoints.up(key));
       return !output && matches ? key : output;
     }, null);
-    const more = {
-      width: width || (mountedState || noSSR ? widthComputed : undefined) || initialWidth || initialWidthOption,
-      ...(withThemeOption ? {
-        theme
-      } : {}),
-      ...other
-    };
+    const more = _extends({
+      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.
@@ -74,9 +76,7 @@ const withWidth = (options = {}) => Component => {
     if (more.width === undefined) {
       return null;
     }
-    return /*#__PURE__*/_jsx(Component, {
-      ...more
-    });
+    return /*#__PURE__*/_jsx(Component, _extends({}, more));
   }
   process.env.NODE_ENV !== "production" ? WithWidth.propTypes = {
     /**

package/Icon/Icon.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["baseClassName", "className", "color", "component", "fontSize"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -67,22 +70,21 @@ const Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
     name: 'MuiIcon'
   });
   const {
-    baseClassName = 'material-icons',
-    className,
-    color = 'inherit',
-    component: Component = 'span',
-    fontSize = 'medium',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      baseClassName = 'material-icons',
+      className,
+      color = 'inherit',
+      component: Component = 'span',
+      fontSize = 'medium'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     baseClassName,
     color,
     component: Component,
     fontSize
-  };
+  });
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(IconRoot, {
+  return /*#__PURE__*/_jsx(IconRoot, _extends({
     as: Component,
     className: clsx(baseClassName,
     // Prevent the translation of the text content.
@@ -90,9 +92,8 @@ const Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
     'notranslate', classes.root, className),
     ownerState: ownerState,
     "aria-hidden": true,
-    ref: ref,
-    ...other
-  });
+    ref: ref
+  }, other));
 });
 process.env.NODE_ENV !== "production" ? Icon.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/IconButton/IconButton.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -35,7 +38,7 @@ const IconButtonRoot = styled(ButtonBase, {
 })(({
   theme,
   ownerState
-}) => ({
+}) => _extends({
   textAlign: 'center',
   flex: '0 0 auto',
   fontSize: theme.typography.pxToRem(24),
@@ -46,59 +49,50 @@ const IconButtonRoot = styled(ButtonBase, {
   color: (theme.vars || theme).palette.action.active,
   transition: theme.transitions.create('background-color', {
     duration: theme.transitions.duration.shortest
-  }),
-  ...(!ownerState.disableRipple && {
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    }
-  }),
-  ...(ownerState.edge === 'start' && {
-    marginLeft: ownerState.size === 'small' ? -3 : -12
-  }),
-  ...(ownerState.edge === 'end' && {
-    marginRight: ownerState.size === 'small' ? -3 : -12
   })
+}, !ownerState.disableRipple && {
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+    // Reset on touch devices, it doesn't add specificity
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  }
+}, ownerState.edge === 'start' && {
+  marginLeft: ownerState.size === 'small' ? -3 : -12
+}, ownerState.edge === 'end' && {
+  marginRight: ownerState.size === 'small' ? -3 : -12
 }), ({
   theme,
   ownerState
 }) => {
   var _palette;
   const palette = (_palette = (theme.vars || theme).palette) == null ? void 0 : _palette[ownerState.color];
-  return {
-    ...(ownerState.color === 'inherit' && {
-      color: 'inherit'
-    }),
-    ...(ownerState.color !== 'inherit' && ownerState.color !== 'default' && {
-      color: palette == null ? void 0 : palette.main,
-      ...(!ownerState.disableRipple && {
-        '&:hover': {
-          ...(palette && {
-            backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
-          }),
-          // Reset on touch devices, it doesn't add specificity
-          '@media (hover: none)': {
-            backgroundColor: 'transparent'
-          }
-        }
-      })
-    }),
-    ...(ownerState.size === 'small' && {
-      padding: 5,
-      fontSize: theme.typography.pxToRem(18)
-    }),
-    ...(ownerState.size === 'large' && {
-      padding: 12,
-      fontSize: theme.typography.pxToRem(28)
-    }),
+  return _extends({}, ownerState.color === 'inherit' && {
+    color: 'inherit'
+  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
+    color: palette == null ? void 0 : palette.main
+  }, !ownerState.disableRipple && {
+    '&:hover': _extends({}, palette && {
+      backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
+    }, {
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        backgroundColor: 'transparent'
+      }
+    })
+  }), ownerState.size === 'small' && {
+    padding: 5,
+    fontSize: theme.typography.pxToRem(18)
+  }, ownerState.size === 'large' && {
+    padding: 12,
+    fontSize: theme.typography.pxToRem(28)
+  }, {
     [`&.${iconButtonClasses.disabled}`]: {
       backgroundColor: 'transparent',
       color: (theme.vars || theme).palette.action.disabled
     }
-  };
+  });
 });
 
 /**
@@ -111,34 +105,33 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     name: 'MuiIconButton'
   });
   const {
-    edge = false,
-    children,
-    className,
-    color = 'default',
-    disabled = false,
-    disableFocusRipple = false,
-    size = 'medium',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      edge = false,
+      children,
+      className,
+      color = 'default',
+      disabled = false,
+      disableFocusRipple = false,
+      size = 'medium'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     edge,
     color,
     disabled,
     disableFocusRipple,
     size
-  };
+  });
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(IconButtonRoot, {
+  return /*#__PURE__*/_jsx(IconButtonRoot, _extends({
     className: clsx(classes.root, className),
     centerRipple: true,
     focusRipple: !disableFocusRipple,
     disabled: disabled,
     ref: ref,
-    ownerState: ownerState,
-    ...other,
+    ownerState: ownerState
+  }, other, {
     children: children
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? IconButton.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------