@mui/material 5.12.3 → 5.13.1

package/modern/Switch/Switch.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "edge", "size", "sx"];
 // @inheritedComponent IconButton
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -32,7 +29,11 @@ const useUtilityClasses = ownerState => {
     input: ['input']
   };
   const composedClasses = composeClasses(slots, getSwitchUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the disabled and checked classes to the SwitchBase
+    ...composedClasses
+  };
 };
 const SwitchRoot = styled('span', {
   name: 'MuiSwitch',
@@ -45,7 +46,7 @@ const SwitchRoot = styled('span', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   display: 'inline-flex',
   width: 34 + 12 * 2,
   height: 14 + 12 * 2,
@@ -60,25 +61,28 @@ const SwitchRoot = styled('span', {
   // For correct alignment with the text.
   '@media print': {
     colorAdjust: 'exact'
-  }
-}, ownerState.edge === 'start' && {
-  marginLeft: -8
-}, ownerState.edge === 'end' && {
-  marginRight: -8
-}, ownerState.size === 'small' && {
-  width: 40,
-  height: 24,
-  padding: 7,
-  [`& .${switchClasses.thumb}`]: {
-    width: 16,
-    height: 16
   },
-  [`& .${switchClasses.switchBase}`]: {
-    padding: 4,
-    [`&.${switchClasses.checked}`]: {
-      transform: 'translateX(16px)'
+  ...(ownerState.edge === 'start' && {
+    marginLeft: -8
+  }),
+  ...(ownerState.edge === 'end' && {
+    marginRight: -8
+  }),
+  ...(ownerState.size === 'small' && {
+    width: 40,
+    height: 24,
+    padding: 7,
+    [`& .${switchClasses.thumb}`]: {
+      width: 16,
+      height: 16
+    },
+    [`& .${switchClasses.switchBase}`]: {
+      padding: 4,
+      [`&.${switchClasses.checked}`]: {
+        transform: 'translateX(16px)'
+      }
     }
-  }
+  })
 }));
 const SwitchSwitchBase = styled(SwitchBase, {
   name: 'MuiSwitch',
@@ -122,30 +126,31 @@ const SwitchSwitchBase = styled(SwitchBase, {
 }), ({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   '&: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.color !== 'default' && {
-  [`&.${switchClasses.checked}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    '&: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),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+  },
+  ...(ownerState.color !== 'default' && {
+    [`&.${switchClasses.checked}`]: {
+      color: (theme.vars || theme).palette[ownerState.color].main,
+      '&: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),
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      },
+      [`&.${switchClasses.disabled}`]: {
+        color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)}`
       }
     },
-    [`&.${switchClasses.disabled}`]: {
-      color: theme.vars ? theme.vars.palette.Switch[`${ownerState.color}DisabledColor`] : `${theme.palette.mode === 'light' ? lighten(theme.palette[ownerState.color].main, 0.62) : darken(theme.palette[ownerState.color].main, 0.55)}`
+    [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
     }
-  },
-  [`&.${switchClasses.checked} + .${switchClasses.track}`]: {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-  }
+  })
 }));
 const SwitchTrack = styled('span', {
   name: 'MuiSwitch',
@@ -183,18 +188,19 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     name: 'MuiSwitch'
   });
   const {
-      className,
-      color = 'primary',
-      edge = false,
-      size = 'medium',
-      sx
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    color = 'primary',
+    edge = false,
+    size = 'medium',
+    sx,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     edge,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const icon = /*#__PURE__*/_jsx(SwitchThumb, {
     className: classes.thumb,
@@ -204,17 +210,18 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(inProps, ref) {
     className: clsx(classes.root, className),
     sx: sx,
     ownerState: ownerState,
-    children: [/*#__PURE__*/_jsx(SwitchSwitchBase, _extends({
+    children: [/*#__PURE__*/_jsx(SwitchSwitchBase, {
       type: "checkbox",
       icon: icon,
       checkedIcon: icon,
       ref: ref,
-      ownerState: ownerState
-    }, other, {
-      classes: _extends({}, classes, {
+      ownerState: ownerState,
+      ...other,
+      classes: {
+        ...classes,
         root: classes.switchBase
-      })
-    })), /*#__PURE__*/_jsx(SwitchTrack, {
+      }
+    }), /*#__PURE__*/_jsx(SwitchTrack, {
       className: classes.track,
       ownerState: ownerState
     })]

package/modern/Tab/Tab.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "disabled", "disableFocusRipple", "fullWidth", "icon", "iconPosition", "indicator", "label", "onChange", "onClick", "onFocus", "selected", "selectionFollowsFocus", "textColor", "value", "wrapped"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -41,7 +38,8 @@ const TabRoot = styled(ButtonBase, {
 })(({
   theme,
   ownerState
-}) => _extends({}, theme.typography.button, {
+}) => ({
+  ...theme.typography.button,
   maxWidth: 360,
   minWidth: 90,
   position: 'relative',
@@ -50,57 +48,68 @@ const TabRoot = styled(ButtonBase, {
   padding: '12px 16px',
   overflow: 'hidden',
   whiteSpace: 'normal',
-  textAlign: 'center'
-}, ownerState.label && {
-  flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'
-}, {
-  lineHeight: 1.25
-}, ownerState.icon && ownerState.label && {
-  minHeight: 72,
-  paddingTop: 9,
-  paddingBottom: 9,
-  [`& > .${tabClasses.iconWrapper}`]: _extends({}, ownerState.iconPosition === 'top' && {
-    marginBottom: 6
-  }, ownerState.iconPosition === 'bottom' && {
-    marginTop: 6
-  }, ownerState.iconPosition === 'start' && {
-    marginRight: theme.spacing(1)
-  }, ownerState.iconPosition === 'end' && {
-    marginLeft: theme.spacing(1)
+  textAlign: 'center',
+  ...(ownerState.label && {
+    flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'
+  }),
+  lineHeight: 1.25,
+  ...(ownerState.icon && ownerState.label && {
+    minHeight: 72,
+    paddingTop: 9,
+    paddingBottom: 9,
+    [`& > .${tabClasses.iconWrapper}`]: {
+      ...(ownerState.iconPosition === 'top' && {
+        marginBottom: 6
+      }),
+      ...(ownerState.iconPosition === 'bottom' && {
+        marginTop: 6
+      }),
+      ...(ownerState.iconPosition === 'start' && {
+        marginRight: theme.spacing(1)
+      }),
+      ...(ownerState.iconPosition === 'end' && {
+        marginLeft: theme.spacing(1)
+      })
+    }
+  }),
+  ...(ownerState.textColor === 'inherit' && {
+    color: 'inherit',
+    opacity: 0.6,
+    // same opacity as theme.palette.text.secondary
+    [`&.${tabClasses.selected}`]: {
+      opacity: 1
+    },
+    [`&.${tabClasses.disabled}`]: {
+      opacity: (theme.vars || theme).palette.action.disabledOpacity
+    }
+  }),
+  ...(ownerState.textColor === 'primary' && {
+    color: (theme.vars || theme).palette.text.secondary,
+    [`&.${tabClasses.selected}`]: {
+      color: (theme.vars || theme).palette.primary.main
+    },
+    [`&.${tabClasses.disabled}`]: {
+      color: (theme.vars || theme).palette.text.disabled
+    }
+  }),
+  ...(ownerState.textColor === 'secondary' && {
+    color: (theme.vars || theme).palette.text.secondary,
+    [`&.${tabClasses.selected}`]: {
+      color: (theme.vars || theme).palette.secondary.main
+    },
+    [`&.${tabClasses.disabled}`]: {
+      color: (theme.vars || theme).palette.text.disabled
+    }
+  }),
+  ...(ownerState.fullWidth && {
+    flexShrink: 1,
+    flexGrow: 1,
+    flexBasis: 0,
+    maxWidth: 'none'
+  }),
+  ...(ownerState.wrapped && {
+    fontSize: theme.typography.pxToRem(12)
   })
-}, ownerState.textColor === 'inherit' && {
-  color: 'inherit',
-  opacity: 0.6,
-  // same opacity as theme.palette.text.secondary
-  [`&.${tabClasses.selected}`]: {
-    opacity: 1
-  },
-  [`&.${tabClasses.disabled}`]: {
-    opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.textColor === 'primary' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tabClasses.selected}`]: {
-    color: (theme.vars || theme).palette.primary.main
-  },
-  [`&.${tabClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.textColor === 'secondary' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tabClasses.selected}`]: {
-    color: (theme.vars || theme).palette.secondary.main
-  },
-  [`&.${tabClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.fullWidth && {
-  flexShrink: 1,
-  flexGrow: 1,
-  flexBasis: 0,
-  maxWidth: 'none'
-}, ownerState.wrapped && {
-  fontSize: theme.typography.pxToRem(12)
 }));
 const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
   const props = useThemeProps({
@@ -108,30 +117,31 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     name: 'MuiTab'
   });
   const {
-      className,
-      disabled = false,
-      disableFocusRipple = false,
-      // eslint-disable-next-line react/prop-types
-      fullWidth,
-      icon: iconProp,
-      iconPosition = 'top',
-      // eslint-disable-next-line react/prop-types
-      indicator,
-      label,
-      onChange,
-      onClick,
-      onFocus,
-      // eslint-disable-next-line react/prop-types
-      selected,
-      // eslint-disable-next-line react/prop-types
-      selectionFollowsFocus,
-      // eslint-disable-next-line react/prop-types
-      textColor = 'inherit',
-      value,
-      wrapped = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    disabled = false,
+    disableFocusRipple = false,
+    // eslint-disable-next-line react/prop-types
+    fullWidth,
+    icon: iconProp,
+    iconPosition = 'top',
+    // eslint-disable-next-line react/prop-types
+    indicator,
+    label,
+    onChange,
+    onClick,
+    onFocus,
+    // eslint-disable-next-line react/prop-types
+    selected,
+    // eslint-disable-next-line react/prop-types
+    selectionFollowsFocus,
+    // eslint-disable-next-line react/prop-types
+    textColor = 'inherit',
+    value,
+    wrapped = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     disabled,
     disableFocusRipple,
     selected,
@@ -141,7 +151,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     fullWidth,
     textColor,
     wrapped
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const icon = iconProp && label && /*#__PURE__*/React.isValidElement(iconProp) ? /*#__PURE__*/React.cloneElement(iconProp, {
     className: clsx(classes.iconWrapper, iconProp.props.className)
@@ -162,7 +172,7 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
       onFocus(event);
     }
   };
-  return /*#__PURE__*/_jsxs(TabRoot, _extends({
+  return /*#__PURE__*/_jsxs(TabRoot, {
     focusRipple: !disableFocusRipple,
     className: clsx(classes.root, className),
     ref: ref,
@@ -172,14 +182,14 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     onClick: handleClick,
     onFocus: handleFocus,
     ownerState: ownerState,
-    tabIndex: selected ? 0 : -1
-  }, other, {
+    tabIndex: selected ? 0 : -1,
+    ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {
       children: [icon, label]
     }) : /*#__PURE__*/_jsxs(React.Fragment, {
       children: [label, icon]
     }), indicator]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Tab.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/TabScrollButton/TabScrollButton.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "slots", "slotProps", "direction", "orientation", "disabled"];
 /* eslint-disable jsx-a11y/aria-role */
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -36,19 +33,20 @@ const TabScrollButtonRoot = styled(ButtonBase, {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   width: 40,
   flexShrink: 0,
   opacity: 0.8,
   [`&.${tabScrollButtonClasses.disabled}`]: {
     opacity: 0
-  }
-}, ownerState.orientation === 'vertical' && {
-  width: '100%',
-  height: 40,
-  '& svg': {
-    transform: `rotate(${ownerState.isRtl ? -90 : 90}deg)`
-  }
+  },
+  ...(ownerState.orientation === 'vertical' && {
+    width: '100%',
+    height: 40,
+    '& svg': {
+      transform: `rotate(${ownerState.isRtl ? -90 : 90}deg)`
+    }
+  })
 }));
 const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
   const props = useThemeProps({
@@ -56,17 +54,20 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     name: 'MuiTabScrollButton'
   });
   const {
-      className,
-      slots = {},
-      slotProps = {},
-      direction
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    slots = {},
+    slotProps = {},
+    direction,
+    orientation,
+    disabled,
+    ...other
+  } = props;
   const theme = useTheme();
   const isRtl = theme.direction === 'rtl';
-  const ownerState = _extends({
-    isRtl
-  }, props);
+  const ownerState = {
+    isRtl,
+    ...props
+  };
   const classes = useUtilityClasses(ownerState);
   const StartButtonIcon = slots.StartScrollButtonIcon ?? KeyboardArrowLeft;
   const EndButtonIcon = slots.EndScrollButtonIcon ?? KeyboardArrowRight;
@@ -86,16 +87,20 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     },
     ownerState
   });
-  return /*#__PURE__*/_jsx(TabScrollButtonRoot, _extends({
+  return /*#__PURE__*/_jsx(TabScrollButtonRoot, {
     component: "div",
     className: clsx(classes.root, className),
     ref: ref,
     role: null,
     ownerState: ownerState,
-    tabIndex: null
-  }, other, {
-    children: direction === 'left' ? /*#__PURE__*/_jsx(StartButtonIcon, _extends({}, startButtonIconProps)) : /*#__PURE__*/_jsx(EndButtonIcon, _extends({}, endButtonIconProps))
-  }));
+    tabIndex: null,
+    ...other,
+    children: direction === 'left' ? /*#__PURE__*/_jsx(StartButtonIcon, {
+      ...startButtonIconProps
+    }) : /*#__PURE__*/_jsx(EndButtonIcon, {
+      ...endButtonIconProps
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/Table/Table.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "component", "padding", "size", "stickyHeader"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -32,19 +29,21 @@ const TableRoot = styled('table', {
 })(({
   theme,
   ownerState
-}) => _extends({
+}) => ({
   display: 'table',
   width: '100%',
   borderCollapse: 'collapse',
   borderSpacing: 0,
-  '& caption': _extends({}, theme.typography.body2, {
+  '& caption': {
+    ...theme.typography.body2,
     padding: theme.spacing(2),
     color: (theme.vars || theme).palette.text.secondary,
     textAlign: 'left',
     captionSide: 'bottom'
+  },
+  ...(ownerState.stickyHeader && {
+    borderCollapse: 'separate'
   })
-}, ownerState.stickyHeader && {
-  borderCollapse: 'separate'
 }));
 const defaultComponent = 'table';
 const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
@@ -53,19 +52,20 @@ const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
     name: 'MuiTable'
   });
   const {
-      className,
-      component = defaultComponent,
-      padding = 'normal',
-      size = 'medium',
-      stickyHeader = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = defaultComponent,
+    padding = 'normal',
+    size = 'medium',
+    stickyHeader = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     padding,
     size,
     stickyHeader
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const table = React.useMemo(() => ({
     padding,
@@ -74,13 +74,14 @@ const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {
   }), [padding, size, stickyHeader]);
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: table,
-    children: /*#__PURE__*/_jsx(TableRoot, _extends({
+    children: /*#__PURE__*/_jsx(TableRoot, {
       as: component,
       role: component === defaultComponent ? null : 'table',
       ref: ref,
       className: clsx(classes.root, className),
-      ownerState: ownerState
-    }, other))
+      ownerState: ownerState,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Table.propTypes /* remove-proptypes */ = {

package/modern/TableBody/TableBody.js

@@ -1,6 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "component"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -36,23 +33,25 @@ const TableBody = /*#__PURE__*/React.forwardRef(function TableBody(inProps, ref)
     name: 'MuiTableBody'
   });
   const {
-      className,
-      component = defaultComponent
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    component = defaultComponent,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   return /*#__PURE__*/_jsx(Tablelvl2Context.Provider, {
     value: tablelvl2,
-    children: /*#__PURE__*/_jsx(TableBodyRoot, _extends({
+    children: /*#__PURE__*/_jsx(TableBodyRoot, {
       className: clsx(classes.root, className),
       as: component,
       ref: ref,
       role: component === defaultComponent ? null : 'rowgroup',
-      ownerState: ownerState
-    }, other))
+      ownerState: ownerState,
+      ...other
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? TableBody.propTypes /* remove-proptypes */ = {