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

package/Link/Link.js

@@ -1,22 +1,24 @@
 '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", "color", "component", "onBlur", "onFocus", "TypographyClasses", "underline", "variant", "sx"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import { alpha } from '@mui/system/colorManipulator';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useIsFocusVisible from '../utils/useIsFocusVisible';
 import useForkRef from '../utils/useForkRef';
 import Typography from '../Typography';
 import linkClasses, { getLinkUtilityClass } from './linkClasses';
 import getTextDecoration, { colorTransformations } from './getTextDecoration';
+import useTheme from '../styles/useTheme';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiLink');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -39,60 +41,92 @@ const LinkRoot = styled(Typography, {
     return [styles.root, styles[`underline${capitalize(ownerState.underline)}`], ownerState.component === 'button' && styles.button];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return _extends({}, ownerState.underline === 'none' && {
-    textDecoration: 'none'
-  }, ownerState.underline === 'hover' && {
-    textDecoration: 'none',
-    '&:hover': {
-      textDecoration: 'underline'
-    }
-  }, ownerState.underline === 'always' && _extends({
-    textDecoration: 'underline'
-  }, ownerState.color !== 'inherit' && {
-    textDecorationColor: getTextDecoration({
-      theme,
-      ownerState
-    })
-  }, {
-    '&:hover': {
-      textDecorationColor: 'inherit'
-    }
-  }), ownerState.component === 'button' && {
-    position: 'relative',
-    WebkitTapHighlightColor: 'transparent',
-    backgroundColor: 'transparent',
-    // Reset default value
-    // We disable the focus ring for mouse, touch and keyboard users.
-    outline: 0,
-    border: 0,
-    margin: 0,
-    // Remove the margin in Safari
-    borderRadius: 0,
-    padding: 0,
-    // Remove the padding in Firefox
-    cursor: 'pointer',
-    userSelect: 'none',
-    verticalAlign: 'middle',
-    MozAppearance: 'none',
-    // Reset
-    WebkitAppearance: 'none',
-    // Reset
-    '&::-moz-focus-inner': {
-      borderStyle: 'none' // Remove Firefox dotted outline.
-    },
-    [`&.${linkClasses.focusVisible}`]: {
-      outline: 'auto'
-    }
-  });
+  return {
+    variants: [{
+      props: {
+        underline: 'none'
+      },
+      style: {
+        textDecoration: 'none'
+      }
+    }, {
+      props: {
+        underline: 'hover'
+      },
+      style: {
+        textDecoration: 'none',
+        '&:hover': {
+          textDecoration: 'underline'
+        }
+      }
+    }, {
+      props: {
+        underline: 'always'
+      },
+      style: {
+        textDecoration: 'underline',
+        '&:hover': {
+          textDecorationColor: 'inherit'
+        }
+      }
+    }, {
+      props: ({
+        underline,
+        ownerState
+      }) => underline === 'always' && ownerState.color !== 'inherit',
+      style: {
+        textDecorationColor: 'var(--Link-underlineColor)'
+      }
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.main).map(([color]) => ({
+      props: {
+        underline: 'always',
+        color
+      },
+      style: {
+        '--Link-underlineColor': theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.4)` : alpha(theme.palette[color].main, 0.4)
+      }
+    })), {
+      props: {
+        component: 'button'
+      },
+      style: {
+        position: 'relative',
+        WebkitTapHighlightColor: 'transparent',
+        backgroundColor: 'transparent',
+        // Reset default value
+        // We disable the focus ring for mouse, touch and keyboard users.
+        outline: 0,
+        border: 0,
+        margin: 0,
+        // Remove the margin in Safari
+        borderRadius: 0,
+        padding: 0,
+        // Remove the padding in Firefox
+        cursor: 'pointer',
+        userSelect: 'none',
+        verticalAlign: 'middle',
+        MozAppearance: 'none',
+        // Reset
+        WebkitAppearance: 'none',
+        // Reset
+        '&::-moz-focus-inner': {
+          borderStyle: 'none' // Remove Firefox dotted outline.
+        },
+        [`&.${linkClasses.focusVisible}`]: {
+          outline: 'auto'
+        }
+      }
+    }]
+  };
 });
 const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiLink'
   });
+  const theme = useTheme();
   const {
       className,
       color = 'primary',
@@ -148,11 +182,18 @@ const Link = /*#__PURE__*/React.forwardRef(function Link(inProps, ref) {
     onFocus: handleFocus,
     ref: handlerRef,
     ownerState: ownerState,
-    variant: variant,
-    sx: [...(!Object.keys(colorTransformations).includes(color) ? [{
+    variant: variant
+  }, other, {
+    sx: [...(colorTransformations[color] === undefined ? [{
       color
-    }] : []), ...(Array.isArray(sx) ? sx : [sx])]
-  }, other));
+    }] : []), ...(Array.isArray(sx) ? sx : [sx])],
+    style: _extends({}, other.style, underline === 'always' && color !== 'inherit' && {
+      '--Link-underlineColor': getTextDecoration({
+        theme,
+        ownerState
+      })
+    })
+  }));
 });
 process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -189,6 +230,10 @@ process.env.NODE_ENV !== "production" ? Link.propTypes /* remove-proptypes */ =
    * @ignore
    */
   onFocus: PropTypes.func,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Link/getTextDecoration.d.ts

@@ -1,15 +1,9 @@
 import type { Theme } from '../styles';
-export declare const colorTransformations: {
-    primary: string;
-    textPrimary: string;
-    secondary: string;
-    textSecondary: string;
-    error: string;
-};
+export declare const colorTransformations: Record<string, string | null | undefined>;
 declare const getTextDecoration: <T extends Theme>({ theme, ownerState, }: {
     theme: T;
     ownerState: {
         color: string;
     };
-}) => string;
+}) => string | null;
 export default getTextDecoration;

package/Link/getTextDecoration.js

@@ -1,20 +1,28 @@
-import { getPath } from '@mui/system';
+import { getPath } from '@mui/system/style';
 import { alpha } from '@mui/system/colorManipulator';
+// TODO v7: remove this transformation
 export const colorTransformations = {
-  primary: 'primary.main',
   textPrimary: 'text.primary',
-  secondary: 'secondary.main',
   textSecondary: 'text.secondary',
-  error: 'error.main'
-};
-const transformDeprecatedColors = color => {
-  return colorTransformations[color] || color;
+  // For main palette, the color will be applied by the styles above.
+  primary: null,
+  secondary: null,
+  error: null,
+  info: null,
+  success: null,
+  warning: null
 };
 const getTextDecoration = ({
   theme,
   ownerState
 }) => {
-  const transformedColor = transformDeprecatedColors(ownerState.color);
+  let transformedColor = colorTransformations[ownerState.color];
+  if (transformedColor === null) {
+    return null;
+  }
+  if (transformedColor === undefined) {
+    transformedColor = ownerState.color;
+  }
   const color = getPath(theme, `palette.${transformedColor}`, false) || ownerState.color;
   const channelColor = getPath(theme, `palette.${transformedColor}Channel`);
   if ('vars' in theme && channelColor) {

package/List/List.js

@@ -1,17 +1,17 @@
 '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 = ["children", "className", "component", "dense", "disablePadding", "subheader"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ListContext from './ListContext';
 import { getListUtilityClass } from './listClasses';
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiList');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -33,19 +33,28 @@ const ListRoot = styled('ul', {
     } = props;
     return [styles.root, !ownerState.disablePadding && styles.padding, ownerState.dense && styles.dense, ownerState.subheader && styles.subheader];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   listStyle: 'none',
   margin: 0,
   padding: 0,
-  position: 'relative'
-}, !ownerState.disablePadding && {
-  paddingTop: 8,
-  paddingBottom: 8
-}, ownerState.subheader && {
-  paddingTop: 0
-}));
+  position: 'relative',
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding,
+    style: {
+      paddingTop: 8,
+      paddingBottom: 8
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.subheader,
+    style: {
+      paddingTop: 0
+    }
+  }]
+});
 const List = /*#__PURE__*/React.forwardRef(function List(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/ListItem/ListItem.js

@@ -12,8 +12,7 @@ import composeClasses from '@mui/utils/composeClasses';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import { alpha } from '@mui/system/colorManipulator';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ButtonBase from '../ButtonBase';
 import isMuiElement from '../utils/isMuiElement';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
@@ -23,6 +22,7 @@ import listItemClasses, { getListItemUtilityClass } from './listItemClasses';
 import { listItemButtonClasses } from '../ListItemButton';
 import ListItemSecondaryAction from '../ListItemSecondaryAction';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListItem');
 export const overridesResolver = (props, styles) => {
   const {
     ownerState

package/ListItemAvatar/ListItemAvatar.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import ListContext from '../List/ListContext';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getListItemAvatarUtilityClass } from './listItemAvatarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListItemAvatar');
 const useUtilityClasses = ownerState => {
   const {
     alignItems,

package/ListItemButton/ListItemButton.js

@@ -8,14 +8,15 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import ButtonBase from '../ButtonBase';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
 import useForkRef from '../utils/useForkRef';
 import ListContext from '../List/ListContext';
 import listItemButtonClasses, { getListItemButtonUtilityClass } from './listItemButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListItemButton');
 export const overridesResolver = (props, styles) => {
   const {
     ownerState

package/ListItemIcon/ListItemIcon.js

@@ -1,17 +1,17 @@
 '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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getListItemIconUtilityClass } from './listItemIconClasses';
 import ListContext from '../List/ListContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListItemIcon');
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -32,15 +32,20 @@ const ListItemIconRoot = styled('div', {
     return [styles.root, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   minWidth: 56,
   color: (theme.vars || theme).palette.action.active,
   flexShrink: 0,
-  display: 'inline-flex'
-}, ownerState.alignItems === 'flex-start' && {
-  marginTop: 8
+  display: 'inline-flex',
+  variants: [{
+    props: {
+      alignItems: 'flex-start'
+    },
+    style: {
+      marginTop: 8
+    }
+  }]
 }));
 
 /**

package/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -7,11 +7,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ListContext from '../List/ListContext';
 import { getListItemSecondaryActionClassesUtilityClass } from './listItemSecondaryActionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListItemSecondaryAction');
 const useUtilityClasses = ownerState => {
   const {
     disableGutters,

package/ListItemText/ListItemText.js

@@ -9,10 +9,10 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography from '../Typography';
 import ListContext from '../List/ListContext';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListItemText');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/ListSubheader/ListSubheader.js

@@ -7,11 +7,11 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import { getListSubheaderUtilityClass } from './listSubheaderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListSubheader');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -114,7 +114,9 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     ownerState: ownerState
   }, other));
 });
-ListSubheader.muiSkipListHighlight = true;
+if (ListSubheader) {
+  ListSubheader.muiSkipListHighlight = true;
+}
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/Menu/Menu.js

@@ -14,10 +14,11 @@ import HTMLElementType from '@mui/utils/HTMLElementType';
 import { useRtl } from '@mui/system/RtlProvider';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getMenuUtilityClass } from './menuClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiMenu');
 const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'

package/MenuItem/MenuItem.js

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ListContext from '../List/ListContext';
 import ButtonBase from '../ButtonBase';
 import useEnhancedEffect from '../utils/useEnhancedEffect';
@@ -19,6 +19,7 @@ import { listItemIconClasses } from '../ListItemIcon';
 import { listItemTextClasses } from '../ListItemText';
 import menuItemClasses, { getMenuItemUtilityClass } from './menuItemClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiMenuItem');
 export const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -46,8 +47,7 @@ const MenuItemRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({}, theme.typography.body1, {
   display: 'flex',
   justifyContent: 'flex-start',
@@ -58,14 +58,7 @@ const MenuItemRoot = styled(ButtonBase, {
   paddingTop: 6,
   paddingBottom: 6,
   boxSizing: 'border-box',
-  whiteSpace: 'nowrap'
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, ownerState.divider && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-  backgroundClip: 'padding-box'
-}, {
+  whiteSpace: 'nowrap',
   '&:hover': {
     textDecoration: 'none',
     backgroundColor: (theme.vars || theme).palette.action.hover,
@@ -109,21 +102,48 @@ const MenuItemRoot = styled(ButtonBase, {
   },
   [`& .${listItemIconClasses.root}`]: {
     minWidth: 36
-  }
-}, !ownerState.dense && {
-  [theme.breakpoints.up('sm')]: {
-    minHeight: 'auto'
-  }
-}, ownerState.dense && _extends({
-  minHeight: 32,
-  // https://m2.material.io/components/menus#specs > Dense
-  paddingTop: 4,
-  paddingBottom: 4
-}, theme.typography.body2, {
-  [`& .${listItemIconClasses.root} svg`]: {
-    fontSize: '1.25rem'
-  }
-})));
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.divider,
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      backgroundClip: 'padding-box'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.dense,
+    style: {
+      [theme.breakpoints.up('sm')]: {
+        minHeight: 'auto'
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.dense,
+    style: _extends({
+      minHeight: 32,
+      // https://m2.material.io/components/menus#specs > Dense
+      paddingTop: 4,
+      paddingBottom: 4
+    }, theme.typography.body2, {
+      [`& .${listItemIconClasses.root} svg`]: {
+        fontSize: '1.25rem'
+      }
+    })
+  }]
+}));
 const MenuItem = /*#__PURE__*/React.forwardRef(function MenuItem(inProps, ref) {
   const props = useThemeProps({
     props: inProps,