@mui/material 5.8.2 → 5.8.5

package/Chip/Chip.js

@@ -78,6 +78,7 @@ const ChipRoot = styled('div', {
   ownerState
 }) => {
   const deleteIconColor = alpha(theme.palette.text.primary, 0.26);
+  const textColor = theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300];
   return _extends({
     maxWidth: '100%',
     fontFamily: theme.typography.fontFamily,
@@ -86,8 +87,8 @@ const ChipRoot = styled('div', {
     alignItems: 'center',
     justifyContent: 'center',
     height: 32,
-    color: theme.palette.text.primary,
-    backgroundColor: theme.palette.action.selected,
+    color: (theme.vars || theme).palette.text.primary,
+    backgroundColor: (theme.vars || theme).palette.action.selected,
     borderRadius: 32 / 2,
     whiteSpace: 'nowrap',
     transition: theme.transitions.create(['background-color', 'box-shadow']),
@@ -103,7 +104,7 @@ const ChipRoot = styled('div', {
     verticalAlign: 'middle',
     boxSizing: 'border-box',
     [`&.${chipClasses.disabled}`]: {
-      opacity: theme.palette.action.disabledOpacity,
+      opacity: (theme.vars || theme).palette.action.disabledOpacity,
       pointerEvents: 'none'
     },
     [`& .${chipClasses.avatar}`]: {
@@ -111,16 +112,16 @@ const ChipRoot = styled('div', {
       marginRight: -6,
       width: 24,
       height: 24,
-      color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
+      color: theme.vars ? theme.vars.palette.Chip.defaultAvatarColor : textColor,
       fontSize: theme.typography.pxToRem(12)
     },
     [`& .${chipClasses.avatarColorPrimary}`]: {
-      color: theme.palette.primary.contrastText,
-      backgroundColor: theme.palette.primary.dark
+      color: (theme.vars || theme).palette.primary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.primary.dark
     },
     [`& .${chipClasses.avatarColorSecondary}`]: {
-      color: theme.palette.secondary.contrastText,
-      backgroundColor: theme.palette.secondary.dark
+      color: (theme.vars || theme).palette.secondary.contrastText,
+      backgroundColor: (theme.vars || theme).palette.secondary.dark
     },
     [`& .${chipClasses.avatarSmall}`]: {
       marginLeft: 4,
@@ -130,7 +131,7 @@ const ChipRoot = styled('div', {
       fontSize: theme.typography.pxToRem(10)
     },
     [`& .${chipClasses.icon}`]: _extends({
-      color: theme.palette.mode === 'light' ? theme.palette.grey[700] : theme.palette.grey[300],
+      color: theme.vars ? theme.vars.palette.Chip.defaultIconColor : textColor,
       marginLeft: 5,
       marginRight: -6
     }, ownerState.size === 'small' && {
@@ -142,35 +143,35 @@ const ChipRoot = styled('div', {
     }),
     [`& .${chipClasses.deleteIcon}`]: _extends({
       WebkitTapHighlightColor: 'transparent',
-      color: deleteIconColor,
+      color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.26)` : deleteIconColor,
       fontSize: 22,
       cursor: 'pointer',
       margin: '0 5px 0 -6px',
       '&:hover': {
-        color: alpha(deleteIconColor, 0.4)
+        color: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / 0.4)` : alpha(deleteIconColor, 0.4)
       }
     }, ownerState.size === 'small' && {
       fontSize: 16,
       marginRight: 4,
       marginLeft: -4
     }, ownerState.color !== 'default' && {
-      color: alpha(theme.palette[ownerState.color].contrastText, 0.7),
+      color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].contrastTextChannel} / 0.7)` : alpha(theme.palette[ownerState.color].contrastText, 0.7),
       '&:hover, &:active': {
-        color: theme.palette[ownerState.color].contrastText
+        color: (theme.vars || theme).palette[ownerState.color].contrastText
       }
     })
   }, ownerState.size === 'small' && {
     height: 24
   }, ownerState.color !== 'default' && {
-    backgroundColor: theme.palette[ownerState.color].main,
-    color: theme.palette[ownerState.color].contrastText
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
+    color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.onDelete && {
     [`&.${chipClasses.focusVisible}`]: {
-      backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      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.palette[ownerState.color].dark
+      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
     }
   });
 }, ({
@@ -181,29 +182,29 @@ const ChipRoot = styled('div', {
   WebkitTapHighlightColor: 'transparent',
   cursor: 'pointer',
   '&:hover': {
-    backgroundColor: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+    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: alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    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.shadows[1]
+    boxShadow: (theme.vars || theme).shadows[1]
   }
 }, ownerState.clickable && ownerState.color !== 'default' && {
   [`&:hover, &.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.palette[ownerState.color].dark
+    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
   }
 }), ({
   theme,
   ownerState
 }) => _extends({}, ownerState.variant === 'outlined' && {
   backgroundColor: 'transparent',
-  border: `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700]}`,
+  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.palette.action.hover
+    backgroundColor: (theme.vars || theme).palette.action.hover
   },
   [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.palette.action.focus
+    backgroundColor: (theme.vars || theme).palette.action.focus
   },
   [`& .${chipClasses.avatar}`]: {
     marginLeft: 4
@@ -224,18 +225,18 @@ const ChipRoot = styled('div', {
     marginRight: 3
   }
 }, ownerState.variant === 'outlined' && ownerState.color !== 'default' && {
-  color: theme.palette[ownerState.color].main,
-  border: `1px solid ${alpha(theme.palette[ownerState.color].main, 0.7)}`,
+  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: alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity)
+    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: alpha(theme.palette[ownerState.color].main, theme.palette.action.focusOpacity)
+    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: alpha(theme.palette[ownerState.color].main, 0.7),
+    color: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.7)` : alpha(theme.palette[ownerState.color].main, 0.7),
     '&:hover, &:active': {
-      color: theme.palette[ownerState.color].main
+      color: (theme.vars || theme).palette[ownerState.color].main
     }
   }
 }));

package/Dialog/Dialog.js

@@ -125,7 +125,7 @@ const DialogPaper = styled(Paper, {
       maxWidth: 'calc(100% - 64px)'
     }
   }
-}, ownerState.maxWidth !== 'xs' && {
+}, ownerState.maxWidth && ownerState.maxWidth !== 'xs' && {
   maxWidth: `${theme.breakpoints.values[ownerState.maxWidth]}${theme.breakpoints.unit}`,
   [`&.${dialogClasses.paperScrollBody}`]: {
     [theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2)]: {
@@ -226,12 +226,16 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
   }, [ariaLabelledby]);
   return /*#__PURE__*/_jsx(DialogRoot, _extends({
     className: clsx(classes.root, className),
-    BackdropProps: _extends({
-      transitionDuration,
-      as: BackdropComponent
-    }, BackdropProps),
     closeAfterTransition: true,
-    BackdropComponent: DialogBackdrop,
+    components: {
+      Backdrop: DialogBackdrop
+    },
+    componentsProps: {
+      backdrop: _extends({
+        transitionDuration,
+        as: BackdropComponent
+      }, BackdropProps)
+    },
     disableEscapeKeyDown: disableEscapeKeyDown,
     onClose: onClose,
     open: open,
@@ -287,6 +291,7 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes
 
   /**
    * A backdrop component. This prop enables custom backdrop rendering.
+   * @deprecated Use `components.Backdrop` instead.
    * @default styled(Backdrop, {
    *   name: 'MuiModal',
    *   slot: 'Backdrop',

package/FilledInput/FilledInput.js

@@ -39,36 +39,38 @@ const FilledInputRoot = styled(InputBaseRoot, {
   theme,
   ownerState
 }) => {
-  var _theme$palette;
+  var _palette;
 
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
+  const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
+  const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';
   return _extends({
     position: 'relative',
-    backgroundColor,
-    borderTopLeftRadius: theme.shape.borderRadius,
-    borderTopRightRadius: theme.shape.borderRadius,
+    backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor,
+    borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
+    borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
     transition: theme.transitions.create('background-color', {
       duration: theme.transitions.duration.shorter,
       easing: theme.transitions.easing.easeOut
     }),
     '&:hover': {
-      backgroundColor: light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)',
+      backgroundColor: theme.vars ? theme.vars.palette.FilledInput.hoverBg : hoverBackground,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor
+        backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
       }
     },
     [`&.${filledInputClasses.focused}`]: {
-      backgroundColor
+      backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor
     },
     [`&.${filledInputClasses.disabled}`]: {
-      backgroundColor: light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)'
+      backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
     }
   }, !ownerState.disableUnderline && {
     '&:after': {
-      borderBottom: `2px solid ${(_theme$palette = theme.palette[ownerState.color || 'primary']) == null ? void 0 : _theme$palette.main}`,
+      borderBottom: `2px solid ${(_palette = (theme.vars || theme).palette[ownerState.color || 'primary']) == null ? void 0 : _palette.main}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -89,12 +91,12 @@ const FilledInputRoot = styled(InputBaseRoot, {
       transform: 'scaleX(1) translateX(0)'
     },
     [`&.${filledInputClasses.error}:after`]: {
-      borderBottomColor: theme.palette.error.main,
+      borderBottomColor: (theme.vars || theme).palette.error.main,
       transform: 'scaleX(1)' // error is always underlined in red
 
     },
     '&:before': {
-      borderBottom: `1px solid ${bottomLineColor}`,
+      borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})` : bottomLineColor}`,
       left: 0,
       bottom: 0,
       // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
@@ -108,7 +110,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
 
     },
     [`&:hover:not(.${filledInputClasses.disabled}):before`]: {
-      borderBottom: `1px solid ${theme.palette.text.primary}`
+      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
     },
     [`&.${filledInputClasses.disabled}:before`]: {
       borderBottomStyle: 'dotted'
@@ -138,7 +140,8 @@ const FilledInputInput = styled(InputBaseInput, {
   paddingTop: 25,
   paddingRight: 12,
   paddingBottom: 8,
-  paddingLeft: 12,
+  paddingLeft: 12
+}, !theme.vars && {
   '&:-webkit-autofill': {
     WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
     WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
@@ -146,6 +149,18 @@ const FilledInputInput = styled(InputBaseInput, {
     borderTopLeftRadius: 'inherit',
     borderTopRightRadius: 'inherit'
   }
+}, theme.vars && {
+  '&:-webkit-autofill': {
+    borderTopLeftRadius: 'inherit',
+    borderTopRightRadius: 'inherit'
+  },
+  [theme.getColorSchemeSelector('dark')]: {
+    '&:-webkit-autofill': {
+      WebkitBoxShadow: '0 0 0 100px #266798 inset',
+      WebkitTextFillColor: '#fff',
+      caretColor: '#fff'
+    }
+  }
 }, ownerState.size === 'small' && {
   paddingTop: 21,
   paddingBottom: 4

package/Grid/Grid.d.ts

@@ -1,5 +1,12 @@
 import * as React from 'react';
-import { ResponsiveStyleValue, SxProps, SystemProps } from '@mui/system';
+import {
+  ResponsiveStyleValue,
+  SxProps,
+  SystemProps,
+  Breakpoint,
+  BreakpointOverrides,
+} from '@mui/system';
+import { IfEquals } from '@mui/types';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { GridClasses } from './gridClasses';
@@ -12,6 +19,70 @@ export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 
 export type GridSize = 'auto' | number;
 
+interface RegularBreakpoints {
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `lg` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  lg?: boolean | GridSize;
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `md` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  md?: boolean | GridSize;
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `sm` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  sm?: boolean | GridSize;
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for the `xl` breakpoint and wider screens if not overridden.
+   * @default false
+   */
+  xl?: boolean | GridSize;
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12 by default).
+   * If 'auto', the grid item's width matches its content.
+   * If false, the prop is ignored.
+   * If true, the grid item's width grows to use the space available in the grid container.
+   * The value is applied for all the screen sizes with the lowest priority.
+   * @default false
+   */
+  xs?: boolean | GridSize;
+}
+
+type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize>>;
+
+interface BreakpointOverridesEmpty {}
+
+type Breakpoints = IfEquals<
+  BreakpointOverrides,
+  BreakpointOverridesEmpty,
+  RegularBreakpoints,
+  CustomBreakpoints
+>;
+
 export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
   props: P &
     SystemProps<Theme> & {
@@ -51,41 +122,11 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * @default false
        */
       item?: boolean;
-      /**
-       * If a number, it sets the number of columns the grid item uses.
-       * It can't be greater than the total number of columns of the container (12 by default).
-       * If 'auto', the grid item's width matches its content.
-       * If false, the prop is ignored.
-       * If true, the grid item's width grows to use the space available in the grid container.
-       * The value is applied for the `lg` breakpoint and wider screens if not overridden.
-       * @default false
-       */
-      lg?: boolean | GridSize;
-      /**
-       * If a number, it sets the number of columns the grid item uses.
-       * It can't be greater than the total number of columns of the container (12 by default).
-       * If 'auto', the grid item's width matches its content.
-       * If false, the prop is ignored.
-       * If true, the grid item's width grows to use the space available in the grid container.
-       * The value is applied for the `md` breakpoint and wider screens if not overridden.
-       * @default false
-       */
-      md?: boolean | GridSize;
       /**
        * Defines the vertical space between the type `item` components.
        * It overrides the value of the `spacing` prop.
        */
       rowSpacing?: ResponsiveStyleValue<GridSpacing>;
-      /**
-       * If a number, it sets the number of columns the grid item uses.
-       * It can't be greater than the total number of columns of the container (12 by default).
-       * If 'auto', the grid item's width matches its content.
-       * If false, the prop is ignored.
-       * If true, the grid item's width grows to use the space available in the grid container.
-       * The value is applied for the `sm` breakpoint and wider screens if not overridden.
-       * @default false
-       */
-      sm?: boolean | GridSize;
       /**
        * Defines the space between the type `item` components.
        * It can only be used on a type `container` component.
@@ -102,33 +143,13 @@ export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
        * @default 'wrap'
        */
       wrap?: GridWrap;
-      /**
-       * If a number, it sets the number of columns the grid item uses.
-       * It can't be greater than the total number of columns of the container (12 by default).
-       * If 'auto', the grid item's width matches its content.
-       * If false, the prop is ignored.
-       * If true, the grid item's width grows to use the space available in the grid container.
-       * The value is applied for the `xl` breakpoint and wider screens if not overridden.
-       * @default false
-       */
-      xl?: boolean | GridSize;
-      /**
-       * If a number, it sets the number of columns the grid item uses.
-       * It can't be greater than the total number of columns of the container (12 by default).
-       * If 'auto', the grid item's width matches its content.
-       * If false, the prop is ignored.
-       * If true, the grid item's width grows to use the space available in the grid container.
-       * The value is applied for all the screen sizes with the lowest priority.
-       * @default false
-       */
-      xs?: boolean | GridSize;
       /**
        * If `true`, it sets `min-width: 0` on the item.
        * Refer to the limitations section of the documentation to better understand the use case.
        * @default false
        */
       zeroMinWidth?: boolean;
-    };
+    } & Breakpoints;
   defaultComponent: D;
 }