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

package/Tab/Tab.js

@@ -9,11 +9,11 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import ButtonBase from '../ButtonBase';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import unsupportedProp from '../utils/unsupportedProp';
 import tabClasses, { getTabUtilityClass } from './tabClasses';
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTab');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -41,8 +41,7 @@ const TabRoot = styled(ButtonBase, {
     return [styles.root, ownerState.label && ownerState.icon && styles.labelIcon, styles[`textColor${capitalize(ownerState.textColor)}`], ownerState.fullWidth && styles.fullWidth, ownerState.wrapped && styles.wrapped];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => _extends({}, theme.typography.button, {
   maxWidth: 360,
   minWidth: 90,
@@ -52,57 +51,130 @@ const TabRoot = styled(ButtonBase, {
   padding: '12px 16px',
   overflow: 'hidden',
   whiteSpace: 'normal',
-  textAlign: 'center'
-}, ownerState.label && {
-  flexDirection: ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom' ? 'column' : 'row'
-}, {
-  lineHeight: 1.25
-}, ownerState.icon && ownerState.label && {
-  minHeight: 72,
-  paddingTop: 9,
-  paddingBottom: 9,
-  [`& > .${tabClasses.iconWrapper}`]: _extends({}, ownerState.iconPosition === 'top' && {
-    marginBottom: 6
-  }, ownerState.iconPosition === 'bottom' && {
-    marginTop: 6
-  }, ownerState.iconPosition === 'start' && {
-    marginRight: theme.spacing(1)
-  }, ownerState.iconPosition === 'end' && {
-    marginLeft: theme.spacing(1)
-  })
-}, ownerState.textColor === 'inherit' && {
-  color: 'inherit',
-  opacity: 0.6,
-  // same opacity as theme.palette.text.secondary
-  [`&.${tabClasses.selected}`]: {
-    opacity: 1
-  },
-  [`&.${tabClasses.disabled}`]: {
-    opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.textColor === 'primary' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tabClasses.selected}`]: {
-    color: (theme.vars || theme).palette.primary.main
-  },
-  [`&.${tabClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.textColor === 'secondary' && {
-  color: (theme.vars || theme).palette.text.secondary,
-  [`&.${tabClasses.selected}`]: {
-    color: (theme.vars || theme).palette.secondary.main
-  },
-  [`&.${tabClasses.disabled}`]: {
-    color: (theme.vars || theme).palette.text.disabled
-  }
-}, ownerState.fullWidth && {
-  flexShrink: 1,
-  flexGrow: 1,
-  flexBasis: 0,
-  maxWidth: 'none'
-}, ownerState.wrapped && {
-  fontSize: theme.typography.pxToRem(12)
+  textAlign: 'center',
+  lineHeight: 1.25,
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.label && (ownerState.iconPosition === 'top' || ownerState.iconPosition === 'bottom'),
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.label && ownerState.iconPosition !== 'top' && ownerState.iconPosition !== 'bottom',
+    style: {
+      flexDirection: 'row'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.icon && ownerState.label,
+    style: {
+      minHeight: 72,
+      paddingTop: 9,
+      paddingBottom: 9
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'top',
+    style: {
+      [`& > .${tabClasses.iconWrapper}`]: {
+        marginBottom: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'bottom',
+    style: {
+      [`& > .${tabClasses.iconWrapper}`]: {
+        marginTop: 6
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'start',
+    style: {
+      [`& > .${tabClasses.iconWrapper}`]: {
+        marginRight: theme.spacing(1)
+      }
+    }
+  }, {
+    props: ({
+      ownerState,
+      iconPosition
+    }) => ownerState.icon && ownerState.label && iconPosition === 'end',
+    style: {
+      [`& > .${tabClasses.iconWrapper}`]: {
+        marginLeft: theme.spacing(1)
+      }
+    }
+  }, {
+    props: {
+      textColor: 'inherit'
+    },
+    style: {
+      color: 'inherit',
+      opacity: 0.6,
+      // same opacity as theme.palette.text.secondary
+      [`&.${tabClasses.selected}`]: {
+        opacity: 1
+      },
+      [`&.${tabClasses.disabled}`]: {
+        opacity: (theme.vars || theme).palette.action.disabledOpacity
+      }
+    }
+  }, {
+    props: {
+      textColor: 'primary'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      [`&.${tabClasses.selected}`]: {
+        color: (theme.vars || theme).palette.primary.main
+      },
+      [`&.${tabClasses.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      }
+    }
+  }, {
+    props: {
+      textColor: 'secondary'
+    },
+    style: {
+      color: (theme.vars || theme).palette.text.secondary,
+      [`&.${tabClasses.selected}`]: {
+        color: (theme.vars || theme).palette.secondary.main
+      },
+      [`&.${tabClasses.disabled}`]: {
+        color: (theme.vars || theme).palette.text.disabled
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.fullWidth,
+    style: {
+      flexShrink: 1,
+      flexGrow: 1,
+      flexBasis: 0,
+      maxWidth: 'none'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.wrapped,
+    style: {
+      fontSize: theme.typography.pxToRem(12)
+    }
+  }]
 }));
 const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
   const props = useThemeProps({

package/TabScrollButton/TabScrollButton.js

@@ -1,8 +1,8 @@
 'use client';
 
 /* eslint-disable jsx-a11y/aria-role */
-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", "slots", "slotProps", "direction", "orientation", "disabled"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -13,10 +13,10 @@ import { useRtl } from '@mui/system/RtlProvider';
 import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
 import KeyboardArrowRight from '../internal/svg-icons/KeyboardArrowRight';
 import ButtonBase from '../ButtonBase';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import tabScrollButtonClasses, { getTabScrollButtonUtilityClass } from './tabScrollButtonClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTabScrollButton');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -37,22 +37,26 @@ const TabScrollButtonRoot = styled(ButtonBase, {
     } = props;
     return [styles.root, ownerState.orientation && styles[ownerState.orientation]];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   width: 40,
   flexShrink: 0,
   opacity: 0.8,
   [`&.${tabScrollButtonClasses.disabled}`]: {
     opacity: 0
-  }
-}, ownerState.orientation === 'vertical' && {
-  width: '100%',
-  height: 40,
-  '& svg': {
-    transform: `rotate(${ownerState.isRtl ? -90 : 90}deg)`
-  }
-}));
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical'
+    },
+    style: {
+      width: '100%',
+      height: 40,
+      '& svg': {
+        transform: 'var(--TabScrollButton-svgRotate)'
+      }
+    }
+  }]
+});
 const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
@@ -62,7 +66,8 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
       className,
       slots = {},
       slotProps = {},
-      direction
+      direction,
+      orientation
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const isRtl = useRtl();
@@ -96,6 +101,9 @@ const TabScrollButton = /*#__PURE__*/React.forwardRef(function TabScrollButton(i
     ownerState: ownerState,
     tabIndex: null
   }, other, {
+    style: _extends({}, other.style, orientation === 'vertical' && {
+      '--TabScrollButton-svgRotate': `rotate(${isRtl ? -90 : 90}deg)`
+    }),
     children: direction === 'left' ? /*#__PURE__*/_jsx(StartButtonIcon, _extends({}, startButtonIconProps)) : /*#__PURE__*/_jsx(EndButtonIcon, _extends({}, endButtonIconProps))
   }));
 });
@@ -146,6 +154,10 @@ process.env.NODE_ENV !== "production" ? TabScrollButton.propTypes /* remove-prop
     EndScrollButtonIcon: PropTypes.elementType,
     StartScrollButtonIcon: PropTypes.elementType
   }),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Table/Table.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import TableContext from './TableContext';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableUtilityClass } from './tableClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTable');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/TableBody/TableBody.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableBodyUtilityClass } from './tableBodyClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableBody');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/TableCell/TableCell.js

@@ -11,10 +11,10 @@ import { darken, alpha, lighten } from '@mui/system/colorManipulator';
 import capitalize from '../utils/capitalize';
 import TableContext from '../Table/TableContext';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableCell');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/TableContainer/TableContainer.js

@@ -7,10 +7,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableContainerUtilityClass } from './tableContainerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableContainer');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/TableFooter/TableFooter.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableFooterUtilityClass } from './tableFooterClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableFooter');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/TableHead/TableHead.js

@@ -8,10 +8,10 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getTableHeadUtilityClass } from './tableHeadClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableHead');
 const useUtilityClasses = ownerState => {
   const {
     classes

package/TablePagination/TablePagination.js

@@ -11,8 +11,7 @@ import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import { isHostComponent } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import InputBase from '../InputBase';
 import MenuItem from '../MenuItem';
 import Select from '../Select';
@@ -23,6 +22,7 @@ import useId from '../utils/useId';
 import tablePaginationClasses, { getTablePaginationUtilityClass } from './tablePaginationClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+const useThemeProps = createUseThemeProps('MuiTablePagination');
 const TablePaginationRoot = styled(TableCell, {
   name: 'MuiTablePagination',
   slot: 'Root',

package/TableRow/TableRow.js

@@ -9,10 +9,10 @@ import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { alpha } from '@mui/system/colorManipulator';
 import Tablelvl2Context from '../Table/Tablelvl2Context';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import tableRowClasses, { getTableRowUtilityClass } from './tableRowClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableRow');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/TableSortLabel/TableSortLabel.js

@@ -9,11 +9,11 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import ButtonBase from '../ButtonBase';
 import ArrowDownwardIcon from '../internal/svg-icons/ArrowDownward';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTableSortLabel');
 const useUtilityClasses = ownerState => {
   const {
     classes,

package/Tabs/Tabs.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 = ["aria-label", "aria-labelledby", "action", "centered", "children", "className", "component", "allowScrollButtonsMobile", "indicatorColor", "onChange", "orientation", "ScrollButtonComponent", "scrollButtons", "selectionFollowsFocus", "slots", "slotProps", "TabIndicatorProps", "TabScrollButtonProps", "textColor", "value", "variant", "visibleScrollbar"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
@@ -11,8 +11,7 @@ import refType from '@mui/utils/refType';
 import { useSlotProps } from '@mui/base/utils';
 import composeClasses from '@mui/utils/composeClasses';
 import { useRtl } from '@mui/system/RtlProvider';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import useTheme from '../styles/useTheme';
 import debounce from '../utils/debounce';
 import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft';
@@ -24,6 +23,7 @@ import tabsClasses, { getTabsUtilityClass } from './tabsClasses';
 import ownerDocument from '../utils/ownerDocument';
 import ownerWindow from '../utils/ownerWindow';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiTabs');
 const nextItem = (list, item) => {
   if (list === item) {
     return list.firstChild;
@@ -101,22 +101,32 @@ const TabsRoot = styled('div', {
     }, styles.root, ownerState.vertical && styles.vertical];
   }
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   overflow: 'hidden',
   minHeight: 48,
   // Add iOS momentum scrolling for iOS < 13.0
   WebkitOverflowScrolling: 'touch',
-  display: 'flex'
-}, ownerState.vertical && {
-  flexDirection: 'column'
-}, ownerState.scrollButtonsHideMobile && {
-  [`& .${tabsClasses.scrollButtons}`]: {
-    [theme.breakpoints.down('sm')]: {
-      display: 'none'
+  display: 'flex',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      flexDirection: 'column'
     }
-  }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.scrollButtonsHideMobile,
+    style: {
+      [`& .${tabsClasses.scrollButtons}`]: {
+        [theme.breakpoints.down('sm')]: {
+          display: 'none'
+        }
+      }
+    }
+  }]
 }));
 const TabsScroller = styled('div', {
   name: 'MuiTabs',
@@ -127,30 +137,49 @@ const TabsScroller = styled('div', {
     } = props;
     return [styles.scroller, ownerState.fixed && styles.fixed, ownerState.hideScrollbar && styles.hideScrollbar, ownerState.scrollableX && styles.scrollableX, ownerState.scrollableY && styles.scrollableY];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   position: 'relative',
   display: 'inline-block',
   flex: '1 1 auto',
-  whiteSpace: 'nowrap'
-}, ownerState.fixed && {
-  overflowX: 'hidden',
-  width: '100%'
-}, ownerState.hideScrollbar && {
-  // Hide dimensionless scrollbar on macOS
-  scrollbarWidth: 'none',
-  // Firefox
-  '&::-webkit-scrollbar': {
-    display: 'none' // Safari + Chrome
-  }
-}, ownerState.scrollableX && {
-  overflowX: 'auto',
-  overflowY: 'hidden'
-}, ownerState.scrollableY && {
-  overflowY: 'auto',
-  overflowX: 'hidden'
-}));
+  whiteSpace: 'nowrap',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.fixed,
+    style: {
+      overflowX: 'hidden',
+      width: '100%'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hideScrollbar,
+    style: {
+      // Hide dimensionless scrollbar on macOS
+      scrollbarWidth: 'none',
+      // Firefox
+      '&::-webkit-scrollbar': {
+        display: 'none' // Safari + Chrome
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.scrollableX,
+    style: {
+      overflowX: 'auto',
+      overflowY: 'hidden'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.scrollableY,
+    style: {
+      overflowY: 'auto',
+      overflowX: 'hidden'
+    }
+  }]
+});
 const FlexContainer = styled('div', {
   name: 'MuiTabs',
   slot: 'FlexContainer',
@@ -160,36 +189,60 @@ const FlexContainer = styled('div', {
     } = props;
     return [styles.flexContainer, ownerState.vertical && styles.flexContainerVertical, ownerState.centered && styles.centered];
   }
-})(({
-  ownerState
-}) => _extends({
-  display: 'flex'
-}, ownerState.vertical && {
-  flexDirection: 'column'
-}, ownerState.centered && {
-  justifyContent: 'center'
-}));
+})({
+  display: 'flex',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.centered,
+    style: {
+      justifyContent: 'center'
+    }
+  }]
+});
 const TabsIndicator = styled('span', {
   name: 'MuiTabs',
   slot: 'Indicator',
   overridesResolver: (props, styles) => styles.indicator
 })(({
-  ownerState,
   theme
-}) => _extends({
+}) => ({
   position: 'absolute',
   height: 2,
   bottom: 0,
   width: '100%',
-  transition: theme.transitions.create()
-}, ownerState.indicatorColor === 'primary' && {
-  backgroundColor: (theme.vars || theme).palette.primary.main
-}, ownerState.indicatorColor === 'secondary' && {
-  backgroundColor: (theme.vars || theme).palette.secondary.main
-}, ownerState.vertical && {
-  height: '100%',
-  width: 2,
-  right: 0
+  transition: theme.transitions.create(),
+  variants: [{
+    props: {
+      indicatorColor: 'primary'
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.primary.main
+    }
+  }, {
+    props: {
+      indicatorColor: 'secondary'
+    },
+    style: {
+      backgroundColor: (theme.vars || theme).palette.secondary.main
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.vertical,
+    style: {
+      height: '100%',
+      width: 2,
+      right: 0
+    }
+  }]
 }));
 const TabsScrollbarSize = styled(ScrollbarSize)({
   overflowX: 'auto',