@mui/material 9.0.1 → 9.1.0

package/SpeedDialIcon/SpeedDialIcon.mjs

@@ -9,6 +9,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import AddIcon from "../internal/svg-icons/Add.mjs";
 import speedDialIconClasses, { getSpeedDialIconUtilityClass } from "./speedDialIconClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -44,45 +45,47 @@ const SpeedDialIconRoot = styled('span', {
   }
 })(memoTheme(({
   theme
-}) => ({
-  height: 24,
-  [`& .${speedDialIconClasses.icon}`]: {
-    transition: theme.transitions.create(['transform', 'opacity'], {
-      duration: theme.transitions.duration.short
-    })
-  },
-  [`& .${speedDialIconClasses.openIcon}`]: {
-    position: 'absolute',
-    transition: theme.transitions.create(['transform', 'opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    transform: 'rotate(-45deg)'
-  },
-  variants: [{
-    props: ({
-      ownerState
-    }) => ownerState.open,
-    style: {
-      [`& .${speedDialIconClasses.icon}`]: {
-        transform: 'rotate(45deg)'
-      },
-      [`& .${speedDialIconClasses.openIcon}`]: {
-        transform: 'rotate(0deg)',
-        opacity: 1
+}) => {
+  return {
+    height: 24,
+    [`& .${speedDialIconClasses.icon}`]: {
+      ...getTransitionStyles(theme, ['transform', 'opacity'], {
+        duration: theme.transitions.duration.short
+      })
+    },
+    [`& .${speedDialIconClasses.openIcon}`]: {
+      position: 'absolute',
+      ...getTransitionStyles(theme, ['transform', 'opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0,
+      transform: 'rotate(-45deg)'
+    },
+    variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.open,
+      style: {
+        [`& .${speedDialIconClasses.icon}`]: {
+          transform: 'rotate(45deg)'
+        },
+        [`& .${speedDialIconClasses.openIcon}`]: {
+          transform: 'rotate(0deg)',
+          opacity: 1
+        }
       }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.open && ownerState.openIcon,
-    style: {
-      [`& .${speedDialIconClasses.icon}`]: {
-        opacity: 0
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.open && ownerState.openIcon,
+      style: {
+        [`& .${speedDialIconClasses.icon}`]: {
+          opacity: 0
+        }
       }
-    }
-  }]
-})));
+    }]
+  };
+}));
 const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,

package/Step/Step.js

@@ -42,14 +42,47 @@ const StepRoot = (0, _zeroStyled.styled)('li', {
 })({
   variants: [{
     props: {
-      orientation: 'horizontal'
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      hasConnector: false
+    },
+    style: {
+      paddingLeft: 8
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      last: true
     },
     style: {
-      paddingLeft: 8,
       paddingRight: 8
     }
   }, {
     props: {
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      hasConnector: true
+    },
+    style: {
+      flex: '1 1 auto',
+      display: 'grid',
+      gridTemplateColumns: '1fr auto',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
       alternativeLabel: true
     },
     style: {
@@ -100,6 +133,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     completed,
     disabled
   }), [index, last, expanded, active, completed, disabled]);
+  const hasConnector = !!connector && index !== 0;
   const ownerState = {
     ...props,
     active,
@@ -108,23 +142,21 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     completed,
     disabled,
     expanded,
-    component
+    component,
+    hasConnector
   };
   const classes = useUtilityClasses(ownerState);
-  const newChildren = /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepRoot, {
-    as: component,
-    className: (0, _clsx.default)(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    role: isTabList ? 'presentation' : undefined,
-    ...other,
-    children: [connector && alternativeLabel && index !== 0 ? connector : null, children]
-  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepContext.default.Provider, {
     value: contextValue,
-    children: connector && !alternativeLabel && index !== 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-      children: [connector, newChildren]
-    }) : newChildren
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(StepRoot, {
+      as: component,
+      className: (0, _clsx.default)(classes.root, className),
+      ref: ref,
+      ownerState: ownerState,
+      role: isTabList ? 'presentation' : undefined,
+      ...other,
+      children: [hasConnector ? connector : null, children]
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Step.propTypes /* remove-proptypes */ = {

package/Step/Step.mjs

@@ -35,14 +35,47 @@ const StepRoot = styled('li', {
 })({
   variants: [{
     props: {
-      orientation: 'horizontal'
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      hasConnector: false
+    },
+    style: {
+      paddingLeft: 8
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      last: true
     },
     style: {
-      paddingLeft: 8,
       paddingRight: 8
     }
   }, {
     props: {
+      orientation: 'horizontal',
+      alternativeLabel: false,
+      hasConnector: true
+    },
+    style: {
+      flex: '1 1 auto',
+      display: 'grid',
+      gridTemplateColumns: '1fr auto',
+      alignItems: 'center',
+      gap: 8
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
       alternativeLabel: true
     },
     style: {
@@ -93,6 +126,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     completed,
     disabled
   }), [index, last, expanded, active, completed, disabled]);
+  const hasConnector = !!connector && index !== 0;
   const ownerState = {
     ...props,
     active,
@@ -101,23 +135,21 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     completed,
     disabled,
     expanded,
-    component
+    component,
+    hasConnector
   };
   const classes = useUtilityClasses(ownerState);
-  const newChildren = /*#__PURE__*/_jsxs(StepRoot, {
-    as: component,
-    className: clsx(classes.root, className),
-    ref: ref,
-    ownerState: ownerState,
-    role: isTabList ? 'presentation' : undefined,
-    ...other,
-    children: [connector && alternativeLabel && index !== 0 ? connector : null, children]
-  });
   return /*#__PURE__*/_jsx(StepContext.Provider, {
     value: contextValue,
-    children: connector && !alternativeLabel && index !== 0 ? /*#__PURE__*/_jsxs(React.Fragment, {
-      children: [connector, newChildren]
-    }) : newChildren
+    children: /*#__PURE__*/_jsxs(StepRoot, {
+      as: component,
+      className: clsx(classes.root, className),
+      ref: ref,
+      ownerState: ownerState,
+      role: isTabList ? 'presentation' : undefined,
+      ...other,
+      children: [hasConnector ? connector : null, children]
+    })
   });
 });
 process.env.NODE_ENV !== "production" ? Step.propTypes /* remove-proptypes */ = {

package/StepButton/StepButton.js

@@ -12,6 +12,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _StepLabel = _interopRequireDefault(require("../StepLabel"));
@@ -43,13 +44,18 @@ const StepButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       [`& .${_stepButtonClasses.default.touchRipple}`]: styles.touchRipple
     }, styles.root, styles[ownerState.orientation]];
   }
-})({
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
   width: '100%',
   padding: '24px 16px',
   margin: '-24px -16px',
   boxSizing: 'content-box',
   [`& .${_stepButtonClasses.default.touchRipple}`]: {
-    color: 'rgba(0, 0, 0, 0.3)'
+    color: 'rgba(0, 0, 0, 0.3)',
+    ...theme.applyStyles('dark', {
+      color: 'rgba(255, 255, 255, 0.3)'
+    })
   },
   variants: [{
     props: {
@@ -61,7 +67,7 @@ const StepButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       margin: '-8px'
     }
   }]
-});
+})));
 const RovingStepButton = /*#__PURE__*/React.forwardRef(function RovingStepButton(props, ref) {
   // eslint-disable-next-line react/prop-types
   const {

package/StepButton/StepButton.mjs

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { styled } from "../zero-styled/index.mjs";
+import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import ButtonBase from "../ButtonBase/index.mjs";
 import StepLabel from "../StepLabel/index.mjs";
@@ -36,13 +37,18 @@ const StepButtonRoot = styled(ButtonBase, {
       [`& .${stepButtonClasses.touchRipple}`]: styles.touchRipple
     }, styles.root, styles[ownerState.orientation]];
   }
-})({
+})(memoTheme(({
+  theme
+}) => ({
   width: '100%',
   padding: '24px 16px',
   margin: '-24px -16px',
   boxSizing: 'content-box',
   [`& .${stepButtonClasses.touchRipple}`]: {
-    color: 'rgba(0, 0, 0, 0.3)'
+    color: 'rgba(0, 0, 0, 0.3)',
+    ...theme.applyStyles('dark', {
+      color: 'rgba(255, 255, 255, 0.3)'
+    })
   },
   variants: [{
     props: {
@@ -54,7 +60,7 @@ const StepButtonRoot = styled(ButtonBase, {
       margin: '-8px'
     }
   }]
-});
+})));
 const RovingStepButton = /*#__PURE__*/React.forwardRef(function RovingStepButton(props, ref) {
   // eslint-disable-next-line react/prop-types
   const {

package/StepConnector/StepConnector.js

@@ -53,6 +53,16 @@ const StepConnectorRoot = (0, _zeroStyled.styled)('div', {
     }
   }, {
     props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      marginLeft: 'auto',
+      marginRight: 12 // half icon
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
       alternativeLabel: true
     },
     style: {

package/StepConnector/StepConnector.mjs

@@ -46,6 +46,16 @@ const StepConnectorRoot = styled('div', {
     }
   }, {
     props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      marginLeft: 'auto',
+      marginRight: 12 // half icon
+    }
+  }, {
+    props: {
+      orientation: 'horizontal',
       alternativeLabel: true
     },
     style: {

package/StepContent/StepContent.d.mts

@@ -3,13 +3,13 @@ import { SxProps } from '@mui/system';
 import { Theme } from "../styles/index.mjs";
 import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
 import { CollapseProps } from "../Collapse/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { StepContentClasses } from "./stepContentClasses.mjs";
 import { CreateSlotsAndSlotProps, SlotComponentProps } from "../utils/types.mjs";
 export interface StepContentSlots {
   /**
    * The component that renders the transition slot.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Collapse
    */
   transition?: React.JSXElementConstructor<TransitionProps & {

package/StepContent/StepContent.d.ts

@@ -3,13 +3,13 @@ import { SxProps } from '@mui/system';
 import { Theme } from "../styles/index.js";
 import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { CollapseProps } from "../Collapse/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { StepContentClasses } from "./stepContentClasses.js";
 import { CreateSlotsAndSlotProps, SlotComponentProps } from "../utils/types.js";
 export interface StepContentSlots {
   /**
    * The component that renders the transition slot.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Collapse
    */
   transition?: React.JSXElementConstructor<TransitionProps & {

package/StepContent/StepContent.js

@@ -56,6 +56,28 @@ const StepContentRoot = (0, _zeroStyled.styled)('div', {
     style: {
       borderLeft: 'none'
     }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      marginLeft: 0,
+      marginRight: 12,
+      // half icon
+      paddingLeft: 8,
+      paddingRight: 8 + 12,
+      // margin + half icon
+      borderLeft: 'none',
+      borderRight: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
+    }
+  }, {
+    props: {
+      alternativeLabel: true,
+      last: true
+    },
+    style: {
+      borderRight: 'none'
+    }
   }]
 })));
 const StepContentTransition = (0, _zeroStyled.styled)(_Collapse.default, {
@@ -76,7 +98,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     ...other
   } = props;
   const {
-    orientation
+    orientation,
+    alternativeLabel
   } = (0, _StepperContext.useStepperContext)();
   const {
     active,
@@ -85,7 +108,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   } = React.useContext(_StepContext.default);
   const ownerState = {
     ...props,
-    last
+    last,
+    alternativeLabel
   };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {

package/StepContent/StepContent.mjs

@@ -49,6 +49,28 @@ const StepContentRoot = styled('div', {
     style: {
       borderLeft: 'none'
     }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      marginLeft: 0,
+      marginRight: 12,
+      // half icon
+      paddingLeft: 8,
+      paddingRight: 8 + 12,
+      // margin + half icon
+      borderLeft: 'none',
+      borderRight: theme.vars ? `1px solid ${theme.vars.palette.StepContent.border}` : `1px solid ${theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600]}`
+    }
+  }, {
+    props: {
+      alternativeLabel: true,
+      last: true
+    },
+    style: {
+      borderRight: 'none'
+    }
   }]
 })));
 const StepContentTransition = styled(Collapse, {
@@ -69,7 +91,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
     ...other
   } = props;
   const {
-    orientation
+    orientation,
+    alternativeLabel
   } = useStepperContext();
   const {
     active,
@@ -78,7 +101,8 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   } = React.useContext(StepContext);
   const ownerState = {
     ...props,
-    last
+    last,
+    alternativeLabel
   };
   const classes = useUtilityClasses(ownerState);
   if (process.env.NODE_ENV !== 'production') {

package/StepIcon/StepIcon.js

@@ -18,6 +18,7 @@ var _CheckCircle = _interopRequireDefault(require("../internal/svg-icons/CheckCi
 var _Warning = _interopRequireDefault(require("../internal/svg-icons/Warning"));
 var _SvgIcon = _interopRequireDefault(require("../SvgIcon"));
 var _stepIconClasses = _interopRequireWildcard(require("./stepIconClasses"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 var _circle;
 const useUtilityClasses = ownerState => {
@@ -40,7 +41,7 @@ const StepIconRoot = (0, _zeroStyled.styled)(_SvgIcon.default, {
   theme
 }) => ({
   display: 'block',
-  transition: theme.transitions.create('color', {
+  ...(0, _utils.getTransitionStyles)(theme, 'color', {
     duration: theme.transitions.duration.shortest
   }),
   color: (theme.vars || theme).palette.text.disabled,

package/StepIcon/StepIcon.mjs

@@ -12,6 +12,7 @@ import CheckCircle from "../internal/svg-icons/CheckCircle.mjs";
 import Warning from "../internal/svg-icons/Warning.mjs";
 import SvgIcon from "../SvgIcon/index.mjs";
 import stepIconClasses, { getStepIconUtilityClass } from "./stepIconClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -33,7 +34,7 @@ const StepIconRoot = styled(SvgIcon, {
   theme
 }) => ({
   display: 'block',
-  transition: theme.transitions.create('color', {
+  ...getTransitionStyles(theme, 'color', {
     duration: theme.transitions.duration.shortest
   }),
   color: (theme.vars || theme).palette.text.disabled,

package/StepLabel/StepLabel.js

@@ -19,6 +19,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _stepLabelClasses = _interopRequireWildcard(require("./stepLabelClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -50,9 +51,6 @@ const StepLabelRoot = (0, _zeroStyled.styled)('span', {
 })({
   display: 'flex',
   alignItems: 'center',
-  [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
-    flexDirection: 'column'
-  },
   [`&.${_stepLabelClasses.default.disabled}`]: {
     cursor: 'default'
   },
@@ -64,6 +62,21 @@ const StepLabelRoot = (0, _zeroStyled.styled)('span', {
       textAlign: 'left',
       padding: '8px 0'
     }
+  }, {
+    props: {
+      alternativeLabel: true
+    },
+    style: {
+      flexDirection: 'column'
+    }
+  }, {
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      flexDirection: 'row-reverse'
+    }
   }]
 });
 const StepLabelLabel = (0, _zeroStyled.styled)('span', {
@@ -74,7 +87,7 @@ const StepLabelLabel = (0, _zeroStyled.styled)('span', {
 }) => ({
   ...theme.typography.body2,
   display: 'block',
-  transition: theme.transitions.create('color', {
+  ...(0, _utils.getTransitionStyles)(theme, 'color', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${_stepLabelClasses.default.active}, &.${_stepLabelClasses.default.completed}`]: {
@@ -86,7 +99,18 @@ const StepLabelLabel = (0, _zeroStyled.styled)('span', {
   },
   [`&.${_stepLabelClasses.default.error}`]: {
     color: (theme.vars || theme).palette.error.main
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
+        marginTop: 0
+      }
+    }
+  }]
 })));
 const StepLabelIconContainer = (0, _zeroStyled.styled)('span', {
   name: 'MuiStepLabel',
@@ -97,7 +121,17 @@ const StepLabelIconContainer = (0, _zeroStyled.styled)('span', {
   paddingRight: 8,
   [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
     paddingRight: 0
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      paddingRight: 0,
+      paddingLeft: 8
+    }
+  }]
 });
 const StepLabelLabelContainer = (0, _zeroStyled.styled)('span', {
   name: 'MuiStepLabel',
@@ -109,7 +143,18 @@ const StepLabelLabelContainer = (0, _zeroStyled.styled)('span', {
   color: (theme.vars || theme).palette.text.secondary,
   [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
     textAlign: 'center'
-  }
+  },
+  variants: [{
+    props: {
+      orientation: 'vertical',
+      alternativeLabel: true
+    },
+    style: {
+      [`&.${_stepLabelClasses.default.alternativeLabel}`]: {
+        textAlign: 'right'
+      }
+    }
+  }]
 })));
 const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({