@mui/material 5.12.3 → 5.13.1

package/Hidden/HiddenCss.js

@@ -1,6 +1,3 @@
-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';
@@ -35,26 +32,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;
+    }, {})
+  };
 });
 
 /**
@@ -62,11 +61,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 => {
@@ -106,9 +105,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/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';
@@ -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 = {
     /**

package/Icon/Icon.js

@@ -1,6 +1,3 @@
-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';
@@ -70,21 +67,22 @@ const Icon = /*#__PURE__*/React.forwardRef(function Icon(inProps, ref) {
     name: 'MuiIcon'
   });
   const {
-      baseClassName = 'material-icons',
-      className,
-      color = 'inherit',
-      component: Component = 'span',
-      fontSize = 'medium'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    baseClassName = 'material-icons',
+    className,
+    color = 'inherit',
+    component: Component = 'span',
+    fontSize = 'medium',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     baseClassName,
     color,
     component: Component,
     fontSize
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(IconRoot, _extends({
+  return /*#__PURE__*/_jsx(IconRoot, {
     as: Component,
     className: clsx(baseClassName,
     // Prevent the translation of the text content.
@@ -92,8 +90,9 @@ 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/Icon/iconClasses.d.ts

@@ -1,24 +1,24 @@
-export interface IconClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    colorPrimary: string;
-    /** Styles applied to the root element if `color="secondary"`. */
-    colorSecondary: string;
-    /** Styles applied to the root element if `color="action"`. */
-    colorAction: string;
-    /** Styles applied to the root element if `color="error"`. */
-    colorError: string;
-    /** Styles applied to the root element if `color="disabled"`. */
-    colorDisabled: string;
-    /** Styles applied to the root element if `fontSize="inherit"`. */
-    fontSizeInherit: string;
-    /** Styles applied to the root element if `fontSize="small"`. */
-    fontSizeSmall: string;
-    /** Styles applied to the root element if `fontSize="large"`. */
-    fontSizeLarge: string;
-}
-export type IconClassKey = keyof IconClasses;
-export declare function getIconUtilityClass(slot: string): string;
-declare const iconClasses: IconClasses;
-export default iconClasses;
+export interface IconClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: string;
+    /** Styles applied to the root element if `color="action"`. */
+    colorAction: string;
+    /** Styles applied to the root element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the root element if `color="disabled"`. */
+    colorDisabled: string;
+    /** Styles applied to the root element if `fontSize="inherit"`. */
+    fontSizeInherit: string;
+    /** Styles applied to the root element if `fontSize="small"`. */
+    fontSizeSmall: string;
+    /** Styles applied to the root element if `fontSize="large"`. */
+    fontSizeLarge: string;
+}
+export type IconClassKey = keyof IconClasses;
+export declare function getIconUtilityClass(slot: string): string;
+declare const iconClasses: IconClasses;
+export default iconClasses;

package/IconButton/IconButton.js

@@ -1,6 +1,3 @@
-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';
@@ -38,7 +35,7 @@ const IconButtonRoot = styled(ButtonBase, {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   textAlign: 'center',
   flex: '0 0 auto',
   fontSize: theme.typography.pxToRem(24),
@@ -49,50 +46,59 @@ 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.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.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 _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)
-  }, {
+  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)
+    }),
     [`&.${iconButtonClasses.disabled}`]: {
       backgroundColor: 'transparent',
       color: (theme.vars || theme).palette.action.disabled
     }
-  });
+  };
 });
 
 /**
@@ -105,33 +111,34 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(inProps, re
     name: 'MuiIconButton'
   });
   const {
-      edge = false,
-      children,
-      className,
-      color = 'default',
-      disabled = false,
-      disableFocusRipple = false,
-      size = 'medium'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    edge = false,
+    children,
+    className,
+    color = 'default',
+    disabled = false,
+    disableFocusRipple = false,
+    size = 'medium',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     edge,
     color,
     disabled,
     disableFocusRipple,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(IconButtonRoot, _extends({
+  return /*#__PURE__*/_jsx(IconButtonRoot, {
     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 --------------------------------

package/IconButton/iconButtonClasses.d.ts

@@ -1,34 +1,34 @@
-export interface IconButtonClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `edge="start"`. */
-    edgeStart: string;
-    /** Styles applied to the root element if `edge="end"`. */
-    edgeEnd: string;
-    /** Styles applied to the root element if `color="inherit"`. */
-    colorInherit: string;
-    /** Styles applied to the root element if `color="primary"`. */
-    colorPrimary: string;
-    /** Styles applied to the root element if `color="secondary"`. */
-    colorSecondary: string;
-    /** Styles applied to the root element if `color="error"`. */
-    colorError: string;
-    /** Styles applied to the root element if `color="info"`. */
-    colorInfo: string;
-    /** Styles applied to the root element if `color="success"`. */
-    colorSuccess: string;
-    /** Styles applied to the root element if `color="warning"`. */
-    colorWarning: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="medium"`. */
-    sizeMedium: string;
-    /** Styles applied to the root element if `size="large"`. */
-    sizeLarge: string;
-}
-export type IconButtonClassKey = keyof IconButtonClasses;
-export declare function getIconButtonUtilityClass(slot: string): string;
-declare const iconButtonClasses: IconButtonClasses;
-export default iconButtonClasses;
+export interface IconButtonClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `edge="start"`. */
+    edgeStart: string;
+    /** Styles applied to the root element if `edge="end"`. */
+    edgeEnd: string;
+    /** Styles applied to the root element if `color="inherit"`. */
+    colorInherit: string;
+    /** Styles applied to the root element if `color="primary"`. */
+    colorPrimary: string;
+    /** Styles applied to the root element if `color="secondary"`. */
+    colorSecondary: string;
+    /** Styles applied to the root element if `color="error"`. */
+    colorError: string;
+    /** Styles applied to the root element if `color="info"`. */
+    colorInfo: string;
+    /** Styles applied to the root element if `color="success"`. */
+    colorSuccess: string;
+    /** Styles applied to the root element if `color="warning"`. */
+    colorWarning: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="medium"`. */
+    sizeMedium: string;
+    /** Styles applied to the root element if `size="large"`. */
+    sizeLarge: string;
+}
+export type IconButtonClassKey = keyof IconButtonClasses;
+export declare function getIconButtonUtilityClass(slot: string): string;
+declare const iconButtonClasses: IconButtonClasses;
+export default iconButtonClasses;

package/ImageList/ImageList.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "cols", "component", "rowHeight", "gap", "style", "variant"];
 import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { integerPropType } from '@mui/utils';
 import clsx from 'clsx';
@@ -33,16 +30,17 @@ const ImageListRoot = styled('ul', {
 })(({
   ownerState
 }) => {
-  return _extends({
+  return {
     display: 'grid',
     overflowY: 'auto',
     listStyle: 'none',
     padding: 0,
     // Add iOS momentum scrolling for iOS < 13.0
-    WebkitOverflowScrolling: 'touch'
-  }, ownerState.variant === 'masonry' && {
-    display: 'block'
-  });
+    WebkitOverflowScrolling: 'touch',
+    ...(ownerState.variant === 'masonry' && {
+      display: 'block'
+    })
+  };
 });
 const ImageList = /*#__PURE__*/React.forwardRef(function ImageList(inProps, ref) {
   const props = useThemeProps({
@@ -50,16 +48,16 @@ const ImageList = /*#__PURE__*/React.forwardRef(function ImageList(inProps, ref)
     name: 'MuiImageList'
   });
   const {
-      children,
-      className,
-      cols = 2,
-      component = 'ul',
-      rowHeight = 'auto',
-      gap = 4,
-      style: styleProp,
-      variant = 'standard'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    cols = 2,
+    component = 'ul',
+    rowHeight = 'auto',
+    gap = 4,
+    style: styleProp,
+    variant = 'standard',
+    ...other
+  } = props;
   const contextValue = React.useMemo(() => ({
     rowHeight,
     gap,
@@ -73,32 +71,35 @@ const ImageList = /*#__PURE__*/React.forwardRef(function ImageList(inProps, ref)
       }
     }
   }, []);
-  const style = variant === 'masonry' ? _extends({
+  const style = variant === 'masonry' ? {
     columnCount: cols,
-    columnGap: gap
-  }, styleProp) : _extends({
+    columnGap: gap,
+    ...styleProp
+  } : {
     gridTemplateColumns: `repeat(${cols}, 1fr)`,
-    gap
-  }, styleProp);
-  const ownerState = _extends({}, props, {
+    gap,
+    ...styleProp
+  };
+  const ownerState = {
+    ...props,
     component,
     gap,
     rowHeight,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ImageListRoot, _extends({
+  return /*#__PURE__*/_jsx(ImageListRoot, {
     as: component,
     className: clsx(classes.root, classes[variant], className),
     ref: ref,
     style: style,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: /*#__PURE__*/_jsx(ImageListContext.Provider, {
       value: contextValue,
       children: children
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ImageList.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/ImageList/imageListClasses.d.ts

@@ -1,16 +1,16 @@
-export interface ImageListClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `variant="masonry"`. */
-    masonry: string;
-    /** Styles applied to the root element if `variant="quilted"`. */
-    quilted: string;
-    /** Styles applied to the root element if `variant="standard"`. */
-    standard: string;
-    /** Styles applied to the root element if `variant="woven"`. */
-    woven: string;
-}
-export type ImageListClassKey = keyof ImageListClasses;
-export declare function getImageListUtilityClass(slot: string): string;
-declare const imageListClasses: ImageListClasses;
-export default imageListClasses;
+export interface ImageListClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `variant="masonry"`. */
+    masonry: string;
+    /** Styles applied to the root element if `variant="quilted"`. */
+    quilted: string;
+    /** Styles applied to the root element if `variant="standard"`. */
+    standard: string;
+    /** Styles applied to the root element if `variant="woven"`. */
+    woven: string;
+}
+export type ImageListClassKey = keyof ImageListClasses;
+export declare function getImageListUtilityClass(slot: string): string;
+declare const imageListClasses: ImageListClasses;
+export default imageListClasses;