@astryxdesign/core 0.7.5 → 0.7.6-canary.0d71e8d

package/src/DateInput/MonthScrollerSettle.test.tsx

@@ -0,0 +1,165 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {act, render} from '@testing-library/react';
+import {createRef} from 'react';
+import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest';
+import {MonthScroller, type MonthScrollerHandle} from './MonthScroller';
+import {SCROLL_QUIET_MS} from './useScrollSettle';
+
+class FakeResizeObserver {
+  constructor(private callback: ResizeObserverCallback) {}
+  observe() {
+    this.callback([], this);
+  }
+  unobserve() {}
+  disconnect() {}
+}
+
+const PANE = 300;
+
+/**
+ * The month scroller's settle, with the browser's scrolling played by hand:
+ * `scrollTo` is recorded, and the offset is whatever the test sets.
+ */
+describe('MonthScroller settle', () => {
+  const scrollTo = vi.fn();
+  beforeEach(() => {
+    vi.useFakeTimers({
+      toFake: [
+        'setTimeout',
+        'clearTimeout',
+        'requestAnimationFrame',
+        'cancelAnimationFrame',
+        'Date',
+        'performance',
+      ],
+    });
+    vi.stubGlobal('ResizeObserver', FakeResizeObserver);
+    vi.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockReturnValue(PANE);
+    vi.spyOn(HTMLElement.prototype, 'clientHeight', 'get').mockReturnValue(
+      PANE,
+    );
+    Element.prototype.scrollTo = scrollTo;
+    scrollTo.mockClear();
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  function renderScroller() {
+    const handleRef = createRef<MonthScrollerHandle>();
+    const view = render(
+      <MonthScroller
+        handleRef={handleRef}
+        minMonthIndex={0}
+        maxMonthIndex={23}
+        initialMonthIndex={9}
+        onVisibleMonthChange={() => {}}
+        selectedDate={null}
+        today={{year: 2026, month: 10, day: 15}}
+        isDateDisabled={() => false}
+        weekStartsOn={0}
+        onSelect={() => {}}
+      />,
+    );
+    const scroller = view.container.querySelector<HTMLElement>(
+      '[data-scroller="months"]',
+    );
+    if (scroller == null) {
+      throw new Error('no month scroller');
+    }
+    scrollTo.mockClear();
+    return {handleRef, scroller};
+  }
+
+  /** The browser moving the scroller to `left`, as a scroll event reports. */
+  /**
+   * A touch event carrying the lists a real one always has: jsdom has no
+   * constructible TouchEvent, and the gesture hook reads `touches[0]`.
+   */
+  function touchEvent(type: 'touchstart' | 'touchend') {
+    const event = new Event(type, {bubbles: true});
+    const point = {identifier: 1, clientX: 100, clientY: 100};
+    Object.defineProperties(event, {
+      touches: {value: type === 'touchend' ? [] : [point]},
+      targetTouches: {value: type === 'touchend' ? [] : [point]},
+      changedTouches: {value: [point]},
+    });
+    return event;
+  }
+
+  function scrollBy(scroller: HTMLElement, left: number) {
+    scroller.scrollLeft = left;
+    scroller.dispatchEvent(new Event('scroll'));
+  }
+
+  it('turns scroll snapping back on after re-centers that end on the month they began on', () => {
+    const {handleRef, scroller} = renderScroller();
+    // Two far jumps in one batch, out and back: each re-centers the mounted
+    // months, pausing scroll snapping, and the second puts the center back
+    // where it was, so the render that follows changes no center.
+    act(() => {
+      handleRef.current?.scrollToMonth(20);
+      handleRef.current?.scrollToMonth(9);
+    });
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+    expect(scroller.style.scrollSnapType).toBe('');
+  });
+
+  it('leaves snapping on for a re-center while a finger drives the scroll', () => {
+    const {scroller} = renderScroller();
+    // A finger drags the next month in: the scroller crosses the middle of
+    // October's pane and re-centers its months with the finger still down.
+    act(() => {
+      scroller.dispatchEvent(touchEvent('touchstart'));
+    });
+    act(() => scrollBy(scroller, 9 * PANE + 0.6 * PANE));
+    act(() => {
+      vi.advanceTimersByTime(16);
+    });
+    // Snapping stays on: iOS tracks a snap target for the gesture.
+    expect(scroller.style.scrollSnapType).toBe('');
+  });
+
+  it('pauses snapping for a re-center again once the finger’s scroll has come to rest', () => {
+    const {handleRef, scroller} = renderScroller();
+    act(() => {
+      scroller.dispatchEvent(touchEvent('touchstart'));
+      scroller.dispatchEvent(touchEvent('touchend'));
+    });
+    act(() => {
+      vi.advanceTimersByTime(SCROLL_QUIET_MS + 50);
+    });
+    // An arrow's far jump after the swipe re-centers with snapping paused.
+    act(() => handleRef.current?.scrollToMonth(20));
+    expect(scroller.style.scrollSnapType).toBe('none');
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+    expect(scroller.style.scrollSnapType).toBe('');
+  });
+
+  it('finishes a steer the browser cut short instead of rounding it back', () => {
+    const {handleRef, scroller} = renderScroller();
+    // An arrow toward month 10, its scroll 95 % of the way there.
+    act(() => handleRef.current?.scrollToMonth(10));
+    act(() => scrollBy(scroller, 9 * PANE + 0.95 * PANE));
+    // The other arrow, late in that scroll: back toward month 9.
+    act(() => handleRef.current?.scrollToMonth(9));
+    scrollTo.mockClear();
+    // WebKit ends the retargeted scroll where the first one's time ran out,
+    // near month 10, and the scroller goes quiet there.
+    act(() => scrollBy(scroller, 9 * PANE + 0.95 * PANE));
+    act(() => {
+      vi.advanceTimersByTime(SCROLL_QUIET_MS + 50);
+    });
+    // The settle finishes the steer onto month 9, not the nearest pane (10).
+    expect(
+      scrollTo.mock.calls.map(([options]) => (options as ScrollToOptions).left),
+    ).toEqual([9 * PANE]);
+  });
+});

package/src/DateInput/TouchDateField.tsx

@@ -772,7 +772,7 @@ export function TouchDateField({
 
   const fireChange = useCallback(
     (newValue: ISODateString | undefined) => {
-      if (isBusy) {
+      if (isEffectivelyDisabled) {
         return;
       }
       onChange?.(newValue);
@@ -783,7 +783,13 @@ export function TouchDateField({
         });
       }
     },
-    [isBusy, onChange, changeAction, startTransition, setOptimisticValue],
+    [
+      isEffectivelyDisabled,
+      onChange,
+      changeAction,
+      startTransition,
+      setOptimisticValue,
+    ],
   );
 
   const openSheet = useCallback(() => {
@@ -841,6 +847,11 @@ export function TouchDateField({
    * value is still cleared either way — that half never depends on the range.
    */
   const handleResetInSheet = useCallback(() => {
+    // Disabled: reject the entire reset without closing or moving focus.
+    // Busy-only fields keep month navigation; fireChange blocks the clear.
+    if (isDisabled) {
+      return;
+    }
     fireChange(undefined);
     const currentMonth = monthIndexOf(today);
     if (currentMonth < minMonthIndex || currentMonth > maxMonthIndex) {
@@ -851,7 +862,7 @@ export function TouchDateField({
     }
     setMonthIndex(currentMonth);
     scrollerHandleRef.current?.scrollToMonth(currentMonth, 'smooth');
-  }, [fireChange, today, monthIndex, minMonthIndex, maxMonthIndex]);
+  }, [isDisabled, fireChange, today, monthIndex, minMonthIndex, maxMonthIndex]);
 
   // Selection commits on the tap and leaves the sheet up, so a mistake can be
   // corrected in place and a nearby date reconsidered without reopening.

package/src/DateInput/Wheel.tsx

@@ -12,7 +12,7 @@
  * rubber-banding, and the settle animation are the platform's; all this adds
  * is `scroll-snap-align: center` on each option, half a viewport of padding at
  * each end so the first and last option can reach the middle, and a commit
- * when the scrolling stops.
+ * when the scrolling stops and no finger or mouse drag still holds it.
  *
  * The falloff (rows fading and tipping away from the centre) is a CSS
  * scroll-driven animation on a `view()` timeline — the browser interpolates it
@@ -259,6 +259,13 @@ export function Wheel({
   // `selectedIndex` only catches up when the wheel settles.
   const [activeIndex, setActiveIndex] = useState(selectedIndex);
 
+  // A mouse cannot drag a scroll container, so without this the wheel ignores
+  // the one gesture its shape invites. Touch is untouched — it pans natively,
+  // with momentum this could not match. See usePointerDragScroll. The drag it
+  // holds is not rest either: the settle below waits for its release, as it
+  // waits for a finger's (useScrollSettle).
+  const {isDraggingRef} = usePointerDragScroll(scrollerRef, isActive);
+
   // Row height in px, read from layout rather than assumed, so a theme that
   // retunes --date-input-touch-wheel-item-size still lands on the right row.
   const itemBlockSize = useCallback((): number => {
@@ -306,6 +313,7 @@ export function Wheel({
       }
     },
     isActive,
+    isDraggingRef,
   );
 
   // Park the committed row under the band whenever the wheel is shown, or the
@@ -375,11 +383,6 @@ export function Wheel({
   // there is no way to share — it takes every touch that lands on it.
   useOwnScrollGesture(scrollerRef, 'all', {isEnabled: isActive});
 
-  // A mouse cannot drag a scroll container, so without this the wheel ignores
-  // the one gesture its shape invites. Touch is untouched — it pans natively,
-  // with momentum this could not match. See usePointerDragScroll.
-  usePointerDragScroll(scrollerRef, isActive);
-
   const moveBy = useCallback(
     (delta: number) => {
       const next = Math.min(

package/src/DateInput/__tests__/MonthScrollerSteps.interaction.browser.spec.ts

@@ -0,0 +1,312 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file MonthScrollerSteps.interaction.browser.spec.ts
+ * @input The built "Default" DateInput story, shown in a bottom sheet, the
+ *   arrows clicked from the page, real mouse and trackpad input and the
+ *   interaction harness
+ * @output Interaction proofs for the month scroller's steps: after the month
+ *   and year wheels close, a trackpad scroll still pages to the next month and
+ *   Reset from four months on still rests on today's month; an arrow step
+ *   through a stalled frame moves exactly one month; under a finger, a swipe
+ *   that crosses the middle of a month as it lifts keeps scroll snapping on
+ *   and rests on the next month.
+ *   (A second arrow step late in the first one's scroll, which WebKit cuts
+ *   short, is proven in MonthScrollerSettle.test.tsx: a loaded page's frames
+ *   are too far apart to aim a click at a share of a 300 ms scroll.)
+ * @position Interaction tests of MonthScroller.tsx
+ *   (`*.interaction.browser.spec.ts`, run by `pnpm test:interaction`)
+ */
+
+import {expect, test, type Locator, type Page} from '@playwright/test';
+import {
+  blockMainThread,
+  drag,
+  openStory,
+  touchDriver,
+  withStorybook,
+} from '@astryxdesign/interaction-harness';
+
+const storybook = withStorybook(test);
+const STORY = 'core-dateinput--default';
+const ARGS = {presentation: 'bottom-sheet'};
+
+/** Waits until the scroller's offset has not moved for ten frames. */
+async function waitForRest(viewport: Locator): Promise<number> {
+  return viewport.evaluate(
+    async element =>
+      new Promise<number>(resolve => {
+        let last = element.scrollLeft;
+        let still = 0;
+        const check = () => {
+          const now = element.scrollLeft;
+          still = now === last ? still + 1 : 0;
+          last = now;
+          if (still >= 10) {
+            resolve(now);
+          } else {
+            requestAnimationFrame(check);
+          }
+        };
+        requestAnimationFrame(check);
+      }),
+  );
+}
+
+/** The month the scroller rests on, as the pane's own grid names it. */
+/**
+ * Waits until a month's grid sits flush with the scroller's edge, the offset
+ * unchanged, for ten frames: the end of the scroller's own settle
+ * correction, however long the page takes to run it. (The panes' width can
+ * be fractional, so the grid's own box is the measure, not the offset.)
+ */
+async function waitForRestOnMonth(viewport: Locator): Promise<number> {
+  return viewport.evaluate(
+    async element =>
+      new Promise<number>(resolve => {
+        let last = element.scrollLeft;
+        let still = 0;
+        const flush = () => {
+          const edge = element.getBoundingClientRect().left;
+          return [
+            ...element.querySelectorAll<HTMLElement>('[role="grid"]'),
+          ].some(
+            grid => Math.abs(grid.getBoundingClientRect().left - edge) < 1,
+          );
+        };
+        const check = () => {
+          const now = element.scrollLeft;
+          still = now === last && flush() ? still + 1 : 0;
+          last = now;
+          if (still >= 10) {
+            resolve(now);
+          } else {
+            requestAnimationFrame(check);
+          }
+        };
+        requestAnimationFrame(check);
+      }),
+  );
+}
+
+async function monthAtRest(viewport: Locator): Promise<string> {
+  return viewport.evaluate(element => {
+    const box = element.getBoundingClientRect();
+    const middle = box.left + box.width / 2;
+    for (const grid of element.querySelectorAll<HTMLElement>('[role="grid"]')) {
+      const r = grid.getBoundingClientRect();
+      if (r.left <= middle && r.right >= middle) {
+        return grid.getAttribute('aria-label') ?? '';
+      }
+    }
+    return '';
+  });
+}
+
+async function openCalendar(page: Page) {
+  await openStory(page, storybook(), STORY, ARGS);
+  await page
+    .getByRole('button', {name: /calendar/i})
+    .first()
+    .click();
+  const viewport = page.locator('[data-scroller="months"]');
+  await expect(viewport).toBeVisible();
+  await waitForRest(viewport);
+  return viewport;
+}
+
+test.use({hasTouch: false, isMobile: false});
+
+/**
+ * Waits until the scroller comes to rest, or until it has gone more than
+ * `limit` past `from`: a scroller that runs on by itself never rests, and
+ * the proof should fail where it ran, not at the test's timeout.
+ */
+async function waitForRestOrRun(
+  viewport: Locator,
+  from: number,
+  limit: number,
+): Promise<number> {
+  return viewport.evaluate(
+    async (element, {from, limit}) =>
+      new Promise<number>(resolve => {
+        let last = element.scrollLeft;
+        let still = 0;
+        const check = () => {
+          const now = element.scrollLeft;
+          still = now === last ? still + 1 : 0;
+          last = now;
+          if (still >= 10 || Math.abs(now - from) > limit) {
+            resolve(now);
+          } else {
+            requestAnimationFrame(check);
+          }
+        };
+        requestAnimationFrame(check);
+      }),
+    {from, limit},
+  );
+}
+
+/**
+ * A stalled frame right after an arrow (a 300 ms block of the main thread)
+ * let the re-center that follows the step land after the scroll had ended,
+ * and WebKit's re-snap after it then paged on by itself, a month every few
+ * frames. The step moves exactly one month.
+ */
+test('an arrow step through a stalled frame moves exactly one month', async ({
+  page,
+}) => {
+  const viewport = await openCalendar(page);
+  const title = page.getByRole('button', {name: /Choose month and year/});
+  const from = await viewport.evaluate(element => element.scrollLeft);
+  const width = await viewport.evaluate(element => element.clientWidth);
+  const box = await page
+    .getByRole('button', {name: 'Next month'})
+    .boundingBox();
+  if (box == null) {
+    throw new Error('no Next month button');
+  }
+  await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+  await blockMainThread(page, 300);
+  const at = await waitForRestOrRun(viewport, from, 2 * width);
+  expect(Math.round((at - from) / width)).toBe(1);
+  await waitForRestOnMonth(viewport);
+  expect(
+    Math.round(((await viewport.evaluate(e => e.scrollLeft)) - from) / width),
+  ).toBe(1);
+  await expect(title).toHaveAccessibleName(
+    new RegExp(await monthAtRest(viewport)),
+  );
+});
+
+/**
+ * Closing the month and year wheels re-asserts the month shown, a steer that
+ * moves nothing. A trackpad scroll after it is the user's: it pages to the
+ * next month and stays there, the title following.
+ */
+test('after the month and year wheels close, a trackpad scroll to the next month stays there', async ({
+  page,
+}) => {
+  const viewport = await openCalendar(page);
+  const toggle = page.getByRole('button', {name: /Choose month and year/});
+  const start = await monthAtRest(viewport);
+  expect(start).not.toBe('');
+  const toggleBox = await toggle.boundingBox();
+  if (toggleBox == null) {
+    throw new Error('no month and year toggle');
+  }
+  const clickToggle = async () =>
+    page.mouse.click(
+      toggleBox.x + toggleBox.width / 2,
+      toggleBox.y + toggleBox.height / 2,
+    );
+  await clickToggle();
+  await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  await clickToggle();
+  await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  await waitForRest(viewport);
+
+  const box = await viewport.boundingBox();
+  if (box == null) {
+    throw new Error('no month scroller');
+  }
+  await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+  // A horizontal trackpad scroll of 70 % of a month, as one wheel event: a
+  // burst of small ones reaches a loaded page far enough apart to count as
+  // separate gestures, each snapping back on its own.
+  await page.mouse.wheel(box.width * 0.7, 0);
+  // Past the scroller's own settle correction too, which ends on a month's
+  // boundary.
+  await waitForRestOnMonth(viewport);
+  const next = await monthAtRest(viewport);
+  expect(next).not.toBe(start);
+  await expect(toggle).toHaveAccessibleName(new RegExp(next));
+});
+
+/**
+ * Reset from four months on is a far jump, mounting today's month before the
+ * scroller moves. After the month and year wheels close, whose re-assert is a
+ * steer that moved nothing, the jump still rests on today's month, the title
+ * with it.
+ */
+test('after the month and year wheels close, Reset from four months on rests on today’s month', async ({
+  page,
+}) => {
+  const viewport = await openCalendar(page);
+  const toggle = page.getByRole('button', {name: /Choose month and year/});
+  const today = await monthAtRest(viewport);
+  expect(today).not.toBe('');
+  const clickCentre = async (name: string | RegExp) => {
+    const box = await page.getByRole('button', {name}).boundingBox();
+    if (box == null) {
+      throw new Error(`no ${String(name)} button`);
+    }
+    await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+  };
+  for (let step = 0; step < 4; step++) {
+    await clickCentre('Next month');
+    await waitForRest(viewport);
+  }
+  expect(await monthAtRest(viewport)).not.toBe(today);
+  await clickCentre(/Choose month and year/);
+  await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  await clickCentre(/Choose month and year/);
+  await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  await waitForRest(viewport);
+
+  await clickCentre('Reset');
+  // Past the scroller's own settle correction too, which ends on a month's
+  // boundary.
+  await waitForRestOnMonth(viewport);
+  expect(await monthAtRest(viewport)).toBe(today);
+  await expect(toggle).toHaveAccessibleName(new RegExp(today));
+});
+
+test.describe('under a finger', () => {
+  test.use({hasTouch: true, isMobile: true});
+
+  /**
+   * A swipe whose last move crosses the middle of the month makes the
+   * scroller re-center as the finger lifts. The finger drives that scroll, so
+   * the re-center leaves scroll snapping on (turning it off drops the snap
+   * target iOS tracks for the gesture, and the swipe coasted past the month),
+   * and the swipe comes to rest on the next month.
+   */
+  test('a swipe that crosses the middle of a month as it lifts keeps snapping on and rests on the next month', async ({
+    page,
+  }) => {
+    const viewport = await openCalendar(page);
+    const start = await monthAtRest(viewport);
+    const box = await viewport.boundingBox();
+    if (box == null) {
+      throw new Error('no month scroller');
+    }
+    // Every change of the scroller's inline scroll-snap-type from here on.
+    await viewport.evaluate(element => {
+      const changes: string[] = [];
+      (window as unknown as {snapChanges: string[]}).snapChanges = changes;
+      new MutationObserver(() => {
+        changes.push((element as HTMLElement).style.scrollSnapType || 'on');
+      }).observe(element, {attributes: true, attributeFilter: ['style']});
+    });
+    const driver = await touchDriver(page);
+    const y = box.y + box.height / 2;
+    const from = {x: box.x + box.width * 0.8, y};
+    // 55 % of a month toward the next one, the middle crossed by the last
+    // move, lifting a quarter frame after it.
+    await driver.play(
+      drag(from, {x: from.x - box.width * 0.55, y}, {durationMs: 300}),
+    );
+    await waitForRestOnMonth(viewport);
+    const rest = await monthAtRest(viewport);
+    expect(rest).not.toBe('');
+    expect(rest).not.toBe(start);
+    // Snapping was never turned off while the finger drove the scroll.
+    expect(
+      await page.evaluate(
+        () => (window as unknown as {snapChanges: string[]}).snapChanges,
+      ),
+    ).not.toContain('none');
+  });
+});

package/src/DateInput/usePointerDragScroll.ts

@@ -5,7 +5,8 @@
 /**
  * @file usePointerDragScroll.ts
  * @input A scroll container ref
- * @output Lets a mouse drag the container's contents the way a finger does
+ * @output Lets a mouse drag the container's contents the way a finger does,
+ *   and reports while a drag holds it (`isDraggingRef`)
  * @position Internal behavior hook; consumed by Wheel.tsx
  *
  * ## Why this exists
@@ -38,12 +39,20 @@
  * then jumps a whole one. The drag therefore suspends snapping, and restores
  * it once the release has settled somewhere legal.
  *
+ * ## A held drag is not rest
+ *
+ * Every `scrollTop` the drag assigns is a programmatic scroll, and Chromium
+ * ends each one with a `scrollend` — 14 moves, 14 of them. A settle listening
+ * for `scrollend` alone would commit the row under the band at every step,
+ * with the button still down. `isDraggingRef` tells `useScrollSettle` the
+ * drag is still held, the way a touch that has not ended does.
+ *
  * SYNC: When modified, update:
  * - /packages/core/src/DateInput/Wheel.tsx
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */
 
-import {useEffect} from 'react';
+import {useEffect, useRef} from 'react';
 
 /**
  * Movement below this stays a click. A mouse shifts a pixel or two under the
@@ -54,6 +63,16 @@ export const DRAG_SLOP = 4;
 /** How long to wait for a release's settle before restoring snapping. */
 const SETTLE_FALLBACK_MS = 260;
 
+/** What {@link usePointerDragScroll} reports back about the drag. */
+export type PointerDragScrollState = {
+  /**
+   * True while a mouse drag holds the container: from the press that moved
+   * past {@link DRAG_SLOP} until its release. Pass it to `useScrollSettle`,
+   * which treats a held drag as it treats a finger still down.
+   */
+  isDraggingRef: React.RefObject<boolean>;
+};
+
 /**
  * Let a mouse drag `ref`'s contents, on a container that already scrolls and
  * snaps for touch.
@@ -65,7 +84,9 @@ const SETTLE_FALLBACK_MS = 260;
 export function usePointerDragScroll(
   ref: React.RefObject<HTMLElement | null>,
   isEnabled: boolean = true,
-): void {
+): PointerDragScrollState {
+  const isDraggingRef = useRef(false);
+
   useEffect(() => {
     const element = ref.current;
     if (element == null || !isEnabled) {
@@ -75,9 +96,9 @@ export function usePointerDragScroll(
     let pointerId: number | null = null;
     let originY = 0;
     let originScrollTop = 0;
-    let isDragging = false;
+    isDraggingRef.current = false;
     // Survives from the drag's end to the click it produces, which is the
-    // whole reason it is not just `isDragging`.
+    // whole reason it is not just `isDraggingRef`.
     let wasDragged = false;
     let restoreTimer: number | undefined;
 
@@ -120,7 +141,7 @@ export function usePointerDragScroll(
       pointerId = event.pointerId;
       originY = event.clientY;
       originScrollTop = element.scrollTop;
-      isDragging = false;
+      isDraggingRef.current = false;
       // Not captured yet: a press that never moves has to stay a click on the
       // row under it, and capturing here would retarget that click.
     };
@@ -130,11 +151,11 @@ export function usePointerDragScroll(
         return;
       }
       const delta = event.clientY - originY;
-      if (!isDragging) {
+      if (!isDraggingRef.current) {
         if (Math.abs(delta) < DRAG_SLOP) {
           return;
         }
-        isDragging = true;
+        isDraggingRef.current = true;
         element.setPointerCapture(event.pointerId);
         suspendSnap();
         // Dragging across rows would otherwise select their text, leaving the
@@ -151,10 +172,10 @@ export function usePointerDragScroll(
         return;
       }
       pointerId = null;
-      if (!isDragging) {
+      if (!isDraggingRef.current) {
         return;
       }
-      isDragging = false;
+      isDraggingRef.current = false;
       wasDragged = true;
       element.style.removeProperty('user-select');
       if (element.hasPointerCapture(event.pointerId)) {
@@ -204,9 +225,12 @@ export function usePointerDragScroll(
       element.removeEventListener('pointerup', onPointerEnd);
       element.removeEventListener('pointercancel', onPointerEnd);
       element.removeEventListener('click', onClickCapture, {capture: true});
+      isDraggingRef.current = false;
       restoreSnap();
     };
   }, [ref, isEnabled]);
+
+  return {isDraggingRef};
 }
 
 /**