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

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # [Versions](https://mui.com/versions/)
 
+## v6.0.0-alpha.4
+
+<!-- generated comparing v6.0.0-alpha.3..next -->
+
+_Apr 24, 2024_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔥 Converted 3 more Material UI components to use Pigment CSS.
+- ℹ️ Pigment CSS now lives in [its own repository](https://github.com/mui/pigment-css)! From now on, all future development will happen there.
+
+### `@mui/material@6.0.0-alpha.4`
+
+- [Checkbox] Convert to support CSS extraction (#41957) @lhilgert9
+- [IconButton] Convert to support CSS extraction (#41850) @gijsbotje
+- [Radio] Convert to support CSS extraction (#41840) @lhilgert9
+- [Typography] Fix ownerState prop placement (#41903) @sai6855
+- Generate typography tokens (#41703) @siriwatknp
+- Move typography CSS variables to `font` (#42003) @siriwatknp
+- Fix getOverlayAlpha type (#41995) @oliviertassinari
+- Support CSS Extraction using codemod (#41935) @siriwatknp
+
+### `@mui/icons-material@6.0.0-alpha.4`
+
+- &#8203;<!-- 08 -->[icons] Update the icons package (#41937) @danilo-leal
+
+### Docs
+
+- [material-ui] Remove react-swipeable-views from demos as it's no longer maintained (#41912) @soler1212
+- [material-ui] Add dark theme thumbnails for templates (#41947) @zanivan
+- [material-ui] Remove links and interdependencies from free templates (#41941) @zanivan
+- [material-ui] Add missing backticks to HTML tag in the installation page (#41972) @Miguelrom
+- Fix 301 Toolpad links @oliviertassinari
+- Fix 301 image redirections @oliviertassinari
+
+### Core
+
+- pnpm docs:zipRules && vale sync @oliviertassinari
+- Remove @pigment-css/\* packages (#41965) @mnajdova
+- [code-infra] Move the HighlightedCode component to @mui/docs (#41859) @Janpot
+- [code-infra] Move the HighlightedCode component to @mui/docs (#41859) @Janpot
+- [code-infra] Make Babel config path configurable in API docs builder (#41999) @michaldudak
+- [docs-infra] Fix flex-shrink pro-plan (#41990) @oliviertassinari
+- [docs-infra] Allow more value uses of MUI (#41706) @oliviertassinari
+- [docs-infra] Move CPU to shared config (#41901) @oliviertassinari
+- [docs-infra] Improve Twitter OG:image (#41860) @oliviertassinari
+- [docs-infra] Adapt docs infra to Base UI docs needs (#41963) @michaldudak
+- [docs-infra] Add demo container design refinements (#41948) @danilo-leal
+- [docs-infra] Use the `getLayout` on the material demo pages (#41936) @alexfauquette
+- [test] Update browser versions in karma config (#42008) @ZeeshanTamboli
+- [website] Remove customer support agent role from website (#41969) @rluzists1
+- [website] Fix grid usage and add stray improvements (#41930) @danilo-leal
+
+All contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @gijsbotje, @Janpot, @lhilgert9, @michaldudak, @Miguelrom, @mnajdova, @oliviertassinari, @rluzists1, @sai6855, @siriwatknp, @soler1212, @zanivan, @ZeeshanTamboli
+
 ## v6.0.0-alpha.3
 
 <!-- generated comparing v6.0.0-alpha.2..next -->

package/Checkbox/Checkbox.js

@@ -14,10 +14,11 @@ import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank
 import CheckBoxIcon from '../internal/svg-icons/CheckBox';
 import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
+import { createUseThemeProps, styled } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiCheckbox');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -42,25 +43,55 @@ const CheckboxRoot = styled(SwitchBase, {
     return [styles.root, ownerState.indeterminate && styles.indeterminate, styles[`size${capitalize(ownerState.size)}`], ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
-  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})` : 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})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity)
+      }
     }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  },
-  [`&.${checkboxClasses.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})` : alpha(theme.palette[color].main, theme.palette.action.hoverOpacity)
+      }
+    }
+  })), ...Object.entries(theme.palette).filter(([, palette]) => palette.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      [`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
+        color: (theme.vars || theme).palette[color].main
+      },
+      [`&.${checkboxClasses.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__*/_jsx(CheckBoxIcon, {});
 const defaultIcon = /*#__PURE__*/_jsx(CheckBoxOutlineBlankIcon, {});

package/FormHelperText/FormHelperText.js

@@ -41,8 +41,7 @@ const FormHelperTextRoot = styled('p', {
     return [styles.root, ownerState.size && styles[`size${capitalize(ownerState.size)}`], ownerState.contained && styles.contained, ownerState.filled && styles.filled];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({
   color: (theme.vars || theme).palette.text.secondary
 }, theme.typography.caption, {
@@ -56,12 +55,23 @@ const FormHelperTextRoot = styled('p', {
   },
   [`&.${formHelperTextClasses.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 = useThemeProps({

package/IconButton/IconButton.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 = ["edge", "children", "className", "color", "disabled", "disableFocusRipple", "size"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -9,12 +9,12 @@ import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
 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 capitalize from '../utils/capitalize';
 import iconButtonClasses, { getIconButtonUtilityClass } from './iconButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiIconButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -38,9 +38,8 @@ const IconButtonRoot = styled(ButtonBase, {
     return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], ownerState.edge && styles[`edge${capitalize(ownerState.edge)}`], styles[`size${capitalize(ownerState.size)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   textAlign: 'center',
   flex: '0 0 auto',
   fontSize: theme.typography.pxToRem(24),
@@ -51,49 +50,107 @@ const IconButtonRoot = styled(ButtonBase, {
   color: (theme.vars || theme).palette.action.active,
   transition: theme.transitions.create('background-color', {
     duration: theme.transitions.duration.shortest
-  })
-}, !ownerState.disableRipple && {
-  '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
+  }),
+  variants: [{
+    props: {
+      disableRipple: false
+    },
+    style: {
+      '&:hover': {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      }
     }
-  }
-}, ownerState.edge === 'start' && {
-  marginLeft: ownerState.size === 'small' ? -3 : -12
-}, ownerState.edge === 'end' && {
-  marginRight: ownerState.size === 'small' ? -3 : -12
+  }, {
+    props: {
+      edge: 'start'
+    },
+    style: {
+      marginLeft: -12
+    }
+  }, {
+    props: {
+      edge: 'start',
+      size: 'small'
+    },
+    style: {
+      marginLeft: -3
+    }
+  }, {
+    props: {
+      edge: 'end'
+    },
+    style: {
+      marginRight: -12
+    }
+  }, {
+    props: {
+      edge: 'end',
+      size: 'small'
+    },
+    style: {
+      marginRight: -3
+    }
+  }]
 }), ({
-  theme,
-  ownerState
+  theme
 }) => {
-  const palette = (theme.vars || theme).palette?.[ownerState.color];
-  return _extends({}, ownerState.color === 'inherit' && {
-    color: 'inherit'
-  }, ownerState.color !== 'inherit' && ownerState.color !== 'default' && _extends({
-    color: palette?.main
-  }, !ownerState.disableRipple && {
-    '&:hover': _extends({}, palette && {
-      backgroundColor: theme.vars ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(palette.main, theme.palette.action.hoverOpacity)
+  return {
+    variants: [{
+      props: {
+        color: 'inherit'
+      },
+      style: {
+        color: 'inherit'
+      }
+    }, ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
+    .map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    })), ...Object.entries(theme.palette).filter(([, value]) => value.main) // check all the used fields in the style below
+    .map(([color]) => ({
+      props: {
+        color,
+        disableRipple: false
+      },
+      style: {
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${(theme.vars || theme).palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha((theme.vars || theme).palette[color].main, theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        }
+      }
+    })), {
+      props: {
+        size: 'small'
+      },
+      style: {
+        padding: 5,
+        fontSize: theme.typography.pxToRem(18)
+      }
     }, {
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+      props: {
+        size: 'large'
+      },
+      style: {
+        padding: 12,
+        fontSize: theme.typography.pxToRem(28)
       }
-    })
-  }), ownerState.size === 'small' && {
-    padding: 5,
-    fontSize: theme.typography.pxToRem(18)
-  }, ownerState.size === 'large' && {
-    padding: 12,
-    fontSize: theme.typography.pxToRem(28)
-  }, {
+    }],
     [`&.${iconButtonClasses.disabled}`]: {
       backgroundColor: 'transparent',
       color: (theme.vars || theme).palette.action.disabled
     }
-  });
+  };
 });
 
 /**

package/ImageList/ImageList.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 = ["children", "className", "cols", "component", "rowHeight", "gap", "style", "variant"];
 import composeClasses from '@mui/utils/composeClasses';
 import integerPropType from '@mui/utils/integerPropType';
@@ -32,19 +32,21 @@ const ImageListRoot = styled('ul', {
     } = props;
     return [styles.root, styles[ownerState.variant]];
   }
-})(({
-  ownerState
-}) => {
-  return _extends({
-    display: 'grid',
-    overflowY: 'auto',
-    listStyle: 'none',
-    padding: 0,
-    // Add iOS momentum scrolling for iOS < 13.0
-    WebkitOverflowScrolling: 'touch'
-  }, ownerState.variant === 'masonry' && {
-    display: 'block'
-  });
+})({
+  display: 'grid',
+  overflowY: 'auto',
+  listStyle: 'none',
+  padding: 0,
+  // Add iOS momentum scrolling for iOS < 13.0
+  WebkitOverflowScrolling: 'touch',
+  variants: [{
+    props: {
+      variant: 'masonry'
+    },
+    style: {
+      display: 'block'
+    }
+  }]
 });
 const ImageList = /*#__PURE__*/React.forwardRef(function ImageList(inProps, ref) {
   const props = useThemeProps({

package/ImageListItem/ImageListItem.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 = ["children", "className", "cols", "component", "rows", "style"];
 import composeClasses from '@mui/utils/composeClasses';
 import integerPropType from '@mui/utils/integerPropType';
@@ -37,32 +37,47 @@ const ImageListItemRoot = styled('li', {
       [`& .${imageListItemClasses.img}`]: styles.img
     }, styles.root, styles[ownerState.variant]];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   display: 'block',
-  position: 'relative'
-}, ownerState.variant === 'standard' && {
-  // For titlebar under list item
-  display: 'flex',
-  flexDirection: 'column'
-}, ownerState.variant === 'woven' && {
-  height: '100%',
-  alignSelf: 'center',
-  '&:nth-of-type(even)': {
-    height: '70%'
-  }
-}, {
-  [`& .${imageListItemClasses.img}`]: _extends({
+  position: 'relative',
+  [`& .${imageListItemClasses.img}`]: {
     objectFit: 'cover',
     width: '100%',
     height: '100%',
     display: 'block'
-  }, ownerState.variant === 'standard' && {
-    height: 'auto',
-    flexGrow: 1
-  })
-}));
+  },
+  variants: [{
+    props: {
+      variant: 'standard'
+    },
+    style: {
+      // For titlebar under list item
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      variant: 'woven'
+    },
+    style: {
+      height: '100%',
+      alignSelf: 'center',
+      '&:nth-of-type(even)': {
+        height: '70%'
+      }
+    }
+  }, {
+    props: {
+      variant: 'standard'
+    },
+    style: {
+      [`& .${imageListItemClasses.img}`]: {
+        height: 'auto',
+        flexGrow: 1
+      }
+    }
+  }]
+});
 const ImageListItem = /*#__PURE__*/React.forwardRef(function ImageListItem(inProps, ref) {
   const props = useThemeProps({
     props: inProps,

package/ImageListItemBar/ImageListItemBar.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 = ["actionIcon", "actionPosition", "className", "subtitle", "title", "position"];
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
@@ -38,26 +38,41 @@ const ImageListItemBarRoot = styled('div', {
     return [styles.root, styles[`position${capitalize(ownerState.position)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return _extends({
+  return {
     position: 'absolute',
     left: 0,
     right: 0,
     background: 'rgba(0, 0, 0, 0.5)',
     display: 'flex',
     alignItems: 'center',
-    fontFamily: theme.typography.fontFamily
-  }, ownerState.position === 'bottom' && {
-    bottom: 0
-  }, ownerState.position === 'top' && {
-    top: 0
-  }, ownerState.position === 'below' && {
-    position: 'relative',
-    background: 'transparent',
-    alignItems: 'normal'
-  });
+    fontFamily: theme.typography.fontFamily,
+    variants: [{
+      props: {
+        position: 'bottom'
+      },
+      style: {
+        bottom: 0
+      }
+    }, {
+      props: {
+        position: 'top'
+      },
+      style: {
+        top: 0
+      }
+    }, {
+      props: {
+        position: 'below'
+      },
+      style: {
+        position: 'relative',
+        background: 'transparent',
+        alignItems: 'normal'
+      }
+    }]
+  };
 });
 const ImageListItemBarTitleWrap = styled('div', {
   name: 'MuiImageListItemBar',
@@ -69,22 +84,37 @@ const ImageListItemBarTitleWrap = styled('div', {
     return [styles.titleWrap, styles[`titleWrap${capitalize(ownerState.position)}`], ownerState.actionIcon && styles[`titleWrapActionPos${capitalize(ownerState.actionPosition)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => {
-  return _extends({
+  return {
     flexGrow: 1,
     padding: '12px 16px',
     color: (theme.vars || theme).palette.common.white,
-    overflow: 'hidden'
-  }, ownerState.position === 'below' && {
-    padding: '6px 0 12px',
-    color: 'inherit'
-  }, ownerState.actionIcon && ownerState.actionPosition === 'left' && {
-    paddingLeft: 0
-  }, ownerState.actionIcon && ownerState.actionPosition === 'right' && {
-    paddingRight: 0
-  });
+    overflow: 'hidden',
+    variants: [{
+      props: {
+        position: 'below'
+      },
+      style: {
+        padding: '6px 0 12px',
+        color: 'inherit'
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.actionIcon && ownerState.actionPosition === 'left',
+      style: {
+        paddingLeft: 0
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.actionIcon && ownerState.actionPosition === 'right',
+      style: {
+        paddingRight: 0
+      }
+    }]
+  };
 });
 const ImageListItemBarTitle = styled('div', {
   name: 'MuiImageListItemBar',
@@ -125,12 +155,15 @@ const ImageListItemBarActionIcon = styled('div', {
     } = props;
     return [styles.actionIcon, styles[`actionIconActionPos${capitalize(ownerState.actionPosition)}`]];
   }
-})(({
-  ownerState
-}) => {
-  return _extends({}, ownerState.actionPosition === 'left' && {
-    order: -1
-  });
+})({
+  variants: [{
+    props: {
+      actionPosition: 'left'
+    },
+    style: {
+      order: -1
+    }
+  }]
 });
 const ImageListItemBar = /*#__PURE__*/React.forwardRef(function ImageListItemBar(inProps, ref) {
   const props = useThemeProps({