@trackunit/react-components 1.8.40 → 1.8.44

package/index.cjs.js

@@ -4078,7 +4078,27 @@ const TabContent = ({ className, dataTestId, children, ...rest }) => {
  * Wrapper for radix tab list component.
  */
 const TabList = ({ className, dataTestId, children, ...rest }) => {
-    return (jsxRuntime.jsx(reactTabs.List, { className: cvaTabList({ className }), "data-testid": dataTestId, ...rest, children: children }));
+    const listRef = react.useRef(null);
+    react.useEffect(() => {
+        const element = listRef.current;
+        if (!element)
+            return;
+        const handleWheel = (event) => {
+            const canScrollHorizontally = element.scrollWidth > element.clientWidth;
+            if (canScrollHorizontally) {
+                // Prevent vertical scrolling of the page if we can scroll horizontally
+                event.preventDefault();
+                const scrollAmount = event.deltaX || event.deltaY;
+                element.scrollLeft += scrollAmount;
+            }
+        };
+        // Add event listener with passive: false to allow preventDefault()
+        element.addEventListener("wheel", handleWheel, { passive: false });
+        return () => {
+            element.removeEventListener("wheel", handleWheel);
+        };
+    }, []);
+    return (jsxRuntime.jsx(reactTabs.List, { className: cvaTabList({ className }), "data-testid": dataTestId, ref: listRef, ...rest, children: children }));
 };
 
 /**

package/index.esm.js

@@ -4076,7 +4076,27 @@ const TabContent = ({ className, dataTestId, children, ...rest }) => {
  * Wrapper for radix tab list component.
  */
 const TabList = ({ className, dataTestId, children, ...rest }) => {
-    return (jsx(List$1, { className: cvaTabList({ className }), "data-testid": dataTestId, ...rest, children: children }));
+    const listRef = useRef(null);
+    useEffect(() => {
+        const element = listRef.current;
+        if (!element)
+            return;
+        const handleWheel = (event) => {
+            const canScrollHorizontally = element.scrollWidth > element.clientWidth;
+            if (canScrollHorizontally) {
+                // Prevent vertical scrolling of the page if we can scroll horizontally
+                event.preventDefault();
+                const scrollAmount = event.deltaX || event.deltaY;
+                element.scrollLeft += scrollAmount;
+            }
+        };
+        // Add event listener with passive: false to allow preventDefault()
+        element.addEventListener("wheel", handleWheel, { passive: false });
+        return () => {
+            element.removeEventListener("wheel", handleWheel);
+        };
+    }, []);
+    return (jsx(List$1, { className: cvaTabList({ className }), "data-testid": dataTestId, ref: listRef, ...rest, children: children }));
 };
 
 /**

package/package.json

@@ -1,28 +1,28 @@
 {
   "name": "@trackunit/react-components",
-  "version": "1.8.40",
+  "version": "1.8.44",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=22.x"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
     "react": "19.0.0",
     "usehooks-ts": "^3.1.0",
-    "@radix-ui/react-tabs": "^1.0.4",
     "react-helmet-async": "^1.3.0",
     "lodash": "4.17.21",
     "@testing-library/react": "16.2.0",
     "@floating-ui/react": "^0.26.25",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/ui-design-tokens": "1.6.63",
-    "@trackunit/css-class-variance-utilities": "1.6.61",
-    "@trackunit/shared-utils": "1.8.62",
-    "@trackunit/ui-icons": "1.6.60",
-    "@trackunit/react-table-pagination": "1.6.60",
-    "@trackunit/react-test-setup": "1.3.61",
+    "@trackunit/ui-design-tokens": "1.6.67",
+    "@trackunit/css-class-variance-utilities": "1.6.65",
+    "@trackunit/shared-utils": "1.8.66",
+    "@trackunit/ui-icons": "1.6.64",
+    "@trackunit/react-table-pagination": "1.6.64",
+    "@trackunit/react-test-setup": "1.3.65",
     "@tanstack/react-router": "1.114.29"
   },
   "module": "./index.esm.js",