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

package/PaginationItem/PaginationItem.js

@@ -2,7 +2,7 @@
 
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "type", "variant"];
+const _excluded = ["className", "color", "component", "components", "disabled", "page", "selected", "shape", "size", "slots", "slotProps", "type", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -16,6 +16,7 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import LastPageIcon from '../internal/svg-icons/LastPage';
 import NavigateBeforeIcon from '../internal/svg-icons/NavigateBefore';
 import NavigateNextIcon from '../internal/svg-icons/NavigateNext';
+import useSlot from '../utils/useSlot';
 import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useThemeProps = createUseThemeProps('MuiPaginationItem');
@@ -281,6 +282,7 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
       shape = 'circular',
       size = 'medium',
       slots = {},
+      slotProps = {},
       type = 'page',
       variant = 'text'
     } = props,
@@ -296,18 +298,53 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
   });
   const isRtl = useRtl();
   const classes = useUtilityClasses(ownerState);
-  const normalizedIcons = isRtl ? {
-    previous: slots.next || components.next || NavigateNextIcon,
-    next: slots.previous || components.previous || NavigateBeforeIcon,
-    last: slots.first || components.first || FirstPageIcon,
-    first: slots.last || components.last || LastPageIcon
-  } : {
-    previous: slots.previous || components.previous || NavigateBeforeIcon,
-    next: slots.next || components.next || NavigateNextIcon,
-    first: slots.first || components.first || FirstPageIcon,
-    last: slots.last || components.last || LastPageIcon
+  const externalForwardedProps = {
+    slots: {
+      previous: slots.previous ?? components.previous,
+      next: slots.next ?? components.next,
+      first: slots.first ?? components.first,
+      last: slots.last ?? components.last
+    },
+    slotProps
   };
-  const Icon = normalizedIcons[type];
+  const [PreviousSlot, previousSlotProps] = useSlot('previous', {
+    elementType: NavigateBeforeIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [NextSlot, nextSlotProps] = useSlot('next', {
+    elementType: NavigateNextIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [FirstSlot, firstSlotProps] = useSlot('first', {
+    elementType: FirstPageIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const [LastSlot, lastSlotProps] = useSlot('last', {
+    elementType: LastPageIcon,
+    externalForwardedProps,
+    ownerState
+  });
+  const rtlAwareType = isRtl ? {
+    previous: 'next',
+    next: 'previous',
+    first: 'last',
+    last: 'first'
+  }[type] : type;
+  const IconSlot = {
+    previous: PreviousSlot,
+    next: NextSlot,
+    first: FirstSlot,
+    last: LastSlot
+  }[rtlAwareType];
+  const iconSlotProps = {
+    previous: previousSlotProps,
+    next: nextSlotProps,
+    first: firstSlotProps,
+    last: lastSlotProps
+  }[rtlAwareType];
   return type === 'start-ellipsis' || type === 'end-ellipsis' ? /*#__PURE__*/_jsx(PaginationItemEllipsis, {
     ref: ref,
     ownerState: ownerState,
@@ -320,11 +357,10 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     disabled: disabled,
     className: clsx(classes.root, className)
   }, other, {
-    children: [type === 'page' && page, Icon ? /*#__PURE__*/_jsx(PaginationItemPageIcon, {
-      as: Icon,
-      ownerState: ownerState,
-      className: classes.icon
-    }) : null]
+    children: [type === 'page' && page, IconSlot ? /*#__PURE__*/_jsx(PaginationItemPageIcon, _extends({}, iconSlotProps, {
+      className: classes.icon,
+      as: IconSlot
+    })) : null]
   }));
 });
 process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-proptypes */ = {
@@ -363,6 +399,7 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * It's recommended to use the `slots` prop instead.
    *
    * @default {}
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   components: PropTypes.shape({
     first: PropTypes.elementType,
@@ -394,11 +431,18 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * @default 'medium'
    */
   size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium', 'large']), PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    first: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    last: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    next: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    previous: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
   /**
    * The components used for each slot inside.
-   *
-   * This prop is an alias for the `components` prop, which will be deprecated in the future.
-   *
    * @default {}
    */
   slots: PropTypes.shape({

package/Radio/Radio.js

@@ -10,14 +10,15 @@ import refType from '@mui/utils/refType';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import SwitchBase from '../internal/SwitchBase';
-import useThemeProps from '../styles/useThemeProps';
 import RadioButtonIcon from './RadioButtonIcon';
 import capitalize from '../utils/capitalize';
 import createChainedFunction from '../utils/createChainedFunction';
 import useRadioGroup from '../RadioGroup/useRadioGroup';
 import radioClasses, { getRadioUtilityClass } from './radioClasses';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { rootShouldForwardProp } from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiRadio');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -40,26 +41,55 @@ const RadioRoot = styled(SwitchBase, {
     return [styles.root, ownerState.size !== 'medium' && styles[`size${capitalize(ownerState.size)}`], 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'
-    }
-  }
-}, ownerState.color !== 'default' && {
-  [`&.${radioClasses.checked}`]: {
-    color: (theme.vars || theme).palette[ownerState.color].main
-  }
-}, {
+  theme
+}) => ({
+  color: (theme.vars || theme).palette.text.secondary,
   [`&.${radioClasses.disabled}`]: {
     color: (theme.vars || theme).palette.action.disabled
-  }
+  },
+  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)
+      }
+    }
+  }, ...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: {
+      [`&.${radioClasses.checked}`]: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    }
+  })), {
+    // 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'
+        }
+      }
+    }
+  }]
 }));
 function areEqualValues(a, b) {
   if (typeof b === 'object' && b !== null) {

package/Radio/RadioButtonIcon.js

@@ -5,7 +5,8 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import RadioButtonUncheckedIcon from '../internal/svg-icons/RadioButtonUnchecked';
 import RadioButtonCheckedIcon from '../internal/svg-icons/RadioButtonChecked';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { rootShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RadioButtonIconRoot = styled('span', {
   shouldForwardProp: rootShouldForwardProp
@@ -18,22 +19,27 @@ const RadioButtonIconBackground = styled(RadioButtonUncheckedIcon)({
   transform: 'scale(1)'
 });
 const RadioButtonIconDot = styled(RadioButtonCheckedIcon)(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   left: 0,
   position: 'absolute',
   transform: 'scale(0)',
   transition: theme.transitions.create('transform', {
     easing: theme.transitions.easing.easeIn,
     duration: theme.transitions.duration.shortest
-  })
-}, ownerState.checked && {
-  transform: 'scale(1)',
-  transition: theme.transitions.create('transform', {
-    easing: theme.transitions.easing.easeOut,
-    duration: theme.transitions.duration.shortest
-  })
+  }),
+  variants: [{
+    props: {
+      checked: true
+    },
+    style: {
+      transform: 'scale(1)',
+      transition: theme.transitions.create('transform', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.shortest
+      })
+    }
+  }]
 }));
 
 /**
@@ -62,7 +68,7 @@ function RadioButtonIcon(props) {
     })]
   });
 }
-process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes = {
+process.env.NODE_ENV !== "production" ? RadioButtonIcon.propTypes /* remove-proptypes */ = {
   /**
    * If `true`, the component is checked.
    */

package/Rating/Rating.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 = ["value"],
   _excluded2 = ["className", "defaultValue", "disabled", "emptyIcon", "emptyLabelText", "getLabelText", "highlightSelectedOnly", "icon", "IconContainerComponent", "max", "name", "onChange", "onChangeActive", "onMouseLeave", "onMouseMove", "precision", "readOnly", "size", "value"];
 import * as React from 'react';
@@ -66,9 +66,8 @@ const RatingRoot = styled('span', {
     }, styles.root, styles[`size${capitalize(ownerState.size)}`], ownerState.readOnly && styles.readOnly];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'inline-flex',
   // Required to position the pristine input absolutely
   position: 'relative',
@@ -85,13 +84,30 @@ const RatingRoot = styled('span', {
   [`&.${ratingClasses.focusVisible} .${ratingClasses.iconActive}`]: {
     outline: '1px solid #999'
   },
-  [`& .${ratingClasses.visuallyHidden}`]: visuallyHidden
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(18)
-}, ownerState.size === 'large' && {
-  fontSize: theme.typography.pxToRem(30)
-}, ownerState.readOnly && {
-  pointerEvents: 'none'
+  [`& .${ratingClasses.visuallyHidden}`]: visuallyHidden,
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(30)
+    }
+  }, {
+    // TODO v6: use the .Mui-readOnly global state class
+    props: ({
+      ownerState
+    }) => ownerState.readOnly,
+    style: {
+      pointerEvents: 'none'
+    }
+  }]
 }));
 const RatingLabel = styled('label', {
   name: 'MuiRating',
@@ -99,17 +115,21 @@ const RatingLabel = styled('label', {
   overridesResolver: ({
     ownerState
   }, styles) => [styles.label, ownerState.emptyValueFocused && styles.labelEmptyValueActive]
-})(({
-  ownerState
-}) => _extends({
-  cursor: 'inherit'
-}, ownerState.emptyValueFocused && {
-  top: 0,
-  bottom: 0,
-  position: 'absolute',
-  outline: '1px solid #999',
-  width: '100%'
-}));
+})({
+  cursor: 'inherit',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.emptyValueFocused,
+    style: {
+      top: 0,
+      bottom: 0,
+      position: 'absolute',
+      outline: '1px solid #999',
+      width: '100%'
+    }
+  }]
+});
 const RatingIcon = styled('span', {
   name: 'MuiRating',
   slot: 'Icon',
@@ -120,9 +140,8 @@ const RatingIcon = styled('span', {
     return [styles.icon, ownerState.iconEmpty && styles.iconEmpty, ownerState.iconFilled && styles.iconFilled, ownerState.iconHover && styles.iconHover, ownerState.iconFocus && styles.iconFocus, ownerState.iconActive && styles.iconActive];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   // Fit wrapper to actual icon size.
   display: 'flex',
   transition: theme.transitions.create('transform', {
@@ -130,11 +149,22 @@ const RatingIcon = styled('span', {
   }),
   // Fix mouseLeave issue.
   // https://github.com/facebook/react/issues/4492
-  pointerEvents: 'none'
-}, ownerState.iconActive && {
-  transform: 'scale(1.2)'
-}, ownerState.iconEmpty && {
-  color: (theme.vars || theme).palette.action.disabled
+  pointerEvents: 'none',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.iconActive,
+    style: {
+      transform: 'scale(1.2)'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.iconEmpty,
+    style: {
+      color: (theme.vars || theme).palette.action.disabled
+    }
+  }]
 }));
 const RatingDecimal = styled('span', {
   name: 'MuiRating',
@@ -146,13 +176,17 @@ const RatingDecimal = styled('span', {
     } = props;
     return [styles.decimal, iconActive && styles.iconActive];
   }
-})(({
-  iconActive
-}) => _extends({
-  position: 'relative'
-}, iconActive && {
-  transform: 'scale(1.2)'
-}));
+})({
+  position: 'relative',
+  variants: [{
+    props: ({
+      iconActive
+    }) => iconActive,
+    style: {
+      transform: 'scale(1.2)'
+    }
+  }]
+});
 function IconContainer(props) {
   const other = _objectWithoutPropertiesLoose(props, _excluded);
   return /*#__PURE__*/_jsx("span", _extends({}, other));

package/SvgIcon/SvgIcon.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSvgIcon');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -33,32 +33,82 @@ const SvgIconRoot = styled('svg', {
     return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   userSelect: 'none',
   width: '1em',
   height: '1em',
   display: 'inline-block',
-  // the <svg> will define the property that has `currentColor`
-  // for example heroicons uses fill="none" and stroke="currentColor"
-  fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
   flexShrink: 0,
   transition: theme.transitions?.create?.('fill', {
-    duration: theme.transitions?.duration?.shorter
+    duration: (theme.vars ?? theme).transitions?.duration?.shorter
   }),
-  fontSize: {
-    inherit: 'inherit',
-    small: theme.typography?.pxToRem?.(20) || '1.25rem',
-    medium: theme.typography?.pxToRem?.(24) || '1.5rem',
-    large: theme.typography?.pxToRem?.(35) || '2.1875rem'
-  }[ownerState.fontSize],
-  // TODO v5 deprecate, v6 remove for sx
-  color: (theme.vars || theme).palette?.[ownerState.color]?.main ?? {
-    action: (theme.vars || theme).palette?.action?.active,
-    disabled: (theme.vars || theme).palette?.action?.disabled,
-    inherit: undefined
-  }[ownerState.color]
+  variants: [{
+    props: props => !props.hasSvgAsChild,
+    style: {
+      // the <svg> will define the property that has `currentColor`
+      // for example heroicons uses fill="none" and stroke="currentColor"
+      fill: 'currentColor'
+    }
+  }, {
+    props: {
+      fontSize: 'inherit'
+    },
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: 'small'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(20) || '1.25rem'
+    }
+  }, {
+    props: {
+      fontSize: 'medium'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(24) || '1.5rem'
+    }
+  }, {
+    props: {
+      fontSize: 'large'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(35) || '2.1875rem'
+    }
+  },
+  // TODO v5 deprecate color prop, v6 remove for sx
+  ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.[color]?.main
+    }
+  })), {
+    props: {
+      color: 'action'
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.action?.active
+    }
+  }, {
+    props: {
+      color: 'disabled'
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.action?.disabled
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: undefined
+    }
+  }]
 }));
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   const props = useThemeProps({
@@ -179,5 +229,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: PropTypes.string
 } : void 0;
-SvgIcon.muiName = 'SvgIcon';
+if (SvgIcon) {
+  SvgIcon.muiName = 'SvgIcon';
+}
 export default SvgIcon;

package/Table/Table.js

@@ -32,9 +32,8 @@ const TableRoot = styled('table', {
     return [styles.root, ownerState.stickyHeader && styles.stickyHeader];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'table',
   width: '100%',
   borderCollapse: 'collapse',
@@ -44,9 +43,15 @@ const TableRoot = styled('table', {
     color: (theme.vars || theme).palette.text.secondary,
     textAlign: 'left',
     captionSide: 'bottom'
-  })
-}, ownerState.stickyHeader && {
-  borderCollapse: 'separate'
+  }),
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.stickyHeader,
+    style: {
+      borderCollapse: 'separate'
+    }
+  }]
 }));
 const defaultComponent = 'table';
 const Table = /*#__PURE__*/React.forwardRef(function Table(inProps, ref) {