From e92e59b821dc3f52d58159ee298f771403e2a8f8 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 15 Oct 2024 16:06:18 +0200
Subject: [PATCH] Use activeId/defaultActiveId/setActiveId on Tabs

---
 packages/components/src/tabs/index.tsx | 47 +++++++++++++++++++++-----
 1 file changed, 38 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/tabs/index.tsx b/packages/components/src/tabs/index.tsx
index 93e7e053619096..819d259395daf8 100644
--- a/packages/components/src/tabs/index.tsx
+++ b/packages/components/src/tabs/index.tsx
@@ -19,6 +19,22 @@ import { Tab } from './tab';
 import { TabList } from './tablist';
 import { TabPanel } from './tabpanel';
 
+function externalToInternalTabId(
+	externalId: string | undefined | null,
+	instanceId: string
+) {
+	return externalId && `${ instanceId }-${ externalId }`;
+}
+
+function internalToExternalTabId(
+	internalId: string | undefined | null,
+	instanceId: string
+) {
+	return typeof internalId === 'string'
+		? internalId.replace( `${ instanceId }-`, '' )
+		: internalId;
+}
+
 /**
  * Display one panel of content at a time with a tabbed interface, based on the
  * WAI-ARIA Tabs Pattern⁠.
@@ -34,21 +50,34 @@ export const Tabs = Object.assign(
 		onSelect,
 		children,
 		selectedTabId,
+		activeTabId,
+		defaultActiveTabId,
+		onActiveTabIdChange,
 	}: TabsProps ) {
 		const instanceId = useInstanceId( Tabs, 'tabs' );
 		const store = Ariakit.useTabStore( {
 			selectOnMove,
 			orientation,
-			defaultSelectedId:
-				defaultTabId && `${ instanceId }-${ defaultTabId }`,
-			setSelectedId: ( selectedId ) => {
-				const strippedDownId =
-					typeof selectedId === 'string'
-						? selectedId.replace( `${ instanceId }-`, '' )
-						: selectedId;
-				onSelect?.( strippedDownId );
+			defaultSelectedId: externalToInternalTabId(
+				defaultTabId,
+				instanceId
+			),
+			setSelectedId: ( newSelectedId ) => {
+				onSelect?.(
+					internalToExternalTabId( newSelectedId, instanceId )
+				);
+			},
+			selectedId: externalToInternalTabId( selectedTabId, instanceId ),
+			defaultActiveId: externalToInternalTabId(
+				defaultActiveTabId,
+				instanceId
+			),
+			setActiveId: ( newActiveId ) => {
+				onActiveTabIdChange?.(
+					internalToExternalTabId( newActiveId, instanceId )
+				);
 			},
-			selectedId: selectedTabId && `${ instanceId }-${ selectedTabId }`,
+			activeId: externalToInternalTabId( activeTabId, instanceId ),
 			rtl: isRTL(),
 		} );