@mui/material 9.0.0-alpha.1 → 9.0.0-alpha.3

package/StepButton/StepButton.mjs

@@ -9,7 +9,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import ButtonBase from "../ButtonBase/index.mjs";
 import StepLabel from "../StepLabel/index.mjs";
 import isMuiElement from "../utils/isMuiElement.mjs";
-import StepperContext from "../Stepper/StepperContext.mjs";
+import { useStepperContext } from "../Stepper/StepperContext.mjs";
 import StepContext from "../Step/StepContext.mjs";
 import stepButtonClasses, { getStepButtonUtilityClass } from "./stepButtonClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -68,11 +68,14 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
   } = props;
   const {
     disabled,
-    active
+    active,
+    index
   } = React.useContext(StepContext);
   const {
-    orientation
-  } = React.useContext(StepperContext);
+    orientation,
+    totalSteps,
+    getRovingTabIndexProps
+  } = useStepperContext();
   const ownerState = {
     ...props,
     orientation
@@ -86,6 +89,10 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
     ...childProps,
     children: children
   });
+  const rovingTabIndexItemProps = getRovingTabIndexProps?.(index, ref) ?? {
+    ref,
+    tabIndex: active ? 0 : -1
+  };
   return /*#__PURE__*/_jsx(StepButtonRoot, {
     focusRipple: true,
     disabled: disabled,
@@ -93,9 +100,12 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
       className: classes.touchRipple
     },
     className: clsx(classes.root, className),
-    ref: ref,
     ownerState: ownerState,
-    "aria-current": active ? 'step' : undefined,
+    "aria-selected": active,
+    "aria-posinset": index + 1,
+    "aria-setsize": totalSteps,
+    role: "tab",
+    ...rovingTabIndexItemProps,
     ...other,
     children: child
   });

package/StepConnector/StepConnector.js

@@ -15,7 +15,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
-var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
+var _StepperContext = require("../Stepper/StepperContext");
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _stepConnectorClasses = require("./stepConnectorClasses");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -112,7 +112,7 @@ const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inPro
   const {
     alternativeLabel,
     orientation = 'horizontal'
-  } = React.useContext(_StepperContext.default);
+  } = (0, _StepperContext.useStepperContext)();
   const {
     active,
     disabled,

package/StepConnector/StepConnector.mjs

@@ -8,7 +8,7 @@ import capitalize from "../utils/capitalize.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
-import StepperContext from "../Stepper/StepperContext.mjs";
+import { useStepperContext } from "../Stepper/StepperContext.mjs";
 import StepContext from "../Step/StepContext.mjs";
 import { getStepConnectorUtilityClass } from "./stepConnectorClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -105,7 +105,7 @@ const StepConnector = /*#__PURE__*/React.forwardRef(function StepConnector(inPro
   const {
     alternativeLabel,
     orientation = 'horizontal'
-  } = React.useContext(StepperContext);
+  } = useStepperContext();
   const {
     active,
     disabled,

package/StepContent/StepContent.js

@@ -15,7 +15,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Collapse = _interopRequireDefault(require("../Collapse"));
-var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
+var _StepperContext = require("../Stepper/StepperContext");
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _stepContentClasses = require("./stepContentClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
@@ -79,7 +79,7 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   } = props;
   const {
     orientation
-  } = React.useContext(_StepperContext.default);
+  } = (0, _StepperContext.useStepperContext)();
   const {
     active,
     last,

package/StepContent/StepContent.mjs

@@ -8,7 +8,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import Collapse from "../Collapse/index.mjs";
-import StepperContext from "../Stepper/StepperContext.mjs";
+import { useStepperContext } from "../Stepper/StepperContext.mjs";
 import StepContext from "../Step/StepContext.mjs";
 import { getStepContentUtilityClass } from "./stepContentClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
@@ -72,7 +72,7 @@ const StepContent = /*#__PURE__*/React.forwardRef(function StepContent(inProps,
   } = props;
   const {
     orientation
-  } = React.useContext(StepperContext);
+  } = useStepperContext();
   const {
     active,
     last,

package/StepIcon/StepIcon.js

@@ -44,10 +44,7 @@ const StepIconRoot = (0, _zeroStyled.styled)(_SvgIcon.default, {
     duration: theme.transitions.duration.shortest
   }),
   color: (theme.vars || theme).palette.text.disabled,
-  [`&.${_stepIconClasses.default.completed}`]: {
-    color: (theme.vars || theme).palette.primary.main
-  },
-  [`&.${_stepIconClasses.default.active}`]: {
+  [`&.${_stepIconClasses.default.completed}, &.${_stepIconClasses.default.active}`]: {
     color: (theme.vars || theme).palette.primary.main
   },
   [`&.${_stepIconClasses.default.error}`]: {

package/StepIcon/StepIcon.mjs

@@ -37,10 +37,7 @@ const StepIconRoot = styled(SvgIcon, {
     duration: theme.transitions.duration.shortest
   }),
   color: (theme.vars || theme).palette.text.disabled,
-  [`&.${stepIconClasses.completed}`]: {
-    color: (theme.vars || theme).palette.primary.main
-  },
-  [`&.${stepIconClasses.active}`]: {
+  [`&.${stepIconClasses.completed}, &.${stepIconClasses.active}`]: {
     color: (theme.vars || theme).palette.primary.main
   },
   [`&.${stepIconClasses.error}`]: {

package/StepLabel/StepLabel.js

@@ -13,7 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _StepIcon = _interopRequireDefault(require("../StepIcon"));
-var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
+var _StepperContext = require("../Stepper/StepperContext");
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -77,11 +77,7 @@ const StepLabelLabel = (0, _zeroStyled.styled)('span', {
   transition: theme.transitions.create('color', {
     duration: theme.transitions.duration.shortest
   }),
-  [`&.${_stepLabelClasses.default.active}`]: {
-    color: (theme.vars || theme).palette.text.primary,
-    fontWeight: 500
-  },
-  [`&.${_stepLabelClasses.default.completed}`]: {
+  [`&.${_stepLabelClasses.default.active}, &.${_stepLabelClasses.default.completed}`]: {
     color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   },
@@ -136,7 +132,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   const {
     alternativeLabel,
     orientation
-  } = React.useContext(_StepperContext.default);
+  } = (0, _StepperContext.useStepperContext)();
   const {
     active,
     disabled,

package/StepLabel/StepLabel.mjs

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import * as React from 'react';
 import StepContext from "../Step/StepContext.mjs";
 import StepIcon from "../StepIcon/index.mjs";
-import StepperContext from "../Stepper/StepperContext.mjs";
+import { useStepperContext } from "../Stepper/StepperContext.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
@@ -70,11 +70,7 @@ const StepLabelLabel = styled('span', {
   transition: theme.transitions.create('color', {
     duration: theme.transitions.duration.shortest
   }),
-  [`&.${stepLabelClasses.active}`]: {
-    color: (theme.vars || theme).palette.text.primary,
-    fontWeight: 500
-  },
-  [`&.${stepLabelClasses.completed}`]: {
+  [`&.${stepLabelClasses.active}, &.${stepLabelClasses.completed}`]: {
     color: (theme.vars || theme).palette.text.primary,
     fontWeight: 500
   },
@@ -129,7 +125,7 @@ const StepLabel = /*#__PURE__*/React.forwardRef(function StepLabel(inProps, ref)
   const {
     alternativeLabel,
     orientation
-  } = React.useContext(StepperContext);
+  } = useStepperContext();
   const {
     active,
     disabled,

package/Stepper/Stepper.js

@@ -12,11 +12,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _useRovingTabIndex = _interopRequireDefault(require("../utils/useRovingTabIndex"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _stepperClasses = require("./stepperClasses");
 var _StepConnector = _interopRequireDefault(require("../StepConnector"));
-var _StepperContext = _interopRequireDefault(require("./StepperContext"));
+var _StepperContext = require("./StepperContext");
+var _StepButton = _interopRequireDefault(require("../StepButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -30,7 +33,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _stepperClasses.getStepperUtilityClass, classes);
 };
-const StepperRoot = (0, _zeroStyled.styled)('div', {
+const StepperRoot = (0, _zeroStyled.styled)('ol', {
   name: 'MuiStepper',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -41,6 +44,9 @@ const StepperRoot = (0, _zeroStyled.styled)('div', {
   }
 })({
   display: 'flex',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
   variants: [{
     props: {
       orientation: 'horizontal'
@@ -67,6 +73,7 @@ const StepperRoot = (0, _zeroStyled.styled)('div', {
 });
 const defaultConnector = /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepConnector.default, {});
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
+  const isRtl = (0, _RtlProvider.useRtl)();
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiStepper'
@@ -76,7 +83,7 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     alternativeLabel = false,
     children,
     className,
-    component = 'div',
+    component = 'ol',
     connector = defaultConnector,
     nonLinear = false,
     orientation = 'horizontal',
@@ -91,27 +98,57 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const totalSteps = childrenArray.length;
+  const isTabList = childrenArray.some(child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return false;
+    }
+    if (child.type === _StepButton.default) {
+      return true;
+    }
+    const grandChildren = child.props.children;
+    if (grandChildren) {
+      return React.Children.toArray(grandChildren).some(grandChild => /*#__PURE__*/React.isValidElement(grandChild) && grandChild.type === _StepButton.default);
+    }
+    return false;
+  });
   const steps = childrenArray.map((step, index) => {
     return /*#__PURE__*/React.cloneElement(step, {
       index,
-      last: index + 1 === childrenArray.length,
+      last: index + 1 === totalSteps,
       ...step.props
     });
   });
+  const {
+    getContainerProps,
+    getItemProps
+  } = (0, _useRovingTabIndex.default)({
+    orientation,
+    isRtl
+  });
+  const rovingTabIndexContainerProps = getContainerProps(ref);
   const contextValue = React.useMemo(() => ({
     activeStep,
     alternativeLabel,
     connector,
     nonLinear,
-    orientation
-  }), [activeStep, alternativeLabel, connector, nonLinear, orientation]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperContext.default.Provider, {
+    orientation,
+    totalSteps,
+    getRovingTabIndexProps: getItemProps,
+    isTabList
+  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, getItemProps, isTabList]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepperContext.StepperContextProvider, {
     value: contextValue,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StepperRoot, {
       as: component,
       ownerState: ownerState,
       className: (0, _clsx.default)(classes.root, className),
       ref: ref,
+      ...(isTabList && {
+        role: 'tablist',
+        'aria-orientation': orientation,
+        ...rovingTabIndexContainerProps
+      }),
       ...other,
       children: steps
     })

package/Stepper/Stepper.mjs

@@ -5,11 +5,14 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
+import { useRtl } from '@mui/system/RtlProvider';
+import useRovingTabIndex from "../utils/useRovingTabIndex.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import { getStepperUtilityClass } from "./stepperClasses.mjs";
 import StepConnector from "../StepConnector/index.mjs";
-import StepperContext from "./StepperContext.mjs";
+import { StepperContextProvider } from "./StepperContext.mjs";
+import StepButton from "../StepButton/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -23,7 +26,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getStepperUtilityClass, classes);
 };
-const StepperRoot = styled('div', {
+const StepperRoot = styled('ol', {
   name: 'MuiStepper',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -34,6 +37,9 @@ const StepperRoot = styled('div', {
   }
 })({
   display: 'flex',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0,
   variants: [{
     props: {
       orientation: 'horizontal'
@@ -60,6 +66,7 @@ const StepperRoot = styled('div', {
 });
 const defaultConnector = /*#__PURE__*/_jsx(StepConnector, {});
 const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
+  const isRtl = useRtl();
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiStepper'
@@ -69,7 +76,7 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
     alternativeLabel = false,
     children,
     className,
-    component = 'div',
+    component = 'ol',
     connector = defaultConnector,
     nonLinear = false,
     orientation = 'horizontal',
@@ -84,27 +91,57 @@ const Stepper = /*#__PURE__*/React.forwardRef(function Stepper(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const childrenArray = React.Children.toArray(children).filter(Boolean);
+  const totalSteps = childrenArray.length;
+  const isTabList = childrenArray.some(child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return false;
+    }
+    if (child.type === StepButton) {
+      return true;
+    }
+    const grandChildren = child.props.children;
+    if (grandChildren) {
+      return React.Children.toArray(grandChildren).some(grandChild => /*#__PURE__*/React.isValidElement(grandChild) && grandChild.type === StepButton);
+    }
+    return false;
+  });
   const steps = childrenArray.map((step, index) => {
     return /*#__PURE__*/React.cloneElement(step, {
       index,
-      last: index + 1 === childrenArray.length,
+      last: index + 1 === totalSteps,
       ...step.props
     });
   });
+  const {
+    getContainerProps,
+    getItemProps
+  } = useRovingTabIndex({
+    orientation,
+    isRtl
+  });
+  const rovingTabIndexContainerProps = getContainerProps(ref);
   const contextValue = React.useMemo(() => ({
     activeStep,
     alternativeLabel,
     connector,
     nonLinear,
-    orientation
-  }), [activeStep, alternativeLabel, connector, nonLinear, orientation]);
-  return /*#__PURE__*/_jsx(StepperContext.Provider, {
+    orientation,
+    totalSteps,
+    getRovingTabIndexProps: getItemProps,
+    isTabList
+  }), [activeStep, alternativeLabel, connector, nonLinear, orientation, totalSteps, getItemProps, isTabList]);
+  return /*#__PURE__*/_jsx(StepperContextProvider, {
     value: contextValue,
     children: /*#__PURE__*/_jsx(StepperRoot, {
       as: component,
       ownerState: ownerState,
       className: clsx(classes.root, className),
       ref: ref,
+      ...(isTabList && {
+        role: 'tablist',
+        'aria-orientation': orientation,
+        ...rovingTabIndexContainerProps
+      }),
       ...other,
       children: steps
     })

package/Stepper/StepperContext.d.mts

@@ -5,6 +5,12 @@ export interface StepperContextType {
   connector: React.ReactNode;
   nonLinear: boolean;
   orientation: 'horizontal' | 'vertical';
+  totalSteps: number;
+  getRovingTabIndexProps: (index: number, ref?: React.Ref<HTMLElement>) => {
+    ref: (element: HTMLElement | null) => void;
+    tabIndex: number;
+  };
+  isTabList: boolean;
 }
 /**
  * Provides information about the current step in Stepper.
@@ -15,4 +21,5 @@ declare const StepperContext: React.Context<{} | StepperContextType>;
  * has been defined in the component tree.
  */
 export declare function useStepperContext(): StepperContextType | {};
+export declare const StepperContextProvider: React.Provider<{} | StepperContextType>;
 export default StepperContext;

package/Stepper/StepperContext.d.ts

@@ -5,6 +5,12 @@ export interface StepperContextType {
   connector: React.ReactNode;
   nonLinear: boolean;
   orientation: 'horizontal' | 'vertical';
+  totalSteps: number;
+  getRovingTabIndexProps: (index: number, ref?: React.Ref<HTMLElement>) => {
+    ref: (element: HTMLElement | null) => void;
+    tabIndex: number;
+  };
+  isTabList: boolean;
 }
 /**
  * Provides information about the current step in Stepper.
@@ -15,4 +21,5 @@ declare const StepperContext: React.Context<{} | StepperContextType>;
  * has been defined in the component tree.
  */
 export declare function useStepperContext(): StepperContextType | {};
+export declare const StepperContextProvider: React.Provider<{} | StepperContextType>;
 export default StepperContext;

package/Stepper/StepperContext.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StepperContextProvider = void 0;
 exports.useStepperContext = useStepperContext;
 var React = _interopRequireWildcard(require("react"));
 /**
@@ -23,4 +23,5 @@ if (process.env.NODE_ENV !== 'production') {
 function useStepperContext() {
   return React.useContext(StepperContext);
 }
+const StepperContextProvider = exports.StepperContextProvider = StepperContext.Provider;
 var _default = exports.default = StepperContext;

package/Stepper/StepperContext.mjs

@@ -16,4 +16,5 @@ if (process.env.NODE_ENV !== 'production') {
 export function useStepperContext() {
   return React.useContext(StepperContext);
 }
+export const StepperContextProvider = StepperContext.Provider;
 export default StepperContext;

package/Stepper/index.d.mts

@@ -2,5 +2,4 @@ export { default } from "./Stepper.mjs";
 export * from "./Stepper.mjs";
 export { default as stepperClasses } from "./stepperClasses.mjs";
 export * from "./stepperClasses.mjs";
-export { default as StepperContext } from "./StepperContext.mjs";
 export * from "./StepperContext.mjs";

package/Stepper/index.d.ts

@@ -2,5 +2,4 @@ export { default } from "./Stepper.js";
 export * from "./Stepper.js";
 export { default as stepperClasses } from "./stepperClasses.js";
 export * from "./stepperClasses.js";
-export { default as StepperContext } from "./StepperContext.js";
 export * from "./StepperContext.js";

package/Tab/Tab.js

@@ -257,7 +257,6 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     onClick: handleClick,
     onFocus: handleFocus,
     ownerState: ownerState,
-    tabIndex: selected ? 0 : -1,
     ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [icon, label]

package/Tab/Tab.mjs

@@ -250,7 +250,6 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(inProps, ref) {
     onClick: handleClick,
     onFocus: handleFocus,
     ownerState: ownerState,
-    tabIndex: selected ? 0 : -1,
     ...other,
     children: [iconPosition === 'top' || iconPosition === 'start' ? /*#__PURE__*/_jsxs(React.Fragment, {
       children: [icon, label]