@mui/material 6.0.0-alpha.1 → 6.0.0-alpha.11

package/modern/DialogTitle/DialogTitle.js

@@ -1,18 +1,15 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["className", "id"];
 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 styled from '../styles/styled';
-import useThemeProps from '../styles/useThemeProps';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getDialogTitleUtilityClass } from './dialogTitleClasses';
 import DialogContext from '../Dialog/DialogContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiDialogTitle');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -36,23 +33,24 @@ const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(inProps,
     name: 'MuiDialogTitle'
   });
   const {
-      className,
-      id: idProp
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    className,
+    id: idProp,
+    ...other
+  } = props;
   const ownerState = props;
   const classes = useUtilityClasses(ownerState);
   const {
     titleId = idProp
   } = React.useContext(DialogContext);
-  return /*#__PURE__*/_jsx(DialogTitleRoot, _extends({
+  return /*#__PURE__*/_jsx(DialogTitleRoot, {
     component: "h2",
     className: clsx(classes.root, className),
     ownerState: ownerState,
     ref: ref,
     variant: "h6",
-    id: idProp ?? titleId
-  }, other));
+    id: idProp ?? titleId,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? DialogTitle.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Divider/Divider.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -199,19 +196,20 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     name: 'MuiDivider'
   });
   const {
-      absolute = false,
-      children,
-      className,
-      component = children ? 'div' : 'hr',
-      flexItem = false,
-      light = false,
-      orientation = 'horizontal',
-      role = component !== 'hr' ? 'separator' : undefined,
-      textAlign = 'center',
-      variant = 'fullWidth'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    absolute = false,
+    children,
+    className,
+    component = children ? 'div' : 'hr',
+    flexItem = false,
+    light = false,
+    orientation = 'horizontal',
+    role = component !== 'hr' ? 'separator' : undefined,
+    textAlign = 'center',
+    variant = 'fullWidth',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     absolute,
     component,
     flexItem,
@@ -220,21 +218,21 @@ const Divider = /*#__PURE__*/React.forwardRef(function Divider(inProps, ref) {
     role,
     textAlign,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(DividerRoot, _extends({
+  return /*#__PURE__*/_jsx(DividerRoot, {
     as: component,
     className: clsx(classes.root, className),
     role: role,
     ref: ref,
-    ownerState: ownerState
-  }, other, {
+    ownerState: ownerState,
+    ...other,
     children: children ? /*#__PURE__*/_jsx(DividerWrapper, {
       className: classes.wrapper,
       ownerState: ownerState,
       children: children
     }) : null
-  }));
+  });
 });
 
 /**
@@ -280,7 +278,7 @@ process.env.NODE_ENV !== "production" ? Divider.propTypes /* remove-proptypes */
   /**
    * If `true`, the divider will have a lighter color.
    * @default false
-   * @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/)
+   * @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   light: PropTypes.bool,
   /**

package/modern/Drawer/Drawer.js

@@ -1,9 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["BackdropProps"],
-  _excluded2 = ["anchor", "BackdropProps", "children", "className", "elevation", "hideBackdrop", "ModalProps", "onClose", "open", "PaperProps", "SlideProps", "TransitionComponent", "transitionDuration", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -14,11 +10,11 @@ import Modal from '../Modal';
 import Slide from '../Slide';
 import Paper from '../Paper';
 import capitalize from '../utils/capitalize';
-import useTheme from '../styles/useTheme';
-import useThemeProps from '../styles/useThemeProps';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps, useTheme } from '../zero-styled';
 import { getDrawerUtilityClass } from './drawerClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiDrawer');
 const overridesResolver = (props, styles) => {
   const {
     ownerState
@@ -67,9 +63,8 @@ const DrawerPaper = styled(Paper, {
     return [styles.paper, styles[`paperAnchor${capitalize(ownerState.anchor)}`], ownerState.variant !== 'temporary' && styles[`paperAnchorDocked${capitalize(ownerState.anchor)}`]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   overflowY: 'auto',
   display: 'flex',
   flexDirection: 'column',
@@ -84,32 +79,73 @@ const DrawerPaper = styled(Paper, {
   // We disable the focus ring for mouse, touch and keyboard users.
   // At some point, it would be better to keep it for keyboard users.
   // :focus-ring CSS pseudo-class will help.
-  outline: 0
-}, ownerState.anchor === 'left' && {
-  left: 0
-}, ownerState.anchor === 'top' && {
-  top: 0,
-  left: 0,
-  right: 0,
-  height: 'auto',
-  maxHeight: '100%'
-}, ownerState.anchor === 'right' && {
-  right: 0
-}, ownerState.anchor === 'bottom' && {
-  top: 'auto',
-  left: 0,
-  bottom: 0,
-  right: 0,
-  height: 'auto',
-  maxHeight: '100%'
-}, ownerState.anchor === 'left' && ownerState.variant !== 'temporary' && {
-  borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'top' && ownerState.variant !== 'temporary' && {
-  borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'right' && ownerState.variant !== 'temporary' && {
-  borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
-}, ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary' && {
-  borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
+  outline: 0,
+  variants: [{
+    props: {
+      anchor: 'left'
+    },
+    style: {
+      left: 0
+    }
+  }, {
+    props: {
+      anchor: 'top'
+    },
+    style: {
+      top: 0,
+      left: 0,
+      right: 0,
+      height: 'auto',
+      maxHeight: '100%'
+    }
+  }, {
+    props: {
+      anchor: 'right'
+    },
+    style: {
+      right: 0
+    }
+  }, {
+    props: {
+      anchor: 'bottom'
+    },
+    style: {
+      top: 'auto',
+      left: 0,
+      bottom: 0,
+      right: 0,
+      height: 'auto',
+      maxHeight: '100%'
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'left' && ownerState.variant !== 'temporary',
+    style: {
+      borderRight: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'top' && ownerState.variant !== 'temporary',
+    style: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'right' && ownerState.variant !== 'temporary',
+    style: {
+      borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }, {
+    props: ({
+      ownerState
+    }) => ownerState.anchor === 'bottom' && ownerState.variant !== 'temporary',
+    style: {
+      borderTop: `1px solid ${(theme.vars || theme).palette.divider}`
+    }
+  }]
 }));
 const oppositeDirection = {
   left: 'right',
@@ -142,26 +178,26 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     exit: theme.transitions.duration.leavingScreen
   };
   const {
-      anchor: anchorProp = 'left',
-      BackdropProps,
-      children,
-      className,
-      elevation = 16,
-      hideBackdrop = false,
-      ModalProps: {
-        BackdropProps: BackdropPropsProp
-      } = {},
-      onClose,
-      open = false,
-      PaperProps = {},
-      SlideProps,
-      // eslint-disable-next-line react/prop-types
-      TransitionComponent = Slide,
-      transitionDuration = defaultTransitionDuration,
-      variant = 'temporary'
-    } = props,
-    ModalProps = _objectWithoutPropertiesLoose(props.ModalProps, _excluded),
-    other = _objectWithoutPropertiesLoose(props, _excluded2);
+    anchor: anchorProp = 'left',
+    BackdropProps,
+    children,
+    className,
+    elevation = 16,
+    hideBackdrop = false,
+    ModalProps: {
+      BackdropProps: BackdropPropsProp,
+      ...ModalProps
+    } = {},
+    onClose,
+    open = false,
+    PaperProps = {},
+    SlideProps,
+    // eslint-disable-next-line react/prop-types
+    TransitionComponent = Slide,
+    transitionDuration = defaultTransitionDuration,
+    variant = 'temporary',
+    ...other
+  } = props;
 
   // Let's assume that the Drawer will always be rendered on user space.
   // We use this state is order to skip the appear transition during the
@@ -174,62 +210,67 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     direction: isRtl ? 'rtl' : 'ltr'
   }, anchorProp);
   const anchor = anchorProp;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     anchor,
     elevation,
     open,
-    variant
-  }, other);
+    variant,
+    ...other
+  };
   const classes = useUtilityClasses(ownerState);
-  const drawer = /*#__PURE__*/_jsx(DrawerPaper, _extends({
+  const drawer = /*#__PURE__*/_jsx(DrawerPaper, {
     elevation: variant === 'temporary' ? elevation : 0,
-    square: true
-  }, PaperProps, {
+    square: true,
+    ...PaperProps,
     className: clsx(classes.paper, PaperProps.className),
     ownerState: ownerState,
     children: children
-  }));
+  });
   if (variant === 'permanent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, _extends({
+    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
       className: clsx(classes.root, classes.docked, className),
       ownerState: ownerState,
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: drawer
-    }));
+    });
   }
-  const slidingDrawer = /*#__PURE__*/_jsx(TransitionComponent, _extends({
+  const slidingDrawer = /*#__PURE__*/_jsx(TransitionComponent, {
     in: open,
     direction: oppositeDirection[anchorInvariant],
     timeout: transitionDuration,
-    appear: mounted.current
-  }, SlideProps, {
+    appear: mounted.current,
+    ...SlideProps,
     children: drawer
-  }));
+  });
   if (variant === 'persistent') {
-    return /*#__PURE__*/_jsx(DrawerDockedRoot, _extends({
+    return /*#__PURE__*/_jsx(DrawerDockedRoot, {
       className: clsx(classes.root, classes.docked, className),
       ownerState: ownerState,
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: slidingDrawer
-    }));
+    });
   }
 
   // variant === temporary
-  return /*#__PURE__*/_jsx(DrawerRoot, _extends({
-    BackdropProps: _extends({}, BackdropProps, BackdropPropsProp, {
+  return /*#__PURE__*/_jsx(DrawerRoot, {
+    BackdropProps: {
+      ...BackdropProps,
+      ...BackdropPropsProp,
       transitionDuration
-    }),
+    },
     className: clsx(classes.root, classes.modal, className),
     open: open,
     ownerState: ownerState,
     onClose: onClose,
     hideBackdrop: hideBackdrop,
-    ref: ref
-  }, other, ModalProps, {
+    ref: ref,
+    ...other,
+    ...ModalProps,
     children: slidingDrawer
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Drawer.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/modern/Fab/Fab.js

@@ -1,18 +1,16 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 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 fabClasses, { getFabUtilityClass } from './fabClasses';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { jsx as _jsx } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiFab');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -24,7 +22,11 @@ const useUtilityClasses = ownerState => {
     root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' ? 'colorInherit' : color]
   };
   const composedClasses = composeClasses(slots, getFabUtilityClass, classes);
-  return _extends({}, classes, composedClasses);
+  return {
+    ...classes,
+    // forward the focused, disabled, etc. classes to the ButtonBase
+    ...composedClasses
+  };
 };
 const FabRoot = styled(ButtonBase, {
   name: 'MuiFab',
@@ -37,9 +39,9 @@ const FabRoot = styled(ButtonBase, {
     return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, styles[capitalize(ownerState.size)], styles[ownerState.color]];
   }
 })(({
-  theme,
-  ownerState
-}) => _extends({}, theme.typography.button, {
+  theme
+}) => ({
+  ...theme.typography.button,
   minHeight: 36,
   transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
     duration: theme.transitions.duration.short
@@ -66,47 +68,87 @@ const FabRoot = styled(ButtonBase, {
   },
   [`&.${fabClasses.focusVisible}`]: {
     boxShadow: (theme.vars || theme).shadows[6]
-  }
-}, ownerState.size === 'small' && {
-  width: 40,
-  height: 40
-}, ownerState.size === 'medium' && {
-  width: 48,
-  height: 48
-}, ownerState.variant === 'extended' && {
-  borderRadius: 48 / 2,
-  padding: '0 16px',
-  width: 'auto',
-  minHeight: 'auto',
-  minWidth: 48,
-  height: 48
-}, ownerState.variant === 'extended' && ownerState.size === 'small' && {
-  width: 'auto',
-  padding: '0 8px',
-  borderRadius: 34 / 2,
-  minWidth: 34,
-  height: 34
-}, ownerState.variant === 'extended' && ownerState.size === 'medium' && {
-  width: 'auto',
-  padding: '0 16px',
-  borderRadius: 40 / 2,
-  minWidth: 40,
-  height: 40
-}, ownerState.color === 'inherit' && {
-  color: 'inherit'
+  },
+  variants: [{
+    props: {
+      size: 'small'
+    },
+    style: {
+      width: 40,
+      height: 40
+    }
+  }, {
+    props: {
+      size: 'medium'
+    },
+    style: {
+      width: 48,
+      height: 48
+    }
+  }, {
+    props: {
+      variant: 'extended'
+    },
+    style: {
+      borderRadius: 48 / 2,
+      padding: '0 16px',
+      width: 'auto',
+      minHeight: 'auto',
+      minWidth: 48,
+      height: 48
+    }
+  }, {
+    props: {
+      variant: 'extended',
+      size: 'small'
+    },
+    style: {
+      width: 'auto',
+      padding: '0 8px',
+      borderRadius: 34 / 2,
+      minWidth: 34,
+      height: 34
+    }
+  }, {
+    props: {
+      variant: 'extended',
+      size: 'medium'
+    },
+    style: {
+      width: 'auto',
+      padding: '0 16px',
+      borderRadius: 40 / 2,
+      minWidth: 40,
+      height: 40
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: 'inherit'
+    }
+  }]
 }), ({
-  theme,
-  ownerState
-}) => _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && (theme.vars || theme).palette[ownerState.color] != null && {
-  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
+  theme
+}) => ({
+  variants: [...Object.entries(theme.palette).filter(([, value]) => value && value.main && value.dark && value.contrastText) // check all the used fields in the style below
+  .map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      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
+        }
+      }
     }
-  }
+  }))]
 }), ({
   theme
 }) => ({
@@ -122,38 +164,39 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     name: 'MuiFab'
   });
   const {
-      children,
-      className,
-      color = 'default',
-      component = 'button',
-      disabled = false,
-      disableFocusRipple = false,
-      focusVisibleClassName,
-      size = 'large',
-      variant = 'circular'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    children,
+    className,
+    color = 'default',
+    component = 'button',
+    disabled = false,
+    disableFocusRipple = false,
+    focusVisibleClassName,
+    size = 'large',
+    variant = 'circular',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     component,
     disabled,
     disableFocusRipple,
     size,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(FabRoot, _extends({
+  return /*#__PURE__*/_jsx(FabRoot, {
     className: clsx(classes.root, className),
     component: component,
     disabled: disabled,
     focusRipple: !disableFocusRipple,
     focusVisibleClassName: clsx(classes.focusVisible, focusVisibleClassName),
     ownerState: ownerState,
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
     classes: classes,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Fab.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐