feat(tabs): L3-2396 tabs add controlled state

src/components/Tabs/TabTrigger.tsx

@@ -1,8 +1,8 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { ComponentProps, forwardRef } from 'react';
 import { getCommonProps } from '../../utils';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
 
-export interface TabTriggerProps extends ComponentProps<'div'> {
+export interface TabTriggerProps extends Omit<ComponentProps<'div'>, 'onClick'> {
   /**
    * Value corresponding to the tab
    */
@@ -12,7 +12,7 @@ export interface TabTriggerProps extends ComponentProps<'div'> {
    * @param value
    * @returns
    */
-  onTabClick?: (value: string) => void;
+  onClick?: (value: string) => void;
   /**
    * Tab label
    */
@@ -25,15 +25,15 @@ export interface TabTriggerProps extends ComponentProps<'div'> {
  * @param {TabTriggerProps} props - The props for the TabTrigger component.
  * @returns {JSX.Element} The rendered TabTrigger component.
  */
-const TabTrigger = forwardRef<HTMLButtonElement, TabTriggerProps>(({ value, onTabClick, children, ...props }, ref) => {
-  const handleClick = () => {
-    if (onTabClick) {
-      onTabClick(value);
-    }
-  };
+const TabTrigger = forwardRef<HTMLButtonElement, TabTriggerProps>(({ value, onClick, children, ...props }, ref) => {
   const { className: baseClassName } = getCommonProps(props, 'TabsContainer');
   return (
-    <TabsPrimitive.Trigger value={value} className={`${baseClassName}__tabs-trigger`} onClick={handleClick} ref={ref}>
+    <TabsPrimitive.Trigger
+      value={value}
+      className={`${baseClassName}__tabs-trigger`}
+      onClick={() => onClick?.(value)}
+      ref={ref}
+    >
       {children}
     </TabsPrimitive.Trigger>
   );

src/components/Tabs/Tabs.stories.tsx

@@ -1,7 +1,9 @@
 import { Meta } from '@storybook/react';
+import { useState } from 'react';
+import Button from '../Button/Button';
+import { Text, TextVariants } from '../Text';
 import TabsContainer, { TabsContainerProps } from './TabsContainer';
 import TabsContent, { TabContentProps } from './TabsContent';
-import { Text } from '../Text';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
@@ -46,6 +48,27 @@ export const BrowseTabSelected = () => (
   </TabsContainer>
 );
 
+// Story with controlled tabs
+export const ControlledTabs = () => {
+  const [value, setValue] = useState('overview');
+
+  return (
+    <>
+      <TabsContainer tabs={tabs} value={value} onTabClick={setValue}>
+        <TabsContent value="overview">
+          <p>This content is for the Overview tab.</p>
+        </TabsContent>
+        <TabsContent value="browse">
+          <p>This content is for the Browse lots tab.</p>
+        </TabsContent>
+      </TabsContainer>
+      <Text variant={TextVariants.heading4}>Control state from outside the component</Text>
+      <Button onClick={() => setValue('browse')}>Change to Browse tab</Button>
+      <Button onClick={() => setValue('overview')}>Change to Overview tab</Button>
+    </>
+  );
+};
+
 const componentTabs = [
   {
     label: <div style={{ display: 'flex' }}>Overview {<Text style={{ color: 'red', marginBottom: '0' }}>*</Text>}</div>,

src/components/Tabs/Tabs.test.tsx

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Text } from '../Text';
 import TabsContainer from './TabsContainer';
 import TabsContent from './TabsContent';
-import { Text } from '../Text';
-import userEvent from '@testing-library/user-event';
 
 describe('Tabs', () => {
   const tabs = [
@@ -77,6 +77,19 @@ describe('Tabs', () => {
       </TabsContainer>,
     );
 
+    await userEvent.click(screen.getByRole('tab', { name: /Overview/i }));
+    expect(onTabClickMock).toBeCalledWith('overview'); // Validate that the clicked tab value is correct
+  });
+  test('controlled state overrides defaultValue', async () => {
+    const onTabClickMock = vitest.fn();
+
+    render(
+      <TabsContainer tabs={tabs} defaultValue="browse" value="browse" onTabClick={onTabClickMock}>
+        <TabsContent value="overview">Overview content</TabsContent>
+        <TabsContent value="browse">Browse lots content</TabsContent>
+      </TabsContainer>,
+    );
+
     await userEvent.click(screen.getByRole('tab', { name: /Overview/i }));
     expect(onTabClickMock).toBeCalledWith('overview'); // Validate that the clicked tab value is correct
   });

src/components/Tabs/TabsContainer.tsx

@@ -1,9 +1,9 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import classnames from 'classnames';
 import { ComponentProps, forwardRef } from 'react';
 import { getCommonProps } from '../../utils';
-import classnames from 'classnames';
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import TabTrigger from './TabTrigger';
 import { Text, TextVariants } from '../Text';
+import TabTrigger from './TabTrigger';
 
 // Define the type for each tab, which includes its label, value, and content
 export interface Tab {
@@ -23,7 +23,7 @@ export interface Tab {
  * @param {TabsContainerProps} props - The component props containing an array of tabs.
  * @returns {JSX.Element} The rendered tab component.
  */
-export interface TabsContainerProps extends ComponentProps<'div'> {
+export interface TabsContainerProps extends TabsPrimitive.TabsProps, Omit<ComponentProps<'div'>, 'dir'> {
   tabs: Tab[];
   /**
    * Specify the default tab
@@ -33,6 +33,10 @@ export interface TabsContainerProps extends ComponentProps<'div'> {
    * Aria-label for specific tab list view
    */
   tabListLabel?: string;
+  /**
+   * Optional value for controlled tabs
+   */
+  value?: string;
   /**
    * Optional handler when a tab is clicked
    */
@@ -54,11 +58,16 @@ export interface TabsContainerProps extends ComponentProps<'div'> {
  */
 
 const TabsContainer = forwardRef<HTMLDivElement, TabsContainerProps>(
-  ({ className, tabs = [], tabListLabel = 'Sale Page Tabs', children, defaultValue, onTabClick, ...props }, ref) => {
+  (
+    { className, tabs = [], tabListLabel = 'Sale Page Tabs', children, defaultValue, value, onTabClick, ...props },
+    ref,
+  ) => {
     const { className: baseClassName, ...commonProps } = getCommonProps(props, 'TabsContainer');
     return (
       <TabsPrimitive.Root
+        {...props}
         defaultValue={defaultValue || tabs[0].value}
+        value={value}
         {...commonProps}
         className={classnames(`${baseClassName}`, className)}
         ref={ref}
@@ -69,7 +78,7 @@ const TabsContainer = forwardRef<HTMLDivElement, TabsContainerProps>(
               key={tab.value}
               value={tab.value}
               className={`${baseClassName}__tabs-trigger`}
-              onTabClick={onTabClick}
+              onClick={onTabClick}
             >
               <Text variant={TextVariants.label}>{tab.label}</Text>
             </TabTrigger>