@mui/material 9.0.0-beta.0 → 9.0.0-beta.1

package/MenuList/MenuListContext.js

@@ -0,0 +1,25 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuListContext = void 0;
+exports.useMenuListContext = useMenuListContext;
+var React = _interopRequireWildcard(require("react"));
+/**
+ * @ignore - internal component.
+ */
+
+const MenuListContext = exports.MenuListContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  MenuListContext.displayName = 'MenuListContext';
+}
+function useMenuListContext() {
+  const context = React.useContext(MenuListContext);
+  if (context === undefined) {
+    throw new Error('MUI: MenuListContext is missing. MenuItems must be placed within Menu or MenuList.');
+  }
+  return context;
+}

package/MenuList/MenuListContext.mjs

@@ -0,0 +1,19 @@
+'use client';
+
+import * as React from 'react';
+
+/**
+ * @ignore - internal component.
+ */
+
+export const MenuListContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== 'production') {
+  MenuListContext.displayName = 'MenuListContext';
+}
+export function useMenuListContext() {
+  const context = React.useContext(MenuListContext);
+  if (context === undefined) {
+    throw new Error('MUI: MenuListContext is missing. MenuItems must be placed within Menu or MenuList.');
+  }
+  return context;
+}

package/PaginationItem/PaginationItem.d.mts

@@ -71,6 +71,11 @@ export interface PaginationItemOwnProps extends PaginationItemSlotsAndSlotProps
    * @default false
    */
   disabled?: boolean | undefined;
+  /**
+   * Whether the custom component should render a native `<button>` element when
+   * rendering a React component with the `component` or `slots` prop.
+   */
+  nativeButton?: boolean | undefined;
   /**
    * The current page number.
    */

package/PaginationItem/PaginationItem.d.ts

@@ -71,6 +71,11 @@ export interface PaginationItemOwnProps extends PaginationItemSlotsAndSlotProps
    * @default false
    */
   disabled?: boolean | undefined;
+  /**
+   * Whether the custom component should render a native `<button>` element when
+   * rendering a React component with the `component` or `slots` prop.
+   */
+  nativeButton?: boolean | undefined;
   /**
    * The current page number.
    */

package/PaginationItem/PaginationItem.js

@@ -355,6 +355,7 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     ref: ref,
     ownerState: ownerState,
     component: component,
+    internalNativeButton: true,
     disabled: disabled,
     className: (0, _clsx.default)(classes.root, className),
     ...other,
@@ -399,6 +400,11 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * @default false
    */
   disabled: _propTypes.default.bool,
+  /**
+   * Whether the custom component should render a native `<button>` element when
+   * rendering a React component with the `component` or `slots` prop.
+   */
+  nativeButton: _propTypes.default.bool,
   /**
    * The current page number.
    */

package/PaginationItem/PaginationItem.mjs

@@ -348,6 +348,7 @@ const PaginationItem = /*#__PURE__*/React.forwardRef(function PaginationItem(inP
     ref: ref,
     ownerState: ownerState,
     component: component,
+    internalNativeButton: true,
     disabled: disabled,
     className: clsx(classes.root, className),
     ...other,
@@ -392,6 +393,11 @@ process.env.NODE_ENV !== "production" ? PaginationItem.propTypes /* remove-propt
    * @default false
    */
   disabled: PropTypes.bool,
+  /**
+   * Whether the custom component should render a native `<button>` element when
+   * rendering a React component with the `component` or `slots` prop.
+   */
+  nativeButton: PropTypes.bool,
   /**
    * The current page number.
    */

package/PigmentGrid/PigmentGrid.d.mts

@@ -3,7 +3,7 @@ import { OverridableComponent, OverrideProps } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { Breakpoint, Theme } from "../styles/index.mjs";
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridDirection = 'row' | 'row-reverse';
 export type GridSpacing = number | string;
 export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type GridSize = 'auto' | 'grow' | number;

package/PigmentGrid/PigmentGrid.d.ts

@@ -3,7 +3,7 @@ import { OverridableComponent, OverrideProps } from '@mui/types';
 import { SxProps } from '@mui/system';
 import { Breakpoint, Theme } from "../styles/index.js";
 type ResponsiveStyleValue<T> = T | Array<T | null> | { [key in Breakpoint]?: T | null };
-export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+export type GridDirection = 'row' | 'row-reverse';
 export type GridSpacing = number | string;
 export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type GridSize = 'auto' | 'grow' | number;

package/PigmentGrid/PigmentGrid.js

@@ -99,7 +99,7 @@ process.env.NODE_ENV !== "production" ? PigmentGrid.propTypes /* remove-proptype
    * It is applied for all screen sizes.
    * @default 'row'
    */
-  direction: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['column', 'column-reverse', 'row', 'row-reverse']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])), _propTypes.default.object]),
+  direction: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['row', 'row-reverse']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['row', 'row-reverse'])), _propTypes.default.object]),
   /**
    * Defines the offset of the grid.
    */

package/PigmentGrid/PigmentGrid.mjs

@@ -91,7 +91,7 @@ process.env.NODE_ENV !== "production" ? PigmentGrid.propTypes /* remove-proptype
    * It is applied for all screen sizes.
    * @default 'row'
    */
-  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse']), PropTypes.arrayOf(PropTypes.oneOf(['column', 'column-reverse', 'row', 'row-reverse'])), PropTypes.object]),
+  direction: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['row', 'row-reverse']), PropTypes.arrayOf(PropTypes.oneOf(['row', 'row-reverse'])), PropTypes.object]),
   /**
    * Defines the offset of the grid.
    */

package/Popover/Popover.d.mts

@@ -52,7 +52,7 @@ export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps<PopoverSlots, {
    */
   transition: SlotComponentProps<
   // use SlotComponentProps because transition slot does not support `component` and `sx` prop
-  React.ElementType, TransitionProps & PopoverTransitionSlotPropsOverrides, PopoverOwnerState>;
+  React.ElementType<TransitionProps>, TransitionProps & PopoverTransitionSlotPropsOverrides, PopoverOwnerState>;
   /**
    * Props forwarded to the backdrop slot.
    * By default, the available props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.

package/Popover/Popover.d.ts

@@ -52,7 +52,7 @@ export type PopoverSlotsAndSlotProps = CreateSlotsAndSlotProps<PopoverSlots, {
    */
   transition: SlotComponentProps<
   // use SlotComponentProps because transition slot does not support `component` and `sx` prop
-  React.ElementType, TransitionProps & PopoverTransitionSlotPropsOverrides, PopoverOwnerState>;
+  React.ElementType<TransitionProps>, TransitionProps & PopoverTransitionSlotPropsOverrides, PopoverOwnerState>;
   /**
    * Props forwarded to the backdrop slot.
    * By default, the available props are based on the [Backdrop](https://mui.com/material-ui/api/backdrop/#props) component.

package/Popover/Popover.js

@@ -29,7 +29,7 @@ var _Modal = _interopRequireDefault(require("../Modal"));
 var _Paper = _interopRequireDefault(require("../Paper"));
 var _popoverClasses = require("./popoverClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
-var _utils = require("../utils");
+var _mergeSlotProps = _interopRequireDefault(require("../utils/mergeSlotProps"));
 var _jsxRuntime = require("react/jsx-runtime");
 function getOffsetTop(rect, vertical) {
   let offset = 0;
@@ -106,6 +106,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     children,
     className,
     container: containerProp,
+    disableAutoFocus = false,
     elevation = 8,
     marginThreshold = 16,
     open,
@@ -199,11 +200,11 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const widthThreshold = containerWindow.innerWidth - marginThreshold;
 
     // Check if the vertical axis needs shifting
-    if (marginThreshold !== null && top < marginThreshold) {
+    if (marginThreshold != null && top < marginThreshold) {
       const diff = top - marginThreshold;
       top -= diff;
       elemTransformOrigin.vertical += diff;
-    } else if (marginThreshold !== null && bottom > heightThreshold) {
+    } else if (marginThreshold != null && bottom > heightThreshold) {
       const diff = bottom - heightThreshold;
       top -= diff;
       elemTransformOrigin.vertical += diff;
@@ -215,7 +216,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     // Check if the horizontal axis needs shifting
-    if (marginThreshold !== null && left < marginThreshold) {
+    if (marginThreshold != null && left < marginThreshold) {
       const diff = left - marginThreshold;
       left -= diff;
       elemTransformOrigin.horizontal += diff;
@@ -237,10 +238,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       return;
     }
     const positioning = getPositioningStyle(element);
-    if (positioning.top !== null) {
+    if (positioning.top != null) {
       element.style.setProperty('top', positioning.top);
     }
-    if (positioning.left !== null) {
+    if (positioning.left != null) {
       element.style.left = positioning.left;
     }
     element.style.transformOrigin = positioning.transformOrigin;
@@ -332,7 +333,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
         backdrop: slots.backdrop
       },
       slotProps: {
-        backdrop: (0, _utils.mergeSlotProps)(typeof slotProps.backdrop === 'function' ? slotProps.backdrop(ownerState) : slotProps.backdrop, {
+        backdrop: (0, _mergeSlotProps.default)(typeof slotProps.backdrop === 'function' ? slotProps.backdrop(ownerState) : slotProps.backdrop, {
           invisible: true
         })
       },
@@ -361,6 +362,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     ...(!(0, _isHostComponent.default)(RootSlot) && {
       slots: rootSlotsProp,
       slotProps: rootSlotPropsProp,
+      disableAutoFocus,
       disableScrollLock
     }),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
@@ -455,6 +457,16 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * so it's simply `document.body` most of the time.
    */
   container: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_HTMLElementType.default, _propTypes.default.func]),
+  /**
+   * If `true`, the modal will not automatically shift focus to itself when it opens, and
+   * replace it to the last focused element when it closes.
+   * This also works correctly with any modal children that have the `disableAutoFocus` prop.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
+   */
+  disableAutoFocus: _propTypes.default.bool,
   /**
    * Disable the scroll lock behavior.
    * @default false

package/Popover/Popover.mjs

@@ -20,7 +20,7 @@ import Modal from "../Modal/index.mjs";
 import PaperBase from "../Paper/index.mjs";
 import { getPopoverUtilityClass } from "./popoverClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
-import { mergeSlotProps } from "../utils/index.mjs";
+import mergeSlotProps from "../utils/mergeSlotProps.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function getOffsetTop(rect, vertical) {
   let offset = 0;
@@ -97,6 +97,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     children,
     className,
     container: containerProp,
+    disableAutoFocus = false,
     elevation = 8,
     marginThreshold = 16,
     open,
@@ -190,11 +191,11 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     const widthThreshold = containerWindow.innerWidth - marginThreshold;
 
     // Check if the vertical axis needs shifting
-    if (marginThreshold !== null && top < marginThreshold) {
+    if (marginThreshold != null && top < marginThreshold) {
       const diff = top - marginThreshold;
       top -= diff;
       elemTransformOrigin.vertical += diff;
-    } else if (marginThreshold !== null && bottom > heightThreshold) {
+    } else if (marginThreshold != null && bottom > heightThreshold) {
       const diff = bottom - heightThreshold;
       top -= diff;
       elemTransformOrigin.vertical += diff;
@@ -206,7 +207,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     }
 
     // Check if the horizontal axis needs shifting
-    if (marginThreshold !== null && left < marginThreshold) {
+    if (marginThreshold != null && left < marginThreshold) {
       const diff = left - marginThreshold;
       left -= diff;
       elemTransformOrigin.horizontal += diff;
@@ -228,10 +229,10 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
       return;
     }
     const positioning = getPositioningStyle(element);
-    if (positioning.top !== null) {
+    if (positioning.top != null) {
       element.style.setProperty('top', positioning.top);
     }
-    if (positioning.left !== null) {
+    if (positioning.left != null) {
       element.style.left = positioning.left;
     }
     element.style.transformOrigin = positioning.transformOrigin;
@@ -352,6 +353,7 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(inProps, ref) {
     ...(!isHostComponent(RootSlot) && {
       slots: rootSlotsProp,
       slotProps: rootSlotPropsProp,
+      disableAutoFocus,
       disableScrollLock
     }),
     children: /*#__PURE__*/_jsx(TransitionSlot, {
@@ -446,6 +448,16 @@ process.env.NODE_ENV !== "production" ? Popover.propTypes /* remove-proptypes */
    * so it's simply `document.body` most of the time.
    */
   container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([HTMLElementType, PropTypes.func]),
+  /**
+   * If `true`, the modal will not automatically shift focus to itself when it opens, and
+   * replace it to the last focused element when it closes.
+   * This also works correctly with any modal children that have the `disableAutoFocus` prop.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   * @default false
+   */
+  disableAutoFocus: PropTypes.bool,
   /**
    * Disable the scroll lock behavior.
    * @default false

package/Snackbar/Snackbar.d.mts

@@ -54,7 +54,7 @@ export type SnackbarSlotsAndSlotProps = CreateSlotsAndSlotProps<SnackbarSlots, {
    * Props applied to the transition element.
    * By default, the element is based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType, TransitionProps & SnackbarTransitionSlotPropsOverrides, SnackbarOwnerState>;
+  transition: SlotComponentProps<React.ElementType<TransitionProps>, TransitionProps & SnackbarTransitionSlotPropsOverrides, SnackbarOwnerState>;
 }>;
 export interface SnackbarOrigin {
   vertical: 'top' | 'bottom';

package/Snackbar/Snackbar.d.ts

@@ -54,7 +54,7 @@ export type SnackbarSlotsAndSlotProps = CreateSlotsAndSlotProps<SnackbarSlots, {
    * Props applied to the transition element.
    * By default, the element is based on the [Grow](https://mui.com/material-ui/api/grow/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType, TransitionProps & SnackbarTransitionSlotPropsOverrides, SnackbarOwnerState>;
+  transition: SlotComponentProps<React.ElementType<TransitionProps>, TransitionProps & SnackbarTransitionSlotPropsOverrides, SnackbarOwnerState>;
 }>;
 export interface SnackbarOrigin {
   vertical: 'top' | 'bottom';

package/SpeedDial/SpeedDial.d.mts

@@ -31,7 +31,7 @@ export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps<SpeedDialSlots,
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Zoom](https://mui.com/material-ui/api/zoom/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType, TransitionProps, SpeedDialOwnerState>;
+  transition: SlotComponentProps<React.ElementType<TransitionProps>, TransitionProps, SpeedDialOwnerState>;
 }>;
 export interface SpeedDialProps extends Omit<StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'>, 'slots' | 'slotProps'>, SpeedDialSlotsAndSlotProps {
   /**

package/SpeedDial/SpeedDial.d.ts

@@ -31,7 +31,7 @@ export type SpeedDialSlotsAndSlotProps = CreateSlotsAndSlotProps<SpeedDialSlots,
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Zoom](https://mui.com/material-ui/api/zoom/#props) component.
    */
-  transition: SlotComponentProps<React.ElementType, TransitionProps, SpeedDialOwnerState>;
+  transition: SlotComponentProps<React.ElementType<TransitionProps>, TransitionProps, SpeedDialOwnerState>;
 }>;
 export interface SpeedDialProps extends Omit<StandardProps<React.HTMLAttributes<HTMLDivElement>, 'children'>, 'slots' | 'slotProps'>, SpeedDialSlotsAndSlotProps {
   /**

package/StepButton/StepButton.js

@@ -16,6 +16,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _StepLabel = _interopRequireDefault(require("../StepLabel"));
 var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
+var _useRovingTabIndex = require("../utils/useRovingTabIndex");
 var _StepperContext = require("../Stepper/StepperContext");
 var _StepContext = _interopRequireDefault(require("../Step/StepContext"));
 var _stepButtonClasses = _interopRequireWildcard(require("./stepButtonClasses"));
@@ -61,6 +62,26 @@ const StepButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     }
   }]
 });
+const RovingStepButton = /*#__PURE__*/React.forwardRef(function RovingStepButton(props, ref) {
+  // eslint-disable-next-line react/prop-types
+  const {
+    children,
+    disabled,
+    index,
+    ...other
+  } = props;
+  const rovingItemProps = (0, _useRovingTabIndex.useRovingTabIndexItem)({
+    id: index,
+    ref,
+    disabled
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StepButtonRoot, {
+    disabled: disabled,
+    ...rovingItemProps,
+    ...other,
+    children: children
+  });
+});
 const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
@@ -81,7 +102,7 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
   const {
     orientation,
     totalSteps,
-    getRovingTabIndexProps
+    isTabList
   } = (0, _StepperContext.useStepperContext)();
   const ownerState = {
     ...props,
@@ -96,24 +117,33 @@ 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, {
+  const stepButtonProps = {
+    internalNativeButton: true,
     focusRipple: true,
-    disabled: disabled,
+    disabled,
     TouchRippleProps: {
       className: classes.touchRipple
     },
     className: (0, _clsx.default)(classes.root, className),
-    ownerState: ownerState,
-    "aria-selected": active,
-    "aria-posinset": index + 1,
-    "aria-setsize": totalSteps,
-    role: "tab",
-    ...rovingTabIndexItemProps,
-    ...other,
+    ownerState,
+    'aria-selected': active,
+    'aria-posinset': index + 1,
+    'aria-setsize': totalSteps,
+    role: 'tab',
+    ...other
+  };
+  if (isTabList) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(RovingStepButton, {
+      ...stepButtonProps,
+      index: index,
+      ref: ref,
+      children: child
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StepButtonRoot, {
+    ref: ref,
+    tabIndex: active ? 0 : -1,
+    ...stepButtonProps,
     children: child
   });
 });

package/StepButton/StepButton.mjs

@@ -9,6 +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 { useRovingTabIndexItem } from "../utils/useRovingTabIndex.mjs";
 import { useStepperContext } from "../Stepper/StepperContext.mjs";
 import StepContext from "../Step/StepContext.mjs";
 import stepButtonClasses, { getStepButtonUtilityClass } from "./stepButtonClasses.mjs";
@@ -54,6 +55,26 @@ const StepButtonRoot = styled(ButtonBase, {
     }
   }]
 });
+const RovingStepButton = /*#__PURE__*/React.forwardRef(function RovingStepButton(props, ref) {
+  // eslint-disable-next-line react/prop-types
+  const {
+    children,
+    disabled,
+    index,
+    ...other
+  } = props;
+  const rovingItemProps = useRovingTabIndexItem({
+    id: index,
+    ref,
+    disabled
+  });
+  return /*#__PURE__*/_jsx(StepButtonRoot, {
+    disabled: disabled,
+    ...rovingItemProps,
+    ...other,
+    children: children
+  });
+});
 const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,
@@ -74,7 +95,7 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
   const {
     orientation,
     totalSteps,
-    getRovingTabIndexProps
+    isTabList
   } = useStepperContext();
   const ownerState = {
     ...props,
@@ -89,24 +110,33 @@ 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, {
+  const stepButtonProps = {
+    internalNativeButton: true,
     focusRipple: true,
-    disabled: disabled,
+    disabled,
     TouchRippleProps: {
       className: classes.touchRipple
     },
     className: clsx(classes.root, className),
-    ownerState: ownerState,
-    "aria-selected": active,
-    "aria-posinset": index + 1,
-    "aria-setsize": totalSteps,
-    role: "tab",
-    ...rovingTabIndexItemProps,
-    ...other,
+    ownerState,
+    'aria-selected': active,
+    'aria-posinset': index + 1,
+    'aria-setsize': totalSteps,
+    role: 'tab',
+    ...other
+  };
+  if (isTabList) {
+    return /*#__PURE__*/_jsx(RovingStepButton, {
+      ...stepButtonProps,
+      index: index,
+      ref: ref,
+      children: child
+    });
+  }
+  return /*#__PURE__*/_jsx(StepButtonRoot, {
+    ref: ref,
+    tabIndex: active ? 0 : -1,
+    ...stepButtonProps,
     children: child
   });
 });

package/StepContent/StepContent.d.mts

@@ -21,7 +21,7 @@ export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<StepContentSl
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
    */
-  transition: SlotComponentProps<React.ElementType, CollapseProps, StepContentOwnerState>;
+  transition: SlotComponentProps<React.ElementType<CollapseProps>, CollapseProps, StepContentOwnerState>;
 }>;
 export interface StepContentOwnerState extends StepContentProps {}
 export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, StepContentSlotsAndSlotProps {

package/StepContent/StepContent.d.ts

@@ -21,7 +21,7 @@ export type StepContentSlotsAndSlotProps = CreateSlotsAndSlotProps<StepContentSl
    * Props forwarded to the transition slot.
    * By default, the available props are based on the [Collapse](https://mui.com/material-ui/api/collapse/#props) component
    */
-  transition: SlotComponentProps<React.ElementType, CollapseProps, StepContentOwnerState>;
+  transition: SlotComponentProps<React.ElementType<CollapseProps>, CollapseProps, StepContentOwnerState>;
 }>;
 export interface StepContentOwnerState extends StepContentProps {}
 export interface StepContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>>, StepContentSlotsAndSlotProps {