@purpurds/tabs 4.6.0 → 5.0.0

package/dist/tabs.utils.d.ts

@@ -3,7 +3,7 @@ import { TabContent } from './tab-content';
 export type TabsCmp<P> = React.FunctionComponent<P> & {
     Content: typeof TabContent;
 };
-export declare const tabsVariants: readonly ["line", "line-negative", "contained", "contained-negative"];
+export declare const tabsVariants: readonly ["line", "contained"];
 export type TabsVariant = (typeof tabsVariants)[number];
 export declare const createTabChangeDetailEvent: (value: string) => CustomEvent<TabChangeDetail>;
 export type TabChangeDetail = {

package/dist/tabs.utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.utils.d.ts","sourceRoot":"","sources":["../src/tabs.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;IACpD,OAAO,EAAE,OAAO,UAAU,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,YAAY,uEAAwE,CAAC;AAElG,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,0BAA0B,UAAW,MAAM,iCACoB,CAAC;AAE7E,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC"}
+{"version":3,"file":"tabs.utils.d.ts","sourceRoot":"","sources":["../src/tabs.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,MAAM,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,GAAG;IACpD,OAAO,EAAE,OAAO,UAAU,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,YAAY,gCAAiC,CAAC;AAE3D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,0BAA0B,UAAW,MAAM,iCACoB,CAAC;AAE7E,MAAM,MAAM,eAAe,GAAG;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tabs",
-  "version": "4.6.0",
+  "version": "5.0.0",
   "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": "4.6.0",
-    "@purpurds/paragraph": "4.6.0",
-    "@purpurds/icon": "4.6.0"
+    "@purpurds/icon": "5.0.0",
+    "@purpurds/tokens": "5.0.0",
+    "@purpurds/paragraph": "5.0.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "~1.10.0",

package/src/tab-header.tsx

@@ -10,6 +10,7 @@ type TabHeaderProps = {
   index: number;
   tabId: string;
   variant: TabsVariant;
+  negative?: boolean;
   onFocus: FocusEventHandler<HTMLButtonElement>;
   children: ReactNode;
 };
@@ -19,12 +20,20 @@ const rootClassName = "purpur-tab-header";
 
 export const TabHeader = forwardRef(
   <T extends HTMLButtonElement>(
-    { index, tabId, variant, onFocus, "data-testid": dataTestId, children }: TabHeaderProps,
+    {
+      index,
+      tabId,
+      variant,
+      negative,
+      onFocus,
+      "data-testid": dataTestId,
+      children,
+    }: TabHeaderProps,
     ref: ForwardedRef<T>
   ) => (
     <Trigger
       id={`${tabId}-trigger`}
-      className={cx([rootClassName, `${rootClassName}--${variant}`])}
+      className={cx([rootClassName, `${rootClassName}--${variant}${negative ? "-negative" : ""}`])}
       value={tabId}
       data-testid={dataTestId}
       data-index={index}

package/src/tabs.stories.tsx

@@ -30,57 +30,6 @@ 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],
@@ -111,19 +60,18 @@ export const Showcase: Story = {
         <div>Content 3</div>
       </Tabs.Content>,
     ],
+    negative: false,
   },
   render: ({ children, ...args }) => (
     <div
       style={{
         padding: "var(--purpur-spacing-250)",
-        background: args.variant?.includes("negative")
+        background: args.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" : ""
-        }`,
+        color: `var(--purpur-color-text-default${args.negative ? "-negative" : ""}`,
       }}
     >
       <Tabs {...args}>{children}</Tabs>

package/src/tabs.test.tsx

@@ -119,21 +119,6 @@ describe("Tabs", () => {
     expect(screen.getByTestId("tabs-test-selected-border")).toBeInTheDocument();
   });
 
-  it("should render selected border for line-negative variant", () => {
-    render(
-      <Tabs variant="line-negative" data-testid="tabs-test">
-        <TabContent tabId="tab-1" name="Tab name 1">
-          <div>Content</div>
-        </TabContent>
-        <TabContent tabId="tab-2" name="Tab name 2">
-          <div>Content</div>
-        </TabContent>
-      </Tabs>
-    );
-
-    expect(screen.getByTestId("tabs-test-selected-border")).toBeInTheDocument();
-  });
-
   it("should not render selected border for contained variant", () => {
     render(
       <Tabs variant="contained" data-testid="tabs-test">
@@ -149,21 +134,6 @@ describe("Tabs", () => {
     expect(screen.queryByTestId("tabs-test-selected-border")).not.toBeInTheDocument();
   });
 
-  it("should not render selected border for contained-negative variant", () => {
-    render(
-      <Tabs variant="contained-negative" data-testid="tabs-test">
-        <TabContent tabId="tab-1" name="Tab name 1">
-          <div>Content</div>
-        </TabContent>
-        <TabContent tabId="tab-2" name="Tab name 2">
-          <div>Content</div>
-        </TabContent>
-      </Tabs>
-    );
-
-    expect(screen.queryByTestId("tabs-test-selected-border")).not.toBeInTheDocument();
-  });
-
   it("should throw error if duplicate tabId is found", () => {
     expect(() => {
       render(

package/src/tabs.tsx

@@ -11,6 +11,7 @@ import { createTabChangeDetailEvent, TabChangeDetail, TabsCmp, TabsVariant } fro
 type TabsProps = {
   children: Array<ReactElement<typeof TabContent>> | ReactElement<typeof TabContent>;
   variant?: TabsVariant;
+  negative?: boolean;
   fullWidth?: boolean;
   /**
    * Event handler called when the value changes.
@@ -66,6 +67,7 @@ const scrollToTarget = (target: HTMLElement, tabList?: HTMLDivElement | null) =>
 export const Tabs: TabsCmp<TabsProps> = ({
   children,
   variant = "line",
+  negative = false,
   fullWidth = false,
   onChange,
   className,
@@ -80,11 +82,11 @@ export const Tabs: TabsCmp<TabsProps> = ({
   const tabList = useRef<HTMLDivElement | null>();
   const tabChildren = useRef<HTMLButtonElement[]>(new Array(tabContentChildren.length));
   const sideScrollAdjustmentSize = 200;
-  const isLineVariant = variant === "line" || variant === "line-negative";
+  const isLineVariant = variant === "line";
 
   const classNames = cx([
     rootClassName,
-    `${rootClassName}--${variant}`,
+    `${rootClassName}--${variant}${negative ? "-negative" : ""}`,
     { [`${rootClassName}--fullWidth`]: fullWidth },
     className,
   ]);
@@ -147,11 +149,11 @@ export const Tabs: TabsCmp<TabsProps> = ({
     return () => {
       window.removeEventListener("resize", handleLinePosition);
     };
-  }, []);
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     handleLinePosition();
-  }, [activeIndex, fullWidth, tabContentChildren, variant]);
+  }, [activeIndex, fullWidth, tabContentChildren.length, variant]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
     const onIntersection = (entries: IntersectionObserverEntry[]): void => {
@@ -186,10 +188,12 @@ export const Tabs: TabsCmp<TabsProps> = ({
       root: tabList.current,
     });
 
-    tabChildren.current.forEach((el) => observer.observe(el));
+    const currentTabChildren = tabChildren.current;
+
+    currentTabChildren.forEach((el) => observer.observe(el));
 
     return () => {
-      tabChildren.current.forEach((el) => observer.unobserve(el));
+      currentTabChildren.forEach((el) => observer.unobserve(el));
     };
   }, [tabContentChildren.length]);
 
@@ -225,6 +229,7 @@ export const Tabs: TabsCmp<TabsProps> = ({
                     scrollToTarget(e.target as HTMLElement, tabList.current);
                   }}
                   variant={variant}
+                  negative={negative}
                 >
                   {name}
                 </TabHeader>

package/src/tabs.utils.ts

@@ -4,7 +4,7 @@ export type TabsCmp<P> = React.FunctionComponent<P> & {
   Content: typeof TabContent;
 };
 
-export const tabsVariants = ["line", "line-negative", "contained", "contained-negative"] as const;
+export const tabsVariants = ["line", "contained"] as const;
 
 export type TabsVariant = (typeof tabsVariants)[number];