@astryxdesign/core 0.7.5 → 0.7.6-canary.5cd7a15

package/src/DateInput/DateInput.tsx

@@ -680,7 +680,7 @@ function PointerDateField({
   // Unified change handler that fires both onChange and changeAction
   const fireChange = useCallback(
     (newValue: ISODateString | undefined) => {
-      if (isBusy) {
+      if (isEffectivelyDisabled) {
         return;
       }
       onChange?.(newValue);
@@ -691,7 +691,13 @@ function PointerDateField({
         });
       }
     },
-    [isBusy, onChange, changeAction, startTransition, setOptimisticValue],
+    [
+      isEffectivelyDisabled,
+      onChange,
+      changeAction,
+      startTransition,
+      setOptimisticValue,
+    ],
   );
 
   // Handle clear button click
@@ -714,11 +720,16 @@ function PointerDateField({
   // Handle date selection from calendar
   const handleDateSelect = useCallback(
     (selectedDate: ISODateString) => {
+      // An already-open calendar can outlive an enabled owner. Reject the
+      // whole selection, including dismissal, so its focused day stays put.
+      if (isDisabled) {
+        return;
+      }
       fireChange(selectedDate);
       setPendingInput(null);
       popover.hide();
     },
-    [fireChange, popover],
+    [isDisabled, fireChange, popover],
   );
 
   // Handle input text change - update immediately if valid and allowed
@@ -948,17 +959,21 @@ function PointerDateField({
       {isBusy && <Spinner size="sm" aria-hidden="true" />}
       {statusIcon}
       {popover.render(
-        <Calendar
-          handleRef={calendarRef}
-          mode="single"
-          value={optimisticValue ?? null}
-          onChange={handleDateSelect}
-          min={min}
-          max={max}
-          dateConstraints={dateConstraints}
-          numberOfMonths={numberOfMonths}
-          weekStartsOn={weekStartsOn}
-        />,
+        // The layer renders its children open or closed, so mount the
+        // calendar only while it is open; it opens on the current value.
+        !popover.isOpen ? null : (
+          <Calendar
+            handleRef={calendarRef}
+            mode="single"
+            value={optimisticValue ?? null}
+            onChange={handleDateSelect}
+            min={min}
+            max={max}
+            dateConstraints={dateConstraints}
+            numberOfMonths={numberOfMonths}
+            weekStartsOn={weekStartsOn}
+          />
+        ),
         {placement: 'below', alignment: 'start'},
       )}
       {showsDisabledMessage &&

package/src/DateInput/DateInputTouch.test.tsx

@@ -29,6 +29,7 @@ import {
   afterEach,
 } from 'vitest';
 import {
+  act,
   render,
   screen,
   fireEvent,
@@ -276,6 +277,81 @@ function weekdayRow(): HTMLElement {
   return row as HTMLElement;
 }
 
+describe('DateInput — open-sheet disablement', () => {
+  it('blocks selection after the open sheet becomes disabled, retaining value and focus', () => {
+    const onChange = vi.fn();
+    const changeAction = vi.fn();
+    const props = {initial: '2026-02-21' as const, onChange, changeAction};
+    withLayout(() => {
+      const {rerender} = render(<Controlled {...props} />);
+      fireEvent.click(field());
+      const day = within(pane('February 2026')).getByRole('button', {
+        name: /February 22, 2026/,
+      });
+      act(() => day.focus());
+      rerender(<Controlled {...props} isDisabled />);
+      expect(day).toHaveFocus();
+      fireEvent.click(day);
+
+      expect(onChange).not.toHaveBeenCalled();
+      expect(changeAction).not.toHaveBeenCalled();
+      expect(field()).toHaveValue('February 21, 2026');
+      expect(field()).toHaveAttribute('aria-expanded', 'true');
+      expect(day).toHaveFocus();
+      expect(
+        document.querySelector('[data-title="month-year"]'),
+      ).toHaveTextContent('February 2026');
+
+      rerender(<Controlled {...props} />);
+      fireEvent.click(day);
+      expect(onChange).toHaveBeenCalledExactlyOnceWith('2026-02-22');
+      expect(changeAction).toHaveBeenCalledExactlyOnceWith('2026-02-22');
+      expect(field()).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+
+  it('blocks disabled reset but preserves busy-only month navigation', () => {
+    const onChange = vi.fn();
+    const changeAction = vi.fn();
+    const props = {initial: '2026-02-21' as const, onChange, changeAction};
+    withLayout(() => {
+      const {rerender} = render(<Controlled {...props} />);
+      fireEvent.click(field());
+      const reset = screen.getByRole('button', {name: 'Reset'});
+      act(() => reset.focus());
+      rerender(<Controlled {...props} isDisabled />);
+      expect(reset).toHaveFocus();
+      fireEvent.click(reset);
+
+      expect(onChange).not.toHaveBeenCalled();
+      expect(changeAction).not.toHaveBeenCalled();
+      expect(field()).toHaveValue('February 21, 2026');
+      expect(field()).toHaveAttribute('aria-expanded', 'true');
+      expect(reset).toHaveFocus();
+      expect(
+        document.querySelector('[data-title="month-year"]'),
+      ).toHaveTextContent('February 2026');
+
+      rerender(<Controlled {...props} isLoading />);
+      fireEvent.click(reset);
+      expect(onChange).not.toHaveBeenCalled();
+      expect(changeAction).not.toHaveBeenCalled();
+      expect(field()).toHaveValue('February 21, 2026');
+      expect(field()).toHaveAttribute('aria-expanded', 'true');
+      expect(reset).toHaveFocus();
+      expect(
+        document.querySelector('[data-title="month-year"]'),
+      ).toHaveTextContent('March 2026');
+
+      rerender(<Controlled {...props} />);
+      fireEvent.click(reset);
+      expect(onChange).toHaveBeenCalledExactlyOnceWith(undefined);
+      expect(changeAction).toHaveBeenCalledExactlyOnceWith(undefined);
+      expect(field()).toHaveAttribute('aria-expanded', 'true');
+    });
+  });
+});
+
 // ---------------------------------------------------------------------------
 // Which surface, and why
 // ---------------------------------------------------------------------------

package/src/DateInput/MonthScroller.tsx

@@ -85,6 +85,14 @@ const DAY_SIZE = dateInputTouchSizes.daySize;
  */
 const OVERSCAN = 3;
 
+/** Input on the scroller that ends a steer: the user's from here. */
+const USER_INPUT_EVENTS = [
+  'touchstart',
+  'wheel',
+  'pointerdown',
+  'keydown',
+] as const;
+
 const styles = stylex.create({
   scroller: {
     position: 'relative',
@@ -326,13 +334,59 @@ export function MonthScroller({
   // updater — React runs updaters during render, where another component's
   // setState is illegal.
   const centerRowRef = useRef(centerRow);
+
+  /**
+   * Scroll snapping is off from a re-center until the frame after its
+   * commit. WebKit keeps the position it snapped to as an index into the
+   * container's snap offsets, and re-snaps to that index after a layout: a
+   * re-center that unmounts panes before the snapped one shifts the index,
+   * so the re-snap lands a month further on, and the scroll that makes
+   * re-centers again. One stalled frame right after an arrow (300 ms,
+   * measured) was enough to set the calendar paging on by itself, a month
+   * every few frames. With snapping off across the commit nothing re-snaps,
+   * and switching it back on a frame later snaps to the pane in place.
+   *
+   * Each pause counts itself, so a batch of re-centers that ends on the
+   * center it began from, which commits no new center, still restores
+   * snapping.
+   *
+   * Not while a finger drives the scroll, from its touch until the scroll it
+   * started comes to rest: iOS tracks a snap target for the gesture, and
+   * turning snapping off drops it, so the swipe coasted past the month for
+   * about two seconds and was corrected late (iOS 26.2 simulator, where the
+   * same swipe snaps in about 0.6 s with snapping left on).
+   */
+  const [snapPauses, setSnapPauses] = useState(0);
+  const isFingerScrollRef = useRef(false);
+  const recenter = useCallback((scroller: HTMLElement, row: number) => {
+    if (!isFingerScrollRef.current) {
+      scroller.style.scrollSnapType = 'none';
+      setSnapPauses(count => count + 1);
+    }
+    setCenterRow(row);
+  }, []);
+  // Synchronizes the scroller's snapping with the browser's frame loop: it
+  // comes back on in the frame after the pause's commit, and a restore still
+  // pending at the next pause or at unmount is dropped.
+  useLayoutEffect(() => {
+    const scroller = scrollerRef.current;
+    if (snapPauses === 0 || scroller == null) {
+      return undefined;
+    }
+    const frame = requestAnimationFrame(() => {
+      scroller.style.scrollSnapType = '';
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [snapPauses]);
   // A row to scroll to once its pane is mounted; see scrollToMonth.
   const pendingScrollRef = useRef<number | null>(null);
 
   /**
    * The row a programmatic scroll is heading for, so its own scroll events
-   * are not reported back as if the user had gone there. Null once a finger
-   * touches the scroller, or once the steered scroll has arrived.
+   * are not reported back as if the user had gone there, and so the settle
+   * correction finishes the steer instead of rounding it back. Null once the
+   * user's own input reaches the scroller (a finger, a wheel or trackpad, a
+   * press, a key), or once the steered scroll has arrived.
    */
   const steeredRowRef = useRef<number | null>(null);
 
@@ -401,7 +455,12 @@ export function MonthScroller({
         // below); a jump that far is never worth animating either.
         pendingScrollRef.current = row;
         centerRowRef.current = row;
-        setCenterRow(row);
+        // The jump is a steer too. Recording it replaces a steer left behind
+        // by a scroll that moved nothing (the re-assert when the month and
+        // year wheels close), which the settle would otherwise finish,
+        // pulling the scroller back off the jump's month.
+        steeredRowRef.current = row;
+        recenter(scroller, row);
         return;
       }
       steeredRowRef.current = row;
@@ -410,7 +469,7 @@ export function MonthScroller({
         behavior,
       });
     },
-    [paneSize, minMonthIndex, rowCount, isRTL],
+    [paneSize, minMonthIndex, rowCount, isRTL, recenter],
   );
 
   // Deliberately un-keyed: it runs after every render, costs a null check, and
@@ -476,8 +535,11 @@ export function MonthScroller({
    * A tail crawling slower than half a pixel a frame has effectively arrived,
    * so treating it as arrived is right anyway.
    *
-   * The correction is at most half a pane by construction, and its own scroll
-   * settles onto the boundary it just aimed at, so it cannot oscillate.
+   * After the user's own scroll the correction goes to the nearest boundary,
+   * at most half a pane away. After a steer it goes on to the steered month,
+   * however early the browser cut the steer short. Either way its own scroll
+   * settles onto the boundary it aimed at, where a steer counts as arrived, so
+   * it cannot oscillate.
    */
   const settleFrameRef = useRef<number | undefined>(undefined);
   useEffect(
@@ -490,6 +552,8 @@ export function MonthScroller({
   );
 
   useScrollSettle(scrollerRef, scroller => {
+    // At rest, momentum included: the finger no longer drives the scroll.
+    isFingerScrollRef.current = false;
     if (paneSize === 0) {
       return;
     }
@@ -505,15 +569,22 @@ export function MonthScroller({
       if (Math.abs(scroller.scrollLeft - offsetBefore) >= 0.5) {
         return;
       }
-      const row = rowAtScrollOffset(
-        scroller.scrollLeft,
-        paneSize,
-        rowCount,
-        isRTL,
-      );
+      // A steer the browser cut short is finished, not rounded back. WebKit
+      // ends a smooth scroll that a second one retargeted once the first
+      // one's time is up, firing `scrollend` part-way: an arrow tapped late
+      // in the previous arrow's scroll stopped near that month, and rounding
+      // to the nearest pane put the scroller back on it while the title named
+      // the new one.
+      const steered = steeredRowRef.current;
+      const row =
+        steered ??
+        rowAtScrollOffset(scroller.scrollLeft, paneSize, rowCount, isRTL);
       const target = scrollOffsetForRow(row, paneSize, isRTL);
       // Sub-pixel drift is the browser's own rounding, not a failed snap.
       if (Math.abs(scroller.scrollLeft - target) < 1) {
+        // At rest on its target, a steer has arrived even if no scroll
+        // crossed into its month.
+        steeredRowRef.current = null;
         return;
       }
       scroller.scrollTo({left: target, behavior: 'smooth'});
@@ -554,11 +625,20 @@ export function MonthScroller({
     if (scroller == null || paneSize === 0) {
       return;
     }
-    // A finger on the scroller ends any steering: from here the months it
-    // passes are the user's doing and every one of them is worth reporting.
-    const onTouchStart = () => {
+    // A finger, a wheel or trackpad, a press or a key on the scroller ends any
+    // steering: from here the months it passes are the user's doing, every
+    // one of them is worth reporting, and the settle rounds to the nearest
+    // month instead of finishing a steer. A steer that moved nothing (the
+    // re-assert when the month and year wheels close on the month shown)
+    // would otherwise pull the user's next scroll back to its month.
+    const endSteer = () => {
       steeredRowRef.current = null;
     };
+    // From a touch until its scroll comes to rest (the settle above), the
+    // finger drives the scroll and a re-center leaves snapping on.
+    const onTouchStart = () => {
+      isFingerScrollRef.current = true;
+    };
 
     const onScroll = () => {
       if (frameRef.current != null) {
@@ -576,7 +656,7 @@ export function MonthScroller({
           return;
         }
         centerRowRef.current = row;
-        setCenterRow(row);
+        recenter(scroller, row);
         // Report nothing while a steer is in flight. `scrollToMonth` is only
         // ever called by something that already knows the month — a wheel
         // commit, a header arrow, the re-assert when the wheels close — so
@@ -590,9 +670,9 @@ export function MonthScroller({
         // the exact moment reports start being trusted again. The month drifted
         // on the way back to the calendar.
         //
-        // Cleared on arrival, or by a touch below — once a finger is on the
-        // scroller the user owns it, and every month it passes is worth
-        // reporting.
+        // Cleared on arrival, or by the user's input below (a finger, a wheel
+        // or trackpad, a press, a key) — from then the user owns the scroller,
+        // and every month it passes is worth reporting.
         if (steeredRowRef.current != null) {
           if (steeredRowRef.current === row) {
             steeredRowRef.current = null;
@@ -603,16 +683,22 @@ export function MonthScroller({
       });
     };
     scroller.addEventListener('scroll', onScroll, {passive: true});
+    for (const type of USER_INPUT_EVENTS) {
+      scroller.addEventListener(type, endSteer, {passive: true});
+    }
     scroller.addEventListener('touchstart', onTouchStart, {passive: true});
     return () => {
       scroller.removeEventListener('scroll', onScroll);
+      for (const type of USER_INPUT_EVENTS) {
+        scroller.removeEventListener(type, endSteer);
+      }
       scroller.removeEventListener('touchstart', onTouchStart);
       if (frameRef.current != null) {
         cancelAnimationFrame(frameRef.current);
         frameRef.current = undefined;
       }
     };
-  }, [paneSize, rowCount, minMonthIndex, isRTL]);
+  }, [paneSize, rowCount, minMonthIndex, isRTL, recenter]);
 
   // Move the keyboard focus by whole days and let the scroller follow. Paging
   // by month is PageUp/PageDown; everything else is the APG grid vocabulary.

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.