@octanejs/base-ui 0.1.50 → 0.1.51

package/src/tabs/indicator/TabsIndicator.tsrx

@@ -0,0 +1,292 @@
+'use client';
+import * as React from 'octane';
+import { getParentNode, isHTMLElement, isLastTraversableNode } from '@floating-ui/utils/dom';
+import { useForcedRerendering } from '@octanejs/base-ui-utils/useForcedRerendering';
+import { ownerWindow } from '@octanejs/base-ui-utils/owner';
+import { script as prehydrationScript } from '#prehydration/tabs/indicator';
+import { PrehydrationScript } from '../../internals/PrehydrationScript.tsrx';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import { getCssDimensions } from '../../utils/getCssDimensions';
+import { getElementTransform } from '../../utils/getElementTransform';
+import type { BaseUIComponentProps } from '../../internals/types';
+import type { TabsRoot, TabsRootState } from '../root/TabsRoot.tsrx';
+import { useTabsRootContext } from '../root/TabsRootContext';
+import { tabsStateAttributesMapping } from '../root/stateAttributesMapping';
+import { useTabsListContext } from '../list/TabsListContext';
+import type { TabsTab } from '../tab/TabsTab.tsrx';
+import * as TabsIndicatorCssVars from './TabsIndicatorCssVars';
+
+const stateAttributesMapping = {
+	...tabsStateAttributesMapping,
+	activeTabPosition: () => null,
+	activeTabSize: () => null,
+};
+
+// `offsetLeft`/`offsetTop` are rounded to whole pixels and the error can compound
+// across the offset parent chain.
+const MAX_LAYOUT_ROUNDING_ERROR = 2;
+
+/**
+ * A visual indicator that can be styled to match the position of the currently active tab.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
+ */
+export const TabsIndicator = function TabsIndicator(
+	componentPropsWithRef: React.PropsWithoutRef<TabsIndicator.Props> & {
+		ref?: React.Ref<HTMLSpanElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const {
+		className,
+		render,
+		renderBeforeHydration = false,
+		style: styleProp,
+		...elementProps
+	} = componentProps;
+
+	const { getTabElementBySelectedValue, orientation, tabActivationDirection, value } =
+		useTabsRootContext();
+
+	const { tabsListElement, registerIndicatorUpdateListener } = useTabsListContext();
+
+	const rerender = useForcedRerendering();
+
+	React.useEffect(() => {
+		return registerIndicatorUpdateListener(rerender);
+	}, [registerIndicatorUpdateListener, rerender]);
+
+	let left = 0;
+	let right = 0;
+	let top = 0;
+	let bottom = 0;
+	let width = 0;
+	let height = 0;
+
+	let isTabSelected = false;
+
+	if (value != null && tabsListElement != null) {
+		const activeTab = getTabElementBySelectedValue(value);
+
+		if (activeTab != null) {
+			isTabSelected = true;
+
+			const { width: computedWidth, height: computedHeight } = getCssDimensions(activeTab);
+			const { width: tabListWidth, height: tabListHeight } = getCssDimensions(tabsListElement);
+			const tabRect = activeTab.getBoundingClientRect();
+			const tabsListRect = tabsListElement.getBoundingClientRect();
+			const scaleX = tabListWidth > 0 ? tabsListRect.width / tabListWidth : 1;
+			const scaleY = tabListHeight > 0 ? tabsListRect.height / tabListHeight : 1;
+
+			// Layout offsets are immune to transforms, but lose sub-pixel precision.
+			const layoutOffset = getLayoutOffset(activeTab, tabsListElement);
+			left = layoutOffset.left;
+			top = layoutOffset.top;
+
+			const rectLeft =
+				(tabRect.left - tabsListRect.left) / scaleX +
+				tabsListElement.scrollLeft -
+				tabsListElement.clientLeft;
+			const rectTop =
+				(tabRect.top - tabsListRect.top) / scaleY +
+				tabsListElement.scrollTop -
+				tabsListElement.clientTop;
+
+			// The rect-based offset is sub-pixel-precise but is derived from projected viewport
+			// geometry: a rotation, skew, flip, perspective, or 3D transform on the tab or any
+			// ancestor warps it beyond what the scale division can undo. When it agrees with the
+			// layout offset (up to layout rounding), no distortion is in effect and the more
+			// precise value is safe to use. A tab list scaled to zero divides by zero just above,
+			// and the resulting `NaN`/`Infinity` fails this same check, leaving the layout offset
+			// in place — so a degenerate scale needs no guard of its own.
+			//
+			// The active tab's own translation moves the rect but not the layout offset, so
+			// strip it from the comparison. This lets the indicator follow tab-local animations
+			// (e.g. `transform: translateX(12px)` on the selected tab) — the indicator is a
+			// sibling of the tab and does not inherit its transform.
+			const tabTranslation = getActiveTabTranslation(activeTab);
+			if (
+				Math.abs(rectLeft - tabTranslation.x - left) <= MAX_LAYOUT_ROUNDING_ERROR &&
+				Math.abs(rectTop - tabTranslation.y - top) <= MAX_LAYOUT_ROUNDING_ERROR
+			) {
+				left = rectLeft;
+				top = rectTop;
+			}
+
+			width = computedWidth;
+			height = computedHeight;
+			right = tabsListElement.scrollWidth - left - width;
+			bottom = tabsListElement.scrollHeight - top - height;
+		}
+	}
+
+	const activeTabPosition = isTabSelected ? { left, right, top, bottom } : null;
+
+	const activeTabSize = isTabSelected ? { width, height } : null;
+
+	const style: React.CSSProperties | undefined = isTabSelected
+		? ({
+				[TabsIndicatorCssVars.activeTabLeft]: `${left}px`,
+				[TabsIndicatorCssVars.activeTabRight]: `${right}px`,
+				[TabsIndicatorCssVars.activeTabTop]: `${top}px`,
+				[TabsIndicatorCssVars.activeTabBottom]: `${bottom}px`,
+				[TabsIndicatorCssVars.activeTabWidth]: `${width}px`,
+				[TabsIndicatorCssVars.activeTabHeight]: `${height}px`,
+			} as React.CSSProperties)
+		: undefined;
+
+	const displayIndicator = isTabSelected && width > 0 && height > 0;
+
+	const state: TabsIndicatorState = {
+		orientation,
+		activeTabPosition,
+		activeTabSize,
+		tabActivationDirection,
+	};
+
+	const element = useRenderElement('span', componentProps, {
+		state,
+		ref: forwardedRef,
+		props: [
+			{
+				role: 'presentation',
+				style,
+				hidden: !displayIndicator, // do not display the indicator before the layout is settled
+			},
+			elementProps,
+			{
+				suppressHydrationWarning: true,
+			},
+		],
+		stateAttributesMapping,
+	});
+
+	if (value == null) {
+		return null;
+	}
+
+	return (
+		<React.Fragment>
+			{element}
+			{renderBeforeHydration && <PrehydrationScript script={prehydrationScript} />}
+		</React.Fragment>
+	);
+};
+
+export interface TabsIndicatorState extends TabsRootState {
+	/**
+	 * The active tab position.
+	 */
+	activeTabPosition: TabsTab.Position | null;
+	/**
+	 * The active tab size.
+	 */
+	activeTabSize: TabsTab.Size | null;
+	/**
+	 * The component orientation.
+	 */
+	orientation: TabsRoot.Orientation;
+}
+
+export interface TabsIndicatorProps extends BaseUIComponentProps<'span', TabsIndicatorState> {
+	/**
+	 * Whether to render itself before React hydrates.
+	 * This minimizes the time that the indicator isn't visible after server-side rendering.
+	 * @default false
+	 */
+	renderBeforeHydration?: boolean | undefined;
+}
+
+export namespace TabsIndicator {
+	export type State = TabsIndicatorState;
+	export type Props = TabsIndicatorProps;
+}
+
+function getLayoutOffset(element: HTMLElement, ancestor: HTMLElement) {
+	const elementOffset = getCumulativeOffset(element);
+	const ancestorOffset = getCumulativeOffset(ancestor);
+
+	let left = elementOffset.left - ancestorOffset.left - ancestor.clientLeft;
+	let top = elementOffset.top - ancestorOffset.top - ancestor.clientTop;
+
+	// `offsetLeft`/`offsetTop` describe layout, and scrolling doesn't change layout: a scroll
+	// container between the tab and the list moves the tab on screen while its layout slot stays
+	// put. Subtract that scroll so this offset remains comparable with the rect-based one below —
+	// otherwise the difference reads as transform distortion, the rect offset is rejected, and the
+	// indicator is left behind by the full scroll amount. The list's own scroll is deliberately
+	// excluded: the indicator sits inside it and scrolls along with the tab.
+	//
+	// `getParentNode` crosses shadow boundaries (and slots), so a tab inside a shadow root still
+	// reaches the scroll containers between it and the list.
+	let node: Node | null = getParentNode(element);
+	while (isHTMLElement(node) && node !== ancestor && !isLastTraversableNode(node)) {
+		left -= node.scrollLeft;
+		top -= node.scrollTop;
+		node = getParentNode(node);
+	}
+
+	return { left, top };
+}
+
+function getCumulativeOffset(element: HTMLElement) {
+	let left = 0;
+	let top = 0;
+	let currentElement: HTMLElement | null = element;
+
+	while (currentElement != null) {
+		left += currentElement.offsetLeft;
+		top += currentElement.offsetTop;
+
+		const offsetParent = currentElement.offsetParent as HTMLElement | null;
+		if (offsetParent != null) {
+			left += offsetParent.clientLeft;
+			top += offsetParent.clientTop;
+		}
+
+		currentElement = offsetParent;
+	}
+
+	return { left, top };
+}
+
+// Returns the active tab's own 2D translation, in CSS pixels: the translation component of
+// the computed `transform` matrix plus the `translate` longhand. CSS composes the two as
+// `translate → rotate → scale → transform`, so adding them is only exact when no rotation or
+// scale is in play. That is enough here: with either of those present the caller's agreement
+// check rejects the rect-based offset regardless of the translation, and the tab's layout
+// slot is used instead.
+function getActiveTabTranslation(element: HTMLElement) {
+	const computedStyle = ownerWindow(element).getComputedStyle(element);
+	const { x, y } = getElementTransform(element, computedStyle);
+	let translateX = x;
+	let translateY = y;
+
+	// The `translate` longhand is a separate property and is not reflected in the
+	// computed `transform` matrix that `getElementTransform` reads. `getComputedStyle`
+	// resolves absolute and font-relative lengths to pixels but keeps percentages, which
+	// resolve against the tab's border box.
+	const { translate } = computedStyle;
+	if (translate && translate !== 'none') {
+		const parts = translate.split(' ');
+		translateX += resolveTranslateLength(parts[0], element.offsetWidth);
+		translateY += resolveTranslateLength(parts[1], element.offsetHeight);
+	}
+
+	return { x: translateX, y: translateY };
+}
+
+// Resolves a single `translate` longhand component to pixels. Percentages resolve against
+// the given border-box size; anything that isn't a plain number or percentage (e.g.
+// `calc(...)`) is treated as no translation, so the indicator falls back to the tab's
+// layout slot rather than guessing.
+function resolveTranslateLength(value: string | undefined, referenceSize: number): number {
+	if (!value) {
+		return 0;
+	}
+	const numeric = parseFloat(value);
+	if (!Number.isFinite(numeric)) {
+		return 0;
+	}
+	return value.endsWith('%') ? (numeric / 100) * referenceSize : numeric;
+}

package/src/tabs/indicator/TabsIndicatorCssVars.ts

@@ -0,0 +1,30 @@
+/**
+ * Indicates the distance on the left side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export const activeTabLeft = '--active-tab-left';
+/**
+ * Indicates the distance on the right side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export const activeTabRight = '--active-tab-right';
+/**
+ * Indicates the distance on the top side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export const activeTabTop = '--active-tab-top';
+/**
+ * Indicates the distance on the bottom side from the parent's container if the tab is active.
+ * @type {number}
+ */
+export const activeTabBottom = '--active-tab-bottom';
+/**
+ * Indicates the width of the tab if it is active.
+ * @type {number}
+ */
+export const activeTabWidth = '--active-tab-width';
+/**
+ * Indicates the height of the tab if it is active.
+ * @type {number}
+ */
+export const activeTabHeight = '--active-tab-height';

package/src/tabs/indicator/TabsIndicatorDataAttributes.ts

@@ -0,0 +1,10 @@
+/**
+ * Indicates the direction of the activation (based on the previous active tab).
+ * @type {'left' | 'right' | 'up' | 'down' | 'none'}
+ */
+export const activationDirection = 'data-activation-direction';
+/**
+ * Indicates the orientation of the tabs.
+ * @type {'horizontal' | 'vertical'}
+ */
+export const orientation = 'data-orientation';

package/src/tabs/indicator/prehydrationScript.min.ts

@@ -0,0 +1,5 @@
+// This file is autogenerated. Do not edit it directly.
+// To update it, modify the corresponding source file and run `pnpm inline-scripts`.
+
+// prettier-ignore
+export const script = '!function(){const t=document.currentScript.previousElementSibling;if(!t)return;const e=t.closest(\'[role="tablist"]\');if(!e)return;const n=e.querySelector("[data-active]");if(!n)return;const o=getComputedStyle(n);if("none"!==o.transform||"none"!==o.translate||"none"!==o.rotate||"none"!==o.scale)return;function r(t){let e=0,n=0,o=t;for(;null!=o;){e+=o.offsetLeft,n+=o.offsetTop;const t=o.offsetParent;null!=t&&(e+=t.clientLeft,n+=t.clientTop),o=t}return{left:e,top:n}}function i(){const{width:o,height:i}=function(t){const e=getComputedStyle(t);let n=parseFloat(e.width)||0,o=parseFloat(e.height)||0;return(Math.round(n)!==t.offsetWidth||Math.round(o)!==t.offsetHeight)&&(n=t.offsetWidth,o=t.offsetHeight),{width:n,height:o}}(n),l=function(t,e){const n=r(t),o=r(e);let i=n.left-o.left-e.clientLeft,l=n.top-o.top-e.clientTop,s=t.parentElement;for(;null!=s&&s!==e;)i-=s.scrollLeft,l-=s.scrollTop,s=s.parentElement;return{left:i,top:l}}(n,e),s=Math.min(l.left,e.scrollWidth-o),f=Math.min(l.top,e.scrollHeight-i),c=e.scrollWidth-s-o,u=e.scrollHeight-f-i;function h(e,n){t.style.setProperty(`--active-tab-${e}`,`${n}px`)}return h("left",s),h("right",c),h("top",f),h("bottom",u),h("width",o),h("height",i),o>0&&i>0&&(t.removeAttribute("hidden"),!0)}if(i()||"undefined"==typeof ResizeObserver)return;let l,s;function f(){s.disconnect(),clearTimeout(l)}s=new ResizeObserver(()=>{t.isConnected&&t.hasAttribute("hidden")&&n.hasAttribute("data-active")?i()&&f():f()}),s.observe(n),l=setTimeout(f,1e4)}();';

package/src/tabs/list/TabsList.tsrx

@@ -0,0 +1,153 @@
+'use client';
+import * as React from 'octane';
+import { useStableCallback } from '@octanejs/base-ui-utils/useStableCallback';
+import { useIsoLayoutEffect } from '@octanejs/base-ui-utils/useIsoLayoutEffect';
+import { EMPTY_ARRAY } from '@octanejs/base-ui-utils/empty';
+import type { BaseUIComponentProps, HTMLProps } from '../../internals/types';
+import type { TabsRootState } from '../root/TabsRoot.tsrx';
+import { CompositeRoot } from '../../internals/composite/root/CompositeRoot.tsrx';
+import { tabsStateAttributesMapping } from '../root/stateAttributesMapping';
+import { useTabsRootContext } from '../root/TabsRootContext';
+import { TabsListContext } from './TabsListContext';
+
+/**
+ * Groups the individual tab buttons.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
+ */
+export const TabsList = function TabsList(
+	componentPropsWithRef: React.PropsWithoutRef<TabsList.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const {
+		activateOnFocus = false,
+		className,
+		loopFocus = true,
+		render,
+		style,
+		...elementProps
+	} = componentProps;
+
+	const { orientation, setTabMap, tabActivationDirection } = useTabsRootContext();
+
+	const [highlightedTabIndex, setHighlightedTabIndex] = React.useState(0);
+	const [tabsListElement, setTabsListElement] = React.useState<HTMLElement | null>(null);
+
+	const indicatorUpdateListenersRef = React.useRef(new Set<() => void>());
+	const tabResizeObserverElementsRef = React.useRef(new Set<HTMLElement>());
+	const resizeObserverRef = React.useRef<ResizeObserver | null>(null);
+
+	useIsoLayoutEffect(() => {
+		if (typeof ResizeObserver === 'undefined') {
+			return undefined;
+		}
+
+		const resizeObserver = new ResizeObserver(() => {
+			indicatorUpdateListenersRef.current.forEach((listener) => {
+				listener();
+			});
+		});
+
+		resizeObserverRef.current = resizeObserver;
+
+		if (tabsListElement) {
+			resizeObserver.observe(tabsListElement);
+		}
+
+		tabResizeObserverElementsRef.current.forEach((element) => {
+			resizeObserver.observe(element);
+		});
+
+		return () => {
+			resizeObserver.disconnect();
+			resizeObserverRef.current = null;
+		};
+	}, [tabsListElement]);
+
+	const registerIndicatorUpdateListener = useStableCallback((listener: () => void) => {
+		indicatorUpdateListenersRef.current.add(listener);
+		return () => {
+			indicatorUpdateListenersRef.current.delete(listener);
+		};
+	});
+
+	const registerTabResizeObserverElement = useStableCallback((element: HTMLElement) => {
+		tabResizeObserverElementsRef.current.add(element);
+		resizeObserverRef.current?.observe(element);
+		return () => {
+			tabResizeObserverElementsRef.current.delete(element);
+			resizeObserverRef.current?.unobserve(element);
+		};
+	});
+
+	const state: TabsListState = {
+		orientation,
+		tabActivationDirection,
+	};
+
+	const defaultProps: HTMLProps = {
+		'aria-orientation': orientation === 'vertical' ? 'vertical' : undefined,
+		role: 'tablist',
+	};
+
+	const tabsListContextValue: TabsListContext = React.useMemo(
+		() => ({
+			activateOnFocus,
+			registerIndicatorUpdateListener,
+			registerTabResizeObserverElement,
+			tabsListElement,
+		}),
+		[
+			activateOnFocus,
+			registerIndicatorUpdateListener,
+			registerTabResizeObserverElement,
+			tabsListElement,
+		],
+	);
+
+	return (
+		<TabsListContext.Provider value={tabsListContextValue}>
+			<CompositeRoot
+				render={render}
+				className={className}
+				style={style}
+				state={state}
+				refs={[forwardedRef, setTabsListElement]}
+				props={[defaultProps, elementProps]}
+				stateAttributesMapping={tabsStateAttributesMapping}
+				highlightedIndex={highlightedTabIndex}
+				enableHomeAndEndKeys
+				loopFocus={loopFocus}
+				orientation={orientation}
+				onHighlightedIndexChange={setHighlightedTabIndex}
+				onMapChange={setTabMap}
+				disabledIndices={EMPTY_ARRAY}
+			/>
+		</TabsListContext.Provider>
+	);
+};
+
+export interface TabsListState extends TabsRootState {}
+
+export interface TabsListProps extends BaseUIComponentProps<'div', TabsListState> {
+	/**
+	 * Whether to automatically change the active tab on arrow key focus.
+	 * Otherwise, tabs will be activated using <kbd>Enter</kbd> or <kbd>Space</kbd> key press.
+	 * @default false
+	 */
+	activateOnFocus?: boolean | undefined;
+	/**
+	 * Whether to loop keyboard focus back to the first item
+	 * when the end of the list is reached while using the arrow keys.
+	 * @default true
+	 */
+	loopFocus?: boolean | undefined;
+}
+
+export namespace TabsList {
+	export type State = TabsListState;
+	export type Props = TabsListProps;
+}

package/src/tabs/list/TabsListContext.ts

@@ -0,0 +1,23 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+
+export interface TabsListContext {
+	activateOnFocus: boolean;
+	registerIndicatorUpdateListener: (listener: () => void) => () => void;
+	registerTabResizeObserverElement: (element: HTMLElement) => () => void;
+	tabsListElement: HTMLElement | null;
+}
+
+export const TabsListContext = React.createContext<TabsListContext | undefined>(undefined);
+
+export function useTabsListContext() {
+	const context = React.useContext(TabsListContext);
+	if (context === undefined) {
+		throw new Error(
+			'Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>.',
+		);
+	}
+
+	return context;
+}

package/src/tabs/list/TabsListDataAttributes.ts

@@ -0,0 +1,10 @@
+/**
+ * Indicates the direction of the activation (based on the previous active tab).
+ * @type {'left' | 'right' | 'up' | 'down' | 'none'}
+ */
+export const activationDirection = 'data-activation-direction';
+/**
+ * Indicates the orientation of the tabs.
+ * @type {'horizontal' | 'vertical'}
+ */
+export const orientation = 'data-orientation';

package/src/tabs/panel/TabsPanel.tsrx

@@ -0,0 +1,145 @@
+'use client';
+import * as React from 'octane';
+import { inertValue } from '@octanejs/base-ui-utils/inertValue';
+import { useIsoLayoutEffect } from '@octanejs/base-ui-utils/useIsoLayoutEffect';
+import { useBaseUiId } from '../../internals/useBaseUiId';
+import type { StateAttributesMapping } from '../../internals/getStateAttributesProps';
+import { transitionStatusMapping } from '../../internals/stateAttributesMapping';
+import { useOpenChangeComplete } from '../../internals/useOpenChangeComplete.tsrx';
+import { type TransitionStatus, useTransitionStatus } from '../../internals/useTransitionStatus';
+import { useRenderElement } from '../../internals/useRenderElement.tsrx';
+import type { BaseUIComponentProps } from '../../internals/types';
+import { useCompositeListItem } from '../../internals/composite/list/useCompositeListItem';
+import { tabsStateAttributesMapping } from '../root/stateAttributesMapping';
+import { useTabsRootContext } from '../root/TabsRootContext';
+import type { TabsRootState } from '../root/TabsRoot.tsrx';
+import type { TabsTab } from '../tab/TabsTab.tsrx';
+import * as TabsPanelDataAttributes from './TabsPanelDataAttributes';
+
+const stateAttributesMapping: StateAttributesMapping<TabsPanelState> = {
+	...tabsStateAttributesMapping,
+	...transitionStatusMapping,
+};
+
+/**
+ * A panel displayed when the corresponding tab is active.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Tabs](https://base-ui.com/react/components/tabs)
+ */
+export const TabsPanel = function TabsPanel(
+	componentPropsWithRef: React.PropsWithoutRef<TabsPanel.Props> & {
+		ref?: React.Ref<HTMLDivElement>;
+	},
+) {
+	const { ref: forwardedRef = null, ...componentProps } = componentPropsWithRef;
+	const { className, value, render, keepMounted = false, style, ...elementProps } = componentProps;
+
+	const {
+		value: selectedValue,
+		getTabIdByPanelValue,
+		orientation,
+		tabActivationDirection,
+		registerMountedTabPanel,
+	} = useTabsRootContext();
+
+	const id = useBaseUiId();
+
+	const { ref: listItemRef, index } = useCompositeListItem();
+
+	const open = value === selectedValue;
+	const { mounted, transitionStatus, setMounted } = useTransitionStatus(open);
+	const hidden = !mounted;
+
+	const correspondingTabId = getTabIdByPanelValue(value);
+
+	const state: TabsPanelState = {
+		hidden,
+		orientation,
+		tabActivationDirection,
+		transitionStatus,
+	};
+
+	const panelRef = React.useRef<HTMLDivElement | null>(null);
+
+	const element = useRenderElement('div', componentProps, {
+		state,
+		ref: [forwardedRef, listItemRef, panelRef],
+		props: [
+			{
+				'aria-labelledby': correspondingTabId,
+				hidden,
+				id,
+				role: 'tabpanel',
+				tabIndex: open ? 0 : -1,
+				inert: inertValue(!open),
+				// Computed key: a plain literal key fails the DOM-props excess property check.
+				[TabsPanelDataAttributes.index as string]: index,
+			},
+			elementProps,
+		],
+		stateAttributesMapping,
+	});
+
+	useOpenChangeComplete({
+		open,
+		ref: panelRef,
+		onComplete() {
+			if (!open) {
+				setMounted(false);
+			}
+		},
+	});
+
+	useIsoLayoutEffect(() => {
+		// On React 17 `useId` resolves in a passive effect, so `id` is still
+		// undefined during this layout effect on the first commit. Skip the
+		// registration until the effect re-runs with the resolved id.
+		if (id == null || (hidden && !keepMounted)) {
+			return undefined;
+		}
+
+		return registerMountedTabPanel(value, id);
+	}, [hidden, keepMounted, value, id, registerMountedTabPanel]);
+
+	const shouldRender = keepMounted || mounted;
+	if (!shouldRender) {
+		return null;
+	}
+
+	return element;
+};
+
+export interface TabsPanelMetadata {
+	id?: string | undefined;
+	value: TabsTab.Value;
+}
+
+export interface TabsPanelState extends TabsRootState {
+	/**
+	 * Whether the component is hidden.
+	 */
+	hidden: boolean;
+	/**
+	 * The transition status of the component.
+	 */
+	transitionStatus: TransitionStatus;
+}
+
+export interface TabsPanelProps extends BaseUIComponentProps<'div', TabsPanelState> {
+	/**
+	 * The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
+	 */
+	value: TabsTab.Value;
+	/**
+	 * Whether to keep the HTML element in the DOM while the panel is hidden.
+	 * @default false
+	 */
+	keepMounted?: boolean | undefined;
+}
+
+export namespace TabsPanel {
+	export type Metadata = TabsPanelMetadata;
+	export type State = TabsPanelState;
+	export type Props = TabsPanelProps;
+}