@trackunit/react-components 1.21.7 → 1.21.8

package/index.cjs.js

@@ -7816,6 +7816,33 @@ const TabContent = ({ className, "data-testid": dataTestId, children, ref, ...re
     return (jsxRuntime.jsx(reactTabs.Content, { className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, ref: ref, ...rest, children: children }));
 };
 
+/**
+ * Scrolls the active tab into the visible area of the TabList container,
+ * using direct scrollLeft manipulation so ancestor scroll containers are unaffected.
+ */
+const useScrollActiveTabIntoView = ({ listRef, enabled, }) => {
+    react.useLayoutEffect(() => {
+        if (!enabled)
+            return;
+        const element = listRef.current;
+        if (!element)
+            return;
+        const activeTab = element.querySelector('[aria-selected="true"]');
+        if (!activeTab)
+            return;
+        const tabLeft = activeTab.offsetLeft;
+        const tabRight = tabLeft + activeTab.offsetWidth;
+        const visibleLeft = element.scrollLeft;
+        const visibleRight = visibleLeft + element.clientWidth;
+        if (tabLeft < visibleLeft) {
+            element.scrollLeft = tabLeft;
+        }
+        else if (tabRight > visibleRight) {
+            element.scrollLeft = tabRight - element.clientWidth;
+        }
+    }, [enabled, listRef]);
+};
+
 /**
  * TabList is the container for Tab triggers inside a Tabs component.
  * It renders a horizontal row of tab triggers and handles horizontal scroll behavior when tabs overflow.
@@ -7870,24 +7897,7 @@ const TabList = ({ className, "data-testid": dataTestId, children, autoScrollToA
             element.removeEventListener("wheel", handleWheel);
         };
     }, []);
-    // Auto-scroll active tab into view when enabled
-    react.useLayoutEffect(() => {
-        if (!autoScrollToActive) {
-            return;
-        }
-        const element = listRef.current;
-        if (!element)
-            return;
-        // Find the active tab using a radix UI build in selector
-        const activeTab = element.querySelector('[aria-selected="true"]');
-        if (activeTab && typeof activeTab.scrollIntoView === "function") {
-            activeTab.scrollIntoView({
-                behavior: "instant",
-                block: "nearest",
-                inline: "center",
-            });
-        }
-    }, [autoScrollToActive]);
+    useScrollActiveTabIntoView({ listRef, enabled: autoScrollToActive });
     return (jsxRuntime.jsx(reactTabs.List, { className: cvaTabList({ className }), "data-testid": dataTestId, ref: mergedRef, ...rest, children: children }));
 };
 

package/index.esm.js

@@ -7814,6 +7814,33 @@ const TabContent = ({ className, "data-testid": dataTestId, children, ref, ...re
     return (jsx(Content$1, { className: cvaTabContent({ className }), "data-testid": dataTestId ? `${dataTestId}-content` : undefined, ref: ref, ...rest, children: children }));
 };
 
+/**
+ * Scrolls the active tab into the visible area of the TabList container,
+ * using direct scrollLeft manipulation so ancestor scroll containers are unaffected.
+ */
+const useScrollActiveTabIntoView = ({ listRef, enabled, }) => {
+    useLayoutEffect(() => {
+        if (!enabled)
+            return;
+        const element = listRef.current;
+        if (!element)
+            return;
+        const activeTab = element.querySelector('[aria-selected="true"]');
+        if (!activeTab)
+            return;
+        const tabLeft = activeTab.offsetLeft;
+        const tabRight = tabLeft + activeTab.offsetWidth;
+        const visibleLeft = element.scrollLeft;
+        const visibleRight = visibleLeft + element.clientWidth;
+        if (tabLeft < visibleLeft) {
+            element.scrollLeft = tabLeft;
+        }
+        else if (tabRight > visibleRight) {
+            element.scrollLeft = tabRight - element.clientWidth;
+        }
+    }, [enabled, listRef]);
+};
+
 /**
  * TabList is the container for Tab triggers inside a Tabs component.
  * It renders a horizontal row of tab triggers and handles horizontal scroll behavior when tabs overflow.
@@ -7868,24 +7895,7 @@ const TabList = ({ className, "data-testid": dataTestId, children, autoScrollToA
             element.removeEventListener("wheel", handleWheel);
         };
     }, []);
-    // Auto-scroll active tab into view when enabled
-    useLayoutEffect(() => {
-        if (!autoScrollToActive) {
-            return;
-        }
-        const element = listRef.current;
-        if (!element)
-            return;
-        // Find the active tab using a radix UI build in selector
-        const activeTab = element.querySelector('[aria-selected="true"]');
-        if (activeTab && typeof activeTab.scrollIntoView === "function") {
-            activeTab.scrollIntoView({
-                behavior: "instant",
-                block: "nearest",
-                inline: "center",
-            });
-        }
-    }, [autoScrollToActive]);
+    useScrollActiveTabIntoView({ listRef, enabled: autoScrollToActive });
     return (jsx(List$1, { className: cvaTabList({ className }), "data-testid": dataTestId, ref: mergedRef, ...rest, children: children }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.21.7",
+  "version": "1.21.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Tabs/useScrollActiveTabIntoView.d.ts

@@ -0,0 +1,9 @@
+import { type RefObject } from "react";
+/**
+ * Scrolls the active tab into the visible area of the TabList container,
+ * using direct scrollLeft manipulation so ancestor scroll containers are unaffected.
+ */
+export declare const useScrollActiveTabIntoView: ({ listRef, enabled, }: {
+    readonly listRef: RefObject<HTMLDivElement | null>;
+    readonly enabled: boolean;
+}) => void;