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

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({

package/ListItem/ListItem.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 = ["className"],
   _excluded2 = ["alignItems", "autoFocus", "button", "children", "className", "component", "components", "componentsProps", "ContainerComponent", "ContainerProps", "dense", "disabled", "disableGutters", "disablePadding", "divider", "focusVisibleClassName", "secondaryAction", "selected", "slotProps", "slots"];
 import * as React from 'react';
@@ -53,9 +53,8 @@ export const ListItemRoot = styled('div', {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'flex',
   justifyContent: 'flex-start',
   alignItems: 'center',
@@ -63,25 +62,7 @@ export const ListItemRoot = styled('div', {
   textDecoration: 'none',
   width: '100%',
   boxSizing: 'border-box',
-  textAlign: 'left'
-}, !ownerState.disablePadding && _extends({
-  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 && {
-  [`& > .${listItemButtonClasses.root}`]: {
-    paddingRight: 48
-  }
-}, {
+  textAlign: 'left',
   [`&.${listItemClasses.focusVisible}`]: {
     backgroundColor: (theme.vars || theme).palette.action.focus
   },
@@ -93,35 +74,98 @@ export const ListItemRoot = styled('div', {
   },
   [`&.${listItemClasses.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.selected}:hover`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : 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})` : 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: {
+      [`& > .${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.selected}:hover`]: {
+        backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : 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})` : 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 = styled('li', {
   name: 'MuiListItem',

package/ListItemAvatar/ListItemAvatar.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 = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -31,14 +31,18 @@ const ListItemAvatarRoot = styled('div', {
     } = props;
     return [styles.root, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   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/ListItemButton/ListItemButton.js

@@ -44,9 +44,8 @@ const ListItemButtonRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   display: 'flex',
   flexGrow: 1,
   justifyContent: 'flex-start',
@@ -87,18 +86,39 @@ const ListItemButtonRoot = styled(ButtonBase, {
   },
   [`&.${listItemButtonClasses.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 = useThemeProps({

package/ListItemSecondaryAction/ListItemSecondaryAction.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 = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -31,16 +31,20 @@ const ListItemSecondaryActionRoot = styled('div', {
     } = props;
     return [styles.root, ownerState.disableGutters && styles.disableGutters];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   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/ListItemText/ListItemText.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", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -41,19 +41,28 @@ const ListItemTextRoot = styled('div', {
       [`& .${listItemTextClasses.secondary}`]: styles.secondary
     }, styles.root, ownerState.inset && styles.inset, ownerState.primary && ownerState.secondary && styles.multiline, ownerState.dense && styles.dense];
   }
-})(({
-  ownerState
-}) => _extends({
+})({
   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 = useThemeProps({
     props: inProps,

package/ListSubheader/ListSubheader.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 = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
@@ -35,30 +35,55 @@ const ListSubheaderRoot = styled('li', {
     return [styles.root, ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`], !ownerState.disableGutters && styles.gutters, ownerState.inset && styles.inset, !ownerState.disableSticky && styles.sticky];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  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 = useThemeProps({

package/PaginationItem/PaginationItem.d.ts

@@ -5,6 +5,7 @@ import { OverridableComponent, OverrideProps } from '@mui/material/OverridableCo
 import { Theme } from '../styles';
 import { UsePaginationItem } from '../usePagination/usePagination';
 import { PaginationItemClasses } from './paginationItemClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface PaginationItemPropsVariantOverrides {}
 
@@ -12,7 +13,30 @@ export interface PaginationItemPropsSizeOverrides {}
 
 export interface PaginationItemPropsColorOverrides {}
 
-export interface PaginationItemOwnProps {
+export interface PaginationItemSlots {
+  first?: React.ElementType;
+  last?: React.ElementType;
+  next?: React.ElementType;
+  previous?: React.ElementType;
+}
+
+export type PaginationItemSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  PaginationItemSlots,
+  {
+    first: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+    last: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+    next: SlotProps<React.ElementType<React.HTMLProps<HTMLElement>>, {}, PaginationItemOwnerState>;
+    previous: SlotProps<
+      React.ElementType<React.HTMLProps<HTMLElement>>,
+      {},
+      PaginationItemOwnerState
+    >;
+  }
+>;
+
+export interface PaginationItemOwnerState extends PaginationItemProps {}
+
+export interface PaginationItemOwnProps extends PaginationItemSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
@@ -34,6 +58,7 @@ export interface PaginationItemOwnProps {
    * 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?: {
     first?: React.ElementType;
@@ -65,19 +90,6 @@ export interface PaginationItemOwnProps {
    * @default 'medium'
    */
   size?: OverridableStringUnion<'small' | 'medium' | 'large', PaginationItemPropsSizeOverrides>;
-  /**
-   * 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?: {
-    first?: React.ElementType;
-    last?: React.ElementType;
-    next?: React.ElementType;
-    previous?: React.ElementType;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */