fix(tabs): stabilize drag scrolling

.changeset/tabs-drag-scroll.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Fix overflowing segmented Tabs drag-to-scroll interactions so mouse and touch drags reliably scroll while normal tab clicks still activate tabs.

packages/kumo/package.json

@@ -465,7 +465,6 @@
     "@base-ui/react": "^1.4.0",
     "@shikijs/langs": "^4.0.0",
     "@shikijs/themes": "^4.0.0",
-    "@use-gesture/react": "^10.3.1",
     "clsx": "^2.1.1",
     "motion": "^12.34.1",
     "react-day-picker": "^9.13.2",

packages/kumo/src/components/tabs/tabs.tsx

@@ -1,7 +1,6 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type MouseEvent, type PointerEvent, type ReactNode } from "react";
 import type { TabsTab } from "@base-ui/react/tabs";
 import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
-import { useDrag } from "@use-gesture/react";
 import { cn } from "../../utils/cn";
 
 /** Tabs variant definitions. */
@@ -174,8 +173,9 @@ export function Tabs({
         {...bindDrag()}
         className={cn(
           "relative flex min-w-0 shrink items-stretch",
-          isSegmented && "kumo-tabs-list overflow-x-auto rounded-lg bg-kumo-recessed px-0.5 touch-pan-y ring ring-kumo-hairline/70 [--scroll-fade-width:3rem]",
+          isSegmented && "kumo-tabs-list overflow-x-auto rounded-lg bg-kumo-recessed px-0.5 ring ring-kumo-hairline/70 [--scroll-fade-width:3rem]",
           isSegmented && (isSm ? "h-6.5 rounded-md" : "h-9"),
+          isOverflowing && "cursor-grab active:cursor-grabbing",
           isUnderline && "gap-4 border-b border-kumo-hairline pb-2",
           isUnderline && (isSm ? "h-6.5" : "h-7.5"),
           listClassName,
@@ -187,7 +187,8 @@ export function Tabs({
             value={tab.value}
             render={tab.render}
             className={cn(
-              "relative z-2 flex cursor-pointer items-center rounded bg-transparent whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
+              "relative z-2 flex items-center rounded bg-transparent whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
+              isOverflowing ? "cursor-grab active:cursor-grabbing" : "cursor-pointer",
               isSm ? "text-xs" : "text-base",
               isSegmented &&
                 "my-0.5 rounded-md text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset",
@@ -225,30 +226,85 @@ export function Tabs({
 // ─── Horizontal drag-to-scroll ────────────────────────────────────────
 
 /**
- * Enables pointer/touch drag to horizontally scroll the tab list.
- * Only active when the list is overflowing. Prevents vertical scroll
- * interference and uses `touch-action: pan-y` so native vertical
- * scrolling is preserved.
+ * Enables mouse drag to horizontally scroll the tab list.
+ * Touch devices keep native horizontal overflow scrolling and inertia.
  */
 function useHorizontalDragScroll(
   ref: React.RefObject<HTMLElement | null>,
   enabled: boolean,
 ) {
-  return useDrag(
-    ({ delta: [dx], event }) => {
+  const dragState = useRef<{
+    pointerId: number;
+    startX: number;
+    scrollLeft: number;
+    dragging: boolean;
+  } | null>(null);
+  const shouldSuppressClick = useRef(false);
+
+  return () => ({
+    onPointerDownCapture: (event: PointerEvent<HTMLElement>) => {
       const el = ref.current;
       if (!el || !enabled) return;
-      // Prevent text selection while dragging
-      event?.preventDefault();
-      el.scrollLeft -= dx;
+      if (event.pointerType !== "mouse" || event.button !== 0) return;
+
+      dragState.current = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        scrollLeft: el.scrollLeft,
+        dragging: false,
+      };
+      shouldSuppressClick.current = false;
     },
-    {
-      axis: "x",
-      pointer: { touch: true },
-      filterTaps: true,
-      from: [0, 0],
+    onPointerMoveCapture: (event: PointerEvent<HTMLElement>) => {
+      const el = ref.current;
+      const state = dragState.current;
+      if (!el || !enabled || !state || state.pointerId !== event.pointerId) return;
+
+      const movementX = event.clientX - state.startX;
+      if (!state.dragging) {
+        if (Math.abs(movementX) <= 3) return;
+        state.dragging = true;
+        shouldSuppressClick.current = true;
+        el.setPointerCapture(event.pointerId);
+      }
+
+      event.preventDefault();
+      el.scrollLeft = state.scrollLeft - movementX;
     },
-  );
+    onPointerUpCapture: (event: PointerEvent<HTMLElement>) => {
+      const el = ref.current;
+      const state = dragState.current;
+      if (!el || !state || state.pointerId !== event.pointerId) return;
+
+      dragState.current = null;
+      if (el.hasPointerCapture(event.pointerId)) {
+        el.releasePointerCapture(event.pointerId);
+      }
+      if (shouldSuppressClick.current) {
+        window.setTimeout(() => {
+          shouldSuppressClick.current = false;
+        }, 0);
+      }
+    },
+    onPointerCancelCapture: (event: PointerEvent<HTMLElement>) => {
+      const el = ref.current;
+      const state = dragState.current;
+      if (!el || !state || state.pointerId !== event.pointerId) return;
+
+      dragState.current = null;
+      if (el.hasPointerCapture(event.pointerId)) {
+        el.releasePointerCapture(event.pointerId);
+      }
+    },
+    onClickCapture: (event: MouseEvent<HTMLElement>) => {
+      if (!shouldSuppressClick.current) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      shouldSuppressClick.current = false;
+    },
+  });
 }
 
 // ─── Overflow detection ───────────────────────────────────────────────