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

package/node/ListItem/ListItem.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.overridesResolver = exports.default = exports.ListItemRoot = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -62,9 +62,8 @@ const ListItemRoot = exports.ListItemRoot = (0, _styled.default)('div', {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'flex',
   justifyContent: 'flex-start',
   alignItems: 'center',
@@ -72,25 +71,7 @@ const ListItemRoot = exports.ListItemRoot = (0, _styled.default)('div', {
   textDecoration: 'none',
   width: '100%',
   boxSizing: 'border-box',
-  textAlign: 'left'
-}, !ownerState.disablePadding && (0, _extends2.default)({
-  paddingTop: 8,
-  paddingBottom: 8
-}, ownerState.dense && {
-  paddingTop: 4,
-  paddingBottom: 4
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, !!ownerState.secondaryAction && {
-  // Add some space to avoid collision as `ListItemSecondaryAction`
-  // is absolutely positioned.
-  paddingRight: 48
-}), !!ownerState.secondaryAction && {
-  [`& > .${_ListItemButton.listItemButtonClasses.root}`]: {
-    paddingRight: 48
-  }
-}, {
+  textAlign: 'left',
   [`&.${_listItemClasses.default.focusVisible}`]: {
     backgroundColor: (theme.vars || theme).palette.action.focus
   },
@@ -102,35 +83,98 @@ const ListItemRoot = exports.ListItemRoot = (0, _styled.default)('div', {
   },
   [`&.${_listItemClasses.default.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.alignItems === 'flex-start' && {
-  alignItems: 'flex-start'
-}, ownerState.divider && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-  backgroundClip: 'padding-box'
-}, ownerState.button && {
-  transition: theme.transitions.create('background-color', {
-    duration: theme.transitions.duration.shortest
-  }),
-  '&:hover': {
-    textDecoration: 'none',
-    backgroundColor: (theme.vars || theme).palette.action.hover,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: 'transparent'
-    }
   },
-  [`&.${_listItemClasses.default.selected}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.primary.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.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+  variants: [{
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding,
+    style: {
+      paddingTop: 8,
+      paddingBottom: 8
     }
-  }
-}, ownerState.hasSecondaryAction && {
-  // Add some space to avoid collision as `ListItemSecondaryAction`
-  // is absolutely positioned.
-  paddingRight: 48
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding && ownerState.dense,
+    style: {
+      paddingTop: 4,
+      paddingBottom: 4
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding && !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disablePadding && !!ownerState.secondaryAction,
+    style: {
+      // Add some space to avoid collision as `ListItemSecondaryAction`
+      // is absolutely positioned.
+      paddingRight: 48
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !!ownerState.secondaryAction,
+    style: {
+      [`& > .${_ListItemButton.listItemButtonClasses.root}`]: {
+        paddingRight: 48
+      }
+    }
+  }, {
+    props: {
+      alignItems: 'flex-start'
+    },
+    style: {
+      alignItems: 'flex-start'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.divider,
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      backgroundClip: 'padding-box'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.button,
+    style: {
+      transition: theme.transitions.create('background-color', {
+        duration: theme.transitions.duration.shortest
+      }),
+      '&:hover': {
+        textDecoration: 'none',
+        backgroundColor: (theme.vars || theme).palette.action.hover,
+        // Reset on touch devices, it doesn't add specificity
+        '@media (hover: none)': {
+          backgroundColor: 'transparent'
+        }
+      },
+      [`&.${_listItemClasses.default.selected}:hover`]: {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : (0, _colorManipulator.alpha)(theme.palette.primary.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.primary.mainChannel} / ${theme.vars.palette.action.selectedOpacity})` : (0, _colorManipulator.alpha)(theme.palette.primary.main, theme.palette.action.selectedOpacity)
+        }
+      }
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.hasSecondaryAction,
+    style: {
+      // Add some space to avoid collision as `ListItemSecondaryAction`
+      // is absolutely positioned.
+      paddingRight: 48
+    }
+  }]
 }));
 const ListItemContainer = (0, _styled.default)('li', {
   name: 'MuiListItem',

package/node/ListItemAvatar/ListItemAvatar.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -39,14 +39,18 @@ const ListItemAvatarRoot = (0, _styled.default)('div', {
     } = props;
     return [styles.root, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   minWidth: 56,
-  flexShrink: 0
-}, ownerState.alignItems === 'flex-start' && {
-  marginTop: 8
-}));
+  flexShrink: 0,
+  variants: [{
+    props: {
+      alignItems: 'flex-start'
+    },
+    style: {
+      marginTop: 8
+    }
+  }]
+});
 
 /**
  * A simple wrapper to apply `List` styles to an `Avatar`.

package/node/ListItemButton/ListItemButton.js

@@ -53,9 +53,8 @@ const ListItemButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   display: 'flex',
   flexGrow: 1,
   justifyContent: 'flex-start',
@@ -96,18 +95,39 @@ const ListItemButtonRoot = (0, _styled.default)(_ButtonBase.default, {
   },
   [`&.${_listItemButtonClasses.default.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
-  }
-}, ownerState.divider && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
-  backgroundClip: 'padding-box'
-}, ownerState.alignItems === 'flex-start' && {
-  alignItems: 'flex-start'
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, ownerState.dense && {
-  paddingTop: 4,
-  paddingBottom: 4
+  },
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.divider,
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`,
+      backgroundClip: 'padding-box'
+    }
+  }, {
+    props: {
+      alignItems: 'flex-start'
+    },
+    style: {
+      alignItems: 'flex-start'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.dense,
+    style: {
+      paddingTop: 4,
+      paddingBottom: 4
+    }
+  }]
 }));
 const ListItemButton = /*#__PURE__*/React.forwardRef(function ListItemButton(inProps, ref) {
   const props = (0, _useThemeProps.default)({

package/node/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -39,16 +39,20 @@ const ListItemSecondaryActionRoot = (0, _styled.default)('div', {
     } = props;
     return [styles.root, ownerState.disableGutters && styles.disableGutters];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   position: 'absolute',
   right: 16,
   top: '50%',
-  transform: 'translateY(-50%)'
-}, ownerState.disableGutters && {
-  right: 0
-}));
+  transform: 'translateY(-50%)',
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.disableGutters,
+    style: {
+      right: 0
+    }
+  }]
+});
 
 /**
  * Must be used as the last child of ListItem to function properly.

package/node/ListItemText/ListItemText.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -49,19 +49,28 @@ const ListItemTextRoot = (0, _styled.default)('div', {
       [`& .${_listItemTextClasses.default.secondary}`]: styles.secondary
     }, styles.root, ownerState.inset && styles.inset, ownerState.primary && ownerState.secondary && styles.multiline, ownerState.dense && styles.dense];
   }
-})(({
-  ownerState
-}) => (0, _extends2.default)({
+})({
   flex: '1 1 auto',
   minWidth: 0,
   marginTop: 4,
-  marginBottom: 4
-}, ownerState.primary && ownerState.secondary && {
-  marginTop: 6,
-  marginBottom: 6
-}, ownerState.inset && {
-  paddingLeft: 56
-}));
+  marginBottom: 4,
+  variants: [{
+    props: ({
+      ownerState
+    }) => ownerState.primary && ownerState.secondary,
+    style: {
+      marginTop: 6,
+      marginBottom: 6
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.inset,
+    style: {
+      paddingLeft: 56
+    }
+  }]
+});
 const ListItemText = /*#__PURE__*/React.forwardRef(function ListItemText(inProps, ref) {
   const props = (0, _useThemeProps.default)({
     props: inProps,

package/node/ListSubheader/ListSubheader.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -43,30 +43,55 @@ const ListSubheaderRoot = (0, _styled.default)('li', {
     return [styles.root, ownerState.color !== 'default' && styles[`color${(0, _capitalize.default)(ownerState.color)}`], !ownerState.disableGutters && styles.gutters, ownerState.inset && styles.inset, !ownerState.disableSticky && styles.sticky];
   }
 })(({
-  theme,
-  ownerState
-}) => (0, _extends2.default)({
+  theme
+}) => ({
   boxSizing: 'border-box',
   lineHeight: '48px',
   listStyle: 'none',
   color: (theme.vars || theme).palette.text.secondary,
   fontFamily: theme.typography.fontFamily,
   fontWeight: theme.typography.fontWeightMedium,
-  fontSize: theme.typography.pxToRem(14)
-}, ownerState.color === 'primary' && {
-  color: (theme.vars || theme).palette.primary.main
-}, ownerState.color === 'inherit' && {
-  color: 'inherit'
-}, !ownerState.disableGutters && {
-  paddingLeft: 16,
-  paddingRight: 16
-}, ownerState.inset && {
-  paddingLeft: 72
-}, !ownerState.disableSticky && {
-  position: 'sticky',
-  top: 0,
-  zIndex: 1,
-  backgroundColor: (theme.vars || theme).palette.background.paper
+  fontSize: theme.typography.pxToRem(14),
+  variants: [{
+    props: {
+      color: 'primary'
+    },
+    style: {
+      color: (theme.vars || theme).palette.primary.main
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: 'inherit'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableGutters,
+    style: {
+      paddingLeft: 16,
+      paddingRight: 16
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.inset,
+    style: {
+      paddingLeft: 72
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => !ownerState.disableSticky,
+    style: {
+      position: 'sticky',
+      top: 0,
+      zIndex: 1,
+      backgroundColor: (theme.vars || theme).palette.background.paper
+    }
+  }]
 }));
 const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inProps, ref) {
   const props = (0, _useThemeProps.default)({