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

package/StepLabel/StepLabel.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "componentsProps", "error", "icon", "optional", "slots", "slotProps", "StepIconComponent", "StepIconProps"];
 import composeClasses from '@mui/utils/composeClasses';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -67,7 +64,8 @@ const StepLabelLabel = styled('span', {
   overridesResolver: (props, styles) => styles.label
 })(({
   theme
-}) => _extends({}, theme.typography.body2, {
+}) => ({
+  ...theme.typography.body2,
   display: 'block',
   transition: theme.transitions.create('color', {
     duration: theme.transitions.duration.shortest
@@ -92,8 +90,6 @@ const StepLabelIconContainer = styled('span', {
   slot: 'IconContainer',
   overridesResolver: (props, styles) => styles.iconContainer
 })({
-  flexShrink: 0,
-  // Fix IE11 issue
   display: 'flex',
   paddingRight: 8,
   [`&.${stepLabelClasses.alternativeLabel}`]: {
@@ -119,18 +115,18 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
     name: 'MuiStepLabel'
   });
   const {
-      children,
-      className,
-      componentsProps = {},
-      error = false,
-      icon: iconProp,
-      optional,
-      slots = {},
-      slotProps = {},
-      StepIconComponent: StepIconComponentProp,
-      StepIconProps
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    componentsProps = {},
+    error = false,
+    icon: iconProp,
+    optional,
+    slots = {},
+    slotProps = {},
+    StepIconComponent: StepIconComponentProp,
+    StepIconProps,
+    ...other
+  } = props;
   const {
     alternativeLabel,
     orientation
@@ -146,47 +142,59 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   if (icon && !StepIconComponent) {
     StepIconComponent = StepIcon;
   }
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     active,
     alternativeLabel,
     completed,
     disabled,
     error,
     orientation
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: _extends({}, componentsProps, slotProps)
+    slotProps: {
+      stepIcon: StepIconProps,
+      ...componentsProps,
+      ...slotProps
+    }
   };
   const [LabelSlot, labelProps] = useSlot('label', {
     elementType: StepLabelLabel,
     externalForwardedProps,
     ownerState
   });
-  return /*#__PURE__*/_jsxs(StepLabelRoot, _extends({
+  const [StepIconSlot, stepIconProps] = useSlot('stepIcon', {
+    elementType: StepIconComponent,
+    externalForwardedProps,
+    ownerState
+  });
+  return /*#__PURE__*/_jsxs(StepLabelRoot, {
     className: clsx(classes.root, className),
     ref: ref,
-    ownerState: ownerState
-  }, other, {
-    children: [icon || StepIconComponent ? /*#__PURE__*/_jsx(StepLabelIconContainer, {
+    ownerState: ownerState,
+    ...other,
+    children: [icon || StepIconSlot ? /*#__PURE__*/_jsx(StepLabelIconContainer, {
       className: classes.iconContainer,
       ownerState: ownerState,
-      children: /*#__PURE__*/_jsx(StepIconComponent, _extends({
+      children: /*#__PURE__*/_jsx(StepIconSlot, {
         completed: completed,
         active: active,
         error: error,
-        icon: icon
-      }, StepIconProps))
+        icon: icon,
+        ...stepIconProps
+      })
     }) : null, /*#__PURE__*/_jsxs(StepLabelLabelContainer, {
       className: classes.labelContainer,
       ownerState: ownerState,
-      children: [children ? /*#__PURE__*/_jsx(LabelSlot, _extends({}, labelProps, {
+      children: [children ? /*#__PURE__*/_jsx(LabelSlot, {
+        ...labelProps,
         className: clsx(classes.label, labelProps?.className),
         children: children
-      })) : null, optional]
+      }) : null, optional]
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -208,7 +216,7 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
   /**
    * The props used for each slot inside.
    * @default {}
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps: PropTypes.shape({
     label: PropTypes.object
@@ -231,21 +239,25 @@ process.env.NODE_ENV !== "production" ? StepLabel.propTypes /* remove-proptypes
    * @default {}
    */
   slotProps: PropTypes.shape({
-    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    stepIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({
-    label: PropTypes.elementType
+    label: PropTypes.elementType,
+    stepIcon: PropTypes.elementType
   }),
   /**
    * The component to render in place of the [`StepIcon`](/material-ui/api/step-icon/).
+   * @deprecated Use `slots.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   StepIconComponent: PropTypes.elementType,
   /**
    * Props applied to the [`StepIcon`](/material-ui/api/step-icon/) element.
+   * @deprecated Use `slotProps.stepIcon` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   StepIconProps: PropTypes.object,
   /**

package/Stepper/Stepper.d.ts

@@ -70,11 +70,11 @@ export type StepperClasskey = keyof NonNullable<StepperProps['classes']>;
  *
  * Demos:
  *
- * - [Stepper](https://mui.com/material-ui/react-stepper/)
+ * - [Stepper](https://next.mui.com/material-ui/react-stepper/)
  *
  * API:
  *
- * - [Stepper API](https://mui.com/material-ui/api/stepper/)
+ * - [Stepper API](https://next.mui.com/material-ui/api/stepper/)
  */
 declare const Stepper: OverridableComponent<StepperTypeMap>;
 

package/Stepper/Stepper.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 = ["activeStep", "alternativeLabel", "children", "className", "component", "connector", "nonLinear", "orientation"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -67,28 +64,30 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     name: 'MuiStepper'
   });
   const {
-      activeStep = 0,
-      alternativeLabel = false,
-      children,
-      className,
-      component = 'div',
-      connector = defaultConnector,
-      nonLinear = false,
-      orientation = 'horizontal'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    activeStep = 0,
+    alternativeLabel = false,
+    children,
+    className,
+    component = 'div',
+    connector = defaultConnector,
+    nonLinear = false,
+    orientation = 'horizontal',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     alternativeLabel,
     orientation,
     component
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const childrenArray = React.Children.toArray(children).filter(Boolean);
   const steps = childrenArray.map((step, index) => {
-    return /*#__PURE__*/React.cloneElement(step, _extends({
+    return /*#__PURE__*/React.cloneElement(step, {
       index,
-      last: index + 1 === childrenArray.length
-    }, step.props));
+      last: index + 1 === childrenArray.length,
+      ...step.props
+    });
   });
   const contextValue = React.useMemo(() => ({
     activeStep,
@@ -99,14 +98,14 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   }), [activeStep, alternativeLabel, connector, nonLinear, orientation]);
   return /*#__PURE__*/_jsx(StepperContext.Provider, {
     value: contextValue,
-    children: /*#__PURE__*/_jsx(StepperRoot, _extends({
+    children: /*#__PURE__*/_jsx(StepperRoot, {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
-      ref: ref
-    }, other, {
+      ref: ref,
+      ...other,
       children: steps
-    }))
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Stepper.propTypes /* remove-proptypes */ = {

package/SvgIcon/SvgIcon.d.ts

@@ -94,12 +94,12 @@ export interface SvgIconTypeMap<
  *
  * Demos:
  *
- * - [Icons](https://mui.com/material-ui/icons/)
- * - [Material Icons](https://mui.com/material-ui/material-icons/)
+ * - [Icons](https://next.mui.com/material-ui/icons/)
+ * - [Material Icons](https://next.mui.com/material-ui/material-icons/)
  *
  * API:
  *
- * - [SvgIcon API](https://mui.com/material-ui/api/svg-icon/)
+ * - [SvgIcon API](https://next.mui.com/material-ui/api/svg-icon/)
  */
 declare const SvgIcon: OverridableComponent<SvgIconTypeMap> & { muiName: string };
 

package/SvgIcon/SvgIcon.js

@@ -1,17 +1,14 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "color", "component", "fontSize", "htmlColor", "inheritViewBox", "titleAccess", "viewBox"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import capitalize from '../utils/capitalize';
-import useThemeProps from '../styles/useThemeProps';
-import styled from '../styles/styled';
+import { styled, createUseThemeProps } from '../zero-styled';
 import { getSvgIconUtilityClass } from './svgIconClasses';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const useThemeProps = createUseThemeProps('MuiSvgIcon');
 const useUtilityClasses = ownerState => {
   const {
     color,
@@ -33,32 +30,82 @@ const SvgIconRoot = styled('svg', {
     return [styles.root, ownerState.color !== 'inherit' && styles[`color${capitalize(ownerState.color)}`], styles[`fontSize${capitalize(ownerState.fontSize)}`]];
   }
 })(({
-  theme,
-  ownerState
+  theme
 }) => ({
   userSelect: 'none',
   width: '1em',
   height: '1em',
   display: 'inline-block',
-  // the <svg> will define the property that has `currentColor`
-  // for example heroicons uses fill="none" and stroke="currentColor"
-  fill: ownerState.hasSvgAsChild ? undefined : 'currentColor',
   flexShrink: 0,
   transition: theme.transitions?.create?.('fill', {
-    duration: theme.transitions?.duration?.shorter
+    duration: (theme.vars ?? theme).transitions?.duration?.shorter
   }),
-  fontSize: {
-    inherit: 'inherit',
-    small: theme.typography?.pxToRem?.(20) || '1.25rem',
-    medium: theme.typography?.pxToRem?.(24) || '1.5rem',
-    large: theme.typography?.pxToRem?.(35) || '2.1875rem'
-  }[ownerState.fontSize],
-  // TODO v5 deprecate, v6 remove for sx
-  color: (theme.vars || theme).palette?.[ownerState.color]?.main ?? {
-    action: (theme.vars || theme).palette?.action?.active,
-    disabled: (theme.vars || theme).palette?.action?.disabled,
-    inherit: undefined
-  }[ownerState.color]
+  variants: [{
+    props: props => !props.hasSvgAsChild,
+    style: {
+      // the <svg> will define the property that has `currentColor`
+      // for example heroicons uses fill="none" and stroke="currentColor"
+      fill: 'currentColor'
+    }
+  }, {
+    props: {
+      fontSize: 'inherit'
+    },
+    style: {
+      fontSize: 'inherit'
+    }
+  }, {
+    props: {
+      fontSize: 'small'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(20) || '1.25rem'
+    }
+  }, {
+    props: {
+      fontSize: 'medium'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(24) || '1.5rem'
+    }
+  }, {
+    props: {
+      fontSize: 'large'
+    },
+    style: {
+      fontSize: theme.typography?.pxToRem?.(35) || '2.1875rem'
+    }
+  },
+  // TODO v5 deprecate color prop, v6 remove for sx
+  ...Object.entries((theme.vars ?? theme).palette).filter(([, value]) => value && value.main).map(([color]) => ({
+    props: {
+      color
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.[color]?.main
+    }
+  })), {
+    props: {
+      color: 'action'
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.action?.active
+    }
+  }, {
+    props: {
+      color: 'disabled'
+    },
+    style: {
+      color: (theme.vars ?? theme).palette?.action?.disabled
+    }
+  }, {
+    props: {
+      color: 'inherit'
+    },
+    style: {
+      color: undefined
+    }
+  }]
 }));
 const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
   const props = useThemeProps({
@@ -66,19 +113,20 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     name: 'MuiSvgIcon'
   });
   const {
-      children,
-      className,
-      color = 'inherit',
-      component = 'svg',
-      fontSize = 'medium',
-      htmlColor,
-      inheritViewBox = false,
-      titleAccess,
-      viewBox = '0 0 24 24'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children,
+    className,
+    color = 'inherit',
+    component = 'svg',
+    fontSize = 'medium',
+    htmlColor,
+    inheritViewBox = false,
+    titleAccess,
+    viewBox = '0 0 24 24',
+    ...other
+  } = props;
   const hasSvgAsChild = /*#__PURE__*/React.isValidElement(children) && children.type === 'svg';
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     color,
     component,
     fontSize,
@@ -86,26 +134,28 @@ const SvgIcon = /*#__PURE__*/React.forwardRef(function SvgIcon(inProps, ref) {
     inheritViewBox,
     viewBox,
     hasSvgAsChild
-  });
+  };
   const more = {};
   if (!inheritViewBox) {
     more.viewBox = viewBox;
   }
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsxs(SvgIconRoot, _extends({
+  return /*#__PURE__*/_jsxs(SvgIconRoot, {
     as: component,
     className: clsx(classes.root, className),
     focusable: "false",
     color: htmlColor,
     "aria-hidden": titleAccess ? undefined : true,
     role: titleAccess ? 'img' : undefined,
-    ref: ref
-  }, more, other, hasSvgAsChild && children.props, {
+    ref: ref,
+    ...more,
+    ...other,
+    ...(hasSvgAsChild && children.props),
     ownerState: ownerState,
     children: [hasSvgAsChild ? children.props.children : children, titleAccess ? /*#__PURE__*/_jsx("title", {
       children: titleAccess
     }) : null]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -179,5 +229,7 @@ process.env.NODE_ENV !== "production" ? SvgIcon.propTypes /* remove-proptypes */
    */
   viewBox: PropTypes.string
 } : void 0;
-SvgIcon.muiName = 'SvgIcon';
+if (SvgIcon) {
+  SvgIcon.muiName = 'SvgIcon';
+}
 export default SvgIcon;

package/SwipeableDrawer/SwipeArea.js

@@ -1,38 +1,56 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["anchor", "classes", "className", "width", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import styled, { rootShouldForwardProp } from '../styles/styled';
+import { styled } from '../zero-styled';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
 import capitalize from '../utils/capitalize';
 import { isHorizontal } from '../Drawer/Drawer';
 import { jsx as _jsx } from "react/jsx-runtime";
 const SwipeAreaRoot = styled('div', {
   shouldForwardProp: rootShouldForwardProp
 })(({
-  theme,
-  ownerState
-}) => _extends({
+  theme
+}) => ({
   position: 'fixed',
   top: 0,
   left: 0,
   bottom: 0,
-  zIndex: theme.zIndex.drawer - 1
-}, ownerState.anchor === 'left' && {
-  right: 'auto'
-}, ownerState.anchor === 'right' && {
-  left: 'auto',
-  right: 0
-}, ownerState.anchor === 'top' && {
-  bottom: 'auto',
-  right: 0
-}, ownerState.anchor === 'bottom' && {
-  top: 'auto',
-  bottom: 0,
-  right: 0
+  zIndex: theme.zIndex.drawer - 1,
+  variants: [{
+    props: {
+      anchor: 'left'
+    },
+    style: {
+      right: 'auto'
+    }
+  }, {
+    props: {
+      anchor: 'right'
+    },
+    style: {
+      left: 'auto',
+      right: 0
+    }
+  }, {
+    props: {
+      anchor: 'top'
+    },
+    style: {
+      bottom: 'auto',
+      right: 0
+    }
+  }, {
+    props: {
+      anchor: 'bottom'
+    },
+    style: {
+      top: 'auto',
+      bottom: 0,
+      right: 0
+    }
+  }]
 }));
 
 /**
@@ -40,22 +58,24 @@ const SwipeAreaRoot = styled('div', {
  */
 const SwipeArea = /*#__PURE__*/React.forwardRef(function SwipeArea(props, ref) {
   const {
-      anchor,
-      classes = {},
-      className,
-      width,
-      style
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    anchor,
+    classes = {},
+    className,
+    width,
+    style,
+    ...other
+  } = props;
   const ownerState = props;
-  return /*#__PURE__*/_jsx(SwipeAreaRoot, _extends({
+  return /*#__PURE__*/_jsx(SwipeAreaRoot, {
     className: clsx('PrivateSwipeArea-root', classes.root, classes[`anchor${capitalize(anchor)}`], className),
     ref: ref,
-    style: _extends({
-      [isHorizontal(anchor) ? 'width' : 'height']: width
-    }, style),
-    ownerState: ownerState
-  }, other));
+    style: {
+      [isHorizontal(anchor) ? 'width' : 'height']: width,
+      ...style
+    },
+    ownerState: ownerState,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? SwipeArea.propTypes = {
   /**

package/SwipeableDrawer/SwipeableDrawer.d.ts

@@ -81,12 +81,12 @@ export interface SwipeableDrawerProps extends Omit<DrawerProps, 'onClose' | 'ope
  *
  * Demos:
  *
- * - [Drawer](https://mui.com/material-ui/react-drawer/)
+ * - [Drawer](https://next.mui.com/material-ui/react-drawer/)
  *
  * API:
  *
- * - [SwipeableDrawer API](https://mui.com/material-ui/api/swipeable-drawer/)
- * - inherits [Drawer API](https://mui.com/material-ui/api/drawer/)
+ * - [SwipeableDrawer API](https://next.mui.com/material-ui/api/swipeable-drawer/)
+ * - inherits [Drawer API](https://next.mui.com/material-ui/api/drawer/)
  */
 declare const SwipeableDrawer: React.JSXElementConstructor<SwipeableDrawerProps>;