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

package/modern/Typography/Typography.js

@@ -43,7 +43,9 @@ export const TypographyRoot = styled('span', {
   margin: 0
 }, ownerState.variant === 'inherit' && {
   // Some elements, like <button> on Chrome have default font that doesn't inherit, reset this.
-  font: 'inherit'
+  font: 'inherit',
+  lineHeight: 'inherit',
+  letterSpacing: 'inherit'
 }, ownerState.variant !== 'inherit' && theme.typography[ownerState.variant], ownerState.align !== 'inherit' && {
   textAlign: ownerState.align
 }, ownerState.noWrap && {

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.0.0-alpha.2
+ * @mui/material v6.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/createTransitions.js

@@ -54,9 +54,7 @@ export default function createTransitions(inputTransitions) {
       other = _objectWithoutPropertiesLoose(options, _excluded);
     if (process.env.NODE_ENV !== 'production') {
       const isString = value => typeof value === 'string';
-      // IE11 support, replace with Number.isNaN
-      // eslint-disable-next-line no-restricted-globals
-      const isNumber = value => !isNaN(parseFloat(value));
+      const isNumber = value => !Number.isNaN(parseFloat(value));
       if (!isString(props) && !Array.isArray(props)) {
         console.error('MUI: Argument "props" must be a string or Array.');
       }

package/modern/zero-styled/index.js

@@ -1,5 +1,5 @@
 import useThemeProps from '../styles/useThemeProps';
-export { keyframes } from '@mui/system';
+export { css, keyframes } from '@mui/system';
 export { default as styled } from '../styles/styled';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars

package/node/AppBar/AppBar.js

@@ -87,7 +87,6 @@ const AppBarRoot = (0, _zeroStyled.styled)(_Paper.default, {
         position: 'sticky'
       },
       style: {
-        // ⚠️ sticky is not supported by IE11.
         position: 'sticky',
         zIndex: (theme.vars || theme).zIndex.appBar,
         top: 0,

package/node/Avatar/Avatar.js

@@ -96,7 +96,7 @@ const AvatarImg = (0, _zeroStyled.styled)('img', {
   width: '100%',
   height: '100%',
   textAlign: 'center',
-  // Handle non-square image. The property isn't supported by IE11.
+  // Handle non-square image.
   objectFit: 'cover',
   // Hide alt text.
   color: 'transparent',

package/node/CardMedia/CardMedia.js

@@ -61,7 +61,6 @@ const CardMediaRoot = (0, _zeroStyled.styled)('div', {
       isImageComponent: true
     },
     style: {
-      // ⚠️ object-fit is not supported by IE11.
       objectFit: 'cover'
     }
   }]

package/node/CircularProgress/CircularProgress.js

@@ -6,24 +6,23 @@ 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 _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
-var _system = require("@mui/system");
+var _zeroStyled = require("../zero-styled");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireDefault(require("../styles/styled"));
 var _circularProgressClasses = require("./circularProgressClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "color", "disableShrink", "size", "style", "thickness", "value", "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)('MuiCircularProgress');
 const SIZE = 44;
-const circularRotateKeyframe = (0, _system.keyframes)`
+const circularRotateKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     transform: rotate(0deg);
   }
@@ -32,7 +31,7 @@ const circularRotateKeyframe = (0, _system.keyframes)`
     transform: rotate(360deg);
   }
 `;
-const circularDashKeyframe = (0, _system.keyframes)`
+const circularDashKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     stroke-dasharray: 1px, 200px;
     stroke-dashoffset: 0;
@@ -48,6 +47,16 @@ const circularDashKeyframe = (0, _system.keyframes)`
     stroke-dashoffset: -125px;
   }
 `;
+
+// 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 rotateAnimation = typeof circularRotateKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${circularRotateKeyframe} 1.4s linear infinite;
+      ` : null;
+const dashAnimation = typeof circularDashKeyframe !== 'string' ? (0, _zeroStyled.css)`
+        animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
+      ` : null;
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -62,7 +71,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _circularProgressClasses.getCircularProgressUtilityClass, classes);
 };
-const CircularProgressRoot = (0, _styled.default)('span', {
+const CircularProgressRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiCircularProgress',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -72,27 +81,40 @@ const CircularProgressRoot = (0, _styled.default)('span', {
     return [styles.root, styles[ownerState.variant], styles[`color${(0, _capitalize.default)(ownerState.color)}`]];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
-  display: 'inline-block'
-}, ownerState.variant === 'determinate' && {
-  transition: theme.transitions.create('transform')
-}, ownerState.color !== 'inherit' && {
-  color: (theme.vars || theme).palette[ownerState.color].main
-}), ({
-  ownerState
-}) => ownerState.variant === 'indeterminate' && (0, _system.css)`
-      animation: ${circularRotateKeyframe} 1.4s linear infinite;
-    `);
-const CircularProgressSVG = (0, _styled.default)('svg', {
+}) => ({
+  display: 'inline-block',
+  variants: [{
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: theme.transitions.create('transform')
+    }
+  }, {
+    props: {
+      variant: 'indeterminate'
+    },
+    style: rotateAnimation || {
+      animation: `${circularRotateKeyframe} 1.4s linear infinite`
+    }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].main
+    }
+  }))]
+}));
+const CircularProgressSVG = (0, _zeroStyled.styled)('svg', {
   name: 'MuiCircularProgress',
   slot: 'Svg',
   overridesResolver: (props, styles) => styles.svg
 })({
   display: 'block' // Keeps the progress centered
 });
-const CircularProgressCircle = (0, _styled.default)('circle', {
+const CircularProgressCircle = (0, _zeroStyled.styled)('circle', {
   name: 'MuiCircularProgress',
   slot: 'Circle',
   overridesResolver: (props, styles) => {
@@ -102,21 +124,35 @@ const CircularProgressCircle = (0, _styled.default)('circle', {
     return [styles.circle, styles[`circle${(0, _capitalize.default)(ownerState.variant)}`], ownerState.disableShrink && styles.circleDisableShrink];
   }
 })(({
-  ownerState,
   theme
-}) => (0, _extends2.default)({
-  stroke: 'currentColor'
-}, ownerState.variant === 'determinate' && {
-  transition: theme.transitions.create('stroke-dashoffset')
-}, ownerState.variant === 'indeterminate' && {
-  // Some default value that looks fine waiting for the animation to kicks in.
-  strokeDasharray: '80px, 200px',
-  strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
-}), ({
-  ownerState
-}) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink && (0, _system.css)`
-      animation: ${circularDashKeyframe} 1.4s ease-in-out infinite;
-    `);
+}) => ({
+  stroke: 'currentColor',
+  variants: [{
+    props: {
+      variant: 'determinate'
+    },
+    style: {
+      transition: theme.transitions.create('stroke-dashoffset')
+    }
+  }, {
+    props: {
+      variant: 'indeterminate'
+    },
+    style: {
+      // Some default value that looks fine waiting for the animation to kicks in.
+      strokeDasharray: '80px, 200px',
+      strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+    style: dashAnimation || {
+      // At runtime for Pigment CSS, `bufferAnimation` will be null and the generated keyframe will be used.
+      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+    }
+  }]
+}));
 
 /**
  * ## ARIA
@@ -126,7 +162,7 @@ const CircularProgressCircle = (0, _styled.default)('circle', {
  * attribute to `true` on that region until it has finished loading.
  */
 const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiCircularProgress'
   });

package/node/Dialog/Dialog.js

@@ -24,7 +24,7 @@ var _DialogContext = _interopRequireDefault(require("./DialogContext"));
 var _Backdrop = _interopRequireDefault(require("../Backdrop"));
 var _useTheme = _interopRequireDefault(require("../styles/useTheme"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"];
+const _excluded = ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "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 DialogBackdrop = (0, _styled.default)(_Backdrop.default, {
@@ -179,6 +179,7 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
       fullWidth = false,
       maxWidth = 'sm',
       onBackdropClick,
+      onClick,
       onClose,
       open,
       PaperComponent = _Paper.default,
@@ -204,6 +205,10 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     backdropClick.current = event.target === event.currentTarget;
   };
   const handleBackdropClick = event => {
+    if (onClick) {
+      onClick(event);
+    }
+
     // Ignore the events not coming from the "backdrop".
     if (!backdropClick.current) {
       return;
@@ -342,6 +347,10 @@ process.env.NODE_ENV !== "production" ? Dialog.propTypes /* remove-proptypes */
    * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
    */
   onBackdropClick: _propTypes.default.func,
+  /**
+   * @ignore
+   */
+  onClick: _propTypes.default.func,
   /**
    * Callback fired when the component requests to be closed.
    *

package/node/Fab/Fab.js

@@ -14,13 +14,14 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
 var _fabClasses = _interopRequireWildcard(require("./fabClasses"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _styled = require("../styles/styled");
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["children", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "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)('MuiFab');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -34,7 +35,7 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _fabClasses.getFabUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const FabRoot = (0, _styled.default)(_ButtonBase.default, {
+const FabRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   name: 'MuiFab',
   slot: 'Root',
   shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
@@ -45,8 +46,7 @@ const FabRoot = (0, _styled.default)(_ButtonBase.default, {
     return [styles.root, styles[ownerState.variant], styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, styles[(0, _capitalize.default)(ownerState.size)], styles[ownerState.color]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   var _theme$palette$getCon, _theme$palette;
   return (0, _extends2.default)({}, theme.typography.button, {
@@ -76,48 +76,88 @@ const FabRoot = (0, _styled.default)(_ButtonBase.default, {
     },
     [`&.${_fabClasses.default.focusVisible}`]: {
       boxShadow: (theme.vars || theme).shadows[6]
-    }
-  }, ownerState.size === 'small' && {
-    width: 40,
-    height: 40
-  }, ownerState.size === 'medium' && {
-    width: 48,
-    height: 48
-  }, ownerState.variant === 'extended' && {
-    borderRadius: 48 / 2,
-    padding: '0 16px',
-    width: 'auto',
-    minHeight: 'auto',
-    minWidth: 48,
-    height: 48
-  }, ownerState.variant === 'extended' && ownerState.size === 'small' && {
-    width: 'auto',
-    padding: '0 8px',
-    borderRadius: 34 / 2,
-    minWidth: 34,
-    height: 34
-  }, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
-    width: 'auto',
-    padding: '0 16px',
-    borderRadius: 40 / 2,
-    minWidth: 40,
-    height: 40
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit'
+    },
+    variants: [{
+      props: {
+        size: 'small'
+      },
+      style: {
+        width: 40,
+        height: 40
+      }
+    }, {
+      props: {
+        size: 'medium'
+      },
+      style: {
+        width: 48,
+        height: 48
+      }
+    }, {
+      props: {
+        variant: 'extended'
+      },
+      style: {
+        borderRadius: 48 / 2,
+        padding: '0 16px',
+        width: 'auto',
+        minHeight: 'auto',
+        minWidth: 48,
+        height: 48
+      }
+    }, {
+      props: {
+        variant: 'extended',
+        size: 'small'
+      },
+      style: {
+        width: 'auto',
+        padding: '0 8px',
+        borderRadius: 34 / 2,
+        minWidth: 34,
+        height: 34
+      }
+    }, {
+      props: {
+        variant: 'extended',
+        size: 'medium'
+      },
+      style: {
+        width: 'auto',
+        padding: '0 16px',
+        borderRadius: 40 / 2,
+        minWidth: 40,
+        height: 40
+      }
+    }, {
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        color: 'inherit'
+      }
+    }]
   });
 }, ({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {
-  color: (theme.vars || theme).palette[ownerState.color].contrastText,
-  backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-  '&:hover': {
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].main
+  theme
+}) => ({
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark && value.contrastText) // check all the used fields in the style below
+  .map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars || theme).palette[color].contrastText,
+      backgroundColor: (theme.vars || theme).palette[color].main,
+      '&:hover': {
+        backgroundColor: (theme.vars || theme).palette[color].dark,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: (theme.vars || theme).palette[color].main
+        }
+      }
     }
-  }
+  }))]
 }), ({
   theme
 }) => ({
@@ -128,7 +168,7 @@ const FabRoot = (0, _styled.default)(_ButtonBase.default, {
   }
 }));
 const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiFab'
   });