@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.10

package/node/LinearProgress/LinearProgress.js

@@ -6,25 +6,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
 var _colorManipulator = require("@mui/system/colorManipulator");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _linearProgressClasses = require("./linearProgressClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className", "color", "value", "valueBuffer", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiLinearProgress');
 const TRANSITION_DURATION = 4; // seconds
-const indeterminate1Keyframe = (0, _system.keyframes)`
+const indeterminate1Keyframe = (0, _zeroStyled.keyframes)`
   0% {
     left: -35%;
     right: 100%;
@@ -40,7 +36,14 @@ const indeterminate1Keyframe = (0, _system.keyframes)`
     right: -90%;
   }
 `;
-const indeterminate2Keyframe = (0, _system.keyframes)`
+
+// 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' ? (0, _zeroStyled.css)`
+        animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+      ` : null;
+const indeterminate2Keyframe = (0, _zeroStyled.keyframes)`
   0% {
     left: -200%;
     right: 100%;
@@ -56,7 +59,10 @@ const indeterminate2Keyframe = (0, _system.keyframes)`
     right: -8%;
   }
 `;
-const bufferKeyframe = (0, _system.keyframes)`
+const indeterminate2Animation = typeof indeterminate2Keyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${indeterminate2Keyframe} 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 1.15s infinite;
+      ` : null;
+const bufferKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     opacity: 1;
     background-position: 0 -23px;
@@ -72,6 +78,9 @@ const bufferKeyframe = (0, _system.keyframes)`
     background-position: -200px -23px;
   }
 `;
+const bufferAnimation = typeof bufferKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${bufferKeyframe} 3s infinite linear;
+      ` : null;
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -87,15 +96,12 @@ const useUtilityClasses = ownerState => {
   return (0, _composeClasses.default)(slots, _linearProgressClasses.getLinearProgressUtilityClass, classes);
 };
 const getColorShade = (theme, color) => {
-  if (color === 'inherit') {
-    return 'currentColor';
-  }
   if (theme.vars) {
     return theme.vars.palette.LinearProgress[`${color}Bg`];
   }
   return theme.palette.mode === 'light' ? (0, _colorManipulator.lighten)(theme.palette[color].main, 0.62) : (0, _colorManipulator.darken)(theme.palette[color].main, 0.5);
 };
-const LinearProgressRoot = (0, _styled.default)('span', {
+const LinearProgressRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiLinearProgress',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -105,37 +111,57 @@ const LinearProgressRoot = (0, _styled.default)('span', {
     return [styles.root, styles[`color${(0, _capitalize.default)(ownerState.color)}`], styles[ownerState.variant]];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   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 && 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 = (0, _styled.default)('span', {
+const LinearProgressDashed = (0, _zeroStyled.styled)('span', {
   name: 'MuiLinearProgress',
   slot: 'Dashed',
   overridesResolver: (props, styles) => {
@@ -145,26 +171,38 @@ const LinearProgressDashed = (0, _styled.default)('span', {
     return [styles.dashed, styles[`dashedColor${(0, _capitalize.default)(ownerState.color)}`]];
   }
 })(({
-  ownerState,
   theme
-}) => {
-  const backgroundColor = getColorShade(theme, ownerState.color);
-  return (0, _extends2.default)({
-    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'
-  });
-}, (0, _system.css)`
-    animation: ${bufferKeyframe} 3s infinite linear;
-  `);
-const LinearProgressBar1 = (0, _styled.default)('span', {
+}) => ({
+  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 && 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 = (0, _zeroStyled.styled)('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar1',
   overridesResolver: (props, styles) => {
@@ -174,9 +212,8 @@ const LinearProgressBar1 = (0, _styled.default)('span', {
     return [styles.bar, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar1Indeterminate, ownerState.variant === 'determinate' && styles.bar1Determinate, ownerState.variant === 'buffer' && styles.bar1Buffer];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   width: '100%',
   position: 'absolute',
   left: 0,
@@ -184,19 +221,52 @@ const LinearProgressBar1 = (0, _styled.default)('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') && (0, _system.css)`
-      width: auto;
-      animation: ${indeterminate1Keyframe} 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
-    `);
-const LinearProgressBar2 = (0, _styled.default)('span', {
+  variants: [{
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      backgroundColor: 'currentColor'
+    }
+  }, ...Object.entries(theme.palette).filter(([, value]) => 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 = (0, _zeroStyled.styled)('span', {
   name: 'MuiLinearProgress',
   slot: 'Bar2',
   overridesResolver: (props, styles) => {
@@ -206,29 +276,61 @@ const LinearProgressBar2 = (0, _styled.default)('span', {
     return [styles.bar, styles[`barColor${(0, _capitalize.default)(ownerState.color)}`], (ownerState.variant === 'indeterminate' || ownerState.variant === 'query') && styles.bar2Indeterminate, ownerState.variant === 'buffer' && styles.bar2Buffer];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
+}) => ({
   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') && (0, _system.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 && 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 && 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
@@ -238,22 +340,23 @@ const LinearProgressBar2 = (0, _styled.default)('span', {
  * attribute to `true` on that region until it has finished loading.
  */
 const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiLinearProgress'
   });
   const {
-      className,
-      color = 'primary',
-      value,
-      valueBuffer,
-      variant = 'indeterminate'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    className,
+    color = 'primary',
+    value,
+    valueBuffer,
+    variant = 'indeterminate',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const isRtl = (0, _RtlProvider.useRtl)();
   const rootProps = {};
@@ -286,13 +389,13 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       console.error('MUI: You need to provide a valueBuffer prop ' + 'when using the buffer variant of LinearProgress.');
     }
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinearProgressRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(LinearProgressRoot, {
     className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState,
-    role: "progressbar"
-  }, rootProps, {
-    ref: ref
-  }, other, {
+    role: "progressbar",
+    ...rootProps,
+    ref: ref,
+    ...other,
     children: [variant === 'buffer' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(LinearProgressDashed, {
       className: classes.dashed,
       ownerState: ownerState
@@ -305,7 +408,7 @@ const LinearProgress = /*#__PURE__*/React.forwardRef(function LinearProgress(inP
       ownerState: ownerState,
       style: inlineStyles.bar2
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? LinearProgress.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐