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

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]

package/TablePagination/TablePagination.d.mts

@@ -162,7 +162,7 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    *
    * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
    * @default function defaultLabelDisplayedRows({ from, to, count }) {
-   *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+   *   return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
    * }
    */
   labelDisplayedRows?: ((paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode) | undefined;

package/TablePagination/TablePagination.d.ts

@@ -162,7 +162,7 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
    *
    * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
    * @default function defaultLabelDisplayedRows({ from, to, count }) {
-   *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+   *   return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
    * }
    */
   labelDisplayedRows?: ((paginationInfo: LabelDisplayedRowsArgs) => React.ReactNode) | undefined;

package/TablePagination/TablePagination.js

@@ -26,8 +26,10 @@ var _TablePaginationActions = _interopRequireDefault(require("../TablePagination
 var _useId = _interopRequireDefault(require("../utils/useId"));
 var _tablePaginationClasses = _interopRequireWildcard(require("./tablePaginationClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _buildFormatNumber = _interopRequireDefault(require("../locale/utils/buildFormatNumber"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _InputBase;
+const formatNumber = (0, _buildFormatNumber.default)('en-US');
 const TablePaginationRoot = (0, _zeroStyled.styled)(_TableCell.default, {
   name: 'MuiTablePagination',
   slot: 'Root'
@@ -121,7 +123,7 @@ function defaultLabelDisplayedRows({
   to,
   count
 }) {
-  return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+  return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
 }
 function defaultGetAriaLabel(type) {
   return `Go to ${type} page`;
@@ -369,7 +371,7 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    *
    * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
    * @default function defaultLabelDisplayedRows({ from, to, count }) {
-   *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+   *   return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
    * }
    */
   labelDisplayedRows: _propTypes.default.func,

package/TablePagination/TablePagination.mjs

@@ -19,8 +19,10 @@ import TablePaginationActions from "../TablePaginationActions/index.mjs";
 import useId from "../utils/useId.mjs";
 import tablePaginationClasses, { getTablePaginationUtilityClass } from "./tablePaginationClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import buildFormatNumber from "../locale/utils/buildFormatNumber.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
+const formatNumber = buildFormatNumber('en-US');
 const TablePaginationRoot = styled(TableCell, {
   name: 'MuiTablePagination',
   slot: 'Root'
@@ -114,7 +116,7 @@ function defaultLabelDisplayedRows({
   to,
   count
 }) {
-  return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+  return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
 }
 function defaultGetAriaLabel(type) {
   return `Go to ${type} page`;
@@ -362,7 +364,7 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
    *
    * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
    * @default function defaultLabelDisplayedRows({ from, to, count }) {
-   *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+   *   return `${formatNumber(from)}–${formatNumber(to)} of ${count !== -1 ? formatNumber(count) : `more than ${formatNumber(to)}`}`;
    * }
    */
   labelDisplayedRows: PropTypes.func,

package/Tabs/Tabs.d.mts

@@ -3,7 +3,7 @@ import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.mjs";
 import { Theme } from "../styles/index.mjs";
-import TabScrollButton, { TabScrollButtonProps } from "../TabScrollButton/index.mjs";
+import TabScrollButton from "../TabScrollButton/index.mjs";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.mjs";
 import { TabsClasses } from "./tabsClasses.mjs";
 import SvgIcon from "../SvgIcon/index.mjs";
@@ -102,18 +102,7 @@ export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps<TabsSlots, {
    * By default, the available props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
    */
   endScrollButtonIcon: SlotProps<typeof SvgIcon, TabsEndScrollButtonIconSlotPropsOverrides, TabsOwnerState>;
-}> & {
-  slots?: {
-    /**
-     * @deprecated Use `slots.startScrollButtonIcon` instead.
-     */
-    StartScrollButtonIcon?: React.ElementType | undefined;
-    /**
-     * @deprecated Use `slots.endScrollButtonIcon` instead.
-     */
-    EndScrollButtonIcon?: React.ElementType | undefined;
-  } | undefined;
-};
+}>;
 export interface TabsOwnerState extends Omit<TabsProps, 'slots' | 'slotProps'> {
   vertical: boolean;
   fixed: boolean;
@@ -178,12 +167,6 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    * @default 'horizontal'
    */
   orientation?: 'horizontal' | 'vertical' | undefined;
-  /**
-   * The component used to render the scroll buttons.
-   * @deprecated use the `slots.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default TabScrollButton
-   */
-  ScrollButtonComponent?: React.ElementType | undefined;
   /**
    * Determine behavior of scroll buttons when tabs are set to scroll:
    *
@@ -201,20 +184,6 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    * changes on activation.
    */
   selectionFollowsFocus?: boolean | undefined;
-  /**
-   * Props applied to the tab indicator element.
-   * @deprecated use the `slotProps.indicator` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default  {}
-   */
-  TabIndicatorProps?: (React.HTMLAttributes<HTMLDivElement> & {
-    sx?: SxProps<Theme> | undefined;
-  }) | undefined;
-  /**
-   * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element.
-   * @deprecated use the `slotProps.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  TabScrollButtonProps?: Partial<TabScrollButtonProps> | undefined;
   /**
    * Determines the color of the `Tab`.
    * @default 'primary'

package/Tabs/Tabs.d.ts

@@ -3,7 +3,7 @@ import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
 import { Theme } from "../styles/index.js";
-import TabScrollButton, { TabScrollButtonProps } from "../TabScrollButton/index.js";
+import TabScrollButton from "../TabScrollButton/index.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
 import { TabsClasses } from "./tabsClasses.js";
 import SvgIcon from "../SvgIcon/index.js";
@@ -102,18 +102,7 @@ export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps<TabsSlots, {
    * By default, the available props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
    */
   endScrollButtonIcon: SlotProps<typeof SvgIcon, TabsEndScrollButtonIconSlotPropsOverrides, TabsOwnerState>;
-}> & {
-  slots?: {
-    /**
-     * @deprecated Use `slots.startScrollButtonIcon` instead.
-     */
-    StartScrollButtonIcon?: React.ElementType | undefined;
-    /**
-     * @deprecated Use `slots.endScrollButtonIcon` instead.
-     */
-    EndScrollButtonIcon?: React.ElementType | undefined;
-  } | undefined;
-};
+}>;
 export interface TabsOwnerState extends Omit<TabsProps, 'slots' | 'slotProps'> {
   vertical: boolean;
   fixed: boolean;
@@ -178,12 +167,6 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    * @default 'horizontal'
    */
   orientation?: 'horizontal' | 'vertical' | undefined;
-  /**
-   * The component used to render the scroll buttons.
-   * @deprecated use the `slots.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default TabScrollButton
-   */
-  ScrollButtonComponent?: React.ElementType | undefined;
   /**
    * Determine behavior of scroll buttons when tabs are set to scroll:
    *
@@ -201,20 +184,6 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    * changes on activation.
    */
   selectionFollowsFocus?: boolean | undefined;
-  /**
-   * Props applied to the tab indicator element.
-   * @deprecated use the `slotProps.indicator` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default  {}
-   */
-  TabIndicatorProps?: (React.HTMLAttributes<HTMLDivElement> & {
-    sx?: SxProps<Theme> | undefined;
-  }) | undefined;
-  /**
-   * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element.
-   * @deprecated use the `slotProps.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   * @default {}
-   */
-  TabScrollButtonProps?: Partial<TabScrollButtonProps> | undefined;
   /**
    * Determines the color of the `Tab`.
    * @default 'primary'