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

package/node/Skeleton/Skeleton.js

@@ -6,21 +6,20 @@ 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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("../styles");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _skeletonClasses = require("./skeletonClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["animation", "className", "component", "height", "style", "variant", "width"];
 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)('MuiSkeleton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -35,7 +34,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _skeletonClasses.getSkeletonUtilityClass, classes);
 };
-const pulseKeyframe = (0, _system.keyframes)`
+const pulseKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     opacity: 1;
   }
@@ -48,7 +47,7 @@ const pulseKeyframe = (0, _system.keyframes)`
     opacity: 1;
   }
 `;
-const waveKeyframe = (0, _system.keyframes)`
+const waveKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     transform: translateX(-100%);
   }
@@ -62,7 +61,17 @@ const waveKeyframe = (0, _system.keyframes)`
     transform: translateX(100%);
   }
 `;
-const SkeletonRoot = (0, _styled.default)('span', {
+
+// 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 pulseAnimation = typeof pulseKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
+      ` : null;
+const waveAnimation = typeof waveKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${waveKeyframe} 2s linear 0.5s infinite;
+      ` : null;
+const SkeletonRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiSkeleton',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -72,72 +81,111 @@ const SkeletonRoot = (0, _styled.default)('span', {
     return [styles.root, styles[ownerState.variant], ownerState.animation !== false && styles[ownerState.animation], ownerState.hasChildren && styles.withChildren, ownerState.hasChildren && !ownerState.width && styles.fitContent, ownerState.hasChildren && !ownerState.height && styles.heightAuto];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const radiusUnit = (0, _styles.unstable_getUnit)(theme.shape.borderRadius) || 'px';
   const radiusValue = (0, _styles.unstable_toUnitless)(theme.shape.borderRadius);
-  return (0, _extends2.default)({
+  return {
     display: 'block',
     // Create a "on paper" color with sufficient contrast retaining the color
     backgroundColor: theme.vars ? theme.vars.palette.Skeleton.bg : (0, _styles.alpha)(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
-    height: '1.2em'
-  }, ownerState.variant === 'text' && {
-    marginTop: 0,
-    marginBottom: 0,
-    height: 'auto',
-    transformOrigin: '0 55%',
-    transform: 'scale(1, 0.60)',
-    borderRadius: `${radiusValue}${radiusUnit}/${Math.round(radiusValue / 0.6 * 10) / 10}${radiusUnit}`,
-    '&:empty:before': {
-      content: '"\\00a0"'
-    }
-  }, ownerState.variant === 'circular' && {
-    borderRadius: '50%'
-  }, ownerState.variant === 'rounded' && {
-    borderRadius: (theme.vars || theme).shape.borderRadius
-  }, ownerState.hasChildren && {
-    '& > *': {
-      visibility: 'hidden'
-    }
-  }, ownerState.hasChildren && !ownerState.width && {
-    maxWidth: 'fit-content'
-  }, ownerState.hasChildren && !ownerState.height && {
-    height: 'auto'
-  });
-}, ({
-  ownerState
-}) => ownerState.animation === 'pulse' && (0, _system.css)`
-      animation: ${pulseKeyframe} 2s ease-in-out 0.5s infinite;
-    `, ({
-  ownerState,
-  theme
-}) => ownerState.animation === 'wave' && (0, _system.css)`
-      position: relative;
-      overflow: hidden;
-
-      /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
-      -webkit-mask-image: -webkit-radial-gradient(white, black);
-
-      &::after {
-        animation: ${waveKeyframe} 2s linear 0.5s infinite;
-        background: linear-gradient(
-          90deg,
-          transparent,
-          ${(theme.vars || theme).palette.action.hover},
-          transparent
-        );
-        content: '';
-        position: absolute;
-        transform: translateX(-100%); /* Avoid flash during server-side hydration */
-        bottom: 0;
-        left: 0;
-        right: 0;
-        top: 0;
+    height: '1.2em',
+    variants: [{
+      props: {
+        variant: 'text'
+      },
+      style: {
+        marginTop: 0,
+        marginBottom: 0,
+        height: 'auto',
+        transformOrigin: '0 55%',
+        transform: 'scale(1, 0.60)',
+        borderRadius: `${radiusValue}${radiusUnit}/${Math.round(radiusValue / 0.6 * 10) / 10}${radiusUnit}`,
+        '&:empty:before': {
+          content: '"\\00a0"'
+        }
       }
-    `);
+    }, {
+      props: {
+        variant: 'circular'
+      },
+      style: {
+        borderRadius: '50%'
+      }
+    }, {
+      props: {
+        variant: 'rounded'
+      },
+      style: {
+        borderRadius: (theme.vars || theme).shape.borderRadius
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren,
+      style: {
+        '& > *': {
+          visibility: 'hidden'
+        }
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren && !ownerState.width,
+      style: {
+        maxWidth: 'fit-content'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.hasChildren && !ownerState.height,
+      style: {
+        height: 'auto'
+      }
+    }, {
+      props: {
+        animation: 'pulse'
+      },
+      style: pulseAnimation || {
+        animation: `${pulseKeyframe} 2s ease-in-out 0.5s infinite`
+      }
+    }, {
+      props: {
+        animation: 'wave'
+      },
+      style: {
+        position: 'relative',
+        overflow: 'hidden',
+        /* Fix bug in Safari https://bugs.webkit.org/show_bug.cgi?id=68196 */
+        WebkitMaskImage: '-webkit-radial-gradient(white, black)',
+        '&::after': {
+          background: `linear-gradient(
+                90deg,
+                transparent,
+                ${(theme.vars || theme).palette.action.hover},
+                transparent
+              )`,
+          content: '""',
+          position: 'absolute',
+          transform: 'translateX(-100%)' /* Avoid flash during server-side hydration */,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          top: 0
+        }
+      }
+    }, {
+      props: {
+        animation: 'wave'
+      },
+      style: waveAnimation || {
+        animation: `${waveKeyframe} 2s linear 0.5s infinite`
+      }
+    }]
+  };
+});
 const Skeleton = /*#__PURE__*/React.forwardRef(function Skeleton(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSkeleton'
   });

package/node/Slider/Slider.js

@@ -820,7 +820,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -838,7 +838,7 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/node/Snackbar/Snackbar.js

@@ -6,17 +6,16 @@ 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 _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("@mui/base/utils");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ClickAwayListener = require("@mui/base/ClickAwayListener");
 var _useSnackbar = require("@mui/base/useSnackbar");
-var _styled = _interopRequireDefault(require("../styles/styled"));
+var _zeroStyled = require("../zero-styled");
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _Grow = _interopRequireDefault(require("../Grow"));
 var _SnackbarContent = _interopRequireDefault(require("../SnackbarContent"));
@@ -26,6 +25,7 @@ const _excluded = ["onEnter", "onExited"],
   _excluded2 = ["action", "anchorOrigin", "autoHideDuration", "children", "className", "ClickAwayListenerProps", "ContentProps", "disableWindowBlurListener", "message", "onBlur", "onClose", "onFocus", "onMouseEnter", "onMouseLeave", "open", "resumeHideDuration", "TransitionComponent", "transitionDuration", "TransitionProps"];
 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)('MuiSnackbar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -36,7 +36,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _snackbarClasses.getSnackbarUtilityClass, classes);
 };
-const SnackbarRoot = (0, _styled.default)('div', {
+const SnackbarRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiSnackbar',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -46,46 +46,72 @@ const SnackbarRoot = (0, _styled.default)('div', {
     return [styles.root, styles[`anchorOrigin${(0, _capitalize.default)(ownerState.anchorOrigin.vertical)}${(0, _capitalize.default)(ownerState.anchorOrigin.horizontal)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => {
-  const center = {
-    left: '50%',
-    right: 'auto',
-    transform: 'translateX(-50%)'
-  };
-  return (0, _extends2.default)({
-    zIndex: (theme.vars || theme).zIndex.snackbar,
-    position: 'fixed',
-    display: 'flex',
-    left: 8,
-    right: 8,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }, ownerState.anchorOrigin.vertical === 'top' ? {
-    top: 8
-  } : {
-    bottom: 8
-  }, ownerState.anchorOrigin.horizontal === 'left' && {
-    justifyContent: 'flex-start'
-  }, ownerState.anchorOrigin.horizontal === 'right' && {
-    justifyContent: 'flex-end'
+  theme
+}) => ({
+  zIndex: (theme.vars || theme).zIndex.snackbar,
+  position: 'fixed',
+  display: 'flex',
+  left: 8,
+  right: 8,
+  justifyContent: 'center',
+  alignItems: 'center',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical === 'top',
+    style: {
+      top: 8,
+      [theme.breakpoints.up('sm')]: {
+        top: 24
+      }
+    }
   }, {
-    [theme.breakpoints.up('sm')]: (0, _extends2.default)({}, ownerState.anchorOrigin.vertical === 'top' ? {
-      top: 24
-    } : {
-      bottom: 24
-    }, ownerState.anchorOrigin.horizontal === 'center' && center, ownerState.anchorOrigin.horizontal === 'left' && {
-      left: 24,
-      right: 'auto'
-    }, ownerState.anchorOrigin.horizontal === 'right' && {
-      right: 24,
-      left: 'auto'
-    })
-  });
-});
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.vertical !== 'top',
+    style: {
+      bottom: 8,
+      [theme.breakpoints.up('sm')]: {
+        bottom: 24
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === 'left',
+    style: {
+      justifyContent: 'flex-start',
+      [theme.breakpoints.up('sm')]: {
+        left: 24,
+        right: 'auto'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === 'right',
+    style: {
+      justifyContent: 'flex-end',
+      [theme.breakpoints.up('sm')]: {
+        right: 24,
+        left: 'auto'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchorOrigin.horizontal === 'center',
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        left: '50%',
+        right: 'auto',
+        transform: 'translateX(-50%)'
+      }
+    }
+  }]
+}));
 const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSnackbar'
   });

package/node/SnackbarContent/SnackbarContent.js

@@ -13,14 +13,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _colorManipulator = require("@mui/system/colorManipulator");
-var _styled = _interopRequireDefault(require("../styles/styled"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
+var _zeroStyled = require("../zero-styled");
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _snackbarContentClasses = require("./snackbarContentClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["action", "className", "message", "role"];
 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)('MuiSnackbarContent');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -32,7 +32,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _snackbarContentClasses.getSnackbarContentUtilityClass, classes);
 };
-const SnackbarContentRoot = (0, _styled.default)(_Paper.default, {
+const SnackbarContentRoot = (0, _zeroStyled.styled)(_Paper.default, {
   name: 'MuiSnackbarContent',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -56,14 +56,14 @@ const SnackbarContentRoot = (0, _styled.default)(_Paper.default, {
     }
   });
 });
-const SnackbarContentMessage = (0, _styled.default)('div', {
+const SnackbarContentMessage = (0, _zeroStyled.styled)('div', {
   name: 'MuiSnackbarContent',
   slot: 'Message',
   overridesResolver: (props, styles) => styles.message
 })({
   padding: '8px 0'
 });
-const SnackbarContentAction = (0, _styled.default)('div', {
+const SnackbarContentAction = (0, _zeroStyled.styled)('div', {
   name: 'MuiSnackbarContent',
   slot: 'Action',
   overridesResolver: (props, styles) => styles.action
@@ -75,7 +75,7 @@ const SnackbarContentAction = (0, _styled.default)('div', {
   marginRight: -8
 });
 const SnackbarContent = /*#__PURE__*/React.forwardRef(function SnackbarContent(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiSnackbarContent'
   });