TabsPanel

Author: mj12albert

packages/react/src/tabs/panel/TabsPanel.tsx

@@ -1,11 +1,18 @@
 'use client';
 import * as React from 'react';
-import { useTabsPanel } from './useTabsPanel';
+import { useBaseUiId } from '../../utils/useBaseUiId';
+import { useRenderElement } from '../../utils/useRenderElement';
+import type { BaseUIComponentProps } from '../../utils/types';
+import { useCompositeListItem } from '../../composite/list/useCompositeListItem';
 import { tabsStyleHookMapping } from '../root/styleHooks';
 import { useTabsRootContext } from '../root/TabsRootContext';
-import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { TabsRoot, type TabValue } from '../root/TabsRoot';
-import type { BaseUIComponentProps } from '../../utils/types';
+import type { TabsRoot, TabValue } from '../root/TabsRoot';
+import { TabsPanelDataAttributes } from './TabsPanelDataAttributes';
+
+export interface TabPanelMetadata {
+  id?: string;
+  value: TabValue;
+}
 
 /**
  * A panel displayed when the corresponding tab is active.
@@ -14,10 +21,17 @@ import type { BaseUIComponentProps } from '../../utils/types';
  * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
  */
 export const TabsPanel = React.forwardRef(function TabPanel(
-  props: TabsPanel.Props,
+  componentProps: TabsPanel.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const { children, className, value: valueProp, render, keepMounted = false, ...other } = props;
+  const {
+    children,
+    className,
+    value: valueProp,
+    render,
+    keepMounted = false,
+    ...elementProps
+  } = componentProps;
 
   const {
     value: selectedValue,
@@ -26,13 +40,28 @@ export const TabsPanel = React.forwardRef(function TabPanel(
     tabActivationDirection,
   } = useTabsRootContext();
 
-  const { hidden, getRootProps } = useTabsPanel({
-    getTabIdByPanelValueOrIndex,
-    rootRef: forwardedRef,
-    selectedValue,
-    value: valueProp,
+  const id = useBaseUiId();
+
+  const metadata = React.useMemo(
+    () => ({
+      id,
+      value: valueProp,
+    }),
+    [id, valueProp],
+  );
+
+  const { ref: listItemRef, index } = useCompositeListItem<TabPanelMetadata>({
+    metadata,
   });
 
+  const tabPanelValue = valueProp ?? index;
+
+  const hidden = tabPanelValue !== selectedValue;
+
+  const correspondingTabId = React.useMemo(() => {
+    return getTabIdByPanelValueOrIndex(valueProp, index);
+  }, [getTabIdByPanelValueOrIndex, index, valueProp]);
+
   const state: TabsPanel.State = React.useMemo(
     () => ({
       hidden,
@@ -42,12 +71,21 @@ export const TabsPanel = React.forwardRef(function TabPanel(
     [hidden, orientation, tabActivationDirection],
   );
 
-  const { renderElement } = useComponentRenderer({
-    propGetter: getRootProps,
-    render: render ?? 'div',
-    className,
+  const renderElement = useRenderElement('div', componentProps, {
     state,
-    extraProps: { ...other, children: hidden && !keepMounted ? undefined : children },
+    ref: [forwardedRef, listItemRef],
+    props: [
+      {
+        'aria-labelledby': correspondingTabId,
+        hidden,
+        id: id ?? undefined,
+        role: 'tabpanel',
+        tabIndex: hidden ? -1 : 0,
+        [TabsPanelDataAttributes.index as string]: index,
+      },
+      elementProps,
+      { children: hidden && !keepMounted ? undefined : children },
+    ],
     customStyleHookMapping: tabsStyleHookMapping,
   });
 

packages/react/src/tabs/panel/useTabsPanel.ts

@@ -7,7 +7,7 @@ import { useDirection } from '../../direction-provider/DirectionContext';
 import { useTabsRoot } from './useTabsRoot';
 import { TabsRootContext } from './TabsRootContext';
 import { tabsStyleHookMapping } from './styleHooks';
-import { TabPanelMetadata } from '../panel/useTabsPanel';
+import type { TabPanelMetadata } from '../panel/TabsPanel';
 
 /**
  * Groups the tabs and the corresponding panels.

packages/react/src/tabs/root/TabsRoot.tsx

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { useControlled } from '../../utils/useControlled';
 import type { CompositeMetadata } from '../../composite/list/CompositeList';
-import type { TabPanelMetadata } from '../panel/useTabsPanel';
+import type { TabPanelMetadata } from '../panel/TabsPanel';
 import type { TabMetadata } from '../tab/TabsTab';
 import type { TabActivationDirection, TabValue } from './TabsRoot';