@purpurds/tabs 8.4.0 → 8.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/tabs",
-  "version": "8.4.0",
+  "version": "8.5.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/tabs.cjs.js",
   "types": "./dist/tabs.d.ts",
@@ -17,10 +17,10 @@
   "dependencies": {
     "@radix-ui/react-tabs": "~1.1.3",
     "classnames": "~2.5.0",
-    "@purpurds/common-types": "8.4.0",
-    "@purpurds/tokens": "8.4.0",
-    "@purpurds/icon": "8.4.0",
-    "@purpurds/paragraph": "8.4.0"
+    "@purpurds/icon": "8.5.1",
+    "@purpurds/paragraph": "8.5.1",
+    "@purpurds/tokens": "8.5.1",
+    "@purpurds/common-types": "8.5.1"
   },
   "devDependencies": {
     "@storybook/react-vite": "^9.0.18",
@@ -40,10 +40,10 @@
     "typescript": "^5.6.3",
     "vite": "^6.2.1",
     "vitest": "^3.1.2",
-    "@purpurds/button": "8.4.0",
+    "@purpurds/button": "8.5.1",
+    "@purpurds/icon": "8.5.1",
     "@purpurds/component-rig": "1.0.0",
-    "@purpurds/icon": "8.4.0",
-    "@purpurds/paragraph": "8.4.0"
+    "@purpurds/paragraph": "8.5.1"
   },
   "peerDependencies": {
     "@types/react": "^18 || ^19",

package/src/tab-header.module.scss

@@ -7,7 +7,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
+  width: auto;
   padding: calc(var(--purpur-spacing-100) + var(--purpur-spacing-25)) var(--purpur-spacing-200);
   border: 0;
   border-radius: var(--purpur-border-radius-sm) var(--purpur-border-radius-sm) 0 0;

package/src/tabs.module.scss

@@ -33,7 +33,8 @@
         content: "";
         position: absolute;
         inset: calc(-1 * var(--purpur-border-width-xs));
-        border: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-subtle-hover);
+        border: var(--purpur-border-width-sm) solid
+          var(--purpur-color-border-interactive-subtle-hover);
         border-radius: var(--purpur-border-radius-xs);
         box-sizing: border-box;
         opacity: 0;
@@ -86,13 +87,13 @@
       right: 0;
     }
 
-    &--scroll-end {
+    &--scroll-start {
       #{$root}__scroll-button--left {
         display: flex;
       }
     }
 
-    &--scroll-start {
+    &--scroll-end {
       #{$root}__scroll-button--right {
         display: flex;
       }

package/src/tabs.tsx

@@ -205,46 +205,37 @@ export const Tabs: TabsCmp<TabsProps> = ({
   }, [activeIndex, fullWidth, tabContentChildren.length, variant]); // eslint-disable-line react-hooks/exhaustive-deps
 
   useEffect(() => {
-    const onIntersection = (entries: IntersectionObserverEntry[]): void => {
-      const allEntriesVisible =
-        entries.every((entry) => entry.isIntersecting) &&
-        entries.length === tabContentChildren.length;
+    const root = tabList.current;
+    if (!root) return;
 
-      if (allEntriesVisible) {
+    const updateScrollState = () => {
+      const { scrollLeft, scrollWidth, clientWidth } = root;
+
+      const canScroll = scrollWidth > clientWidth;
+      const atStart = scrollLeft <= 1;
+      const atEnd = scrollLeft + clientWidth >= scrollWidth - 1;
+
+      if (!canScroll) {
         setScrollClasses({});
         return;
       }
 
-      entries.forEach((entry) => {
-        const entryIndex = Number(entry.target.getAttribute("data-index"));
-        const isStartEntry = entryIndex === 0;
-        const isLastEntry = entryIndex === tabContentChildren.length - 1;
-
-        setScrollClasses((currentScrollClasses) => ({
-          ...currentScrollClasses,
-          ...(isStartEntry && {
-            [`${rootClassName}__wrapper--scroll-end`]: !entry.isIntersecting,
-          }),
-          ...(isLastEntry && {
-            [`${rootClassName}__wrapper--scroll-start`]: !entry.isIntersecting,
-          }),
-        }));
+      setScrollClasses({
+        [`${rootClassName}__wrapper--scroll-start`]: !atStart,
+        [`${rootClassName}__wrapper--scroll-end`]: !atEnd,
       });
     };
 
-    const observer = new IntersectionObserver(onIntersection, {
-      threshold: [0.99],
-      root: tabList.current,
-    });
-
-    const currentTabChildren = tabChildren.current;
+    updateScrollState();
 
-    currentTabChildren.forEach((el) => observer.observe(el));
+    root.addEventListener("scroll", updateScrollState, { passive: true });
+    window.addEventListener("resize", updateScrollState);
 
     return () => {
-      currentTabChildren.forEach((el) => observer.unobserve(el));
+      root.removeEventListener("scroll", updateScrollState);
+      window.removeEventListener("resize", updateScrollState);
     };
-  }, [tabContentChildren.length]);
+  }, []);
 
   return (
     <Root