@mui/material 6.0.0-alpha.0 → 6.0.0-alpha.10

package/modern/ListItemIcon/ListItemIcon.js

@@ -1,17 +1,14 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getListItemIconUtilityClass } from './listItemIconClasses';
 import ListContext from '../List/ListContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListItemIcon');
 const useUtilityClasses = ownerState => {
   const {
     alignItems,
@@ -32,15 +29,20 @@ const ListItemIconRoot = styled('div', {
     return [styles.root, ownerState.alignItems === 'flex-start' && styles.alignItemsFlexStart];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   minWidth: 56,
   color: (theme.vars || theme).palette.action.active,
   flexShrink: 0,
-  display: 'inline-flex'
-}, ownerState.alignItems === 'flex-start' && {
-  marginTop: 8
+  display: 'inline-flex',
+  variants: [{
+    props: {
+      alignItems: 'flex-start'
+    },
+    style: {
+      marginTop: 8
+    }
+  }]
 }));
 
 /**
@@ -52,19 +54,21 @@ const ListItemIcon = /*#__PURE__*/React.forwardRef(function ListItemIcon(inProps
     name: 'MuiListItemIcon'
   });
   const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    ...other
+  } = props;
   const context = React.useContext(ListContext);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     alignItems: context.alignItems
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ListItemIconRoot, _extends({
+  return /*#__PURE__*/_jsx(ListItemIconRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? ListItemIcon.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/ListItemSecondaryAction/ListItemSecondaryAction.js

@@ -1,17 +1,14 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import ListContext from '../List/ListContext';
 import { getListItemSecondaryActionClassesUtilityClass } from './listItemSecondaryActionClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListItemSecondaryAction');
 const useUtilityClasses = ownerState => {
   const {
     disableGutters,
@@ -31,19 +28,25 @@ 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.
+ *
+ * @deprecated Use the `secondaryAction` prop in the `ListItem` component instead. This component will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
  */
 const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemSecondaryAction(inProps, ref) {
   const props = useThemeProps({
@@ -51,19 +54,21 @@ const ListItemSecondaryAction = /*#__PURE__*/React.forwardRef(function ListItemS
     name: 'MuiListItemSecondaryAction'
   });
   const {
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    ...other
+  } = props;
   const context = React.useContext(ListContext);
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     disableGutters: context.disableGutters
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ListItemSecondaryActionRoot, _extends({
+  return /*#__PURE__*/_jsx(ListItemSecondaryActionRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? ListItemSecondaryAction.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/ListItemText/ListItemText.js

@@ -1,18 +1,15 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "disableTypography", "inset", "primary", "primaryTypographyProps", "secondary", "secondaryTypographyProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import Typography from '../Typography';
 import ListContext from '../List/ListContext';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import listItemTextClasses, { getListItemTextUtilityClass } from './listItemTextClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListItemText');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -41,75 +38,85 @@ 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,
     name: 'MuiListItemText'
   });
   const {
-      children,
-      className,
-      disableTypography = false,
-      inset = false,
-      primary: primaryProp,
-      primaryTypographyProps,
-      secondary: secondaryProp,
-      secondaryTypographyProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    disableTypography = false,
+    inset = false,
+    primary: primaryProp,
+    primaryTypographyProps,
+    secondary: secondaryProp,
+    secondaryTypographyProps,
+    ...other
+  } = props;
   const {
     dense
   } = React.useContext(ListContext);
   let primary = primaryProp != null ? primaryProp : children;
   let secondary = secondaryProp;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     disableTypography,
     inset,
     primary: !!primary,
     secondary: !!secondary,
     dense
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   if (primary != null && primary.type !== Typography && !disableTypography) {
-    primary = /*#__PURE__*/_jsx(Typography, _extends({
+    primary = /*#__PURE__*/_jsx(Typography, {
       variant: dense ? 'body2' : 'body1',
       className: classes.primary,
       component: primaryTypographyProps?.variant ? undefined : 'span',
-      display: "block"
-    }, primaryTypographyProps, {
+      display: "block",
+      ...primaryTypographyProps,
       children: primary
-    }));
+    });
   }
   if (secondary != null && secondary.type !== Typography && !disableTypography) {
-    secondary = /*#__PURE__*/_jsx(Typography, _extends({
+    secondary = /*#__PURE__*/_jsx(Typography, {
       variant: "body2",
       className: classes.secondary,
       color: "text.secondary",
-      display: "block"
-    }, secondaryTypographyProps, {
+      display: "block",
+      ...secondaryTypographyProps,
       children: secondary
-    }));
+    });
   }
-  return /*#__PURE__*/_jsxs(ListItemTextRoot, _extends({
+  return /*#__PURE__*/_jsxs(ListItemTextRoot, {
     className: clsx(classes.root, className),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     children: [primary, secondary]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? ListItemText.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/ListSubheader/ListSubheader.js

@@ -1,17 +1,14 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "component", "disableGutters", "disableSticky", "inset"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import capitalize from '../utils/capitalize';
 import { getListSubheaderUtilityClass } from './listSubheaderClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiListSubheader');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -35,30 +32,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({
@@ -66,30 +88,34 @@ const ListSubheader = /*#__PURE__*/React.forwardRef(function ListSubheader(inPro
     name: 'MuiListSubheader'
   });
   const {
-      className,
-      color = 'default',
-      component = 'li',
-      disableGutters = false,
-      disableSticky = false,
-      inset = false
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    color = 'default',
+    component = 'li',
+    disableGutters = false,
+    disableSticky = false,
+    inset = false,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disableGutters,
     disableSticky,
     inset
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(ListSubheaderRoot, _extends({
+  return /*#__PURE__*/_jsx(ListSubheaderRoot, {
     as: component,
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other));
+    ownerState: ownerState,
+    ...other
+  });
 });
-ListSubheader.muiSkipListHighlight = true;
+if (ListSubheader) {
+  ListSubheader.muiSkipListHighlight = true;
+}
 process.env.NODE_ENV !== "production" ? ListSubheader.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

package/modern/Menu/Menu.js

@@ -1,9 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["onEntering"],
-  _excluded2 = ["autoFocus", "children", "className", "disableAutoFocusItem", "MenuListProps", "onClose", "open", "PaperProps", "PopoverClasses", "transitionDuration", "TransitionProps", "variant", "slots", "slotProps"];
 import * as React from 'react';
 import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
@@ -14,10 +10,11 @@ import HTMLElementType from '@mui/utils/HTMLElementType';
 import { useRtl } from '@mui/system/RtlProvider';
 import MenuList from '../MenuList';
 import Popover, { PopoverPaper } from '../Popover';
-import styled, { rootShouldForwardProp } from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getMenuUtilityClass } from './menuClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiMenu');
 const RTL_ORIGIN = {
   vertical: 'top',
   horizontal: 'right'
@@ -69,27 +66,28 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     name: 'MuiMenu'
   });
   const {
-      autoFocus = true,
-      children,
-      className,
-      disableAutoFocusItem = false,
-      MenuListProps = {},
-      onClose,
-      open,
-      PaperProps = {},
-      PopoverClasses,
-      transitionDuration = 'auto',
-      TransitionProps: {
-        onEntering
-      } = {},
-      variant = 'selectedMenu',
-      slots = {},
-      slotProps = {}
-    } = props,
-    TransitionProps = _objectWithoutPropertiesLoose(props.TransitionProps, _excluded),
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
+    autoFocus = true,
+    children,
+    className,
+    disableAutoFocusItem = false,
+    MenuListProps = {},
+    onClose,
+    open,
+    PaperProps = {},
+    PopoverClasses,
+    transitionDuration = 'auto',
+    TransitionProps: {
+      onEntering,
+      ...TransitionProps
+    } = {},
+    variant = 'selectedMenu',
+    slots = {},
+    slotProps = {},
+    ...other
+  } = props;
   const isRtl = useRtl();
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     autoFocus,
     disableAutoFocusItem,
     MenuListProps,
@@ -98,7 +96,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     transitionDuration,
     TransitionProps,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const autoFocusItem = autoFocus && !disableAutoFocusItem && open;
   const menuListActionsRef = React.useRef(null);
@@ -161,7 +159,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     ownerState,
     className: classes.paper
   });
-  return /*#__PURE__*/_jsx(MenuRoot, _extends({
+  return /*#__PURE__*/_jsx(MenuRoot, {
     onClose: onClose,
     anchorOrigin: {
       vertical: 'bottom',
@@ -179,23 +177,24 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(inProps, ref) {
     open: open,
     ref: ref,
     transitionDuration: transitionDuration,
-    TransitionProps: _extends({
-      onEntering: handleEntering
-    }, TransitionProps),
-    ownerState: ownerState
-  }, other, {
+    TransitionProps: {
+      onEntering: handleEntering,
+      ...TransitionProps
+    },
+    ownerState: ownerState,
+    ...other,
     classes: PopoverClasses,
-    children: /*#__PURE__*/_jsx(MenuMenuList, _extends({
+    children: /*#__PURE__*/_jsx(MenuMenuList, {
       onKeyDown: handleListKeyDown,
       actions: menuListActionsRef,
       autoFocus: autoFocus && (activeItemIndex === -1 || disableAutoFocusItem),
       autoFocusItem: autoFocusItem,
-      variant: variant
-    }, MenuListProps, {
+      variant: variant,
+      ...MenuListProps,
       className: clsx(classes.list, MenuListProps.className),
       children: children
-    }))
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -260,9 +259,7 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
    */
   PopoverClasses: PropTypes.object,
   /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
@@ -271,7 +268,6 @@ process.env.NODE_ENV !== "production" ? Menu.propTypes /* remove-proptypes */ =
   }),
   /**
    * The components used for each slot inside.
-   *
    * @default {}
    */
   slots: PropTypes.shape({