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

package/modern/PaginationItem/PaginationItem.js

@@ -9,7 +9,6 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import { useRtl } from '@mui/system/RtlProvider';
-import useThemeProps from '../styles/useThemeProps';
 import paginationItemClasses, { getPaginationItemUtilityClass } from './paginationItemClasses';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
@@ -17,8 +16,9 @@ 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 styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiPaginationItem');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -55,8 +55,7 @@ const PaginationItemEllipsis = styled('div', {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({}, theme.typography.body2, {
   borderRadius: 32 / 2,
   textAlign: 'center',
@@ -68,25 +67,35 @@ const PaginationItemEllipsis = styled('div', {
   height: 'auto',
   [`&.${paginationItemClasses.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.size === 'small' && {
-  minWidth: 26,
-  borderRadius: 26 / 2,
-  margin: '0 1px',
-  padding: '0 4px'
-}, ownerState.size === 'large' && {
-  minWidth: 40,
-  borderRadius: 40 / 2,
-  padding: '0 10px',
-  fontSize: theme.typography.pxToRem(15)
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      minWidth: 26,
+      borderRadius: 26 / 2,
+      margin: '0 1px',
+      padding: '0 4px'
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      minWidth: 40,
+      borderRadius: 40 / 2,
+      padding: '0 10px',
+      fontSize: theme.typography.pxToRem(15)
+    }
+  }]
 }));
 const PaginationItemPage = styled(ButtonBase, {
   name: 'MuiPaginationItem',
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({}, theme.typography.body2, {
   borderRadius: 32 / 2,
   textAlign: 'center',
@@ -129,80 +138,132 @@ const PaginationItemPage = styled(ButtonBase, {
       color: (theme.vars || theme).palette.action.disabled,
       backgroundColor: (theme.vars || theme).palette.action.selected
     }
-  }
-}, ownerState.size === 'small' && {
-  minWidth: 26,
-  height: 26,
-  borderRadius: 26 / 2,
-  margin: '0 1px',
-  padding: '0 4px'
-}, ownerState.size === 'large' && {
-  minWidth: 40,
-  height: 40,
-  borderRadius: 40 / 2,
-  padding: '0 10px',
-  fontSize: theme.typography.pxToRem(15)
-}, ownerState.shape === 'rounded' && {
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}), ({
-  theme,
-  ownerState
-}) => _extends({}, ownerState.variant === 'text' && {
-  [`&.${paginationItemClasses.selected}`]: _extends({}, ownerState.color !== 'standard' && {
-    color: (theme.vars || theme).palette[ownerState.color].contrastText,
-    backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
-    '&:hover': {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: (theme.vars || theme).palette[ownerState.color].main
-      }
+  },
+  variants: [{
+    props: {
+      size: 'small'
     },
-    [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
+    style: {
+      minWidth: 26,
+      height: 26,
+      borderRadius: 26 / 2,
+      margin: '0 1px',
+      padding: '0 4px'
     }
   }, {
-    [`&.${paginationItemClasses.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled
+    props: {
+      size: 'large'
+    },
+    style: {
+      minWidth: 40,
+      height: 40,
+      borderRadius: 40 / 2,
+      padding: '0 10px',
+      fontSize: theme.typography.pxToRem(15)
     }
-  })
-}, ownerState.variant === 'outlined' && {
-  border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
-  [`&.${paginationItemClasses.selected}`]: _extends({}, ownerState.color !== 'standard' && {
-    color: (theme.vars || theme).palette[ownerState.color].main,
-    border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)}`,
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity),
-    '&:hover': {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
+  }, {
+    props: {
+      shape: 'rounded'
     },
-    [`&.${paginationItemClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[ownerState.color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+    style: {
+      borderRadius: (theme.vars || theme).shape.borderRadius
     }
   }, {
-    [`&.${paginationItemClasses.disabled}`]: {
-      borderColor: (theme.vars || theme).palette.action.disabledBackground,
-      color: (theme.vars || theme).palette.action.disabled
+    props: {
+      variant: 'outlined'
+    },
+    style: {
+      border: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
+      [`&.${paginationItemClasses.selected}`]: {
+        [`&.${paginationItemClasses.disabled}`]: {
+          borderColor: (theme.vars || theme).palette.action.disabledBackground,
+          color: (theme.vars || theme).palette.action.disabled
+        }
+      }
+    }
+  }, {
+    props: {
+      variant: 'text'
+    },
+    style: {
+      [`&.${paginationItemClasses.selected}`]: {
+        [`&.${paginationItemClasses.disabled}`]: {
+          color: (theme.vars || theme).palette.action.disabled
+        }
+      }
     }
-  })
+  }, ...Object.entries(theme.palette).filter(([, value]) => value.main && value.dark && value.contrastText).map(([color]) => ({
+    props: {
+      variant: 'text',
+      color
+    },
+    style: {
+      [`&.${paginationItemClasses.selected}`]: {
+        color: (theme.vars || theme).palette[color].contrastText,
+        backgroundColor: (theme.vars || theme).palette[color].main,
+        '&:hover': {
+          backgroundColor: (theme.vars || theme).palette[color].dark,
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: (theme.vars || theme).palette[color].main
+          }
+        },
+        [`&.${paginationItemClasses.focusVisible}`]: {
+          backgroundColor: (theme.vars || theme).palette[color].dark
+        },
+        [`&.${paginationItemClasses.disabled}`]: {
+          color: (theme.vars || theme).palette.action.disabled
+        }
+      }
+    }
+  })), ...Object.entries(theme.palette).filter(([, value]) => value.main && value.light).map(([color]) => ({
+    props: {
+      variant: 'outlined',
+      color
+    },
+    style: {
+      [`&.${paginationItemClasses.selected}`]: {
+        color: (theme.vars || theme).palette[color].main,
+        border: `1px solid ${theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / 0.5)` : alpha(theme.palette[color].main, 0.5)}`,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.activatedOpacity})` : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
+        },
+        [`&.${paginationItemClasses.focusVisible}`]: {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.activatedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette[color].main, theme.palette.action.activatedOpacity + theme.palette.action.focusOpacity)
+        }
+      }
+    }
+  }))]
 }));
 const PaginationItemPageIcon = styled('div', {
   name: 'MuiPaginationItem',
   slot: 'Icon',
   overridesResolver: (props, styles) => styles.icon
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   fontSize: theme.typography.pxToRem(20),
-  margin: '0 -8px'
-}, ownerState.size === 'small' && {
-  fontSize: theme.typography.pxToRem(18)
-}, ownerState.size === 'large' && {
-  fontSize: theme.typography.pxToRem(22)
+  margin: '0 -8px',
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(18)
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      fontSize: theme.typography.pxToRem(22)
+    }
+  }]
 }));
 const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inProps, ref) {
   const props = useThemeProps({

package/modern/StepLabel/StepLabel.js

@@ -157,27 +157,34 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: _extends({}, componentsProps, slotProps)
+    slotProps: _extends({
+      stepIcon: StepIconProps
+    }, componentsProps, slotProps)
   };
   const [LabelSlot, labelProps] = useSlot('label', {
     elementType: StepLabelLabel,
     externalForwardedProps,
     ownerState
   });
+  const [StepIconSlot, stepIconProps] = useSlot('stepIcon', {
+    elementType: StepIconComponent,
+    externalForwardedProps,
+    ownerState
+  });
   return /*#__PURE__*/_jsxs(StepLabelRoot, _extends({
     className: clsx(classes.root, className),
     ref: ref,
     ownerState: ownerState
   }, other, {
-    children: [icon || StepIconComponent ? /*#__PURE__*/_jsx(StepLabelIconContainer, {
+    children: [icon || StepIconSlot ? /*#__PURE__*/_jsx(StepLabelIconContainer, {
       className: classes.iconContainer,
       ownerState: ownerState,
-      children: /*#__PURE__*/_jsx(StepIconComponent, _extends({
+      children: /*#__PURE__*/_jsx(StepIconSlot, _extends({
         completed: completed,
         active: active,
         error: error,
         icon: icon
-      }, StepIconProps))
+      }, stepIconProps))
     }) : null, /*#__PURE__*/_jsxs(StepLabelLabelContainer, {
       className: classes.labelContainer,
       ownerState: ownerState,
@@ -231,21 +238,25 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    * @default {}
    */
   slotProps: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    stepIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({
-    label: PropTypes.elementType
+    label: PropTypes.elementType,
+    stepIcon: PropTypes.elementType
   }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   StepIconComponent: PropTypes.elementType,
   /**
    * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   StepIconProps: PropTypes.object,
   /**

package/modern/ToggleButton/ToggleButton.js

@@ -10,16 +10,16 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import resolveProps from '@mui/utils/resolveProps';
 import composeClasses from '@mui/utils/composeClasses';
-import { alpha } from '../styles';
+import { alpha } from '@mui/system/colorManipulator';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { createUseThemeProps, styled } from '../zero-styled';
 import toggleButtonClasses, { getToggleButtonUtilityClass } from './toggleButtonClasses';
 import ToggleButtonGroupContext from '../ToggleButtonGroup/ToggleButtonGroupContext';
 import ToggleButtonGroupButtonContext from '../ToggleButtonGroup/ToggleButtonGroupButtonContext';
 import isValueSelected from '../ToggleButtonGroup/isValueSelected';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiToggleButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -44,54 +44,83 @@ const ToggleButtonRoot = styled(ButtonBase, {
     return [styles.root, styles[`size${capitalize(ownerState.size)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => {
-  let selectedColor = ownerState.color === 'standard' ? theme.palette.text.primary : theme.palette[ownerState.color].main;
-  let selectedColorChannel;
-  if (theme.vars) {
-    selectedColor = ownerState.color === 'standard' ? theme.vars.palette.text.primary : theme.vars.palette[ownerState.color].main;
-    selectedColorChannel = ownerState.color === 'standard' ? theme.vars.palette.text.primaryChannel : theme.vars.palette[ownerState.color].mainChannel;
-  }
-  return _extends({}, theme.typography.button, {
-    borderRadius: (theme.vars || theme).shape.borderRadius,
-    padding: 11,
-    border: `1px solid ${(theme.vars || theme).palette.divider}`,
-    color: (theme.vars || theme).palette.action.active
-  }, ownerState.fullWidth && {
-    width: '100%'
-  }, {
-    [`&.${toggleButtonClasses.disabled}`]: {
-      color: (theme.vars || theme).palette.action.disabled,
-      border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+  theme
+}) => _extends({}, theme.typography.button, {
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  padding: 11,
+  border: `1px solid ${(theme.vars || theme).palette.divider}`,
+  color: (theme.vars || theme).palette.action.active,
+  [`&.${toggleButtonClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.action.disabled,
+    border: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`
+  },
+  '&:hover': {
+    textDecoration: 'none',
+    // Reset on mouse devices
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
+    '@media (hover: none)': {
+      backgroundColor: 'transparent'
+    }
+  },
+  variants: [{
+    props: {
+      color: 'standard'
     },
-    '&:hover': {
-      textDecoration: 'none',
-      // Reset on mouse devices
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
+    style: {
+      [`&.${toggleButtonClasses.selected}`]: {
+        color: (theme.vars || theme).palette.text.primary,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: theme.vars ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette.text.primary, theme.palette.action.selectedOpacity)
+          }
+        }
       }
+    }
+  }, ...Object.keys((theme.vars || theme).palette).filter(key => theme.vars ? theme.vars.palette[key].main && theme.vars.palette[key].mainChannel : theme.palette[key].main).map(color => ({
+    props: {
+      color
     },
-    [`&.${toggleButtonClasses.selected}`]: {
-      color: selectedColor,
-      backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(selectedColor, theme.palette.action.selectedOpacity),
-      '&:hover': {
-        backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(selectedColor, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: theme.vars ? `rgba(${selectedColorChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(selectedColor, theme.palette.action.selectedOpacity)
+    style: {
+      [`&.${toggleButtonClasses.selected}`]: {
+        color: (theme.vars || theme).palette[color].main,
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity),
+        '&:hover': {
+          backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: theme.vars ? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : alpha(theme.palette[color].main, theme.palette.action.selectedOpacity)
+          }
         }
       }
     }
-  }, ownerState.size === 'small' && {
-    padding: 7,
-    fontSize: theme.typography.pxToRem(13)
-  }, ownerState.size === 'large' && {
-    padding: 15,
-    fontSize: theme.typography.pxToRem(15)
-  });
-});
+  })), {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
+    }
+  }, {
+    props: {
+      size: 'small'
+    },
+    style: {
+      padding: 7,
+      fontSize: theme.typography.pxToRem(13)
+    }
+  }, {
+    props: {
+      size: 'large'
+    },
+    style: {
+      padding: 15,
+      fontSize: theme.typography.pxToRem(15)
+    }
+  }]
+}));
 const ToggleButton = /*#__PURE__*/React.forwardRef(function ToggleButton(inProps, ref) {
   // props priority: `inProps` > `contextProps` > `themeDefaultProps`
   const _React$useContext = React.useContext(ToggleButtonGroupContext),

package/modern/ToggleButtonGroup/ToggleButtonGroup.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", "color", "disabled", "exclusive", "fullWidth", "onChange", "orientation", "size", "value"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
@@ -9,14 +9,14 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import getValidReactChildren from '@mui/utils/getValidReactChildren';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import toggleButtonGroupClasses, { getToggleButtonGroupUtilityClass } from './toggleButtonGroupClasses';
 import ToggleButtonGroupContext from './ToggleButtonGroupContext';
 import ToggleButtonGroupButtonContext from './ToggleButtonGroupButtonContext';
 import toggleButtonClasses from '../ToggleButton/toggleButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiToggleButtonGroup');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -25,7 +25,7 @@ const useUtilityClasses = ownerState => {
     disabled
   } = ownerState;
   const slots = {
-    root: ['root', orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth'],
+    root: ['root', orientation, fullWidth && 'fullWidth'],
     grouped: ['grouped', `grouped${capitalize(orientation)}`, disabled && 'disabled'],
     firstButton: ['firstButton'],
     lastButton: ['lastButton'],
@@ -53,57 +53,69 @@ const ToggleButtonGroupRoot = styled('div', {
     }, styles.root, ownerState.orientation === 'vertical' && styles.vertical, ownerState.fullWidth && styles.fullWidth];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   display: 'inline-flex',
-  borderRadius: (theme.vars || theme).shape.borderRadius
-}, ownerState.orientation === 'vertical' && {
-  flexDirection: 'column'
-}, ownerState.fullWidth && {
-  width: '100%'
-}, {
-  [`& .${toggleButtonGroupClasses.grouped}`]: _extends({}, ownerState.orientation === 'horizontal' ? {
-    [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
-      borderLeft: 0,
-      marginLeft: 0
+  borderRadius: (theme.vars || theme).shape.borderRadius,
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      flexDirection: 'column',
+      [`& .${toggleButtonGroupClasses.grouped}`]: {
+        [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
+          borderTop: 0,
+          marginTop: 0
+        }
+      },
+      [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        marginTop: -1,
+        borderTop: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
+        borderTop: '1px solid transparent'
+      }
     }
-  } : {
-    [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
-      borderTop: 0,
-      marginTop: 0
+  }, {
+    props: {
+      fullWidth: true
+    },
+    style: {
+      width: '100%'
     }
-  })
-}, ownerState.orientation === 'horizontal' ? {
-  [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    marginLeft: -1,
-    borderLeft: '1px solid transparent',
-    borderTopLeftRadius: 0,
-    borderBottomLeftRadius: 0
-  }
-} : {
-  [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
-  },
-  [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
-    marginTop: -1,
-    borderTop: '1px solid transparent',
-    borderTopLeftRadius: 0,
-    borderTopRightRadius: 0
-  }
-}, ownerState.orientation === 'horizontal' ? {
-  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
-    borderLeft: '1px solid transparent'
-  }
-} : {
-  [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
-    borderTop: '1px solid transparent'
-  }
+  }, {
+    props: {
+      orientation: 'horizontal'
+    },
+    style: {
+      [`& .${toggleButtonGroupClasses.grouped}`]: {
+        [`&.${toggleButtonGroupClasses.selected} + .${toggleButtonGroupClasses.grouped}.${toggleButtonGroupClasses.selected}`]: {
+          borderLeft: 0,
+          marginLeft: 0
+        }
+      },
+      [`& .${toggleButtonGroupClasses.firstButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton},& .${toggleButtonGroupClasses.middleButton}`]: {
+        marginLeft: -1,
+        borderLeft: '1px solid transparent',
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0
+      },
+      [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled},& .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: {
+        borderLeft: '1px solid transparent'
+      }
+    }
+  }]
 }));
 const ToggleButtonGroup = /*#__PURE__*/React.forwardRef(function ToggleButtonGroup(inProps, ref) {
   const props = useThemeProps({

package/modern/ToggleButtonGroup/toggleButtonGroupClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '@mui/utils/generateUtilityClass';
 export function getToggleButtonGroupUtilityClass(slot) {
   return generateUtilityClass('MuiToggleButtonGroup', slot);
 }
-const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
+const toggleButtonGroupClasses = generateUtilityClasses('MuiToggleButtonGroup', ['root', 'selected', 'horizontal', 'vertical', 'disabled', 'grouped', 'groupedHorizontal', 'groupedVertical', 'fullWidth', 'firstButton', 'lastButton', 'middleButton']);
 export default toggleButtonGroupClasses;

package/modern/Tooltip/Tooltip.js

@@ -417,8 +417,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(inProps, ref) {
      * @param {KeyboardEvent} nativeEvent
      */
     function handleKeyDown(nativeEvent) {
-      // IE11, Edge (prior to using Bink?) use 'Esc'
-      if (nativeEvent.key === 'Escape' || nativeEvent.key === 'Esc') {
+      if (nativeEvent.key === 'Escape') {
         handleClose(nativeEvent);
       }
     }