@mui/material 9.0.0-alpha.2 → 9.0.0-alpha.4

package/SpeedDialAction/SpeedDialAction.js

@@ -21,7 +21,6 @@ var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _speedDialActionClasses = _interopRequireWildcard(require("./speedDialActionClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
-var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -147,18 +146,15 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const {
     className,
     delay = 0,
-    FabProps = {},
     icon,
     id,
     open,
-    TooltipClasses,
-    tooltipOpen: tooltipOpenProp = false,
-    tooltipPlacement = 'left',
-    tooltipTitle,
     slots = {},
     slotProps = {},
     ...other
   } = props;
+  const resolvedTooltipSlotProps = typeof slotProps.tooltip === 'function' ? slotProps.tooltip(props) : slotProps.tooltip ?? {};
+  const tooltipPlacement = resolvedTooltipSlotProps.placement ?? 'left';
   const ownerState = {
     ...props,
     tooltipPlacement
@@ -166,18 +162,9 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      fab: FabProps,
-      ...slotProps,
-      tooltip: (0, _utils.mergeSlotProps)(typeof slotProps.tooltip === 'function' ? slotProps.tooltip(ownerState) : slotProps.tooltip, {
-        title: tooltipTitle,
-        open: tooltipOpenProp,
-        placement: tooltipPlacement,
-        classes: TooltipClasses
-      })
-    }
+    slotProps
   };
-  const [tooltipOpen, setTooltipOpen] = React.useState(externalForwardedProps.slotProps.tooltip?.open);
+  const [tooltipOpen, setTooltipOpen] = React.useState(resolvedTooltipSlotProps.open ?? false);
   const handleTooltipClose = () => {
     setTooltipOpen(false);
   };
@@ -288,12 +275,6 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
    * @default 0
    */
   delay: _propTypes.default.number,
-  /**
-   * Props applied to the [`Fab`](https://mui.com/material-ui/api/fab/) component.
-   * @default {}
-   * @deprecated Use `slotProps.fab` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  FabProps: _propTypes.default.object,
   /**
    * The icon to display in the SpeedDial Fab.
    */
@@ -330,28 +311,6 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
-  /**
-   * `classes` prop applied to the [`Tooltip`](https://mui.com/material-ui/api/tooltip/) element.
-   * @deprecated Use `slotProps.tooltip.classes` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  TooltipClasses: _propTypes.default.object,
-  /**
-   * Make the tooltip always visible when the SpeedDial is open.
-   * @default false
-   * @deprecated Use `slotProps.tooltip.open` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  tooltipOpen: _propTypes.default.bool,
-  /**
-   * Placement of the tooltip.
-   * @default 'left'
-   * @deprecated Use `slotProps.tooltip.placement` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  tooltipPlacement: _propTypes.default.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
-  /**
-   * Label to display in the tooltip.
-   * @deprecated Use `slotProps.tooltip.title` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  tooltipTitle: _propTypes.default.node
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
 } : void 0;
 var _default = exports.default = SpeedDialAction;

package/SpeedDialAction/SpeedDialAction.mjs

@@ -14,7 +14,6 @@ import Tooltip from "../Tooltip/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import speedDialActionClasses, { getSpeedDialActionUtilityClass } from "./speedDialActionClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
-import { mergeSlotProps } from "../utils/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -140,18 +139,15 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const {
     className,
     delay = 0,
-    FabProps = {},
     icon,
     id,
     open,
-    TooltipClasses,
-    tooltipOpen: tooltipOpenProp = false,
-    tooltipPlacement = 'left',
-    tooltipTitle,
     slots = {},
     slotProps = {},
     ...other
   } = props;
+  const resolvedTooltipSlotProps = typeof slotProps.tooltip === 'function' ? slotProps.tooltip(props) : slotProps.tooltip ?? {};
+  const tooltipPlacement = resolvedTooltipSlotProps.placement ?? 'left';
   const ownerState = {
     ...props,
     tooltipPlacement
@@ -159,18 +155,9 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      fab: FabProps,
-      ...slotProps,
-      tooltip: mergeSlotProps(typeof slotProps.tooltip === 'function' ? slotProps.tooltip(ownerState) : slotProps.tooltip, {
-        title: tooltipTitle,
-        open: tooltipOpenProp,
-        placement: tooltipPlacement,
-        classes: TooltipClasses
-      })
-    }
+    slotProps
   };
-  const [tooltipOpen, setTooltipOpen] = React.useState(externalForwardedProps.slotProps.tooltip?.open);
+  const [tooltipOpen, setTooltipOpen] = React.useState(resolvedTooltipSlotProps.open ?? false);
   const handleTooltipClose = () => {
     setTooltipOpen(false);
   };
@@ -281,12 +268,6 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
    * @default 0
    */
   delay: PropTypes.number,
-  /**
-   * Props applied to the [`Fab`](https://mui.com/material-ui/api/fab/) component.
-   * @default {}
-   * @deprecated Use `slotProps.fab` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  FabProps: PropTypes.object,
   /**
    * The icon to display in the SpeedDial Fab.
    */
@@ -323,28 +304,6 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  /**
-   * `classes` prop applied to the [`Tooltip`](https://mui.com/material-ui/api/tooltip/) element.
-   * @deprecated Use `slotProps.tooltip.classes` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  TooltipClasses: PropTypes.object,
-  /**
-   * Make the tooltip always visible when the SpeedDial is open.
-   * @default false
-   * @deprecated Use `slotProps.tooltip.open` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  tooltipOpen: PropTypes.bool,
-  /**
-   * Placement of the tooltip.
-   * @default 'left'
-   * @deprecated Use `slotProps.tooltip.placement` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  tooltipPlacement: PropTypes.oneOf(['auto-end', 'auto-start', 'auto', 'bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
-  /**
-   * Label to display in the tooltip.
-   * @deprecated Use `slotProps.tooltip.title` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  tooltipTitle: PropTypes.node
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
 export default SpeedDialAction;

package/Step/Step.js

@@ -12,7 +12,7 @@ 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 _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
+var _StepperContext = require("../Stepper/StepperContext");
 var _StepContext = _interopRequireDefault(require("./StepContext"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -30,7 +30,7 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _stepClasses.getStepUtilityClass, classes);
 };
-const StepRoot = (0, _zeroStyled.styled)('div', {
+const StepRoot = (0, _zeroStyled.styled)('li', {
   name: 'MuiStep',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -67,7 +67,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     active: activeProp,
     children,
     className,
-    component = 'div',
+    component = 'li',
     completed: completedProp,
     disabled: disabledProp,
     expanded = false,
@@ -80,8 +80,9 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     connector,
     alternativeLabel,
     orientation,
-    nonLinear
-  } = React.useContext(_StepperContext.default);
+    nonLinear,
+    isTabList
+  } = (0, _StepperContext.useStepperContext)();
   let [active = false, completed = false, disabled = false] = [activeProp, completedProp, disabledProp];
   if (activeStep === index) {
     active = activeProp !== undefined ? activeProp : true;
@@ -115,6 +116,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     className: (0, _clsx.default)(classes.root, className),
     ref: ref,
     ownerState: ownerState,
+    role: isTabList ? 'presentation' : undefined,
     ...other,
     children: [connector && alternativeLabel && index !== 0 ? connector : null, children]
   });

package/Step/Step.mjs

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import composeClasses from '@mui/utils/composeClasses';
-import StepperContext from "../Stepper/StepperContext.mjs";
+import { useStepperContext } from "../Stepper/StepperContext.mjs";
 import StepContext from "./StepContext.mjs";
 import { styled } from "../zero-styled/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
@@ -23,7 +23,7 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getStepUtilityClass, classes);
 };
-const StepRoot = styled('div', {
+const StepRoot = styled('li', {
   name: 'MuiStep',
   slot: 'Root',
   overridesResolver: (props, styles) => {
@@ -60,7 +60,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     active: activeProp,
     children,
     className,
-    component = 'div',
+    component = 'li',
     completed: completedProp,
     disabled: disabledProp,
     expanded = false,
@@ -73,8 +73,9 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     connector,
     alternativeLabel,
     orientation,
-    nonLinear
-  } = React.useContext(StepperContext);
+    nonLinear,
+    isTabList
+  } = useStepperContext();
   let [active = false, completed = false, disabled = false] = [activeProp, completedProp, disabledProp];
   if (activeStep === index) {
     active = activeProp !== undefined ? activeProp : true;
@@ -108,6 +109,7 @@ const Step = /*#__PURE__*/React.forwardRef(function Step(inProps, ref) {
     className: clsx(classes.root, className),
     ref: ref,
     ownerState: ownerState,
+    role: isTabList ? 'presentation' : undefined,
     ...other,
     children: [connector && alternativeLabel && index !== 0 ? connector : null, children]
   });

package/StepButton/StepButton.js

@@ -16,7 +16,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _StepLabel = _interopRequireDefault(require("../StepLabel"));
 var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
-var _StepperContext = _interopRequireDefault(require("../Stepper/StepperContext"));
+var _StepperContext = require("../Stepper/StepperContext");
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _stepButtonClasses = _interopRequireWildcard(require("./stepButtonClasses"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -75,11 +75,14 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
   } = props;
   const {
     disabled,
-    active
+    active,
+    index
   } = React.useContext(_StepContext.default);
   const {
-    orientation
-  } = React.useContext(_StepperContext.default);
+    orientation,
+    totalSteps,
+    getRovingTabIndexProps
+  } = (0, _StepperContext.useStepperContext)();
   const ownerState = {
     ...props,
     orientation
@@ -93,6 +96,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__*/(0, _jsxRuntime.jsx)(StepButtonRoot, {
     focusRipple: true,
     disabled: disabled,
@@ -100,9 +107,12 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
       className: classes.touchRipple
     },
     className: (0, _clsx.default)(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/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/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");
@@ -132,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";
@@ -125,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
     })