@purpurds/tabs 5.18.3 → 5.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tabs",
-  "version": "5.18.3",
+  "version": "5.19.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/tabs.cjs.js",
   "types": "./dist/tabs.d.ts",
@@ -16,9 +16,9 @@
   "dependencies": {
     "classnames": "~2.5.0",
     "@radix-ui/react-tabs": "~1.0.4",
-    "@purpurds/tokens": "5.18.3",
-    "@purpurds/icon": "5.18.3",
-    "@purpurds/paragraph": "5.18.3"
+    "@purpurds/icon": "5.19.1",
+    "@purpurds/tokens": "5.19.1",
+    "@purpurds/paragraph": "5.19.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
@@ -42,7 +42,8 @@
     "typescript": "^5.5.4",
     "vite": "5.3.4",
     "vitest": "~1.5.0",
-    "@purpurds/component-rig": "1.0.0"
+    "@purpurds/component-rig": "1.0.0",
+    "@purpurds/button": "5.19.1"
   },
   "scripts": {
     "build:dev": "vite",

package/src/tabs.stories.tsx

@@ -1,9 +1,13 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { useArgs } from "@storybook/preview-api";
 
 import { Tabs } from "./tabs";
 import { tabsVariants } from "./tabs.utils";
 
+import { Button } from "@purpurds/button";
+import "@purpurds/button/styles";
+
 const meta = {
   title: "Components/Tabs",
   component: Tabs,
@@ -32,6 +36,26 @@ const meta = {
         },
       },
     },
+    value: {
+      control: { type: "text" },
+      table: {
+        type: {
+          summary: "The controlled value of the tabs. Must be used in conjunction with onChange.",
+        },
+      },
+    },
+    defaultValue: {
+      control: { type: "text" },
+      table: {
+        type: { summary: "The value of the tab to select by default, if uncontrolled" },
+      },
+    },
+    onChange: {
+      table: {
+        type: { summary: "Event handler called when the value changes." },
+        disabled: true,
+      },
+    },
     fullWidth: {
       table: { type: { summary: "boolean" } },
     },
@@ -103,3 +127,70 @@ export const Showcase: Story = {
     </div>
   ),
 };
+
+export const Controlled: Story = {
+  args: {
+    variant: tabsVariants[0],
+    fullWidth: false,
+    children: [
+      <Tabs.Content
+        key="1"
+        tabId={`${tabId}-1`}
+        name={`${name}-1`}
+        style={{ padding: "var(--purpur-spacing-250)" }}
+      >
+        <div>Content 1</div>
+      </Tabs.Content>,
+      <Tabs.Content
+        key="2"
+        tabId={`${tabId}-2`}
+        name={`${name}-2`}
+        style={{ padding: "var(--purpur-spacing-250)" }}
+      >
+        <div>Content 2</div>
+      </Tabs.Content>,
+      <Tabs.Content
+        key="3"
+        tabId={`${tabId}-3`}
+        name={`${name}-3`}
+        style={{ padding: "var(--purpur-spacing-250)" }}
+      >
+        <div>Content 3</div>
+      </Tabs.Content>,
+    ],
+    negative: false,
+    value: "tab-2",
+  },
+  render: ({ children, ...args }) => {
+    const [{ localValue = args.value }, updateArgs] = useArgs(); // eslint-disable-line react-hooks/rules-of-hooks
+    const setValue = (value: string | undefined) => updateArgs({ value });
+    return (
+      <>
+        <div
+          style={{
+            padding: "0 var(--purpur-spacing-250)",
+          }}
+        >
+          <Button onClick={() => setValue("tab-1")} variant="text" size="sm">
+            Click here for Tab 1
+          </Button>
+        </div>
+        <div
+          style={{
+            padding: "var(--purpur-spacing-250)",
+            background: args.negative
+              ? "var(--purpur-color-purple-900)"
+              : args.variant === "contained"
+              ? "var(--purpur-color-gray-50)"
+              : "transparent",
+            color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""}`,
+          }}
+        >
+          <Tabs {...args} value={localValue} onChange={(event) => setValue(event.detail.value)}>
+            {children}
+          </Tabs>
+        </div>
+      </>
+    );
+  },
+};

package/src/tabs.test.tsx

@@ -148,4 +148,21 @@ describe("Tabs", () => {
       );
     }).toThrow("tabId must be unique");
   });
+
+  it("should render controlled component", () => {
+    const testId = "tab-content";
+    render(
+      <Tabs value="tab-2">
+        <TabContent tabId="tab-1" name="Tab name 1" data-testid={`${testId}-1`}>
+          <div>Content</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2" data-testid={`${testId}-2`}>
+          <div>Content 2</div>
+        </TabContent>
+      </Tabs>
+    );
+
+    expect(screen.queryByTestId(`${testId}-1`)?.getAttribute("data-state")).toBe("inactive");
+    expect(screen.queryByTestId(`${testId}-2`)?.getAttribute("data-state")).toBe("active");
+  });
 });

package/src/tabs.tsx

@@ -13,6 +13,10 @@ type TabsProps = {
   variant?: TabsVariant;
   negative?: boolean;
   fullWidth?: boolean;
+  /**
+   * The controlled value of the tabs. Must be used in conjunction with onChange.
+   */
+  value?: string;
   /**
    * Event handler called when the value changes.
    * */
@@ -73,6 +77,7 @@ export const Tabs: TabsCmp<TabsProps> = ({
   className,
   defaultValue,
   "data-testid": dataTestId,
+  value,
   ...props
 }) => {
   const [scrollClasses, setScrollClasses] = useState<{ [key: string]: boolean }>({});
@@ -98,6 +103,12 @@ export const Tabs: TabsCmp<TabsProps> = ({
     return defaultIndex >= 0 ? defaultIndex : 0;
   };
 
+  useEffect(() => {
+    if (value) {
+      setActiveIndex(tabContentChildren.findIndex((child) => child.props.tabId === value));
+    }
+  }, [tabContentChildren, value]);
+
   const [activeIndex, setActiveIndex] = useState(getDefaultTabIndex);
 
   if (new Set(tabIds).size !== tabIds.length) {
@@ -118,11 +129,11 @@ export const Tabs: TabsCmp<TabsProps> = ({
     setSelectedTriggerWidth(activeTabElement?.getBoundingClientRect().width || 0);
   };
 
-  const handleTabChange = (value: string) => {
-    if (isLineVariant) {
-      setActiveIndex(tabContentChildren.findIndex((child) => child.props.tabId === value));
+  const handleTabChange = (_value: string) => {
+    if (isLineVariant && !value) {
+      setActiveIndex(tabContentChildren.findIndex((child) => child.props.tabId === _value));
     }
-    onChange?.(createTabChangeDetailEvent(value));
+    onChange?.(createTabChangeDetailEvent(_value));
   };
 
   const handleScrollButtonClick = (side: "left" | "right") => {
@@ -207,6 +218,7 @@ export const Tabs: TabsCmp<TabsProps> = ({
       onValueChange={handleTabChange}
       data-testid={dataTestId}
       className={classNames}
+      value={value}
       {...props}
     >
       <div className={cx(`${rootClassName}__container`)}>