Use Composite for TabsRoot and TabPanel

mui · Nov 13, 2024 · 5a7f24f · 5a7f24f
1 parent 32ed91c
commit 5a7f24f
Show file tree

Hide file tree

Showing 12 changed files with 216 additions and 198 deletions.
diff --git a/packages/mui-base/src/Tabs/Root/TabsProvider.tsx b/packages/mui-base/src/Tabs/Root/TabsProvider.tsx
diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.tsx b/packages/mui-base/src/Tabs/Root/TabsRoot.tsx
@@ -1,11 +1,13 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useTabsRoot } from './useTabsRoot';
-import { tabsStyleHookMapping } from './styleHooks';
-import { TabsProvider } from './TabsProvider';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import type { BaseUIComponentProps } from '../../utils/types';
+import { CompositeList } from '../../Composite/List/CompositeList';
+import { useTabsRoot } from './useTabsRoot';
+import { TabsRootContext } from './TabsRootContext';
+import { tabsStyleHookMapping } from './styleHooks';
+import { TabPanelMetadata } from '../TabPanel/useTabPanel';
 
 /**
  *
@@ -24,22 +26,55 @@ const TabsRoot = React.forwardRef(function TabsRoot(
   const {
     className,
     defaultValue,
-    direction = 'ltr',
+    direction: directionProp = 'ltr',
     onValueChange,
     orientation = 'horizontal',
     render,
-    value,
+    value: valueProp,
     ...other
   } = props;
 
-  const { contextValue, getRootProps, tabActivationDirection } = useTabsRoot({
+  const {
+    getRootProps,
+    direction,
+    getTabId,
+    getTabPanelIdByTabValueOrIndex,
+    onSelected,
+    registerTabIdLookup,
+    setTabPanelMap,
+    tabActivationDirection,
+    tabPanelRefs,
     value,
+  } = useTabsRoot({
+    value: valueProp,
     defaultValue,
     onValueChange,
-    orientation,
-    direction,
+    direction: directionProp,
   });
 
+  const tabsContextValue = React.useMemo(
+    () => ({
+      direction,
+      getTabId,
+      getTabPanelIdByTabValueOrIndex,
+      onSelected,
+      orientation,
+      registerTabIdLookup,
+      tabActivationDirection,
+      value,
+    }),
+    [
+      direction,
+      getTabId,
+      getTabPanelIdByTabValueOrIndex,
+      onSelected,
+      orientation,
+      registerTabIdLookup,
+      tabActivationDirection,
+      value,
+    ],
+  );
+
   const ownerState: TabsRoot.OwnerState = {
     orientation,
     direction,
@@ -56,7 +91,13 @@ const TabsRoot = React.forwardRef(function TabsRoot(
     customStyleHookMapping: tabsStyleHookMapping,
   });
 
-  return <TabsProvider value={contextValue}>{renderElement()}</TabsProvider>;
+  return (
+    <TabsRootContext.Provider value={tabsContextValue}>
+      <CompositeList<TabPanelMetadata> elementsRef={tabPanelRefs} onMapChange={setTabPanelMap}>
+        {renderElement()}
+      </CompositeList>
+    </TabsRootContext.Provider>
+  );
 });
 
 export type TabsOrientation = 'horizontal' | 'vertical';

diff --git a/packages/mui-base/src/Tabs/Root/TabsRootContext.ts b/packages/mui-base/src/Tabs/Root/TabsRootContext.ts
@@ -6,7 +6,7 @@ export interface TabsRootContext {
   /**
    * The currently selected tab's value.
    */
-  value?: any | null;
+  value: any | null;
   /**
    * Callback for setting new value.
    */
@@ -36,7 +36,7 @@ export interface TabsRootContext {
    * Gets the id of the tab panel with the given value.
    * @param value Value to find the tab panel for.
    */
-  getTabPanelId: (value: any) => string | undefined;
+  getTabPanelIdByTabValueOrIndex: (tabValue: any, index: number) => string | undefined;
   /**
    * The position of the active tab relative to the previously active tab.
    */