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

package/modern/Drawer/Drawer.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 = ["BackdropProps"],
   _excluded2 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
 import * as React from 'react';
@@ -15,10 +15,11 @@ import Slide from '../Slide';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
 import useTheme from '../styles/useTheme';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getDrawerUtilityClass } from './drawerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiDrawer');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -67,9 +68,8 @@ const DrawerPaper = styled(Paper, {
     return [styles.paper, styles[`paperAnchor${capitalize(ownerState.anchor)}`], ownerState.variant !== 'temporary' && styles[`paperAnchorDocked${capitalize(ownerState.anchor)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   overflowY: 'auto',
   display: 'flex',
   flexDirection: 'column',
@@ -84,32 +84,73 @@ const DrawerPaper = styled(Paper, {
   // We disable the focus ring for mouse, touch and keyboard users.
   // At some point, it would be better to keep it for keyboard users.
   // :focus-ring CSS pseudo-class will help.
-  outline: 0
-}, ownerState.anchor === 'left' && {
-  left: 0
-}, ownerState.anchor === 'top' && {
-  top: 0,
-  left: 0,
-  right: 0,
-  height: 'auto',
-  maxHeight: '100%'
-}, ownerState.anchor === 'right' && {
-  right: 0
-}, ownerState.anchor === 'bottom' && {
-  top: 'auto',
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: 'auto',
-  maxHeight: '100%'
-}, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-  borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-  borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
+  outline: 0,
+  variants: [{
+    props: {
+      anchor: 'left'
+    },
+    style: {
+      left: 0
+    }
+  }, {
+    props: {
+      anchor: 'top'
+    },
+    style: {
+      top: 0,
+      left: 0,
+      right: 0,
+      height: 'auto',
+      maxHeight: '100%'
+    }
+  }, {
+    props: {
+      anchor: 'right'
+    },
+    style: {
+      right: 0
+    }
+  }, {
+    props: {
+      anchor: 'bottom'
+    },
+    style: {
+      top: 'auto',
+      left: 0,
+      bottom: 0,
+      right: 0,
+      height: 'auto',
+      maxHeight: '100%'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'left' && ownerState.variant !== 'temporary',
+    style: {
+      borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'top' && ownerState.variant !== 'temporary',
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'right' && ownerState.variant !== 'temporary',
+    style: {
+      borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary',
+    style: {
+      borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }]
 }));
 const oppositeDirection = {
   left: 'right',

package/modern/Fab/Fab.js

@@ -10,7 +10,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
 import fabClasses, { getFabUtilityClass } from './fabClasses';
-import { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiFab');

package/modern/FilledInput/FilledInput.js

@@ -9,11 +9,12 @@ import refType from '@mui/utils/refType';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
 import InputBase from '../InputBase';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import filledInputClasses, { getFilledInputUtilityClass } from './filledInputClasses';
-import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseComponent as InputBaseInput } from '../InputBase/InputBase';
+import { rootOverridesResolver as inputBaseRootOverridesResolver, inputOverridesResolver as inputBaseInputOverridesResolver, InputBaseRoot, InputBaseInput } from '../InputBase/InputBase';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFilledInput');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,15 +38,14 @@ const FilledInputRoot = styled(InputBaseRoot, {
     return [...inputBaseRootOverridesResolver(props, styles), !ownerState.disableUnderline && styles.underline];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
   const light = theme.palette.mode === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   const backgroundColor = light ? 'rgba(0, 0, 0, 0.06)' : 'rgba(255, 255, 255, 0.09)';
   const hoverBackground = light ? 'rgba(0, 0, 0, 0.09)' : 'rgba(255, 255, 255, 0.13)';
   const disabledBackground = light ? 'rgba(0, 0, 0, 0.12)' : 'rgba(255, 255, 255, 0.12)';
-  return _extends({
+  return {
     position: 'relative',
     backgroundColor: theme.vars ? theme.vars.palette.FilledInput.bg : backgroundColor,
     borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
@@ -66,76 +66,122 @@ const FilledInputRoot = styled(InputBaseRoot, {
     },
     [`&.${filledInputClasses.disabled}`]: {
       backgroundColor: theme.vars ? theme.vars.palette.FilledInput.disabledBg : disabledBackground
-    }
-  }, !ownerState.disableUnderline && {
-    '&::after': {
-      borderBottom: `2px solid ${(theme.vars || theme).palette[ownerState.color || 'primary']?.main}`,
-      left: 0,
-      bottom: 0,
-      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-      content: '""',
-      position: 'absolute',
-      right: 0,
-      transform: 'scaleX(0)',
-      transition: theme.transitions.create('transform', {
-        duration: theme.transitions.duration.shorter,
-        easing: theme.transitions.easing.easeOut
-      }),
-      pointerEvents: 'none' // Transparent to the hover style.
-    },
-    [`&.${filledInputClasses.focused}:after`]: {
-      // translateX(0) is a workaround for Safari transform scale bug
-      // See https://github.com/mui/material-ui/issues/31766
-      transform: 'scaleX(1) translateX(0)'
     },
-    [`&.${filledInputClasses.error}`]: {
-      '&::before, &::after': {
-        borderBottomColor: (theme.vars || theme).palette.error.main
+    variants: [{
+      props: ({
+        ownerState
+      }) => !ownerState.disableUnderline,
+      style: {
+        '&::after': {
+          left: 0,
+          bottom: 0,
+          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          content: '""',
+          position: 'absolute',
+          right: 0,
+          transform: 'scaleX(0)',
+          transition: theme.transitions.create('transform', {
+            duration: theme.transitions.duration.shorter,
+            easing: theme.transitions.easing.easeOut
+          }),
+          pointerEvents: 'none' // Transparent to the hover style.
+        },
+        [`&.${filledInputClasses.focused}:after`]: {
+          // translateX(0) is a workaround for Safari transform scale bug
+          // See https://github.com/mui/material-ui/issues/31766
+          transform: 'scaleX(1) translateX(0)'
+        },
+        [`&.${filledInputClasses.error}`]: {
+          '&::before, &::after': {
+            borderBottomColor: (theme.vars || theme).palette.error.main
+          }
+        },
+        '&::before': {
+          borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
+          left: 0,
+          bottom: 0,
+          // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
+          content: '"\\00a0"',
+          position: 'absolute',
+          right: 0,
+          transition: theme.transitions.create('border-bottom-color', {
+            duration: theme.transitions.duration.shorter
+          }),
+          pointerEvents: 'none' // Transparent to the hover style.
+        },
+        [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
+          borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
+        },
+        [`&.${filledInputClasses.disabled}:before`]: {
+          borderBottomStyle: 'dotted'
+        }
       }
-    },
-    '&::before': {
-      borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
-      left: 0,
-      bottom: 0,
-      // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242
-      content: '"\\00a0"',
-      position: 'absolute',
-      right: 0,
-      transition: theme.transitions.create('border-bottom-color', {
-        duration: theme.transitions.duration.shorter
-      }),
-      pointerEvents: 'none' // Transparent to the hover style.
-    },
-    [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
-    },
-    [`&.${filledInputClasses.disabled}:before`]: {
-      borderBottomStyle: 'dotted'
-    }
-  }, ownerState.startAdornment && {
-    paddingLeft: 12
-  }, ownerState.endAdornment && {
-    paddingRight: 12
-  }, ownerState.multiline && _extends({
-    padding: '25px 12px 8px'
-  }, ownerState.size === 'small' && {
-    paddingTop: 21,
-    paddingBottom: 4
-  }, ownerState.hiddenLabel && {
-    paddingTop: 16,
-    paddingBottom: 17
-  }, ownerState.hiddenLabel && ownerState.size === 'small' && {
-    paddingTop: 8,
-    paddingBottom: 9
-  }));
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
+    .map(([color]) => ({
+      props: {
+        disableUnderline: false,
+        color
+      },
+      style: {
+        '&::after': {
+          borderBottom: `2px solid ${(theme.vars || theme).palette[color]?.main}`
+        }
+      }
+    })), {
+      props: ({
+        ownerState
+      }) => ownerState.startAdornment,
+      style: {
+        paddingLeft: 12
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.endAdornment,
+      style: {
+        paddingRight: 12
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline,
+      style: {
+        padding: '25px 12px 8px'
+      }
+    }, {
+      props: ({
+        ownerState,
+        size
+      }) => ownerState.multiline && size === 'small',
+      style: {
+        paddingTop: 21,
+        paddingBottom: 4
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline && ownerState.hiddenLabel,
+      style: {
+        paddingTop: 16,
+        paddingBottom: 17
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.multiline && ownerState.hiddenLabel && ownerState.size === 'small',
+      style: {
+        paddingTop: 8,
+        paddingBottom: 9
+      }
+    }]
+  };
 });
 const FilledInputInput = styled(InputBaseInput, {
   name: 'MuiFilledInput',
   slot: 'Input',
   overridesResolver: inputBaseInputOverridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({
   paddingTop: 25,
   paddingRight: 12,
@@ -161,24 +207,56 @@ const FilledInputInput = styled(InputBaseInput, {
       caretColor: '#fff'
     }
   }
-}, ownerState.size === 'small' && {
-  paddingTop: 21,
-  paddingBottom: 4
-}, ownerState.hiddenLabel && {
-  paddingTop: 16,
-  paddingBottom: 17
-}, ownerState.startAdornment && {
-  paddingLeft: 0
-}, ownerState.endAdornment && {
-  paddingRight: 0
-}, ownerState.hiddenLabel && ownerState.size === 'small' && {
-  paddingTop: 8,
-  paddingBottom: 9
-}, ownerState.multiline && {
-  paddingTop: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  paddingRight: 0
+}, {
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      paddingTop: 21,
+      paddingBottom: 4
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hiddenLabel,
+    style: {
+      paddingTop: 16,
+      paddingBottom: 17
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.startAdornment,
+    style: {
+      paddingLeft: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.endAdornment,
+    style: {
+      paddingRight: 0
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hiddenLabel && ownerState.size === 'small',
+    style: {
+      paddingTop: 8,
+      paddingBottom: 9
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.multiline,
+    style: {
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0
+    }
+  }]
 }));
 const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
   const props = useThemeProps({
@@ -186,6 +264,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     name: 'MuiFilledInput'
   });
   const {
+      disableUnderline = false,
       components = {},
       componentsProps: componentsPropsProp,
       fullWidth = false,
@@ -198,6 +277,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
+    disableUnderline,
     fullWidth,
     inputComponent,
     multiline,
@@ -292,6 +372,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
   disabled: PropTypes.bool,
   /**
    * If `true`, the input will not have an underline.
+   * @default false
    */
   disableUnderline: PropTypes.bool,
   /**
@@ -423,5 +504,7 @@ process.env.NODE_ENV !== "production" ? FilledInput.propTypes /* remove-proptype
    */
   value: PropTypes.any
 } : void 0;
-FilledInput.muiName = 'Input';
+if (FilledInput) {
+  FilledInput.muiName = 'Input';
+}
 export default FilledInput;

package/modern/FormControlLabel/FormControlLabel.js

@@ -207,7 +207,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/).
+   * @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.
    */
   componentsProps: PropTypes.shape({
     typography: PropTypes.object

package/modern/FormHelperText/FormHelperText.js

@@ -10,11 +10,11 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import formHelperTextClasses, { getFormHelperTextUtilityClasses } from './formHelperTextClasses';
-import useThemeProps from '../styles/useThemeProps';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFormHelperText');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/modern/FormLabel/FormLabel.js

@@ -10,10 +10,10 @@ import composeClasses from '@mui/utils/composeClasses';
 import formControlState from '../FormControl/formControlState';
 import useFormControl from '../FormControl/useFormControl';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import formLabelClasses, { getFormLabelUtilityClasses } from './formLabelClasses';
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFormLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,23 +39,33 @@ export const FormLabelRoot = styled('label', {
     return _extends({}, styles.root, ownerState.color === 'secondary' && styles.colorSecondary, ownerState.filled && styles.filled);
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({
   color: (theme.vars || theme).palette.text.secondary
 }, theme.typography.body1, {
   lineHeight: '1.4375em',
   padding: 0,
   position: 'relative',
-  [`&.${formLabelClasses.focused}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  },
-  [`&.${formLabelClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  },
-  [`&.${formLabelClasses.error}`]: {
-    color: (theme.vars || theme).palette.error.main
-  }
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${formLabelClasses.focused}`]: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    }
+  })), {
+    props: {},
+    style: {
+      [`&.${formLabelClasses.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      },
+      [`&.${formLabelClasses.error}`]: {
+        color: (theme.vars || theme).palette.error.main
+      }
+    }
+  }]
 }));
 const AsteriskComponent = styled('span', {
   name: 'MuiFormLabel',

package/modern/Grow/Grow.js

@@ -251,5 +251,7 @@ process.env.NODE_ENV !== "production" ? Grow.propTypes /* remove-proptypes */ =
     exit: PropTypes.number
   })])
 } : void 0;
-Grow.muiSupportAuto = true;
+if (Grow) {
+  Grow.muiSupportAuto = true;
+}
 export default Grow;