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

package/Tabs/Tabs.mjs

@@ -17,53 +17,11 @@ import ScrollbarSize from "./ScrollbarSize.mjs";
 import TabScrollButton from "../TabScrollButton/index.mjs";
 import useEventCallback from "../utils/useEventCallback.mjs";
 import tabsClasses, { getTabsUtilityClass } from "./tabsClasses.mjs";
-import ownerDocument from "../utils/ownerDocument.mjs";
 import ownerWindow from "../utils/ownerWindow.mjs";
-import getActiveElement from "../utils/getActiveElement.mjs";
 import isLayoutSupported from "../utils/isLayoutSupported.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { ownerDocument, useForkRef, getActiveElement, useRovingTabIndex } from "../utils/index.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const nextItem = (list, item) => {
-  if (list === item) {
-    return list.firstChild;
-  }
-  if (item && item.nextElementSibling) {
-    return item.nextElementSibling;
-  }
-  return list.firstChild;
-};
-const previousItem = (list, item) => {
-  if (list === item) {
-    return list.lastChild;
-  }
-  if (item && item.previousElementSibling) {
-    return item.previousElementSibling;
-  }
-  return list.lastChild;
-};
-const moveFocus = (list, currentFocus, traversalFunction) => {
-  let wrappedOnce = false;
-  let nextFocus = traversalFunction(list, currentFocus);
-  while (nextFocus) {
-    // Prevent infinite loop.
-    if (nextFocus === list.firstChild) {
-      if (wrappedOnce) {
-        return;
-      }
-      wrappedOnce = true;
-    }
-
-    // Same logic as useAutocomplete.js
-    const nextFocusDisabled = nextFocus.disabled || nextFocus.getAttribute('aria-disabled') === 'true';
-    if (!nextFocus.hasAttribute('tabindex') || nextFocusDisabled) {
-      // Move to the next element.
-      nextFocus = traversalFunction(list, nextFocus);
-    } else {
-      nextFocus.focus();
-      return;
-    }
-  }
-};
 const useUtilityClasses = ownerState => {
   const {
     vertical,
@@ -666,20 +624,37 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
   const indicator = /*#__PURE__*/_jsx(IndicatorSlot, {
     ...indicatorSlotProps
   });
-  let childIndex = 0;
-  const children = React.Children.map(childrenProp, child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return null;
-    }
+  const validChildren = React.Children.toArray(childrenProp).filter(React.isValidElement).map((child, index) => {
+    const childValue = child.props.value === undefined ? index : child.props.value;
     if (process.env.NODE_ENV !== 'production') {
       if (isFragment(child)) {
         console.error(["MUI: The Tabs component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
       }
     }
-    const childValue = child.props.value === undefined ? childIndex : child.props.value;
-    valueToIndex.set(childValue, childIndex);
+    valueToIndex.set(childValue, index);
+    return {
+      child,
+      index,
+      childValue
+    };
+  });
+  const focusableIndex = valueToIndex.get(value);
+  const {
+    getContainerProps,
+    getItemProps
+  } = useRovingTabIndex({
+    focusableIndex,
+    orientation,
+    isRtl
+  });
+  const rovingTabIndexContainerProps = getContainerProps();
+  const children = validChildren.map(({
+    child,
+    index,
+    childValue
+  }) => {
     const selected = childValue === value;
-    childIndex += 1;
+    const rovingTabIndexItemProps = getItemProps(index, child.ref);
     return /*#__PURE__*/React.cloneElement(child, {
       fullWidth: variant === 'fullWidth',
       indicator: selected && !mounted && indicator,
@@ -688,53 +663,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onChange,
       textColor,
       value: childValue,
-      ...(childIndex === 1 && value === false && !child.props.tabIndex ? {
-        tabIndex: 0
-      } : {})
+      ref: rovingTabIndexItemProps.ref,
+      tabIndex: child.props.tabIndex ?? rovingTabIndexItemProps.tabIndex
     });
   });
-  const handleKeyDown = event => {
-    // Check if a modifier key (Alt, Shift, Ctrl, Meta) is pressed
-    if (event.altKey || event.shiftKey || event.ctrlKey || event.metaKey) {
-      return;
-    }
-    const list = tabListRef.current;
-    const currentFocus = getActiveElement(ownerDocument(list));
-    // Keyboard navigation assumes that [role="tab"] are siblings
-    // though we might warn in the future about nested, interactive elements
-    // as a a11y violation
-    const role = currentFocus?.getAttribute('role');
-    if (role !== 'tab') {
-      return;
-    }
-    let previousItemKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
-    let nextItemKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
-    if (orientation === 'horizontal' && isRtl) {
-      // swap previousItemKey with nextItemKey
-      previousItemKey = 'ArrowRight';
-      nextItemKey = 'ArrowLeft';
-    }
-    switch (event.key) {
-      case previousItemKey:
-        event.preventDefault();
-        moveFocus(list, currentFocus, previousItem);
-        break;
-      case nextItemKey:
-        event.preventDefault();
-        moveFocus(list, currentFocus, nextItem);
-        break;
-      case 'Home':
-        event.preventDefault();
-        moveFocus(list, null, nextItem);
-        break;
-      case 'End':
-        event.preventDefault();
-        moveFocus(list, null, previousItem);
-        break;
-      default:
-        break;
-    }
-  };
   const conditionalElements = getConditionalElements();
   const [RootSlot, rootSlotProps] = useSlot('root', {
     ref,
@@ -760,8 +692,21 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       }
     }
   });
+  const mergedRef = useForkRef(rovingTabIndexContainerProps.ref, tabListRef);
+  const handleKeyDown = event => {
+    const list = tabListRef.current;
+    const currentFocus = getActiveElement(ownerDocument(list));
+    // Keyboard navigation assumes that [role="tab"] are siblings
+    // though we might warn in the future about nested, interactive elements
+    // as a a11y violation
+    const role = currentFocus?.getAttribute('role');
+    if (role !== 'tab') {
+      return;
+    }
+    rovingTabIndexContainerProps.onKeyDown(event);
+  };
   const [ListSlot, listSlotProps] = useSlot('list', {
-    ref: tabListRef,
+    ref: mergedRef,
     className: clsx(classes.list, classes.flexContainer),
     elementType: List,
     externalForwardedProps,
@@ -771,6 +716,10 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
       onKeyDown: event => {
         handleKeyDown(event);
         handlers.onKeyDown?.(event);
+      },
+      onFocus: event => {
+        rovingTabIndexContainerProps.onFocus(event);
+        handlers.onFocus?.(event);
       }
     })
   });

package/Typography/Typography.d.mts

@@ -86,6 +86,7 @@ export interface TypographyTypeMap<AdditionalProps = {}, RootComponent extends R
  * Demos:
  *
  * - [Breadcrumbs](https://next.mui.com/material-ui/react-breadcrumbs/)
+ * - [Menubar](https://next.mui.com/material-ui/react-menubar/)
  * - [Typography](https://next.mui.com/material-ui/react-typography/)
  *
  * API:

package/Typography/Typography.d.ts

@@ -86,6 +86,7 @@ export interface TypographyTypeMap<AdditionalProps = {}, RootComponent extends R
  * Demos:
  *
  * - [Breadcrumbs](https://next.mui.com/material-ui/react-breadcrumbs/)
+ * - [Menubar](https://next.mui.com/material-ui/react-menubar/)
  * - [Typography](https://next.mui.com/material-ui/react-typography/)
  *
  * API:

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.0.0-alpha.2
+ * @mui/material v9.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.0.0-alpha.2
+ * @mui/material v9.0.0-alpha.3
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the