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

package/src/DateInput/DateInput.test.tsx

@@ -21,7 +21,7 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {getButton, queryButton} from '../__tests__/fastRoleQueries';
-import {DateInput} from './DateInput';
+import {DateInput, type DateInputProps} from './DateInput';
 import {Icon} from '../Icon';
 import {InputGroup} from '../InputGroup';
 import {InputGroupText} from '../InputGroup/InputGroupText';
@@ -570,6 +570,67 @@ describe('DateInput', () => {
     );
   });
 
+  it('blocks selection in an open picker after the field becomes disabled', async () => {
+    const user = userEvent.setup();
+    const props = {
+      label: 'Date',
+      value: '2026-10-15',
+      presentation: 'popover',
+      onChange: vi.fn(),
+      changeAction: vi.fn(),
+    } satisfies DateInputProps;
+    const {rerender} = render(<DateInput {...props} />);
+    const input = screen.getByRole('combobox');
+    act(() => input.focus());
+    await user.keyboard('{ArrowDown}');
+    const day = getButton(/October 16, 2026/);
+    act(() => day.focus());
+
+    rerender(<DateInput {...props} isDisabled />);
+    expect(day).toHaveFocus();
+    await user.click(day);
+    await user.keyboard(' ');
+
+    rerender(
+      <DateInput
+        {...props}
+        isDisabled
+        disabledMessage="Scheduling is locked"
+      />,
+    );
+    expect(day).toHaveFocus();
+    await user.keyboard('{Enter}');
+    expect(props.onChange).not.toHaveBeenCalled();
+    expect(props.changeAction).not.toHaveBeenCalled();
+    expect(input).toHaveValue('October 15, 2026');
+    expect(input).toHaveAttribute('aria-expanded', 'true');
+    expect(day).toHaveFocus();
+  });
+
+  it('dismisses an open picker without committing while loading', async () => {
+    const user = userEvent.setup();
+    const props = {
+      label: 'Date',
+      value: '2026-10-15',
+      presentation: 'popover',
+      onChange: vi.fn(),
+      changeAction: vi.fn(),
+    } satisfies DateInputProps;
+    const {rerender} = render(<DateInput {...props} />);
+    await user.click(getButton('Open calendar'));
+    const day = getButton(/October 16, 2026/);
+
+    rerender(<DateInput {...props} isLoading />);
+    await user.click(day);
+    expect(props.onChange).not.toHaveBeenCalled();
+    expect(props.changeAction).not.toHaveBeenCalled();
+    expect(screen.getByRole('combobox')).toHaveValue('October 15, 2026');
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'aria-expanded',
+      'false',
+    );
+  });
+
   // --- Enter key commits typed date ---
 
   it('commits typed date and fires onChange on Enter key', () => {
@@ -633,15 +694,19 @@ describe('DateInput', () => {
       }
 
       render(<ControlledDateInput />);
-      await user.click(getButton('Open calendar'));
+      const toggle = getButton('Open calendar');
+      await user.click(toggle);
       await user.click(getButton(/January 15, 2026/));
+      // The calendar mounts only while open; reopen it to read the selection.
+      await user.click(toggle);
       expect(
         screen.getAllByRole('gridcell', {selected: true, hidden: true}),
       ).toHaveLength(1);
+      await user.click(toggle);
 
       await user.click(getButton('Clear Date'));
       expect(screen.getByRole('combobox')).toHaveValue('');
-      await user.click(getButton('Open calendar'));
+      await user.click(toggle);
 
       expect(
         screen.queryAllByRole('gridcell', {selected: true, hidden: true}),
@@ -1152,6 +1217,53 @@ describe('DateInput', () => {
       expect(screen.getByDisplayValue('Mar 10, 2026')).toBeInTheDocument();
     });
   });
+  describe('calendar while the popover is closed', () => {
+    const calendarGrid = () => document.querySelector('[role="grid"]');
+
+    it('renders no calendar until the popover opens, and none after it closes', () => {
+      render(<DateInput label="Date" value="2026-01-25" onChange={() => {}} />);
+      const toggle = getButton('Open calendar');
+      expect(calendarGrid()).toBeNull();
+
+      fireEvent.click(toggle);
+      expect(calendarGrid()).not.toBeNull();
+
+      fireEvent.click(toggle);
+      expect(calendarGrid()).toBeNull();
+    });
+
+    it('opens on the month of a date typed while closed', () => {
+      function Controlled() {
+        const [value, setValue] = useState<ISODateString | undefined>(
+          '2026-01-25',
+        );
+        return <DateInput label="Date" value={value} onChange={setValue} />;
+      }
+      render(<Controlled />);
+      const input = screen.getByRole('combobox');
+
+      fireEvent.change(input, {target: {value: 'March 5, 2027'}});
+      fireEvent.keyDown(input, {key: 'ArrowDown'});
+
+      expect(calendarGrid()).toHaveAccessibleName('March 2027');
+    });
+
+    it('moves focus into the calendar on each open from the toggle', async () => {
+      render(<DateInput label="Date" value="2026-01-25" onChange={() => {}} />);
+      const toggle = getButton('Open calendar');
+
+      for (let i = 0; i < 2; i++) {
+        fireEvent.click(toggle);
+        // The first calendar control takes focus, not the dialog surface.
+        await waitFor(() => {
+          expect(getButton('Previous month')).toHaveFocus();
+        });
+        fireEvent.click(toggle);
+        expect(calendarGrid()).toBeNull();
+      }
+    });
+  });
+
   describe('weekStartsOn', () => {
     // The calendar popover renders in the top layer; jsdom keeps the content in
     // the DOM but role queries skip it, so read the columnheaders directly.

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
 // ---------------------------------------------------------------------------
@@ -2249,6 +2325,50 @@ describe('DateInput — a mouse can drag a wheel', () => {
     });
   });
 
+  /**
+   * Every `scrollTop` the drag assigns ends in its own `scrollend` in
+   * Chromium, and the hand can rest with the button still down. Neither is
+   * rest: the month the wheel lands on commits at the release, as it does
+   * when a finger lifts.
+   */
+  it('commits nothing while a mouse drag holds the wheel, and commits at the release', () => {
+    vi.useFakeTimers();
+    try {
+      // A year of months, so May is reachable (the default range ends in April).
+      renderAndOpen(
+        <Controlled initial="2026-03-21" min="2026-01-01" max="2026-12-31" />,
+      );
+      fireEvent.click(title());
+      withWheelLayout(() => {
+        const el = wheel();
+        trackable(el);
+        // March, the committed month, sits under the band.
+        el.scrollTop = 2 * 28;
+        const selected = () =>
+          el.querySelector('[aria-selected="true"]')?.textContent;
+        el.dispatchEvent(pointer('pointerdown', {y: 200}));
+        // Two rows on: May is under the band.
+        el.dispatchEvent(pointer('pointermove', {y: 144}));
+        fireEvent.scroll(el);
+        el.dispatchEvent(new Event('scrollend'));
+        act(() => {
+          vi.advanceTimersByTime(SCROLL_QUIET_MS * 2);
+        });
+        expect(selected()).toBe('March');
+        expect(title()).toHaveTextContent('March 2026');
+
+        el.dispatchEvent(pointer('pointerup', {y: 144}));
+        act(() => {
+          vi.advanceTimersByTime(SCROLL_QUIET_MS * 2);
+        });
+        expect(selected()).toBe('May');
+        expect(title()).toHaveTextContent('May 2026');
+      });
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
   /**
    * BottomSheet starts its own drag-to-dismiss from a `pointerdown` on its
    * body and CAPTURES the pointer for it, which retargets every later pointer

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.