@mui/material 5.5.3 → 5.6.0

package/darkScrollbar/index.d.ts

@@ -1,28 +1,28 @@
-export default function darkScrollbar(options?: {
-    track: string;
-    thumb: string;
-    active: string;
-}): {
-    scrollbarColor: string;
-    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
-        borderRadius: number;
-        backgroundColor: string;
-        minHeight: number;
-        border: string;
-    };
-    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: string;
-    };
-    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
-        backgroundColor: string;
-    };
-};
+export default function darkScrollbar(options?: {
+    track: string;
+    thumb: string;
+    active: string;
+}): {
+    scrollbarColor: string;
+    '&::-webkit-scrollbar, & *::-webkit-scrollbar': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': {
+        borderRadius: number;
+        backgroundColor: string;
+        minHeight: number;
+        border: string;
+    };
+    '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': {
+        backgroundColor: string;
+    };
+    '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': {
+        backgroundColor: string;
+    };
+};

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.3
+/** @license MUI v5.6.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internal/switchBaseClasses.d.ts

@@ -1,12 +1,12 @@
-export interface SwitchBaseClasses {
-    root: string;
-    checked: string;
-    disabled: string;
-    input: string;
-    edgeStart: string;
-    edgeEnd: string;
-}
-export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
-export declare function getSwitchBaseUtilityClass(slot: string): string;
-declare const switchBaseClasses: SwitchBaseClasses;
-export default switchBaseClasses;
+export interface SwitchBaseClasses {
+    root: string;
+    checked: string;
+    disabled: string;
+    input: string;
+    edgeStart: string;
+    edgeEnd: string;
+}
+export declare type SwitchBaseClassKey = keyof SwitchBaseClasses;
+export declare function getSwitchBaseUtilityClass(slot: string): string;
+declare const switchBaseClasses: SwitchBaseClasses;
+export default switchBaseClasses;

package/legacy/Badge/Badge.js

@@ -5,27 +5,28 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { usePreviousProps } from '@mui/utils';
-import { generateUtilityClasses } from '@mui/base';
-import BadgeUnstyled, { badgeUnstyledClasses, getBadgeUtilityClass } from '@mui/base/BadgeUnstyled';
+import BadgeUnstyled from '@mui/base/BadgeUnstyled';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
 import capitalize from '../utils/capitalize';
+import badgeClasses, { getBadgeUtilityClass } from './badgeClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export var badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
-'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
 var RADIUS_STANDARD = 10;
 var RADIUS_DOT = 4;
 
 var extendUtilityClasses = function extendUtilityClasses(ownerState) {
   var color = ownerState.color,
       anchorOrigin = ownerState.anchorOrigin,
+      invisible = ownerState.invisible,
       overlap = ownerState.overlap,
+      variant = ownerState.variant,
       _ownerState$classes = ownerState.classes,
       classes = _ownerState$classes === void 0 ? {} : _ownerState$classes;
-  return _extends({}, classes, {
-    badge: clsx(classes.badge, getBadgeUtilityClass("anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap))), getBadgeUtilityClass("overlap".concat(capitalize(overlap))), color !== 'default' && [getBadgeUtilityClass("color".concat(capitalize(color))), classes["color".concat(capitalize(color))]])
-  });
+  return {
+    root: clsx(classes.root, 'root'),
+    badge: clsx(classes.badge, getBadgeUtilityClass('badge'), getBadgeUtilityClass(variant), "anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)), getBadgeUtilityClass("anchorOrigin".concat(capitalize(anchorOrigin.vertical)).concat(capitalize(anchorOrigin.horizontal)).concat(capitalize(overlap))), getBadgeUtilityClass("overlap".concat(capitalize(overlap))), color !== 'default' && [getBadgeUtilityClass("color".concat(capitalize(color))), classes["color".concat(capitalize(color))]], invisible && getBadgeUtilityClass('invisible'))
+  };
 };
 
 var BadgeRoot = styled('span', {
@@ -146,7 +147,7 @@ var BadgeBadge = styled('span', {
   });
 });
 var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
-  var _componentsProps$root, _componentsProps$badg;
+  var _componentsProps$root, _componentsProps$root2, _componentsProps$badg, _componentsProps$badg2;
 
   var props = useThemeProps({
     props: inProps,
@@ -158,6 +159,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     vertical: 'top',
     horizontal: 'right'
   } : _props$anchorOrigin,
+      className = props.className,
       _props$component = props.component,
       component = _props$component === void 0 ? 'span' : _props$component,
       _props$components = props.components,
@@ -170,17 +172,19 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       colorProp = _props$color === void 0 ? 'default' : _props$color,
       _props$invisible = props.invisible,
       invisibleProp = _props$invisible === void 0 ? false : _props$invisible,
+      max = props.max,
       badgeContentProp = props.badgeContent,
       _props$showZero = props.showZero,
       showZero = _props$showZero === void 0 ? false : _props$showZero,
       _props$variant = props.variant,
       variantProp = _props$variant === void 0 ? 'standard' : _props$variant,
-      other = _objectWithoutProperties(props, ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"]);
+      other = _objectWithoutProperties(props, ["anchorOrigin", "className", "component", "components", "componentsProps", "overlap", "color", "invisible", "max", "badgeContent", "showZero", "variant"]);
 
   var prevProps = usePreviousProps({
     anchorOrigin: anchorOriginProp,
     color: colorProp,
-    overlap: overlapProp
+    overlap: overlapProp,
+    variant: variantProp
   });
   var invisible = invisibleProp;
 
@@ -194,43 +198,57 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       _ref10$overlap = _ref10.overlap,
       overlap = _ref10$overlap === void 0 ? overlapProp : _ref10$overlap,
       _ref10$anchorOrigin = _ref10.anchorOrigin,
-      anchorOrigin = _ref10$anchorOrigin === void 0 ? anchorOriginProp : _ref10$anchorOrigin;
+      anchorOrigin = _ref10$anchorOrigin === void 0 ? anchorOriginProp : _ref10$anchorOrigin,
+      _ref10$variant = _ref10.variant,
+      variant = _ref10$variant === void 0 ? variantProp : _ref10$variant;
 
   var ownerState = _extends({}, props, {
     anchorOrigin: anchorOrigin,
     invisible: invisible,
     color: color,
-    overlap: overlap
+    overlap: overlap,
+    variant: variant
   });
 
   var classes = extendUtilityClasses(ownerState);
+  var displayValue;
+
+  if (variant !== 'dot') {
+    displayValue = badgeContentProp && Number(badgeContentProp) > max ? "".concat(max, "+") : badgeContentProp;
+  }
+
   return /*#__PURE__*/_jsx(BadgeUnstyled, _extends({
-    anchorOrigin: anchorOrigin,
     invisible: invisibleProp,
-    badgeContent: badgeContentProp,
+    badgeContent: displayValue,
     showZero: showZero,
-    variant: variantProp
+    max: max
   }, other, {
     components: _extends({
       Root: BadgeRoot,
       Badge: BadgeBadge
     }, components),
+    className: clsx(className, classes.root, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.className),
     componentsProps: {
       root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
         as: component,
-        ownerState: _extends({}, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState, {
+        ownerState: _extends({}, (_componentsProps$root2 = componentsProps.root) == null ? void 0 : _componentsProps$root2.ownerState, {
+          anchorOrigin: anchorOrigin,
           color: color,
-          overlap: overlap
+          overlap: overlap,
+          variant: variant
         })
       }),
-      badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
-        ownerState: _extends({}, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.ownerState, {
+      badge: _extends({}, componentsProps.badge, {
+        className: clsx(classes.badge, (_componentsProps$badg = componentsProps.badge) == null ? void 0 : _componentsProps$badg.className)
+      }, shouldSpreadAdditionalProps(components.Badge) && {
+        ownerState: _extends({}, (_componentsProps$badg2 = componentsProps.badge) == null ? void 0 : _componentsProps$badg2.ownerState, {
+          anchorOrigin: anchorOrigin,
           color: color,
-          overlap: overlap
+          overlap: overlap,
+          variant: variant
         })
       })
     },
-    classes: classes,
     ref: ref
   }));
 });
@@ -269,6 +287,11 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
    */
   classes: PropTypes.object,
 
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the

package/legacy/Badge/badgeClasses.js

@@ -0,0 +1,8 @@
+import generateUtilityClasses from '@mui/base/generateUtilityClasses';
+import generateUtilityClass from '@mui/base/generateUtilityClass';
+export function getBadgeUtilityClass(slot) {
+  return generateUtilityClass('MuiBadge', slot);
+}
+var badgeClasses = generateUtilityClasses('MuiBadge', ['root', 'badge', 'dot', 'standard', 'anchorOriginTopRight', 'anchorOriginBottomRight', 'anchorOriginTopLeft', 'anchorOriginBottomLeft', 'invisible', 'colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
+'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']);
+export default badgeClasses;

package/legacy/Badge/index.js

@@ -1,2 +1,3 @@
 export { default } from './Badge';
-export * from './Badge';
+export { default as badgeClasses } from './badgeClasses';
+export * from './badgeClasses';

package/legacy/Button/Button.js

@@ -60,84 +60,85 @@ var ButtonRoot = styled(ButtonBase, {
     return [styles.root, styles[ownerState.variant], styles["".concat(ownerState.variant).concat(capitalize(ownerState.color))], styles["size".concat(capitalize(ownerState.size))], styles["".concat(ownerState.variant, "Size").concat(capitalize(ownerState.size))], ownerState.color === 'inherit' && styles.colorInherit, ownerState.disableElevation && styles.disableElevation, ownerState.fullWidth && styles.fullWidth];
   }
 })(function (_ref) {
-  var _extends2;
+  var _extends2, _theme$palette$getCon, _theme$palette;
 
   var theme = _ref.theme,
       ownerState = _ref.ownerState;
   return _extends({}, theme.typography.button, (_extends2 = {
     minWidth: 64,
     padding: '6px 16px',
-    borderRadius: theme.shape.borderRadius,
+    borderRadius: (theme.vars || theme).shape.borderRadius,
     transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
       duration: theme.transitions.duration.short
     }),
     '&:hover': _extends({
       textDecoration: 'none',
-      backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.text.primaryChannel, " / ").concat(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: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(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 ".concat(theme.palette[ownerState.color].main),
-      backgroundColor: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
+      border: "1px solid ".concat((theme.vars || theme).palette[ownerState.color].main),
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / ").concat(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.palette.grey.A100,
-      boxShadow: theme.shadows[4],
+      backgroundColor: (theme.vars || theme).palette.grey.A100,
+      boxShadow: (theme.vars || theme).shadows[4],
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        boxShadow: theme.shadows[2],
-        backgroundColor: theme.palette.grey[300]
+        boxShadow: (theme.vars || theme).shadows[2],
+        backgroundColor: (theme.vars || theme).palette.grey[300]
       }
     }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-      backgroundColor: theme.palette[ownerState.color].dark,
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: theme.palette[ownerState.color].main
+        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
       }
     }),
     '&:active': _extends({}, ownerState.variant === 'contained' && {
-      boxShadow: theme.shadows[8]
+      boxShadow: (theme.vars || theme).shadows[8]
     })
   }, _defineProperty(_extends2, "&.".concat(buttonClasses.focusVisible), _extends({}, ownerState.variant === 'contained' && {
-    boxShadow: theme.shadows[6]
+    boxShadow: (theme.vars || theme).shadows[6]
   })), _defineProperty(_extends2, "&.".concat(buttonClasses.disabled), _extends({
-    color: theme.palette.action.disabled
+    color: (theme.vars || theme).palette.action.disabled
   }, ownerState.variant === 'outlined' && {
-    border: "1px solid ".concat(theme.palette.action.disabledBackground)
+    border: "1px solid ".concat((theme.vars || theme).palette.action.disabledBackground)
   }, ownerState.variant === 'outlined' && ownerState.color === 'secondary' && {
-    border: "1px solid ".concat(theme.palette.action.disabled)
+    border: "1px solid ".concat((theme.vars || theme).palette.action.disabled)
   }, ownerState.variant === 'contained' && {
-    color: theme.palette.action.disabled,
-    boxShadow: theme.shadows[0],
-    backgroundColor: theme.palette.action.disabledBackground
+    color: (theme.vars || theme).palette.action.disabled,
+    boxShadow: (theme.vars || theme).shadows[0],
+    backgroundColor: (theme.vars || theme).palette.action.disabledBackground
   })), _extends2), ownerState.variant === 'text' && {
     padding: '6px 8px'
   }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].main
   }, ownerState.variant === 'outlined' && {
     padding: '5px 15px',
-    border: "1px solid ".concat(theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)')
+    border: '1px solid currentColor'
   }, ownerState.variant === 'outlined' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].main,
-    border: "1px solid ".concat(alpha(theme.palette[ownerState.color].main, 0.5))
+    color: (theme.vars || theme).palette[ownerState.color].main,
+    border: theme.vars ? "1px solid rgba(".concat(theme.vars.palette[ownerState.color].mainChannel, " / 0.5)") : "1px solid ".concat(alpha(theme.palette[ownerState.color].main, 0.5))
   }, ownerState.variant === 'contained' && {
-    color: theme.palette.getContrastText(theme.palette.grey[300]),
-    backgroundColor: theme.palette.grey[300],
-    boxShadow: theme.shadows[2]
+    color: theme.vars ? // this is safe because grey does not change between default light/dark mode
+    theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
+    backgroundColor: (theme.vars || theme).palette.grey[300],
+    boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
-    color: theme.palette[ownerState.color].contrastText,
-    backgroundColor: theme.palette[ownerState.color].main
+    color: (theme.vars || theme).palette[ownerState.color].contrastText,
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main
   }, ownerState.color === 'inherit' && {
     color: 'inherit',
     borderColor: 'currentColor'

package/legacy/Link/Link.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _extends from "@babel/runtime/helpers/esm/extends";
@@ -9,6 +10,7 @@ import { unstable_composeClasses as composeClasses } from '@mui/base';
 import { alpha, getPath } from '@mui/system';
 import capitalize from '../utils/capitalize';
 import styled from '../styles/styled';
+import useTheme from '../styles/useTheme';
 import useThemeProps from '../styles/useThemeProps';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
@@ -91,6 +93,7 @@ var LinkRoot = styled(Typography, {
   }));
 });
 var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
+  var theme = useTheme();
   var props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
@@ -108,7 +111,8 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
       underline = _props$underline === void 0 ? 'always' : _props$underline,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'inherit' : _props$variant,
-      other = _objectWithoutProperties(props, ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant"]);
+      sx = props.sx,
+      other = _objectWithoutProperties(props, ["className", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"]);
 
   var _useIsFocusVisible = useIsFocusVisible(),
       isFocusVisibleRef = _useIsFocusVisible.isFocusVisibleRef,
@@ -147,7 +151,9 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   };
 
   var ownerState = _extends({}, props, {
-    color: color,
+    // It is too complex to support any types of `sx`.
+    // Need to find a better way to get rid of the color manipulation for `textDecorationColor`.
+    color: (typeof sx === 'function' ? sx(theme).color : sx == null ? void 0 : sx.color) || color,
     component: component,
     focusVisible: focusVisible,
     underline: underline,
@@ -158,13 +164,15 @@ var Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   return /*#__PURE__*/_jsx(LinkRoot, _extends({
     className: clsx(classes.root, className),
     classes: TypographyClasses,
-    color: color,
     component: component,
     onBlur: handleBlur,
     onFocus: handleFocus,
     ref: handlerRef,
     ownerState: ownerState,
-    variant: variant
+    variant: variant,
+    sx: [{
+      color: colorTransformations[color] || color
+    }].concat(_toConsumableArray(Array.isArray(sx) ? sx : [sx]))
   }, other));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes

package/legacy/ListItemButton/ListItemButton.js

@@ -53,6 +53,7 @@ var ListItemButtonRoot = styled(ButtonBase, {
     alignItems: 'center',
     position: 'relative',
     textDecoration: 'none',
+    minWidth: 0,
     boxSizing: 'border-box',
     textAlign: 'left',
     paddingTop: 8,

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.5.3
+/** @license MUI v5.6.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.