@purpurds/tabs 5.35.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tabs",
-  "version": "5.35.0",
+  "version": "6.0.0",
   "license": "AGPL-3.0-only",
   "main": "./dist/tabs.cjs.js",
   "types": "./dist/tabs.d.ts",
@@ -17,12 +17,13 @@
   "dependencies": {
     "classnames": "~2.5.0",
     "@radix-ui/react-tabs": "~1.0.4",
-    "@purpurds/tokens": "5.35.0",
-    "@purpurds/paragraph": "5.35.0",
-    "@purpurds/icon": "5.35.0"
+    "@purpurds/paragraph": "6.0.0",
+    "@purpurds/tokens": "6.0.0",
+    "@purpurds/icon": "6.0.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/preview-api": "^8.3.5",
     "@storybook/react": "^8.3.5",
     "storybook": "^8.3.5",
     "@telia/base-rig": "~8.2.0",
@@ -43,8 +44,8 @@
     "typescript": "^5.6.3",
     "vite": "5.4.8",
     "vitest": "^2.1.2",
-    "@purpurds/component-rig": "1.0.0",
-    "@purpurds/button": "5.35.0"
+    "@purpurds/button": "6.0.0",
+    "@purpurds/component-rig": "1.0.0"
   },
   "scripts": {
     "build:dev": "vite",

package/src/tab-content.module.scss

@@ -13,4 +13,10 @@
       pointer-events: none;
     }
   }
+
+  &--force-mount {
+    &[data-state="inactive"] {
+      display: none;
+    }
+  }
 }

package/src/tab-content.test.tsx

@@ -14,18 +14,51 @@ expect.extend(matchers);
 describe("TabContent", () => {
   afterEach(cleanup);
 
-  it("should render plain", () => {
+  it("should render tab contents", () => {
     render(
       <Tabs variant="line">
-        <TabContent tabId="tab-1" name="Tab name 1" data-testid="tab-content">
-          <div>Content</div>
+        <TabContent tabId="tab-1" name="Tab name 1" data-testid="tab-content-1">
+          <div>content-one</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2" data-testid="tab-content-2">
+          <div>content-two</div>
+        </TabContent>
+      </Tabs>
+    );
+
+    const tabContent1 = screen.getByTestId("tab-content-1");
+    const tabContent2 = screen.getByTestId("tab-content-2");
+    expect(tabContent1).toHaveTextContent("content-one");
+    expect(tabContent2).toHaveTextContent("content-two");
+    expect(tabContent1.classList.value).toContain(`${rootClassName} ${rootClassName}--force-mount`);
+    expect(tabContent2.classList.value).toContain(`${rootClassName} ${rootClassName}--force-mount`);
+  });
+
+  it("should only render active content when disableForceMount is true", () => {
+    render(
+      <Tabs variant="line">
+        <TabContent tabId="tab-1" name="Tab name 1" disableForceMount data-testid="tab-content-1">
+          <div>content-one</div>
+        </TabContent>
+        <TabContent tabId="tab-2" name="Tab name 2" disableForceMount data-testid="tab-content-2">
+          <div>content-two</div>
+        </TabContent>
+        <TabContent tabId="tab-3" name="Tab name 3" disableForceMount data-testid="tab-content-3">
+          <div>content-three</div>
         </TabContent>
       </Tabs>
     );
 
-    const tabContent = screen.getByTestId("tab-content");
-    expect(tabContent).toBeInTheDocument();
-    expect(tabContent.classList.value).toContain(rootClassName);
+    const tabContent1 = screen.getByTestId("tab-content-1");
+    const tabContent2 = screen.getByTestId("tab-content-2");
+    const tabContent3 = screen.getByTestId("tab-content-3");
+
+    expect(tabContent1.classList.value).not.toContain(`${rootClassName}--force-mount`);
+    expect(tabContent2.classList.value).not.toContain(`${rootClassName}--force-mount`);
+    expect(tabContent3.classList.value).not.toContain(`${rootClassName}--force-mount`);
+    expect(tabContent1).toHaveTextContent("content-one");
+    expect(tabContent2).not.toHaveTextContent("content-two");
+    expect(tabContent3).not.toHaveTextContent("content-three");
   });
 
   it("should throw error if not used within Tab component", () => {

package/src/tab-content.tsx

@@ -23,6 +23,10 @@ export type TabContentProps = {
    * A unique ID that associates the tab with a content.
    * */
   tabId: string;
+  /**
+   * If true, the inactive tab content will not be rendered.
+   */
+  disableForceMount?: boolean;
   className?: string;
   "data-testid"?: string;
 };
@@ -37,14 +41,26 @@ const rootClassName = "purpur-tab-content";
 
 export const TabContent = forwardRef(
   (
-    { children, tabId, "data-testid": dataTestId, className, ...rest }: TabContentPropsWithChildren,
+    {
+      children,
+      tabId,
+      "data-testid": dataTestId,
+      className,
+      disableForceMount,
+      ...rest
+    }: TabContentPropsWithChildren,
     ref: ForwardedRef<HTMLDivElement>
   ) => (
     <Content
       ref={ref}
-      className={cx([rootClassName, className])}
+      className={cx([
+        rootClassName,
+        className,
+        { [`${rootClassName}--force-mount`]: !disableForceMount },
+      ])}
       data-testid={dataTestId}
       value={tabId}
+      forceMount={!disableForceMount || undefined}
       {...rest}
     >
       {children}

package/src/tabs.stories.tsx

@@ -1,13 +1,12 @@
 import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "@purpurds/button";
 import { useArgs } from "@storybook/preview-api";
+import type { Meta, StoryObj } from "@storybook/react";
 
+import "@purpurds/button/styles";
 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,

package/src/tabs.tsx

@@ -1,5 +1,7 @@
 import React, { Children, ReactElement, useEffect, useRef, useState } from "react";
-import { chevronLeft, chevronRight, Icon } from "@purpurds/icon";
+import { Icon } from "@purpurds/icon";
+import { chevronLeft } from "@purpurds/icon/assets/chevron-left";
+import { chevronRight } from "@purpurds/icon/assets/chevron-right";
 import { List, Root } from "@radix-ui/react-tabs";
 import c from "classnames/bind";