Emit the id of an activated Tab Panel

Amsterdam · Feb 4, 2025 · b4b993e · b4b993e
1 parent 146a873
commit b4b993e
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/packages/react/src/Tabs/Tabs.tsx b/packages/react/src/Tabs/Tabs.tsx
@@ -15,10 +15,12 @@ import { useKeyboardFocus } from '../common/useKeyboardFocus'
 export type TabsProps = {
   /** The number of the active tab. Corresponds to its `tab` value. */
   activeTab?: number
+  /* Provides the id of the activated Tab Panel. */
+  onChange?: (tabId: number) => void
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 const TabsRoot = forwardRef(
-  ({ activeTab, children, className, ...restProps }: TabsProps, ref: ForwardedRef<HTMLDivElement>) => {
+  ({ activeTab, children, className, onChange, ...restProps }: TabsProps, ref: ForwardedRef<HTMLDivElement>) => {
     const tabsId = useId()
     const innerRef = useRef<HTMLDivElement>(null)
     const [activeTabId, setActiveTabId] = useState(0)
@@ -43,6 +45,7 @@ const TabsRoot = forwardRef(
 
     const updateTab = (tab: number) => {
       setActiveTabId(tab)
+      onChange?.(tab)
     }
 
     // Use a passed ref if it's there, otherwise use innerRef

diff --git a/storybook/src/components/Tabs/Tabs.stories.tsx b/storybook/src/components/Tabs/Tabs.stories.tsx
@@ -67,6 +67,7 @@ const meta = {
   component: Tabs,
   args: {
     children: defaultTabs,
+    onChange: (tabId) => console.log(`Tab ${tabId} was selected.`),
   },
   argTypes: {
     activeTab: {