@mui/material 5.13.0 → 5.13.1

package/modern/Button/Button.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -31,20 +28,28 @@ const useUtilityClasses = ownerState => {
     endIcon: ['endIcon', `iconSize${capitalize(size)}`]
   };
   const composedClasses = composeClasses(slots, getButtonUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the ButtonBase
+    ...composedClasses
+  };
 };
-const commonIconStyles = ownerState => _extends({}, ownerState.size === 'small' && {
-  '& > *:nth-of-type(1)': {
-    fontSize: 18
-  }
-}, ownerState.size === 'medium' && {
-  '& > *:nth-of-type(1)': {
-    fontSize: 20
-  }
-}, ownerState.size === 'large' && {
-  '& > *:nth-of-type(1)': {
-    fontSize: 22
-  }
+const commonIconStyles = ownerState => ({
+  ...(ownerState.size === 'small' && {
+    '& > *:nth-of-type(1)': {
+      fontSize: 18
+    }
+  }),
+  ...(ownerState.size === 'medium' && {
+    '& > *:nth-of-type(1)': {
+      fontSize: 20
+    }
+  }),
+  ...(ownerState.size === 'large' && {
+    '& > *:nth-of-type(1)': {
+      fontSize: 22
+    }
+  })
 });
 const ButtonRoot = styled(ButtonBase, {
   shouldForwardProp: prop => rootShouldForwardProp(prop) || prop === 'classes',
@@ -62,106 +67,131 @@ const ButtonRoot = styled(ButtonBase, {
 }) => {
   const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
   const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
-  return _extends({}, theme.typography.button, {
+  return {
+    ...theme.typography.button,
     minWidth: 64,
     padding: '6px 16px',
     borderRadius: (theme.vars || theme).shape.borderRadius,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
       duration: theme.transitions.duration.short
     }),
-    '&:hover': _extends({
+    '&:hover': {
       textDecoration: 'none',
       backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent'
-      }
-    }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-      border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    }, ownerState.variant === 'contained' && {
-      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
-      boxShadow: (theme.vars || theme).shadows[4],
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        boxShadow: (theme.vars || theme).shadows[2],
-        backgroundColor: (theme.vars || theme).palette.grey[300]
-      }
-    }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-      }
+      },
+      ...(ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }),
+      ...(ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+        border: `1px solid ${(theme.vars || theme).palette[ownerState.color].main}`,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }),
+      ...(ownerState.variant === 'contained' && {
+        backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
+        boxShadow: (theme.vars || theme).shadows[4],
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          boxShadow: (theme.vars || theme).shadows[2],
+          backgroundColor: (theme.vars || theme).palette.grey[300]
+        }
+      }),
+      ...(ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+        }
+      })
+    },
+    '&:active': {
+      ...(ownerState.variant === 'contained' && {
+        boxShadow: (theme.vars || theme).shadows[8]
+      })
+    },
+    [`&.${buttonClasses.focusVisible}`]: {
+      ...(ownerState.variant === 'contained' && {
+        boxShadow: (theme.vars || theme).shadows[6]
+      })
+    },
+    [`&.${buttonClasses.disabled}`]: {
+      color: (theme.vars || theme).palette.action.disabled,
+      ...(ownerState.variant === 'outlined' && {
+        border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+      }),
+      ...(ownerState.variant === 'contained' && {
+        color: (theme.vars || theme).palette.action.disabled,
+        boxShadow: (theme.vars || theme).shadows[0],
+        backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+      })
+    },
+    ...(ownerState.variant === 'text' && {
+      padding: '6px 8px'
     }),
-    '&:active': _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: (theme.vars || theme).shadows[8]
+    ...(ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
+      color: (theme.vars || theme).palette[ownerState.color].main
     }),
-    [`&.${buttonClasses.focusVisible}`]: _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: (theme.vars || theme).shadows[6]
+    ...(ownerState.variant === 'outlined' && {
+      padding: '5px 15px',
+      border: '1px solid currentColor'
     }),
-    [`&.${buttonClasses.disabled}`]: _extends({
-      color: (theme.vars || theme).palette.action.disabled
-    }, ownerState.variant === 'outlined' && {
-      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
-    }, ownerState.variant === 'contained' && {
-      color: (theme.vars || theme).palette.action.disabled,
-      boxShadow: (theme.vars || theme).shadows[0],
-      backgroundColor: (theme.vars || theme).palette.action.disabledBackground
+    ...(ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
+      color: (theme.vars || theme).palette[ownerState.color].main,
+      border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
+    }),
+    ...(ownerState.variant === 'contained' && {
+      color: theme.vars ?
+      // this is safe because grey does not change between default light/dark mode
+      theme.vars.palette.text.primary : theme.palette.getContrastText?.(theme.palette.grey[300]),
+      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
+      boxShadow: (theme.vars || theme).shadows[2]
+    }),
+    ...(ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
+      color: (theme.vars || theme).palette[ownerState.color].contrastText,
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+    }),
+    ...(ownerState.color === 'inherit' && {
+      color: 'inherit',
+      borderColor: 'currentColor'
+    }),
+    ...(ownerState.size === 'small' && ownerState.variant === 'text' && {
+      padding: '4px 5px',
+      fontSize: theme.typography.pxToRem(13)
+    }),
+    ...(ownerState.size === 'large' && ownerState.variant === 'text' && {
+      padding: '8px 11px',
+      fontSize: theme.typography.pxToRem(15)
+    }),
+    ...(ownerState.size === 'small' && ownerState.variant === 'outlined' && {
+      padding: '3px 9px',
+      fontSize: theme.typography.pxToRem(13)
+    }),
+    ...(ownerState.size === 'large' && ownerState.variant === 'outlined' && {
+      padding: '7px 21px',
+      fontSize: theme.typography.pxToRem(15)
+    }),
+    ...(ownerState.size === 'small' && ownerState.variant === 'contained' && {
+      padding: '4px 10px',
+      fontSize: theme.typography.pxToRem(13)
+    }),
+    ...(ownerState.size === 'large' && ownerState.variant === 'contained' && {
+      padding: '8px 22px',
+      fontSize: theme.typography.pxToRem(15)
+    }),
+    ...(ownerState.fullWidth && {
+      width: '100%'
     })
-  }, ownerState.variant === 'text' && {
-    padding: '6px 8px'
-  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  }, ownerState.variant === 'outlined' && {
-    padding: '5px 15px',
-    border: '1px solid currentColor'
-  }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    border: theme.vars ? `1px solid rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : `1px solid ${alpha(theme.palette[ownerState.color].main, 0.5)}`
-  }, ownerState.variant === 'contained' && {
-    color: theme.vars ?
-    // this is safe because grey does not change between default light/dark mode
-    theme.vars.palette.text.primary : theme.palette.getContrastText?.(theme.palette.grey[300]),
-    backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
-    boxShadow: (theme.vars || theme).shadows[2]
-  }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    color: (theme.vars || theme).palette[ownerState.color].contrastText,
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit',
-    borderColor: 'currentColor'
-  }, ownerState.size === 'small' && ownerState.variant === 'text' && {
-    padding: '4px 5px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'text' && {
-    padding: '8px 11px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.size === 'small' && ownerState.variant === 'outlined' && {
-    padding: '3px 9px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'outlined' && {
-    padding: '7px 21px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.size === 'small' && ownerState.variant === 'contained' && {
-    padding: '4px 10px',
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && ownerState.variant === 'contained' && {
-    padding: '8px 22px',
-    fontSize: theme.typography.pxToRem(15)
-  }, ownerState.fullWidth && {
-    width: '100%'
-  });
+  };
 }, ({
   ownerState
 }) => ownerState.disableElevation && {
@@ -190,13 +220,15 @@ const ButtonStartIcon = styled('span', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   display: 'inherit',
   marginRight: 8,
-  marginLeft: -4
-}, ownerState.size === 'small' && {
-  marginLeft: -2
-}, commonIconStyles(ownerState)));
+  marginLeft: -4,
+  ...(ownerState.size === 'small' && {
+    marginLeft: -2
+  }),
+  ...commonIconStyles(ownerState)
+}));
 const ButtonEndIcon = styled('span', {
   name: 'MuiButton',
   slot: 'EndIcon',
@@ -208,13 +240,15 @@ const ButtonEndIcon = styled('span', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   display: 'inherit',
   marginRight: -4,
-  marginLeft: 8
-}, ownerState.size === 'small' && {
-  marginRight: -2
-}, commonIconStyles(ownerState)));
+  marginLeft: 8,
+  ...(ownerState.size === 'small' && {
+    marginRight: -2
+  }),
+  ...commonIconStyles(ownerState)
+}));
 const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const contextProps = React.useContext(ButtonGroupContext);
@@ -224,23 +258,24 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     name: 'MuiButton'
   });
   const {
-      children,
-      color = 'primary',
-      component = 'button',
-      className,
-      disabled = false,
-      disableElevation = false,
-      disableFocusRipple = false,
-      endIcon: endIconProp,
-      focusVisibleClassName,
-      fullWidth = false,
-      size = 'medium',
-      startIcon: startIconProp,
-      type,
-      variant = 'text'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    color = 'primary',
+    component = 'button',
+    className,
+    disabled = false,
+    disableElevation = false,
+    disableFocusRipple = false,
+    endIcon: endIconProp,
+    focusVisibleClassName,
+    fullWidth = false,
+    size = 'medium',
+    startIcon: startIconProp,
+    type,
+    variant = 'text',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
@@ -250,7 +285,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     size,
     type,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const startIcon = startIconProp && /*#__PURE__*/_jsx(ButtonStartIcon, {
     className: classes.startIcon,
@@ -262,7 +297,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     ownerState: ownerState,
     children: endIconProp
   });
-  return /*#__PURE__*/_jsxs(ButtonRoot, _extends({
+  return /*#__PURE__*/_jsxs(ButtonRoot, {
     ownerState: ownerState,
     className: clsx(contextProps.className, classes.root, className),
     component: component,
@@ -270,11 +305,11 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ref: ref,
-    type: type
-  }, other, {
+    type: type,
+    ...other,
     classes: classes,
     children: [startIcon, children, endIcon]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/ButtonBase/ButtonBase.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -87,36 +84,37 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     name: 'MuiButtonBase'
   });
   const {
-      action,
-      centerRipple = false,
-      children,
-      className,
-      component = 'button',
-      disabled = false,
-      disableRipple = false,
-      disableTouchRipple = false,
-      focusRipple = false,
-      LinkComponent = 'a',
-      onBlur,
-      onClick,
-      onContextMenu,
-      onDragLeave,
-      onFocus,
-      onFocusVisible,
-      onKeyDown,
-      onKeyUp,
-      onMouseDown,
-      onMouseLeave,
-      onMouseUp,
-      onTouchEnd,
-      onTouchMove,
-      onTouchStart,
-      tabIndex = 0,
-      TouchRippleProps,
-      touchRippleRef,
-      type
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    action,
+    centerRipple = false,
+    children,
+    className,
+    component = 'button',
+    disabled = false,
+    disableRipple = false,
+    disableTouchRipple = false,
+    focusRipple = false,
+    focusVisibleClassName,
+    LinkComponent = 'a',
+    onBlur,
+    onClick,
+    onContextMenu,
+    onDragLeave,
+    onFocus,
+    onFocusVisible,
+    onKeyDown,
+    onKeyUp,
+    onMouseDown,
+    onMouseLeave,
+    onMouseUp,
+    onTouchEnd,
+    onTouchMove,
+    onTouchStart,
+    tabIndex = 0,
+    TouchRippleProps,
+    touchRippleRef,
+    type,
+    ...other
+  } = props;
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
   const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
@@ -273,7 +271,8 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
       }
     }, [enableTouchRipple]);
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     centerRipple,
     component,
     disabled,
@@ -282,9 +281,9 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     focusRipple,
     tabIndex,
     focusVisible
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(ButtonBaseRoot, _extends({
+  return /*#__PURE__*/_jsxs(ButtonBaseRoot, {
     as: ComponentProp,
     className: clsx(classes.root, className),
     ownerState: ownerState,
@@ -303,16 +302,18 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onTouchStart: handleTouchStart,
     ref: handleRef,
     tabIndex: disabled ? -1 : tabIndex,
-    type: type
-  }, buttonProps, other, {
+    type: type,
+    ...buttonProps,
+    ...other,
     children: [children, enableTouchRipple ?
     /*#__PURE__*/
     /* TouchRipple is only needed client-side, x2 boost on the server. */
-    _jsx(TouchRipple, _extends({
+    _jsx(TouchRipple, {
       ref: handleRippleRef,
-      center: centerRipple
-    }, TouchRippleProps)) : null]
-  }));
+      center: centerRipple,
+      ...TouchRippleProps
+    }) : null]
+  });
 });
 process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/ButtonBase/TouchRipple.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["center", "classes", "className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
@@ -130,11 +127,11 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     name: 'MuiTouchRipple'
   });
   const {
-      center: centerProp = false,
-      classes = {},
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    center: centerProp = false,
+    classes = {},
+    className,
+    ...other
+  } = props;
   const [ripples, setRipples] = React.useState([]);
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
@@ -300,16 +297,16 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
     start,
     stop
   }), [pulsate, start, stop]);
-  return /*#__PURE__*/_jsx(TouchRippleRoot, _extends({
+  return /*#__PURE__*/_jsx(TouchRippleRoot, {
     className: clsx(touchRippleClasses.root, classes.root, className),
-    ref: container
-  }, other, {
+    ref: container,
+    ...other,
     children: /*#__PURE__*/_jsx(TransitionGroup, {
       component: null,
       exit: true,
       children: ripples
     })
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? TouchRipple.propTypes = {
   /**