Use activeId/defaultActiveId/setActiveId on Tabs

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(),
 		} );