@wix/patterns 1.371.0 → 1.373.0

package/src/components/CollectionViewsDropdown/AutoCompleteReadonly.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "AutoCompleteReadonly59401130";
+var _namespace_ = "AutoCompleteReadonly3315901655";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"AutoCompleteReadonly59401130__root"};
+export var classes = {"root":"AutoCompleteReadonly3315901655__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CollectionViewsDropdown/ViewsDropdown.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "ViewsDropdown3795669271";
+var _namespace_ = "ViewsDropdown4159399654";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"ViewsDropdown3795669271__root"};
+export var classes = {"root":"ViewsDropdown4159399654__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/CustomColumnsPanel/ColumnListTableListItem.tsx

@@ -162,7 +162,11 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                       {prefixIcon}
                     </Box>
                   )}
-                  <Text size="small" weight="normal" dataHook="tableListItem-label">
+                  <Text
+                    size="small"
+                    weight="normal"
+                    dataHook="tableListItem-label"
+                  >
                     {column.name || column.title || column.id}
                   </Text>
                   {isRequired && (
@@ -194,9 +198,7 @@ function _ColumnListTableListItem<T, F extends FiltersMap>(
                 {
                   value: (
                     <Box gap="SP1" verticalAlign="middle">
-                      <FieldIndications
-                        column={column}
-                      />
+                      <FieldIndications column={column} />
                       {dataExtensionsCTA}
                     </Box>
                   ),

package/src/components/CustomColumnsPanel/FieldIndications.tsx

@@ -14,7 +14,7 @@ export interface FieldIndicationsProps {
 
 function _FieldIndications({ column }: FieldIndicationsProps) {
   const { translate: t } = useWixPatternsContainer();
-  const { isPii, isPrimary,isSystem, dataExtension } = column;
+  const { isPii, isPrimary, isSystem, dataExtension } = column;
   const isDataExtension = !!dataExtension;
   const isNonEditableAppField =
     !isSystem && isDataExtension && !dataExtension?.editable;

package/src/components/DragHandle/DragHandle.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "DragHandle1066552789";
+var _namespace_ = "DragHandle4115249534";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"DragHandle1066552789__root"};
+export var classes = {"root":"DragHandle4115249534__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "EditableCell3567552358";
+var _namespace_ = "EditableCell2305502241";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"EditableCell3567552358__root","validationIndicator":"EditableCell3567552358__validationIndicator"};
+export var classes = {"root":"EditableCell2305502241__root","validationIndicator":"EditableCell2305502241__validationIndicator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/EditableCell.uni.driver.ts

@@ -91,6 +91,16 @@ export function EditableCellUniDriver(base: UniDriver, body: UniDriver) {
       }
     },
 
+    /** Get the bounding box of the cell — returns {x, y, width, height} in both Puppeteer and jsdom */
+    getBoundingBox: async () => {
+      const el = await base.getNative();
+      if (el.page?.evaluate) {
+        const elementHandle = await base.unwrap();
+        return elementHandle.boundingBox();
+      }
+      return el.getBoundingClientRect();
+    },
+
     /** Press a key on the cell (native dispatch — useCellFocusAndEditing uses native addEventListener) */
     pressKey: async (key: string, opts?: Partial<KeyboardEventInit>) => {
       const el = await base.getNative();

package/src/components/EditableTable/EditableTable.tsx

@@ -13,6 +13,7 @@ import { useEditableTableCollectionSyncProps } from './useEditableTableCollectio
 import { useKeyboardNavigation } from './useKeyboardNavigation';
 import { useClipboardHandler } from './useClipboardHandler';
 import { useClearFocusOnBlur } from './useClearFocusOnBlur';
+import { useMouseSweepSelection } from './useMouseSweepSelection';
 import type { TableColumn } from '../../model';
 
 export interface EditableTableProps<
@@ -47,6 +48,7 @@ function _EditableTable<T, F extends FiltersMap = OptionalFiltersMap>(
   const keyboard = useKeyboardNavigation(state);
   useClipboardHandler(state, containerRef);
   const { onFocus, onBlur } = useClearFocusOnBlur(state.cellInteraction);
+  useMouseSweepSelection(state, containerRef);
 
   const tableColumns = useMemo(
     () =>

package/src/components/EditableTable/cellTypes/CellViewLayout.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "CellViewLayout1573867565";
+var _namespace_ = "CellViewLayout1330645639";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"CellViewLayout1573867565__root"};
+export var classes = {"root":"CellViewLayout1330645639__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit154220941";
+var _namespace_ = "Edit2788635568";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit154220941__root","booleanEdit":"Edit154220941__booleanEdit"};
+export var classes = {"root":"Edit2788635568__root","booleanEdit":"Edit2788635568__booleanEdit"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/boolean/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View350828709";
+var _namespace_ = "View2993090526";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View350828709__root","booleanView":"View350828709__booleanView"};
+export var classes = {"root":"View2993090526__root","booleanView":"View2993090526__booleanView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3846716213";
+var _namespace_ = "Edit2851709594";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3846716213__root","dateInput":"Edit3846716213__dateInput"};
+export var classes = {"root":"Edit2851709594__root","dateInput":"Edit2851709594__dateInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/date/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2643422743";
+var _namespace_ = "View2729746067";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2643422743__root"};
+export var classes = {"root":"View2729746067__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3086717192";
+var _namespace_ = "Edit743064207";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3086717192__root","emailInput":"Edit3086717192__emailInput"};
+export var classes = {"root":"Edit743064207__root","emailInput":"Edit743064207__emailInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/email/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2087453642";
+var _namespace_ = "View474490324";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2087453642__root"};
+export var classes = {"root":"View474490324__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3019314736";
+var _namespace_ = "Edit2726301072";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3019314736__root","numberInput":"Edit3019314736__numberInput"};
+export var classes = {"root":"Edit2726301072__root","numberInput":"Edit2726301072__numberInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/number/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2041965662";
+var _namespace_ = "View1515346694";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2041965662__root","textView":"View2041965662__textView"};
+export var classes = {"root":"View1515346694__root","textView":"View1515346694__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit1375720722";
+var _namespace_ = "Edit1285765390";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit1375720722__root","jsonInput":"Edit1375720722__jsonInput"};
+export var classes = {"root":"Edit1285765390__root","jsonInput":"Edit1285765390__jsonInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/object/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3667813326";
+var _namespace_ = "View1230186224";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3667813326__root"};
+export var classes = {"root":"View1230186224__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/select/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3833869363";
+var _namespace_ = "Edit2132964433";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3833869363__root","selectInput":"Edit3833869363__selectInput"};
+export var classes = {"root":"Edit2132964433__root","selectInput":"Edit2132964433__selectInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/select/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View2881451310";
+var _namespace_ = "View2013016056";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View2881451310__root"};
+export var classes = {"root":"View2013016056__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit3533849564";
+var _namespace_ = "Edit2433021780";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit3533849564__root","editWrapper":"Edit3533849564__editWrapper","inputArea":"Edit3533849564__inputArea"};
+export var classes = {"root":"Edit2433021780__root","editWrapper":"Edit2433021780__editWrapper","inputArea":"Edit2433021780__inputArea"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/text/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View632379340";
+var _namespace_ = "View135732759";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View632379340__root"};
+export var classes = {"root":"View135732759__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/Edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "Edit4284777530";
+var _namespace_ = "Edit2636163975";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"Edit4284777530__root","urlInput":"Edit4284777530__urlInput"};
+export var classes = {"root":"Edit2636163975__root","urlInput":"Edit2636163975__urlInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/cellTypes/url/View.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "View3871877239";
+var _namespace_ = "View925443483";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"View3871877239__root","textView":"View3871877239__textView","urlText":"View3871877239__urlText","suffix":"View3871877239__suffix"};
+export var classes = {"root":"View925443483__root","textView":"View925443483__textView","urlText":"View925443483__urlText","suffix":"View925443483__suffix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/EditableTable/useMouseSweepSelection.ts

@@ -0,0 +1,183 @@
+import { useEffect, type RefObject } from 'react';
+import type { FiltersMap } from '@wix/bex-core';
+import type { EditableTableState } from '../../state/EditableTable/EditableTableState';
+
+const EDGE_ZONE = 60;
+const MAX_SCROLL_SPEED = 32;
+const DRAG_THRESHOLD = 5;
+
+function computeEdgeDelta(
+  clientPos: number,
+  rectStart: number,
+  rectEnd: number,
+): number {
+  if (clientPos > rectEnd - EDGE_ZONE) {
+    const ratio = Math.min(1, (clientPos - (rectEnd - EDGE_ZONE)) / EDGE_ZONE);
+    return ratio * MAX_SCROLL_SPEED;
+  }
+  if (clientPos < rectStart + EDGE_ZONE) {
+    const ratio = Math.min(1, (rectStart + EDGE_ZONE - clientPos) / EDGE_ZONE);
+    return -ratio * MAX_SCROLL_SPEED;
+  }
+  return 0;
+}
+
+export function useMouseSweepSelection<T, F extends FiltersMap>(
+  state: EditableTableState<T, F>,
+  containerRef: RefObject<HTMLElement>,
+) {
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    const { cellInteraction } = state;
+    const getVerticalScroller = () =>
+      state.collection.scrollableContent as HTMLElement | null;
+
+    let rafId = 0;
+    let currentDx = 0;
+    let currentDy = 0;
+    // Cached because cellEl is null when the pointer is in the edge zone
+    // (outside cells), but we still need to scroll horizontally.
+    let lastHorizontalScroller: HTMLElement | null = null;
+
+    // Recorded on pointerdown — sweep only activates after drag threshold.
+    let sweepStart: {
+      x: number;
+      y: number;
+      rowKey: string;
+      columnId: string;
+    } | null = null;
+
+    const stopAutoScroll = () => {
+      cancelAnimationFrame(rafId);
+      rafId = 0;
+      currentDx = 0;
+      currentDy = 0;
+    };
+
+    // Capture phase + stopPropagation blocks dnd-kit's bubble-phase
+    // listener on <tr>. Only record the start here — no startSweep
+    // or focusCell, so existing click/edit/popover handlers are untouched.
+    const onPointerDown = (e: PointerEvent) => {
+      if (e.button !== 0 || e.shiftKey || e.pointerType !== 'mouse') {
+        return;
+      }
+
+      const target = (e.target as HTMLElement).closest<HTMLElement>(
+        '[data-row-key][data-column-id]',
+      );
+      if (!target) {
+        return;
+      }
+
+      const rowKey = target.getAttribute('data-row-key')!;
+      const columnId = target.getAttribute('data-column-id')!;
+
+      if (cellInteraction.isCellEditing(rowKey, columnId)) {
+        return;
+      }
+
+      e.stopPropagation();
+      sweepStart = { x: e.clientX, y: e.clientY, rowKey, columnId };
+    };
+
+    const onPointerUp = () => {
+      sweepStart = null;
+      cellInteraction.stopSweep();
+      stopAutoScroll();
+    };
+
+    const onPointerMove = (e: PointerEvent) => {
+      // Before sweep is active: check if drag threshold is exceeded.
+      if (sweepStart && !cellInteraction.isSelecting) {
+        const dx = e.clientX - sweepStart.x;
+        const dy = e.clientY - sweepStart.y;
+        if (Math.abs(dx) < DRAG_THRESHOLD && Math.abs(dy) < DRAG_THRESHOLD) {
+          return;
+        }
+        cellInteraction.startSweep(sweepStart.rowKey, sweepStart.columnId);
+        container.setPointerCapture(e.pointerId);
+      }
+
+      if (!cellInteraction.isSelecting) {
+        return;
+      }
+
+      // Resolve the cell under the pointer — handles fast mouse movement
+      const el = document.elementFromPoint(e.clientX, e.clientY);
+      const cellEl = el?.closest<HTMLElement>('[data-row-key][data-column-id]');
+      if (cellEl) {
+        const rowKey = cellEl.getAttribute('data-row-key')!;
+        const columnId = cellEl.getAttribute('data-column-id')!;
+        cellInteraction.sweepTo(rowKey, columnId);
+      }
+
+      updateAutoScroll(e, cellEl ?? null);
+    };
+
+    // Auto-scroll when near container edges.
+    // Vertical and horizontal scroll are on separate elements:
+    // - Vertical: collection.scrollableContent (overflowY: auto)
+    // - Horizontal: the table's scrollWrapper from WDS (overflowX: auto)
+    const updateAutoScroll = (e: PointerEvent, cellEl: HTMLElement | null) => {
+      const verticalScroller = getVerticalScroller();
+      const hScroller = cellEl?.closest<HTMLElement>('table')?.parentElement;
+      if (hScroller) {
+        lastHorizontalScroller = hScroller;
+      }
+
+      const vRect = verticalScroller?.getBoundingClientRect();
+      const hRect = lastHorizontalScroller?.getBoundingClientRect();
+
+      const vRectTop = vRect?.top ?? 0;
+      const headerBottom =
+        state.tableState.headerElement?.getBoundingClientRect().bottom ?? 0;
+      const vTopRef =
+        headerBottom > vRectTop ? headerBottom - EDGE_ZONE : vRectTop;
+      currentDy = vRect
+        ? computeEdgeDelta(e.clientY, vTopRef, vRect.bottom)
+        : 0;
+      currentDx = hRect
+        ? computeEdgeDelta(e.clientX, hRect.left, hRect.right)
+        : 0;
+
+      if (currentDx === 0 && currentDy === 0) {
+        cancelAnimationFrame(rafId);
+        rafId = 0;
+      } else if (rafId === 0) {
+        const scroll = () => {
+          if (rafId === 0) {
+            return;
+          }
+          if (currentDy !== 0) {
+            getVerticalScroller()?.scrollBy(0, currentDy);
+          }
+          if (currentDx !== 0) {
+            lastHorizontalScroller?.scrollBy(currentDx, 0);
+          }
+          rafId = requestAnimationFrame(scroll);
+        };
+        rafId = requestAnimationFrame(scroll);
+      }
+    };
+
+    container.addEventListener('pointerdown', onPointerDown, true);
+    container.addEventListener('pointermove', onPointerMove);
+    container.addEventListener('pointerup', onPointerUp);
+    container.addEventListener('lostpointercapture', onPointerUp);
+    document.addEventListener('pointerup', onPointerUp);
+
+    return () => {
+      container.removeEventListener('pointerdown', onPointerDown, true);
+      container.removeEventListener('pointermove', onPointerMove);
+      container.removeEventListener('pointerup', onPointerUp);
+      container.removeEventListener('lostpointercapture', onPointerUp);
+      document.removeEventListener('pointerup', onPointerUp);
+      stopAutoScroll();
+      cellInteraction.stopSweep();
+    };
+  }, [state, containerRef]);
+}