TabsList

packages/mui-base/src/Tabs/TabsList/TabsList.tsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { useTabsList } from './useTabsList';
 import { TabsListProvider } from './TabsListProvider';
 import { tabsStyleHookMapping } from '../Root/styleHooks';
+import { useTabsRootContext } from '../Root/TabsRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { TabsRoot } from '../Root/TabsRoot';
 import { BaseUIComponentProps } from '../../utils/types';
@@ -24,12 +25,25 @@ const TabsList = React.forwardRef(function TabsList(
 ) {
   const { activateOnFocus = true, className, loop = true, render, ...other } = props;
 
-  const { direction, orientation, getRootProps, contextValue, tabActivationDirection } =
-    useTabsList({
-      rootRef: forwardedRef,
-      loop,
-      activateOnFocus,
-    });
+  const {
+    direction = 'ltr',
+    onSelected,
+    orientation = 'horizontal',
+    value,
+    registerTabIdLookup,
+    tabActivationDirection,
+  } = useTabsRootContext();
+
+  const { getRootProps, contextValue } = useTabsList({
+    activateOnFocus,
+    direction,
+    loop,
+    onSelected,
+    orientation,
+    registerTabIdLookup,
+    rootRef: forwardedRef,
+    value,
+  });
 
   const ownerState: TabsList.OwnerState = React.useMemo(
     () => ({

packages/mui-base/src/Tabs/TabsList/useTabsList.test.tsx

@@ -5,14 +5,25 @@ import { createRenderer, screen, fireEvent } from '@mui/internal-test-utils';
 import { Tabs } from '@base_ui/react/Tabs';
 import { useTabsList } from './useTabsList';
 
+const NOOP = () => {};
+
 describe('useTabsList', () => {
   const { render } = createRenderer();
 
   describe('getRootProps', () => {
     it('returns props for root slot', () => {
       function TestTabsList() {
         const rootRef = React.createRef<HTMLDivElement>();
-        const { getRootProps } = useTabsList({ rootRef, activateOnFocus: true, loop: true });
+        const { getRootProps } = useTabsList({
+          activateOnFocus: true,
+          direction: 'ltr',
+          loop: true,
+          onSelected: NOOP,
+          orientation: 'horizontal',
+          registerTabIdLookup: NOOP,
+          rootRef,
+          value: 0,
+        });
         return <div {...getRootProps()} />;
       }
 
@@ -35,7 +46,16 @@ describe('useTabsList', () => {
 
       function TestTabsList() {
         const rootRef = React.createRef<HTMLDivElement>();
-        const { getRootProps } = useTabsList({ rootRef, activateOnFocus: true, loop: true });
+        const { getRootProps } = useTabsList({
+          activateOnFocus: true,
+          direction: 'ltr',
+          loop: true,
+          onSelected: NOOP,
+          orientation: 'horizontal',
+          registerTabIdLookup: NOOP,
+          rootRef,
+          value: 0,
+        });
         return (
           <div
             {...getRootProps({

packages/mui-base/src/Tabs/TabsList/useTabsList.ts

@@ -1,28 +1,28 @@
 'use client';
 import * as React from 'react';
 import { TabsListActionTypes, tabsListReducer, ValueChangeAction } from './tabsListReducer';
-import { useTabsRootContext } from '../Root/TabsRootContext';
+// import { useTabsRootContext } from '../Root/TabsRootContext';
+import type { TabsRootContext } from '../Root/TabsRootContext';
 import { type TabMetadata } from '../Root/useTabsRoot';
 import { type TabsOrientation, type TabActivationDirection } from '../Root/TabsRoot';
 import { useCompoundParent } from '../../useCompound';
 import { useList, ListState, UseListParameters, ListAction } from '../../useList';
 import { useForkRef } from '../../utils/useForkRef';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
-import { TabsDirection } from '../Root/TabsRoot';
 import { TabsListProviderValue } from './TabsListProvider';
 
 function useTabsList(parameters: useTabsList.Parameters): useTabsList.ReturnValue {
-  const { rootRef: externalRef, loop, activateOnFocus } = parameters;
-
   const {
-    direction = 'ltr',
+    activateOnFocus,
+    direction,
+    loop,
     onSelected,
-    orientation = 'horizontal',
-    value,
+    orientation,
     registerTabIdLookup,
-    tabActivationDirection,
-  } = useTabsRootContext();
+    rootRef: externalRef,
+    value,
+  } = parameters;
 
   const { subitems, contextValue: compoundComponentContextValue } = useCompoundParent<
     any,
@@ -169,11 +169,8 @@ function useTabsList(parameters: useTabsList.Parameters): useTabsList.ReturnValu
     dispatch,
     getRootProps,
     highlightedValue,
-    direction,
-    orientation,
     rootRef: handleRef,
     selectedValue: selectedValues[0] ?? null,
-    tabActivationDirection,
   };
 }
 
@@ -260,7 +257,11 @@ function useActivationDirectionDetector(
 }
 
 namespace useTabsList {
-  export interface Parameters {
+  export interface Parameters
+    extends Pick<
+      TabsRootContext,
+      'direction' | 'onSelected' | 'orientation' | 'registerTabIdLookup' | 'value'
+    > {
     /**
      * If `true`, the tab will be activated whenever it is focused.
      * Otherwise, it has to be activated by clicking or pressing the Enter or Space key.
@@ -298,20 +299,11 @@ namespace useTabsList {
      * The value of the currently highlighted tab.
      */
     highlightedValue: any | null;
-    /**
-     * If `true`, it will indicate that the text's direction in right-to-left.
-     */
-    direction: TabsDirection;
-    /**
-     * The component orientation (layout flow direction).
-     */
-    orientation: TabsOrientation;
     rootRef: React.RefCallback<Element> | null;
     /**
      * The value of the currently selected tab.
      */
     selectedValue: any | null;
-    tabActivationDirection: TabActivationDirection;
   }
 }