@purpurds/tabs 4.3.0 → 4.4.0

package/dist/tabs.utils.d.ts

@@ -1,4 +1,5 @@
-import { TabContent } from "./tab-content";
+import { TabContent } from './tab-content';
+
 export type TabsCmp<P> = React.FunctionComponent<P> & {
     Content: typeof TabContent;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tabs",
-  "version": "4.3.0",
+  "version": "4.4.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/tabs.cjs.js",
   "types": "./dist/tabs.d.ts",
@@ -16,32 +16,32 @@
   "dependencies": {
     "classnames": "~2.5.0",
     "@radix-ui/react-tabs": "~1.0.4",
-    "@purpurds/icon": "4.3.0",
-    "@purpurds/paragraph": "4.3.0",
-    "@purpurds/tokens": "4.3.0"
+    "@purpurds/tokens": "4.4.0",
+    "@purpurds/icon": "4.4.0",
+    "@purpurds/paragraph": "4.4.0"
   },
   "devDependencies": {
-    "@rushstack/eslint-patch": "~1.7.0",
+    "@rushstack/eslint-patch": "~1.10.0",
     "@storybook/blocks": "~7.6.0",
     "@storybook/react": "~7.6.0",
     "@telia/base-rig": "~8.2.0",
     "@telia/react-rig": "~3.2.0",
     "@testing-library/dom": "~9.3.3",
     "@testing-library/jest-dom": "~6.4.0",
-    "@testing-library/react": "~14.2.0",
+    "@testing-library/react": "~14.3.0",
     "@types/node": "18",
-    "@types/react-dom": "~18.2.17",
-    "@types/react": "~18.2.42",
+    "@types/react-dom": "~18.3.0",
+    "@types/react": "~18.3.0",
     "eslint-plugin-testing-library": "~6.2.0",
     "eslint": "~8.57.0",
     "jsdom": "~22.1.0",
     "lint-staged": "~10.5.3",
     "prettier": "~2.8.8",
-    "react-dom": "~18.2.0",
-    "react": "~18.2.0",
+    "react-dom": "~18.3.0",
+    "react": "~18.3.0",
     "typescript": "~5.4.2",
     "vite": "~5.2.2",
-    "vitest": "~1.4.0",
+    "vitest": "~1.5.0",
     "@purpurds/component-rig": "1.0.0"
   },
   "scripts": {

package/src/tabs.stories.tsx

@@ -30,6 +30,57 @@ type Story = StoryObj<typeof Tabs>;
 const tabId = "tab";
 const name = "Tab name";
 
+export const ActiveTab: Story = {
+  args: {
+    variant: tabsVariants[0],
+    defaultValue: `${tabId}-2`,
+    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>,
+    ],
+  },
+  render: ({ children, ...args }) => (
+    <div
+      style={{
+        padding: "var(--purpur-spacing-250)",
+        background: args.variant?.includes("negative")
+          ? "var(--purpur-color-purple-900)"
+          : args.variant === "contained"
+          ? "var(--purpur-color-gray-50)"
+          : "transparent",
+        color: `var(--purpur-color-text-default${
+          args.variant === "line-negative" ? "-negative" : ""
+        }`,
+      }}
+    >
+      <Tabs {...args}>{children}</Tabs>
+    </div>
+  ),
+};
+
 export const Showcase: Story = {
   args: {
     variant: tabsVariants[0],
@@ -68,8 +119,8 @@ export const Showcase: Story = {
         background: args.variant?.includes("negative")
           ? "var(--purpur-color-purple-900)"
           : args.variant === "contained"
-            ? "var(--purpur-color-gray-50)"
-            : "transparent",
+          ? "var(--purpur-color-gray-50)"
+          : "transparent",
         color: `var(--purpur-color-text-default${
           args.variant === "line-negative" ? "-negative" : ""
         }`,

package/src/tabs.test.tsx

@@ -3,9 +3,9 @@ import * as matchers from "@testing-library/jest-dom/matchers";
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 
-import { Tabs } from "./tabs";
-import { TabContent } from "./tab-content";
 import "./__mocks__/intersectionObserverMock";
+import { TabContent } from "./tab-content";
+import { Tabs } from "./tabs";
 
 const rootClassName = "purpur-tabs";
 
@@ -71,6 +71,24 @@ describe("Tabs", () => {
     expect(screen.getAllByTestId(testId).length).toEqual(2);
   });
 
+  it("should render second tab active if defaultValue prop provided", () => {
+    const testId = "tab-content";
+
+    render(
+      <Tabs defaultValue="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");
+  });
+
   it("should render two scroll buttons", () => {
     render(
       <Tabs data-testid="tabs-test">

package/src/tabs.tsx

@@ -17,6 +17,7 @@ type TabsProps = {
    * */
   onChange?: (event: CustomEvent<TabChangeDetail>) => void;
   className?: string;
+  defaultValue?: string;
   "data-testid"?: string;
 };
 
@@ -68,10 +69,10 @@ export const Tabs: TabsCmp<TabsProps> = ({
   fullWidth = false,
   onChange,
   className,
+  defaultValue,
   "data-testid": dataTestId,
   ...props
 }) => {
-  const [activeIndex, setActiveIndex] = useState(0);
   const [scrollClasses, setScrollClasses] = useState<{ [key: string]: boolean }>({});
   const [selectedTriggerOffset, setSelectedTriggerOffset] = useState(0);
   const [selectedTriggerWidth, setSelectedTriggerWidth] = useState(0);
@@ -90,6 +91,9 @@ export const Tabs: TabsCmp<TabsProps> = ({
 
   const tabIds = Children.map(tabContentChildren, ({ props: { tabId } }) => tabId);
 
+  const getDefaultTabIndex = () => tabIds.findIndex((tabIndex) => tabIndex === defaultValue) || 0;
+  const [activeIndex, setActiveIndex] = useState(getDefaultTabIndex);
+
   if (new Set(tabIds).size !== tabIds.length) {
     throw new Error("tabId must be unique");
   }
@@ -191,7 +195,7 @@ export const Tabs: TabsCmp<TabsProps> = ({
 
   return (
     <Root
-      defaultValue={tabContentChildren[0].props.tabId}
+      defaultValue={defaultValue}
       onValueChange={handleTabChange}
       data-testid={dataTestId}
       className={classNames}