@mui/material 6.0.0-alpha.2 → 6.0.0-alpha.4

package/modern/LinearProgress/LinearProgress.js

@@ -1,20 +1,19 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className", "color", "value", "valueBuffer", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { keyframes, css } from '@mui/system';
 import { darken, lighten } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
+import { keyframes, css, styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
 import { getLinearProgressUtilityClass } from './linearProgressClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiLinearProgress');
 const TRANSITION_DURATION = 4; // seconds
 const indeterminate1Keyframe = keyframes`
   0% {
@@ -32,6 +31,13 @@ const indeterminate1Keyframe = keyframes`
     right: -90%;
   }
 `;
+
+// This implementation is for supporting both Styled-components v4+ and Pigment CSS.
+// A global animation has to be created here for Styled-components v4+ (https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#12).
+// which can be done by checking typeof indeterminate1Keyframe !== 'string' (at runtime, Pigment CSS transform keyframes`` to a string).
+const indeterminate1Animation = typeof indeterminate1Keyframe !== 'string' ? css`
+        animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      ` : null;
 const indeterminate2Keyframe = keyframes`
   0% {
     left: -200%;
@@ -48,6 +54,9 @@ const indeterminate2Keyframe = keyframes`
     right: -8%;
   }
 `;
+const indeterminate2Animation = typeof indeterminate2Keyframe !== 'string' ? css`
+        animation: ${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
+      ` : null;
 const bufferKeyframe = keyframes`
   0% {
     opacity: 1;
@@ -64,6 +73,9 @@ const bufferKeyframe = keyframes`
     background-position: -200px -23px;
   }
 `;
+const bufferAnimation = typeof bufferKeyframe !== 'string' ? css`
+        animation: ${bufferKeyframe} 3s infinite linear;
+      ` : null;
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -79,9 +91,6 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getLinearProgressUtilityClass, classes);
 };
 const getColorShade = (theme, color) => {
-  if (color === 'inherit') {
-    return 'currentColor';
-  }
   if (theme.vars) {
     return theme.vars.palette.LinearProgress[`${color}Bg`];
   }
@@ -97,35 +106,55 @@ const LinearProgressRoot = styled('span', {
     return [styles.root, styles[`color${capitalize(ownerState.color)}`], styles[ownerState.variant]];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   position: 'relative',
   overflow: 'hidden',
   display: 'block',
   height: 4,
-  zIndex: 0,
   // Fix Safari's bug during composition of different paint.
+  zIndex: 0,
   '@media print': {
     colorAdjust: 'exact'
   },
-  backgroundColor: getColorShade(theme, ownerState.color)
-}, ownerState.color === 'inherit' && ownerState.variant !== 'buffer' && {
-  backgroundColor: 'none',
-  '&::before': {
-    content: '""',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    backgroundColor: 'currentColor',
-    opacity: 0.3
-  }
-}, ownerState.variant === 'buffer' && {
-  backgroundColor: 'transparent'
-}, ownerState.variant === 'query' && {
-  transform: 'rotate(180deg)'
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      backgroundColor: getColorShade(theme, color)
+    }
+  })), {
+    props: ({
+      ownerState
+    }) => ownerState.color === 'inherit' && ownerState.variant !== 'buffer',
+    style: {
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'currentColor',
+        opacity: 0.3
+      }
+    }
+  }, {
+    props: {
+      variant: 'buffer'
+    },
+    style: {
+      backgroundColor: 'transparent'
+    }
+  }, {
+    props: {
+      variant: 'query'
+    },
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
 }));
 const LinearProgressDashed = styled('span', {
   name: 'MuiLinearProgress',
@@ -137,25 +166,37 @@ const LinearProgressDashed = styled('span', {
     return [styles.dashed, styles[`dashedColor${capitalize(ownerState.color)}`]];
   }
 })(({
-  ownerState,
   theme
-}) => {
-  const backgroundColor = getColorShade(theme, ownerState.color);
-  return _extends({
-    position: 'absolute',
-    marginTop: 0,
-    height: '100%',
-    width: '100%'
-  }, ownerState.color === 'inherit' && {
-    opacity: 0.3
-  }, {
-    backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`,
-    backgroundSize: '10px 10px',
-    backgroundPosition: '0 -23px'
-  });
-}, css`
-    animation: ${bufferKeyframe} 3s infinite linear;
-  `);
+}) => ({
+  position: 'absolute',
+  marginTop: 0,
+  height: '100%',
+  width: '100%',
+  backgroundSize: '10px 10px',
+  backgroundPosition: '0 -23px',
+  variants: [{
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      opacity: 0.3,
+      backgroundImage: `radial-gradient(currentColor 0%, currentColor 16%, transparent 42%)`
+    }
+  }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => {
+    const backgroundColor = getColorShade(theme, color);
+    return {
+      props: {
+        color
+      },
+      style: {
+        backgroundImage: `radial-gradient(${backgroundColor} 0%, ${backgroundColor} 16%, transparent 42%)`
+      }
+    };
+  })]
+}), bufferAnimation || {
+  // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+  animation: `${bufferKeyframe} 3s infinite linear`
+});
 const LinearProgressBar1 = styled('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar1',
@@ -166,9 +207,8 @@ const LinearProgressBar1 = styled('span', {
     return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   width: '100%',
   position: 'absolute',
   left: 0,
@@ -176,18 +216,51 @@ const LinearProgressBar1 = styled('span', {
   top: 0,
   transition: 'transform 0.2s linear',
   transformOrigin: 'left',
-  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
-}, ownerState.variant === 'determinate' && {
-  transition: `transform .${TRANSITION_DURATION}s linear`
-}, ownerState.variant === 'buffer' && {
-  zIndex: 1,
-  transition: `transform .${TRANSITION_DURATION}s linear`
-}), ({
-  ownerState
-}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css`
-      width: auto;
-      animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-    `);
+  variants: [{
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      backgroundColor: 'currentColor'
+    }
+  }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette[color].main
+    }
+  })), {
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: `transform .${TRANSITION_DURATION}s linear`
+    }
+  }, {
+    props: {
+      variant: 'buffer'
+    },
+    style: {
+      zIndex: 1,
+      transition: `transform .${TRANSITION_DURATION}s linear`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+    style: {
+      width: 'auto'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+    style: indeterminate1Animation || {
+      animation: `${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite`
+    }
+  }]
+}));
 const LinearProgressBar2 = styled('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar2',
@@ -198,29 +271,61 @@ const LinearProgressBar2 = styled('span', {
     return [styles.bar, styles[`barColor${capitalize(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   width: '100%',
   position: 'absolute',
   left: 0,
   bottom: 0,
   top: 0,
   transition: 'transform 0.2s linear',
-  transformOrigin: 'left'
-}, ownerState.variant !== 'buffer' && {
-  backgroundColor: ownerState.color === 'inherit' ? 'currentColor' : (theme.vars || theme).palette[ownerState.color].main
-}, ownerState.color === 'inherit' && {
-  opacity: 0.3
-}, ownerState.variant === 'buffer' && {
-  backgroundColor: getColorShade(theme, ownerState.color),
-  transition: `transform .${TRANSITION_DURATION}s linear`
-}), ({
-  ownerState
-}) => (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && css`
-      width: auto;
-      animation: ${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
-    `);
+  transformOrigin: 'left',
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      '--LinearProgressBar2-barColor': (theme.vars || theme).palette[color].main
+    }
+  })), {
+    props: ({
+      ownerState
+    }) => ownerState.variant !== 'buffer' && ownerState.color !== 'inherit',
+    style: {
+      backgroundColor: 'var(--LinearProgressBar2-barColor, currentColor)'
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      opacity: 0.3
+    }
+  }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color,
+      variant: 'buffer'
+    },
+    style: {
+      backgroundColor: getColorShade(theme, color),
+      transition: `transform .${TRANSITION_DURATION}s linear`
+    }
+  })), {
+    props: ({
+      ownerState
+    }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+    style: {
+      width: 'auto'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === 'indeterminate' || ownerState.variant === 'query',
+    style: indeterminate2Animation || {
+      animation: `${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite`
+    }
+  }]
+}));
 
 /**
  * ## ARIA

package/modern/ListItem/ListItem.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className"],
   _excluded2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
 import * as React from 'react';
@@ -53,9 +53,8 @@ export const ListItemRoot = styled('div', {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'flex',
   justifyContent: 'flex-start',
   alignItems: 'center',
@@ -63,25 +62,7 @@ export const ListItemRoot = styled('div', {
   textDecoration: 'none',
   width: '100%',
   boxSizing: 'border-box',
-  textAlign: 'left'
-}, !ownerState.disablePadding && _extends({
-  paddingTop: 8,
-  paddingBottom: 8
-}, ownerState.dense && {
-  paddingTop: 4,
-  paddingBottom: 4
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, !!ownerState.secondaryAction && {
-  // Add some space to avoid collision as `ListItemSecondaryAction`
-  // is absolutely positioned.
-  paddingRight: 48
-}), !!ownerState.secondaryAction && {
-  [`& > .${listItemButtonClasses.root}`]: {
-    paddingRight: 48
-  }
-}, {
+  textAlign: 'left',
   [`&.${listItemClasses.focusVisible}`]: {
     backgroundColor: (theme.vars || theme).palette.action.focus
   },
@@ -93,35 +74,98 @@ export const ListItemRoot = styled('div', {
   },
   [`&.${listItemClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.alignItems === 'flex-start' && {
-  alignItems: 'flex-start'
-}, ownerState.divider && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-  backgroundClip: 'padding-box'
-}, ownerState.button && {
-  transition: theme.transitions.create('background-color', {
-    duration: theme.transitions.duration.shortest
-  }),
-  '&:hover': {
-    textDecoration: 'none',
-    backgroundColor: (theme.vars || theme).palette.action.hover,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
   },
-  [`&.${listItemClasses.selected}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding,
+    style: {
+      paddingTop: 8,
+      paddingBottom: 8
     }
-  }
-}, ownerState.hasSecondaryAction && {
-  // Add some space to avoid collision as `ListItemSecondaryAction`
-  // is absolutely positioned.
-  paddingRight: 48
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding && ownerState.dense,
+    style: {
+      paddingTop: 4,
+      paddingBottom: 4
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding && !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding && !!ownerState.secondaryAction,
+    style: {
+      // Add some space to avoid collision as `ListItemSecondaryAction`
+      // is absolutely positioned.
+      paddingRight: 48
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.secondaryAction,
+    style: {
+      [`& > .${listItemButtonClasses.root}`]: {
+        paddingRight: 48
+      }
+    }
+  }, {
+    props: {
+      alignItems: 'flex-start'
+    },
+    style: {
+      alignItems: 'flex-start'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.divider,
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      backgroundClip: 'padding-box'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.button,
+    style: {
+      transition: theme.transitions.create('background-color', {
+        duration: theme.transitions.duration.shortest
+      }),
+      '&:hover': {
+        textDecoration: 'none',
+        backgroundColor: (theme.vars || theme).palette.action.hover,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      },
+      [`&.${listItemClasses.selected}:hover`]: {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        }
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hasSecondaryAction,
+    style: {
+      // Add some space to avoid collision as `ListItemSecondaryAction`
+      // is absolutely positioned.
+      paddingRight: 48
+    }
+  }]
 }));
 const ListItemContainer = styled('li', {
   name: 'MuiListItem',

package/modern/ListItemAvatar/ListItemAvatar.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -31,14 +31,18 @@ const ListItemAvatarRoot = styled('div', {
     } = props;
     return [styles.root, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   minWidth: 56,
-  flexShrink: 0
-}, ownerState.alignItems === 'flex-start' && {
-  marginTop: 8
-}));
+  flexShrink: 0,
+  variants: [{
+    props: {
+      alignItems: 'flex-start'
+    },
+    style: {
+      marginTop: 8
+    }
+  }]
+});
 
 /**
  * A simple wrapper to apply `List` styles to an `Avatar`.

package/modern/ListItemButton/ListItemButton.js

@@ -44,9 +44,8 @@ const ListItemButtonRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'flex',
   flexGrow: 1,
   justifyContent: 'flex-start',
@@ -87,18 +86,39 @@ const ListItemButtonRoot = styled(ButtonBase, {
   },
   [`&.${listItemButtonClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.divider && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-  backgroundClip: 'padding-box'
-}, ownerState.alignItems === 'flex-start' && {
-  alignItems: 'flex-start'
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, ownerState.dense && {
-  paddingTop: 4,
-  paddingBottom: 4
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.divider,
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      backgroundClip: 'padding-box'
+    }
+  }, {
+    props: {
+      alignItems: 'flex-start'
+    },
+    style: {
+      alignItems: 'flex-start'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.dense,
+    style: {
+      paddingTop: 4,
+      paddingBottom: 4
+    }
+  }]
 }));
 const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) {
   const props = useThemeProps({

package/modern/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -1,7 +1,7 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -31,16 +31,20 @@ const ListItemSecondaryActionRoot = styled('div', {
     } = props;
     return [styles.root, ownerState.disableGutters && styles.disableGutters];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   position: 'absolute',
   right: 16,
   top: '50%',
-  transform: 'translateY(-50%)'
-}, ownerState.disableGutters && {
-  right: 0
-}));
+  transform: 'translateY(-50%)',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.disableGutters,
+    style: {
+      right: 0
+    }
+  }]
+});
 
 /**
  * Must be used as the last child of ListItem to function properly.