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

package/modern/TableCell/TableCell.js

@@ -39,8 +39,7 @@ const TableCellRoot = styled('td', {
     return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.padding !== 'normal' && styles[`padding${capitalize(ownerState.padding)}`], ownerState.align !== 'inherit' && styles[`align${capitalize(ownerState.align)}`], ownerState.stickyHeader && styles.stickyHeader];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({}, theme.typography.body2, {
   display: 'table-cell',
   verticalAlign: 'inherit',
@@ -49,47 +48,103 @@ const TableCellRoot = styled('td', {
   borderBottom: theme.vars ? `1px solid ${theme.vars.palette.TableCell.border}` : `1px solid
     ${theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)}`,
   textAlign: 'left',
-  padding: 16
-}, ownerState.variant === 'head' && {
-  color: (theme.vars || theme).palette.text.primary,
-  lineHeight: theme.typography.pxToRem(24),
-  fontWeight: theme.typography.fontWeightMedium
-}, ownerState.variant === 'body' && {
-  color: (theme.vars || theme).palette.text.primary
-}, ownerState.variant === 'footer' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  lineHeight: theme.typography.pxToRem(21),
-  fontSize: theme.typography.pxToRem(12)
-}, ownerState.size === 'small' && {
-  padding: '6px 16px',
-  [`&.${tableCellClasses.paddingCheckbox}`]: {
-    width: 24,
-    // prevent the checkbox column from growing
-    padding: '0 12px 0 16px',
-    '& > *': {
+  padding: 16,
+  variants: [{
+    props: {
+      variant: 'head'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary,
+      lineHeight: theme.typography.pxToRem(24),
+      fontWeight: theme.typography.fontWeightMedium
+    }
+  }, {
+    props: {
+      variant: 'body'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.primary
+    }
+  }, {
+    props: {
+      variant: 'footer'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      lineHeight: theme.typography.pxToRem(21),
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: '6px 16px',
+      [`&.${tableCellClasses.paddingCheckbox}`]: {
+        width: 24,
+        // prevent the checkbox column from growing
+        padding: '0 12px 0 16px',
+        '& > *': {
+          padding: 0
+        }
+      }
+    }
+  }, {
+    props: {
+      padding: 'checkbox'
+    },
+    style: {
+      width: 48,
+      // prevent the checkbox column from growing
+      padding: '0 0 0 4px'
+    }
+  }, {
+    props: {
+      padding: 'none'
+    },
+    style: {
       padding: 0
     }
-  }
-}, ownerState.padding === 'checkbox' && {
-  width: 48,
-  // prevent the checkbox column from growing
-  padding: '0 0 0 4px'
-}, ownerState.padding === 'none' && {
-  padding: 0
-}, ownerState.align === 'left' && {
-  textAlign: 'left'
-}, ownerState.align === 'center' && {
-  textAlign: 'center'
-}, ownerState.align === 'right' && {
-  textAlign: 'right',
-  flexDirection: 'row-reverse'
-}, ownerState.align === 'justify' && {
-  textAlign: 'justify'
-}, ownerState.stickyHeader && {
-  position: 'sticky',
-  top: 0,
-  zIndex: 2,
-  backgroundColor: (theme.vars || theme).palette.background.default
+  }, {
+    props: {
+      align: 'left'
+    },
+    style: {
+      textAlign: 'left'
+    }
+  }, {
+    props: {
+      align: 'center'
+    },
+    style: {
+      textAlign: 'center'
+    }
+  }, {
+    props: {
+      align: 'right'
+    },
+    style: {
+      textAlign: 'right',
+      flexDirection: 'row-reverse'
+    }
+  }, {
+    props: {
+      align: 'justify'
+    },
+    style: {
+      textAlign: 'justify'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.stickyHeader,
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 2,
+      backgroundColor: (theme.vars || theme).palette.background.default
+    }
+  }]
 }));
 
 /**

package/modern/TableSortLabel/TableSortLabel.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 = ["active", "children", "className", "direction", "hideSortIcon", "IconComponent"];
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
@@ -70,9 +70,8 @@ const TableSortLabelIcon = styled('span', {
     return [styles.icon, styles[`iconDirection${capitalize(ownerState.direction)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   fontSize: 18,
   marginRight: 4,
   marginLeft: 4,
@@ -80,11 +79,22 @@ const TableSortLabelIcon = styled('span', {
   transition: theme.transitions.create(['opacity', 'transform'], {
     duration: theme.transitions.duration.shorter
   }),
-  userSelect: 'none'
-}, ownerState.direction === 'desc' && {
-  transform: 'rotate(0deg)'
-}, ownerState.direction === 'asc' && {
-  transform: 'rotate(180deg)'
+  userSelect: 'none',
+  variants: [{
+    props: {
+      direction: 'desc'
+    },
+    style: {
+      transform: 'rotate(0deg)'
+    }
+  }, {
+    props: {
+      direction: 'asc'
+    },
+    style: {
+      transform: 'rotate(180deg)'
+    }
+  }]
 }));
 
 /**

package/modern/Toolbar/Toolbar.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", "component", "disableGutters", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -32,25 +32,41 @@ const ToolbarRoot = styled('div', {
     return [styles.root, !ownerState.disableGutters && styles.gutters, styles[ownerState.variant]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'relative',
   display: 'flex',
-  alignItems: 'center'
-}, !ownerState.disableGutters && {
-  paddingLeft: theme.spacing(2),
-  paddingRight: theme.spacing(2),
-  [theme.breakpoints.up('sm')]: {
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3)
-  }
-}, ownerState.variant === 'dense' && {
-  minHeight: 48
+  alignItems: 'center',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      [theme.breakpoints.up('sm')]: {
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(3)
+      }
+    }
+  }, {
+    props: {
+      variant: 'dense'
+    },
+    style: {
+      minHeight: 48
+    }
+  }]
 }), ({
-  theme,
-  ownerState
-}) => ownerState.variant === 'regular' && theme.mixins.toolbar);
+  theme
+}) => ({
+  variants: [{
+    props: {
+      variant: 'regular'
+    },
+    style: theme.mixins.toolbar
+  }]
+}));
 const Toolbar = /*#__PURE__*/React.forwardRef(function Toolbar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/modern/Typography/Typography.js

@@ -118,9 +118,10 @@ const Typography = /*#__PURE__*/React.forwardRef(function Typography(inProps, re
   return /*#__PURE__*/_jsx(TypographyRoot, _extends({
     as: Component,
     ref: ref,
-    ownerState: ownerState,
     className: clsx(classes.root, className)
-  }, other));
+  }, other, {
+    ownerState: ownerState
+  }));
 });
 process.env.NODE_ENV !== "production" ? Typography.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/index.js

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

package/modern/styles/experimental_extendTheme.js

@@ -5,7 +5,7 @@ const _excluded = ["colorSchemes", "cssVarPrefix", "shouldSkipGeneratingVar", "g
 import deepmerge from '@mui/utils/deepmerge';
 import { unstable_createGetCssVar as systemCreateGetCssVar, createSpacing } from '@mui/system';
 import { createUnarySpacing } from '@mui/system/spacing';
-import { prepareCssVars } from '@mui/system/cssVars';
+import { prepareCssVars, prepareTypographyVars } from '@mui/system/cssVars';
 import styleFunctionSx, { unstable_defaultSxConfig as defaultSxConfig } from '@mui/system/styleFunctionSx';
 import { private_safeColorChannel as safeColorChannel, private_safeAlpha as safeAlpha, private_safeDarken as safeDarken, private_safeLighten as safeLighten, private_safeEmphasize as safeEmphasize, hslToRgb } from '@mui/system/colorManipulator';
 import defaultShouldSkipGeneratingVar from './shouldSkipGeneratingVar';
@@ -118,6 +118,7 @@ export default function extendTheme(options = {}, ...args) {
         overlays: colorSchemesInput.dark?.overlays || defaultDarkOverlays
       })
     }),
+    font: _extends({}, prepareTypographyVars(muiTheme.typography), muiTheme.font),
     spacing: getSpacingVal(input.spacing)
   });
   Object.keys(theme.colorSchemes).forEach(key => {

package/modern/styles/getOverlayAlpha.js

@@ -1,11 +1,10 @@
 // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
-const getOverlayAlpha = elevation => {
+export default function getOverlayAlpha(elevation) {
   let alphaValue;
   if (elevation < 1) {
     alphaValue = 5.11916 * elevation ** 2;
   } else {
     alphaValue = 4.5 * Math.log(elevation + 1) + 2;
   }
-  return (alphaValue / 100).toFixed(2);
-};
-export default getOverlayAlpha;
+  return Math.round(alphaValue * 10) / 1000;
+}

package/node/Checkbox/Checkbox.js

@@ -19,13 +19,14 @@ var _CheckBoxOutlineBlank = _interopRequireDefault(require("../internal/svg-icon
 var _CheckBox = _interopRequireDefault(require("../internal/svg-icons/CheckBox"));
 var _IndeterminateCheckBox = _interopRequireDefault(require("../internal/svg-icons/IndeterminateCheckBox"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
-var _useThemeProps = _interopRequireDefault(require("../styles/useThemeProps"));
-var _styled = _interopRequireWildcard(require("../styles/styled"));
+var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _checkboxClasses = _interopRequireWildcard(require("./checkboxClasses"));
+var _zeroStyled = require("../zero-styled");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["checkedIcon", "color", "icon", "indeterminate", "indeterminateIcon", "inputProps", "size", "className"];
 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)('MuiCheckbox');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,8 +40,8 @@ const useUtilityClasses = ownerState => {
   const composedClasses = (0, _composeClasses.default)(slots, _checkboxClasses.getCheckboxUtilityClass, classes);
   return (0, _extends2.default)({}, classes, composedClasses);
 };
-const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
-  shouldForwardProp: prop => (0, _styled.rootShouldForwardProp)(prop) || prop === 'classes',
+const CheckboxRoot = (0, _zeroStyled.styled)(_SwitchBase.default, {
+  shouldForwardProp: prop => (0, _rootShouldForwardProp.default)(prop) || prop === 'classes',
   name: 'MuiCheckbox',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -50,32 +51,62 @@ const CheckboxRoot = (0, _styled.default)(_SwitchBase.default, {
     return [styles.root, ownerState.indeterminate && styles.indeterminate, styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.color !== 'default' && styles[`color${(0, _capitalize.default)(ownerState.color)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
-  color: (theme.vars || theme).palette.text.secondary
-}, !ownerState.disableRipple && {
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${ownerState.color === 'default' ? theme.vars.palette.action.activeChannel : theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(ownerState.color === 'default' ? theme.palette.action.active : theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
+  variants: [{
+    props: {
+      color: 'default',
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      }
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${_checkboxClasses.default.checked}, &.${_checkboxClasses.default.indeterminate}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  },
-  [`&.${_checkboxClasses.default.disabled}`]: {
-    color: (theme.vars || theme).palette.action.disabled
-  }
+  }, ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color,
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : (0, _colorManipulator.alpha)(theme.palette[color].main, theme.palette.action.hoverOpacity)
+      }
+    }
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${_checkboxClasses.default.checked}, &.${_checkboxClasses.default.indeterminate}`]: {
+        color: (theme.vars || theme).palette[color].main
+      },
+      [`&.${_checkboxClasses.default.disabled}`]: {
+        color: (theme.vars || theme).palette.action.disabled
+      }
+    }
+  })), {
+    // Should be last to override other colors
+    props: {
+      disableRipple: false
+    },
+    style: {
+      // Reset on touch devices, it doesn't add specificity
+      '&:hover': {
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
+    }
+  }]
 }));
 const defaultCheckedIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBox.default, {});
 const defaultIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckBoxOutlineBlank.default, {});
 const defaultIndeterminateIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IndeterminateCheckBox.default, {});
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(inProps, ref) {
   var _icon$props$fontSize, _indeterminateIcon$pr;
-  const props = (0, _useThemeProps.default)({
+  const props = useThemeProps({
     props: inProps,
     name: 'MuiCheckbox'
   });

package/node/FormControlLabel/FormControlLabel.js

@@ -20,8 +20,9 @@ var _Typography = _interopRequireDefault(require("../Typography"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _formControlLabelClasses = _interopRequireWildcard(require("./formControlLabelClasses"));
 var _formControlState = _interopRequireDefault(require("../FormControl/formControlState"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
+const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slots", "slotProps", "value"];
 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)('MuiFormControlLabel');
@@ -119,7 +120,7 @@ const AsteriskComponent = (0, _zeroStyled.styled)('span', {
  * Use this component if you want to display an extra label.
  */
 const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
-  var _ref, _slotProps$typography;
+  var _ref;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -133,6 +134,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       label: labelProp,
       labelPlacement = 'end',
       required: requiredProp,
+      slots = {},
       slotProps = {}
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
@@ -160,10 +162,18 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
-  const typographySlotProps = (_slotProps$typography = slotProps.typography) != null ? _slotProps$typography : componentsProps.typography;
+  const externalForwardedProps = {
+    slots,
+    slotProps: (0, _extends2.default)({}, componentsProps, slotProps)
+  };
+  const [TypographySlot, typographySlotProps] = (0, _useSlot.default)('typography', {
+    elementType: _Typography.default,
+    externalForwardedProps,
+    ownerState
+  });
   let label = labelProp;
   if (label != null && label.type !== _Typography.default && !disableTypography) {
-    label = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, (0, _extends2.default)({
+    label = /*#__PURE__*/(0, _jsxRuntime.jsx)(TypographySlot, (0, _extends2.default)({
       component: "span"
     }, typographySlotProps, {
       className: (0, _clsx.default)(classes.label, typographySlotProps == null ? void 0 : typographySlotProps.className),
@@ -206,6 +216,7 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
   /**
    * The props used for each slot inside.
    * @default {}
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   componentsProps: _propTypes.default.shape({
     typography: _propTypes.default.object
@@ -255,7 +266,14 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
    * @default {}
    */
   slotProps: _propTypes.default.shape({
-    typography: _propTypes.default.object
+    typography: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    typography: _propTypes.default.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/node/FormHelperText/FormHelperText.js

@@ -49,8 +49,7 @@ const FormHelperTextRoot = (0, _styled.default)('p', {
     return [styles.root, ownerState.size && styles[`size${(0, _capitalize.default)(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => (0, _extends2.default)({
   color: (theme.vars || theme).palette.text.secondary
 }, theme.typography.caption, {
@@ -64,12 +63,23 @@ const FormHelperTextRoot = (0, _styled.default)('p', {
   },
   [`&.${_formHelperTextClasses.default.error}`]: {
     color: (theme.vars || theme).palette.error.main
-  }
-}, ownerState.size === 'small' && {
-  marginTop: 4
-}, ownerState.contained && {
-  marginLeft: 14,
-  marginRight: 14
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      marginTop: 4
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.contained,
+    style: {
+      marginLeft: 14,
+      marginRight: 14
+    }
+  }]
 }));
 const FormHelperText = /*#__PURE__*/React.forwardRef(function FormHelperText(inProps, ref) {
   const props = (0, _useThemeProps.default)({