@mui/material 5.13.1 → 5.13.2

package/modern/Chip/Chip.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["avatar", "className", "clickable", "color", "component", "deleteIcon", "disabled", "icon", "label", "onClick", "onDelete", "onKeyDown", "onKeyUp", "size", "variant", "tabIndex", "skipFocusWhenDisabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -75,7 +78,7 @@ const ChipRoot = styled('div', {
   ownerState
 }) => {
   const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
-  return {
+  return _extends({
     maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.pxToRem(13),
@@ -126,22 +129,19 @@ const ChipRoot = styled('div', {
       height: 18,
       fontSize: theme.typography.pxToRem(10)
     },
-    [`& .${chipClasses.icon}`]: {
+    [`& .${chipClasses.icon}`]: _extends({
       marginLeft: 5,
-      marginRight: -6,
-      ...(ownerState.size === 'small' && {
-        fontSize: 18,
-        marginLeft: 4,
-        marginRight: -4
-      }),
-      ...(ownerState.iconColor === ownerState.color && {
-        color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
-        ...(ownerState.color !== 'default' && {
-          color: 'inherit'
-        })
-      })
-    },
-    [`& .${chipClasses.deleteIcon}`]: {
+      marginRight: -6
+    }, ownerState.size === 'small' && {
+      fontSize: 18,
+      marginLeft: 4,
+      marginRight: -4
+    }, ownerState.iconColor === ownerState.color && _extends({
+      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor
+    }, ownerState.color !== 'default' && {
+      color: 'inherit'
+    })),
+    [`& .${chipClasses.deleteIcon}`]: _extends({
       WebkitTapHighlightColor: 'transparent',
       color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : alpha(theme.palette.text.primary, 0.26),
       fontSize: 22,
@@ -149,108 +149,96 @@ const ChipRoot = styled('div', {
       margin: '0 5px 0 -6px',
       '&:hover': {
         color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(theme.palette.text.primary, 0.4)
-      },
-      ...(ownerState.size === 'small' && {
-        fontSize: 16,
-        marginRight: 4,
-        marginLeft: -4
-      }),
-      ...(ownerState.color !== 'default' && {
-        color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha(theme.palette[ownerState.color].contrastText, 0.7),
-        '&:hover, &:active': {
-          color: (theme.vars || theme).palette[ownerState.color].contrastText
-        }
-      })
-    },
-    ...(ownerState.size === 'small' && {
-      height: 24
-    }),
-    ...(ownerState.color !== 'default' && {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-      color: (theme.vars || theme).palette[ownerState.color].contrastText
-    }),
-    ...(ownerState.onDelete && {
-      [`&.${chipClasses.focusVisible}`]: {
-        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
       }
-    }),
-    ...(ownerState.onDelete && ownerState.color !== 'default' && {
-      [`&.${chipClasses.focusVisible}`]: {
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+    }, ownerState.size === 'small' && {
+      fontSize: 16,
+      marginRight: 4,
+      marginLeft: -4
+    }, ownerState.color !== 'default' && {
+      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha(theme.palette[ownerState.color].contrastText, 0.7),
+      '&:hover, &:active': {
+        color: (theme.vars || theme).palette[ownerState.color].contrastText
       }
     })
-  };
-}, ({
-  theme,
-  ownerState
-}) => ({
-  ...(ownerState.clickable && {
-    userSelect: 'none',
-    WebkitTapHighlightColor: 'transparent',
-    cursor: 'pointer',
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
-    },
+  }, ownerState.size === 'small' && {
+    height: 24
+  }, ownerState.color !== 'default' && {
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].contrastText
+  }, ownerState.onDelete && {
     [`&.${chipClasses.focusVisible}`]: {
       backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
-    },
-    '&:active': {
-      boxShadow: (theme.vars || theme).shadows[1]
     }
-  }),
-  ...(ownerState.clickable && ownerState.color !== 'default' && {
-    [`&:hover, &.${chipClasses.focusVisible}`]: {
+  }, ownerState.onDelete && ownerState.color !== 'default' && {
+    [`&.${chipClasses.focusVisible}`]: {
       backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
-  })
+  });
+}, ({
+  theme,
+  ownerState
+}) => _extends({}, ownerState.clickable && {
+  userSelect: 'none',
+  WebkitTapHighlightColor: 'transparent',
+  cursor: 'pointer',
+  '&:hover': {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+  },
+  [`&.${chipClasses.focusVisible}`]: {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+  },
+  '&:active': {
+    boxShadow: (theme.vars || theme).shadows[1]
+  }
+}, ownerState.clickable && ownerState.color !== 'default' && {
+  [`&:hover, &.${chipClasses.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+  }
 }), ({
   theme,
   ownerState
-}) => ({
-  ...(ownerState.variant === 'outlined' && {
-    backgroundColor: 'transparent',
-    border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
-    [`&.${chipClasses.clickable}:hover`]: {
-      backgroundColor: (theme.vars || theme).palette.action.hover
-    },
-    [`&.${chipClasses.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette.action.focus
-    },
-    [`& .${chipClasses.avatar}`]: {
-      marginLeft: 4
-    },
-    [`& .${chipClasses.avatarSmall}`]: {
-      marginLeft: 2
-    },
-    [`& .${chipClasses.icon}`]: {
-      marginLeft: 4
-    },
-    [`& .${chipClasses.iconSmall}`]: {
-      marginLeft: 2
-    },
-    [`& .${chipClasses.deleteIcon}`]: {
-      marginRight: 5
-    },
-    [`& .${chipClasses.deleteIconSmall}`]: {
-      marginRight: 3
-    }
-  }),
-  ...(ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7)}`,
-    [`&.${chipClasses.clickable}:hover`]: {
-      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)
-    },
-    [`&.${chipClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
-    },
-    [`& .${chipClasses.deleteIcon}`]: {
-      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7),
-      '&:hover, &:active': {
-        color: (theme.vars || theme).palette[ownerState.color].main
-      }
+}) => _extends({}, ownerState.variant === 'outlined' && {
+  backgroundColor: 'transparent',
+  border: theme.vars ? `1px solid ${theme.vars.palette.Chip.defaultBorder}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
+  [`&.${chipClasses.clickable}:hover`]: {
+    backgroundColor: (theme.vars || theme).palette.action.hover
+  },
+  [`&.${chipClasses.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  [`& .${chipClasses.avatar}`]: {
+    marginLeft: 4
+  },
+  [`& .${chipClasses.avatarSmall}`]: {
+    marginLeft: 2
+  },
+  [`& .${chipClasses.icon}`]: {
+    marginLeft: 4
+  },
+  [`& .${chipClasses.iconSmall}`]: {
+    marginLeft: 2
+  },
+  [`& .${chipClasses.deleteIcon}`]: {
+    marginRight: 5
+  },
+  [`& .${chipClasses.deleteIconSmall}`]: {
+    marginRight: 3
+  }
+}, ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
+  color: (theme.vars || theme).palette[ownerState.color].main,
+  border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7)}`,
+  [`&.${chipClasses.clickable}:hover`]: {
+    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)
+  },
+  [`&.${chipClasses.focusVisible}`]: {
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.focusOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+  },
+  [`& .${chipClasses.deleteIcon}`]: {
+    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7),
+    '&:hover, &:active': {
+      color: (theme.vars || theme).palette[ownerState.color].main
     }
-  })
+  }
 }));
 const ChipLabel = styled('span', {
   name: 'MuiChip',
@@ -266,16 +254,15 @@ const ChipLabel = styled('span', {
   }
 })(({
   ownerState
-}) => ({
+}) => _extends({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   paddingLeft: 12,
   paddingRight: 12,
-  whiteSpace: 'nowrap',
-  ...(ownerState.size === 'small' && {
-    paddingLeft: 8,
-    paddingRight: 8
-  })
+  whiteSpace: 'nowrap'
+}, ownerState.size === 'small' && {
+  paddingLeft: 8,
+  paddingRight: 8
 }));
 function isDeleteKeyboardEvent(keyboardEvent) {
   return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
@@ -290,26 +277,25 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     name: 'MuiChip'
   });
   const {
-    avatar: avatarProp,
-    className,
-    clickable: clickableProp,
-    color = 'default',
-    component: ComponentProp,
-    deleteIcon: deleteIconProp,
-    disabled = false,
-    icon: iconProp,
-    label,
-    onClick,
-    onDelete,
-    onKeyDown,
-    onKeyUp,
-    size = 'medium',
-    variant = 'filled',
-    tabIndex,
-    skipFocusWhenDisabled = false,
-    // TODO v6: Rename to `focusableWhenDisabled`.
-    ...other
-  } = props;
+      avatar: avatarProp,
+      className,
+      clickable: clickableProp,
+      color = 'default',
+      component: ComponentProp,
+      deleteIcon: deleteIconProp,
+      disabled = false,
+      icon: iconProp,
+      label,
+      onClick,
+      onDelete,
+      onKeyDown,
+      onKeyUp,
+      size = 'medium',
+      variant = 'filled',
+      tabIndex,
+      skipFocusWhenDisabled = false // TODO v6: Rename to `focusableWhenDisabled`.
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const chipRef = React.useRef(null);
   const handleRef = useForkRef(chipRef, ref);
   const handleDeleteIconClick = event => {
@@ -345,8 +331,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
   };
   const clickable = clickableProp !== false && onClick ? true : clickableProp;
   const component = clickable || onDelete ? ButtonBase : ComponentProp || 'div';
-  const ownerState = {
-    ...props,
+  const ownerState = _extends({}, props, {
     component,
     disabled,
     size,
@@ -355,15 +340,14 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     onDelete: !!onDelete,
     clickable,
     variant
-  };
+  });
   const classes = useUtilityClasses(ownerState);
-  const moreProps = component === ButtonBase ? {
+  const moreProps = component === ButtonBase ? _extends({
     component: ComponentProp || 'div',
-    focusVisibleClassName: classes.focusVisible,
-    ...(onDelete && {
-      disableRipple: true
-    })
-  } : {};
+    focusVisibleClassName: classes.focusVisible
+  }, onDelete && {
+    disableRipple: true
+  }) : {};
   let deleteIcon = null;
   if (onDelete) {
     deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {
@@ -391,7 +375,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
       console.error('MUI: The Chip component can not handle the avatar ' + 'and the icon prop at the same time. Pick one.');
     }
   }
-  return /*#__PURE__*/_jsxs(ChipRoot, {
+  return /*#__PURE__*/_jsxs(ChipRoot, _extends({
     as: component,
     className: clsx(classes.root, className),
     disabled: clickable && disabled ? true : undefined,
@@ -400,15 +384,14 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
     onKeyUp: handleKeyUp,
     ref: handleRef,
     tabIndex: skipFocusWhenDisabled && disabled ? -1 : tabIndex,
-    ownerState: ownerState,
-    ...moreProps,
-    ...other,
+    ownerState: ownerState
+  }, moreProps, other, {
     children: [avatar || icon, /*#__PURE__*/_jsx(ChipLabel, {
       className: clsx(classes.label),
       ownerState: ownerState,
       children: label
     }), deleteIcon]
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? Chip.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/CircularProgress/CircularProgress.js

@@ -1,3 +1,6 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+const _excluded = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -61,14 +64,12 @@ const CircularProgressRoot = styled('span', {
 })(({
   ownerState,
   theme
-}) => ({
-  display: 'inline-block',
-  ...(ownerState.variant === 'determinate' && {
-    transition: theme.transitions.create('transform')
-  }),
-  ...(ownerState.color !== 'inherit' && {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  })
+}) => _extends({
+  display: 'inline-block'
+}, ownerState.variant === 'determinate' && {
+  transition: theme.transitions.create('transform')
+}, ownerState.color !== 'inherit' && {
+  color: (theme.vars || theme).palette[ownerState.color].main
 }), ({
   ownerState
 }) => ownerState.variant === 'indeterminate' && css`
@@ -94,18 +95,14 @@ const CircularProgressCircle = styled('circle', {
 })(({
   ownerState,
   theme
-}) => ({
-  stroke: 'currentColor',
-  // Use butt to follow the specification, by chance, it's already the default CSS value.
-  // strokeLinecap: 'butt',
-  ...(ownerState.variant === 'determinate' && {
-    transition: theme.transitions.create('stroke-dashoffset')
-  }),
-  ...(ownerState.variant === 'indeterminate' && {
-    // Some default value that looks fine waiting for the animation to kicks in.
-    strokeDasharray: '80px, 200px',
-    strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
-  })
+}) => _extends({
+  stroke: 'currentColor'
+}, ownerState.variant === 'determinate' && {
+  transition: theme.transitions.create('stroke-dashoffset')
+}, ownerState.variant === 'indeterminate' && {
+  // Some default value that looks fine waiting for the animation to kicks in.
+  strokeDasharray: '80px, 200px',
+  strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
 }), ({
   ownerState
 }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink && css`
@@ -125,25 +122,24 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     name: 'MuiCircularProgress'
   });
   const {
-    className,
-    color = 'primary',
-    disableShrink = false,
-    size = 40,
-    style,
-    thickness = 3.6,
-    value = 0,
-    variant = 'indeterminate',
-    ...other
-  } = props;
-  const ownerState = {
-    ...props,
+      className,
+      color = 'primary',
+      disableShrink = false,
+      size = 40,
+      style,
+      thickness = 3.6,
+      value = 0,
+      variant = 'indeterminate'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const ownerState = _extends({}, props, {
     color,
     disableShrink,
     size,
     thickness,
     value,
     variant
-  };
+  });
   const classes = useUtilityClasses(ownerState);
   const circleStyle = {};
   const rootStyle = {};
@@ -155,19 +151,16 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     circleStyle.strokeDashoffset = `${((100 - value) / 100 * circumference).toFixed(3)}px`;
     rootStyle.transform = 'rotate(-90deg)';
   }
-  return /*#__PURE__*/_jsx(CircularProgressRoot, {
+  return /*#__PURE__*/_jsx(CircularProgressRoot, _extends({
     className: clsx(classes.root, className),
-    style: {
+    style: _extends({
       width: size,
-      height: size,
-      ...rootStyle,
-      ...style
-    },
+      height: size
+    }, rootStyle, style),
     ownerState: ownerState,
     ref: ref,
-    role: "progressbar",
-    ...rootProps,
-    ...other,
+    role: "progressbar"
+  }, rootProps, other, {
     children: /*#__PURE__*/_jsx(CircularProgressSVG, {
       className: classes.svg,
       ownerState: ownerState,
@@ -183,7 +176,7 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
         strokeWidth: thickness
       })
     })
-  });
+  }));
 });
 process.env.NODE_ENV !== "production" ? CircularProgress.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------