From a0ad2d1bd2a386794a07414bfa5a6ab21b5ba8fe Mon Sep 17 00:00:00 2001
From: Tsion Behailu <tbehailu@users.noreply.github.com>
Date: Mon, 22 Jan 2024 16:34:43 -0500
Subject: [PATCH] feat: allow overriding the selectedTab on Tabs component
 (#186)

* allow overriding the selectedTab on Tabs component

* useControlledState

* remove unused import

* add onChange callback
---
 src/tabs/Tabs.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/tabs/Tabs.tsx b/src/tabs/Tabs.tsx
index d302deb6..575fbbcb 100644
--- a/src/tabs/Tabs.tsx
+++ b/src/tabs/Tabs.tsx
@@ -1,5 +1,4 @@
 import React, {
-  useState,
   Children,
   cloneElement,
   ReactNode,
@@ -7,6 +6,7 @@ import React, {
   ReactElement,
   HtmlHTMLAttributes,
 } from 'react';
+import { useControlledState } from '@react-stately/utils';
 import { Text } from '../content';
 import { css } from '@emotion/react';
 import { Orientation } from '../types/orientation';
@@ -112,6 +112,10 @@ function parseTabList(children: ReactNode): Tab[] {
 export type TabsProps = {
   children: ReactNode[];
   className?: string;
+  /**
+   * If specified, the index of the selected tab is controlled by the parent component rather than the internal state.
+   */
+  index?: number;
   onChange?: (index: number) => void;
   /**
    * The orientation of the tabs. Defaults to horizontal
@@ -127,6 +131,7 @@ export type TabsProps = {
 export function Tabs({
   children,
   className,
+  index,
   onChange,
   orientation = 'horizontal',
   extra,
@@ -134,9 +139,13 @@ export function Tabs({
   // Filter out the nulls from the children so that tabs can be mounted conditionally
   children = Children.toArray(children).filter(child => child);
   const tabs = parseTabList(children);
-  // Initialize the selected tab to the first non-hidden tab
-  const [selectedIndex, setSelectedIndex] = useState<number>(
-    tabs.findIndex(tab => !tab.hidden)
+  
+  // Initialize the selected tab to the first non-hidden tab if there is no controlled value provided
+  const defaultValue = tabs.findIndex(tab => !tab.hidden);
+  const [selectedIndex, setSelectedIndex] = useControlledState(
+    index,
+    defaultValue,
+    onChange
   );
   return (
     <div
@@ -159,7 +168,6 @@ export function Tabs({
               onClick={e => {
                 e.preventDefault();
                 setSelectedIndex(index);
-                onChange && onChange(index);
               }}
               {...tab?.tabListItemProps}
             >