@astryxdesign/core 0.7.7 → 0.7.8-canary.36cde5e

package/dist/DateInput/Wheel.d.ts

@@ -1,48 +1,29 @@
-export interface WheelOption {
-    /** Stable numeric identity of the row (a month 1-12, or a year). */
-    value: number;
-    /** Row text. */
-    label: string;
-    /**
-     * Rows outside min/max stay visible but cannot be committed: a wheel that
-     * stops on one travels on to the nearest enabled row.
-     */
-    isDisabled?: boolean;
-}
-export interface WheelProps {
-    /** Accessible name for the column, e.g. "Month". */
-    label: string;
-    /** Rows, top to bottom. */
-    options: ReadonlyArray<WheelOption>;
-    /** Committed value; must match one option's `value`. */
-    value: number;
-    /** Fired when the wheel comes to rest on a different, enabled row. */
-    onChange: (value: number) => void;
-    /**
-     * False while the wheel is hidden — scroll offsets of a display:none
-     * scroller are meaningless, so listeners and the initial scroll wait.
-     */
-    isActive?: boolean;
-}
+import { type WheelProps } from './wheelOptions.js';
+export { nearestEnabledIndex, type WheelOption, type WheelProps, } from './wheelOptions.js';
 /**
- * The enabled row nearest `index`: `index` itself when it is enabled,
- * otherwise the closest enabled row on either side. A tie goes to the side of
- * `towardIndex` (the committed row), and a wheel with no enabled row stays on
- * `towardIndex`.
+ * One picker column: UIPickerView's motion with flat rows under a finger, the
+ * snap-scrolling column under a fine pointer.
  *
  * @example
  * ```
- * // Hours 0-23 with 09:00-17:00 bounds: stopping on 7 rests on 9.
- * nearestEnabledIndex(hourOptions, 7, 10); // 9
+ * <Wheel
+ *   label="Month"
+ *   options={monthOptions}
+ *   value={month}
+ *   onChange={setMonth}
+ * />
  * ```
  */
-export declare function nearestEnabledIndex(options: ReadonlyArray<WheelOption>, index: number, towardIndex: number): number;
+export declare function Wheel(props: WheelProps): import("react").JSX.Element;
+export declare namespace Wheel {
+    var displayName: string;
+}
 /**
- * One snap-scrolling picker column.
+ * One snap-scrolling picker column, under a fine pointer.
  *
  * @example
  * ```
- * <Wheel
+ * <ScrollWheel
  *   label="Month"
  *   options={monthOptions}
  *   value={month}
@@ -50,8 +31,8 @@ export declare function nearestEnabledIndex(options: ReadonlyArray<WheelOption>,
  * />
  * ```
  */
-export declare function Wheel({ label, options, value, onChange, isActive, }: WheelProps): import("react").JSX.Element;
-export declare namespace Wheel {
+export declare function ScrollWheel({ label, options, value, onChange, isActive, }: WheelProps): import("react").JSX.Element;
+export declare namespace ScrollWheel {
     var displayName: string;
 }
 //# sourceMappingURL=Wheel.d.ts.map

package/dist/DateInput/Wheel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AAwNA,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,KAAK,EAAE,MAAM,EACb,WAAW,EAAE,MAAM,GAClB,MAAM,CAsBR;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BA4UZ;yBAlVe,KAAK"}
+{"version":3,"file":"Wheel.d.ts","sourceRoot":"","sources":["../../src/DateInput/Wheel.tsx"],"names":[],"mappings":"AAoDA,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AA6JxB;;;;;;;;;;;;;GAaG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BAKtC;yBALe,KAAK;;;AASrB;;;;;;;;;;;;GAYG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAe,GAChB,EAAE,UAAU,+BA6TZ;yBAnUe,WAAW"}

package/dist/DateInput/Wheel.js

@@ -4,51 +4,45 @@
 
 /**
  * @file Wheel.tsx
- * @input Option list, selected value, change callback
- * @output Exports Wheel — a snap-scrolling picker column
- * @position Internal component; consumed by MonthYearWheels.tsx
+ * @input Option list, selected value and change callback
+ * @output Exports Wheel (one picker column), ScrollWheel (the scrolling
+ *   column) and the shared types of wheelOptions.ts
+ * @position Internal component; consumed by MonthYearWheels.tsx,
+ *   TouchTimeField.tsx and TouchDateTimeField.tsx
  *
- * A wheel is a scroll container, not a custom gesture surface. Momentum,
- * 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 and no finger or mouse drag still holds it.
+ * Wheel picks its column by the primary pointer. Under a finger it is
+ * PickerWheel.tsx, the touch layer, imported here alone. Under a fine pointer
+ * it is the snap-scrolling column below.
  *
- * The falloff (rows fading and tipping away from the centre) is a CSS
- * scroll-driven animation on a `view()` timeline — the browser interpolates it
- * against each row's own position in the scrollport, so it stays glued to the
- * finger with no JS in the frame loop. It is guarded by `@supports`, because a
- * browser that does not understand `animation-timeline` would otherwise run
- * the same keyframes on the document timeline and simply play them once.
- *
- * Under Reduce Motion, the wheel's own scrolls (a step from a key or a click,
- * the travel to the nearest enabled row) land without travel. They cross-fade
- * on a touch screen and land at once otherwise. A finger's scroll and its
- * momentum stay the platform's.
- *
- * Accessibility: this is a listbox, not a novel widget. It is one tab stop
- * with arrow/Home/End/PageUp/PageDown keys, `aria-activedescendant` tracking
- * the active row, and every row reachable by tap — none of which depends on
- * the scroll-driven decoration.
+ * The scrolling column is a scroll container: momentum, rubber-banding and the
+ * settle are the platform's. Its rows fade and tip on a CSS `view()` timeline,
+ * behind `@supports`. Under Reduce Motion its own scrolls land without travel.
  *
  * SYNC: When modified, update:
+ * - /packages/core/src/DateInput/PickerWheel.tsx (the touch column)
+ * - /packages/core/src/DateInput/wheelOptions.ts
  * - /packages/core/src/DateInput/TouchDateField.tsx
  * - /packages/core/src/DateTimeInput/TouchDateTimeField.tsx
  * - /packages/core/src/DateInput/DateInput.doc.mjs
  * - /packages/core/src/DateInput/DateInputTouch.test.tsx
  */
-import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, radiusVars, fontWeightVars, typeScaleVars, spacingVars, durationVars } from "../theme/tokens.stylex.js";
 import { focusOutlineStyles } from "../utils/index.js";
 import { playReducedMotionDip, reducedMotionFade } from "../motion/reducedMotion.js";
+import { useTouchPresentation } from "../utils/touchPresentation.js";
+import { PickerWheel } from "./PickerWheel.js";
 import "./tokens.stylex.js";
 import { dateInputTouchSizes, dateInputTouchGeometry } from "./tokens.stylex.js";
 import { useOwnScrollGesture } from "./useOwnScrollGesture.js";
 import { usePointerDragScroll } from "./usePointerDragScroll.js";
 import { useScrollSettle } from "./useScrollSettle.js";
+import { useWheelListbox } from "./useWheelListbox.js";
+import { endIndex, nearestEnabledIndex, steppedIndex } from "./wheelOptions.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export { nearestEnabledIndex } from "./wheelOptions.js";
 const ITEM_BLOCK_SIZE = dateInputTouchSizes.wheelItemSize;
 
 /**
@@ -78,47 +72,41 @@ const styles = {
     $$css: true
   }
 };
+
 /**
- * The enabled row nearest `index`: `index` itself when it is enabled,
- * otherwise the closest enabled row on either side. A tie goes to the side of
- * `towardIndex` (the committed row), and a wheel with no enabled row stays on
- * `towardIndex`.
+ * One picker column: UIPickerView's motion with flat rows under a finger, the
+ * snap-scrolling column under a fine pointer.
  *
  * @example
  * ```
- * // Hours 0-23 with 09:00-17:00 bounds: stopping on 7 rests on 9.
- * nearestEnabledIndex(hourOptions, 7, 10); // 9
+ * <Wheel
+ *   label="Month"
+ *   options={monthOptions}
+ *   value={month}
+ *   onChange={setMonth}
+ * />
  * ```
  */
-export function nearestEnabledIndex(options, index, towardIndex) {
-  const isEnabled = i => i >= 0 && i < options.length && !options[i].isDisabled;
-  if (isEnabled(index)) {
-    return index;
-  }
-  for (let distance = 1; distance < options.length; distance++) {
-    const below = index - distance;
-    const above = index + distance;
-    const isBelowEnabled = isEnabled(below);
-    const isAboveEnabled = isEnabled(above);
-    if (isBelowEnabled && isAboveEnabled) {
-      return towardIndex < index ? below : above;
-    }
-    if (isBelowEnabled) {
-      return below;
-    }
-    if (isAboveEnabled) {
-      return above;
-    }
-  }
-  return towardIndex;
+export function Wheel(props) {
+  // One touch model on every touch device: a finger gets UIPickerView's motion
+  // with flat rows, a fine pointer the scrolling column.
+  const {
+    isTouch
+  } = useTouchPresentation();
+  return isTouch ? /*#__PURE__*/_jsx(PickerWheel, {
+    ...props
+  }) : /*#__PURE__*/_jsx(ScrollWheel, {
+    ...props
+  });
 }
+Wheel.displayName = 'Wheel';
 
 /**
- * One snap-scrolling picker column.
+ * One snap-scrolling picker column, under a fine pointer.
  *
  * @example
  * ```
- * <Wheel
+ * <ScrollWheel
  *   label="Month"
  *   options={monthOptions}
  *   value={month}
@@ -126,14 +114,13 @@ export function nearestEnabledIndex(options, index, towardIndex) {
  * />
  * ```
  */
-export function Wheel({
+export function ScrollWheel({
   label,
   options,
   value,
   onChange,
   isActive = true
 }) {
-  const id = useId();
   const scrollerRef = useRef(null);
   const selectedIndex = Math.max(0, options.findIndex(option => option.value === value));
   // Which row is under the band right now. Tracks the finger during a scroll;
@@ -277,6 +264,8 @@ export function Wheel({
   // useScrollSettle. The settle handler re-checks the position afterwards, so
   // a correction that is genuinely needed still happens, just at rest.
   const parkedRef = useRef(false);
+  // Syncs the wheel's scroll position with the selected index while the wheel
+  // is active.
   useEffect(() => {
     if (!isActive) {
       parkedRef.current = false;
@@ -310,6 +299,8 @@ export function Wheel({
   // Highlight follows the finger. rAF-throttled: a scroll can fire far more
   // often than the display refreshes, and this only feeds a repaint.
   const frameRef = useRef(undefined);
+  // Syncs a scroll listener with the active wheel. It updates the highlighted
+  // row.
   useEffect(() => {
     const scroller = scrollerRef.current;
     if (scroller == null || !isActive) {
@@ -349,48 +340,46 @@ export function Wheel({
   useOwnScrollGesture(scrollerRef, 'all', {
     isEnabled: isActive
   });
-  const moveBy = useCallback(delta => {
-    const next = Math.min(options.length - 1, Math.max(0, activeIndex + delta));
-    const option = options[next];
-    if (option == null || option.isDisabled) {
+
+  // A key commits the row it moves to and scrolls the column there.
+  const moveTo = useCallback(row => {
+    const option = row == null ? undefined : options[row];
+    if (row == null || option == null || option.isDisabled) {
       return;
     }
-    setActiveIndex(next);
-    scrollToIndex(next, 'smooth');
+    setActiveIndex(row);
+    scrollToIndex(row, 'smooth');
     if (option.value !== value) {
       onChange(option.value);
     }
-  }, [activeIndex, options, scrollToIndex, value, onChange]);
-  const handleKeyDown = useCallback(event => {
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        moveBy(1);
-        break;
-      case 'ArrowUp':
-        event.preventDefault();
-        moveBy(-1);
-        break;
-      case 'PageDown':
-        event.preventDefault();
-        moveBy(10);
-        break;
-      case 'PageUp':
-        event.preventDefault();
-        moveBy(-10);
-        break;
-      case 'Home':
-        event.preventDefault();
-        moveBy(-activeIndex);
-        break;
-      case 'End':
-        event.preventDefault();
-        moveBy(options.length - 1 - activeIndex);
-        break;
-      default:
-        break;
+  }, [options, scrollToIndex, value, onChange]);
+  const moveBy = useCallback(delta => moveTo(steppedIndex(options, activeIndex, delta)), [moveTo, options, activeIndex]);
+
+  // Home and End: the first and the last enabled row.
+  const toEnd = useCallback(end => moveTo(endIndex(options, end)), [moveTo, options]);
+  const activate = useCallback(index => {
+    const option = options[index];
+    if (option == null || option.isDisabled) {
+      return;
     }
-  }, [moveBy, activeIndex, options.length]);
+    setActiveIndex(index);
+    scrollToIndex(index, 'smooth');
+    if (option.value !== value) {
+      onChange(option.value);
+    }
+  }, [options, scrollToIndex, value, onChange]);
+  const {
+    listboxProps,
+    optionProps
+  } = useWheelListbox({
+    label,
+    options,
+    value,
+    activeIndex,
+    stepBy: moveBy,
+    toEnd,
+    activate
+  });
   return /*#__PURE__*/_jsxs("div", {
     ...{
       className: "x1n2onr6 x1cqoux5 xeuugli"
@@ -402,16 +391,11 @@ export function Wheel({
       }
     }), /*#__PURE__*/_jsx("div", {
       ref: scrollerRef,
-      role: "listbox",
-      "aria-label": label,
-      "aria-activedescendant": `${id}-${options[activeIndex]?.value}`,
-      tabIndex: 0,
-      onKeyDown: handleKeyDown
+      ...listboxProps,
       // Read in the capture phase. usePointerDragScroll stops a primary
       // mouse press from bubbling, so that it does not reach BottomSheet's
       // drag. A bubbling handler would never see a mouse, and would keep the
       // last touch.
-      ,
       onPointerDownCapture: event => {
         lastPointerRef.current = event.pointerType;
       },
@@ -420,20 +404,7 @@ export function Wheel({
       },
       ...stylex.props(styles.scroller, focusOutlineStyles.focusVisible),
       children: options.map((option, index) => /*#__PURE__*/_jsx("div", {
-        id: `${id}-${option.value}`,
-        role: "option",
-        "aria-selected": option.value === value,
-        "aria-disabled": option.isDisabled || undefined,
-        onClick: () => {
-          if (option.isDisabled) {
-            return;
-          }
-          setActiveIndex(index);
-          scrollToIndex(index, 'smooth');
-          if (option.value !== value) {
-            onChange(option.value);
-          }
-        },
+        ...optionProps(option, index),
         ...{
           0: {
             className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 x1sodnla x1tgivj0 xuxw1ft x1ypdohk x16khyan x87ps6o x1jbe559 xuedmi6"
@@ -458,4 +429,4 @@ export function Wheel({
     })]
   });
 }
-Wheel.displayName = 'Wheel';
+ScrollWheel.displayName = 'ScrollWheel';

package/dist/DateInput/useOwnScrollGesture.d.ts

@@ -27,6 +27,16 @@ export type OwnScrollGestureOptions = {
      * so momentum and snapping are never second-guessed.
      */
     onSwipe?: (direction: 1 | -1) => void;
+    /**
+     * Also keep the pointer a touch lands with, for an `'all'` scroller that pans
+     * through the gesture system rather than natively. A sheet arms its pull-down
+     * on its body's `pointerdown`, and counts on a native pan to cancel a touch
+     * pointer. A pan of the gesture system never cancels it. Without this, the
+     * sheet follows the first 8 px of a downward drag before the scroller's own
+     * pan takes over. The gesture host and the shared modality tracker listen in
+     * the capture phase, before this.
+     */
+    isPointerKept?: boolean;
 };
 /**
  * Claim touch gestures that start on `ref`'s element, so an ancestor cannot

package/dist/DateInput/useOwnScrollGesture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useOwnScrollGesture.d.ts","sourceRoot":"","sources":["../../src/DateInput/useOwnScrollGesture.ts"],"names":[],"mappings":"AAiFA;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAKpC;;;GAGG;AACH,eAAO,MAAM,cAAc,KAAK,CAAC;AAEjC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEzC,MAAM,MAAM,uBAAuB,GAAG;IACpC;yDACqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC;CACvC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,IAAI,GAAE,SAAiB,EACvB,OAAO,GAAE,uBAA4B,GACpC,IAAI,CA+FN"}
+{"version":3,"file":"useOwnScrollGesture.d.ts","sourceRoot":"","sources":["../../src/DateInput/useOwnScrollGesture.ts"],"names":[],"mappings":"AAkFA;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,IAAI,CAAC;AAKpC;;;GAGG;AACH,eAAO,MAAM,cAAc,KAAK,CAAC;AAEjC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEzC,MAAM,MAAM,uBAAuB,GAAG;IACpC;yDACqD;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC;IACtC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,IAAI,GAAE,SAAiB,EACvB,OAAO,GAAE,uBAA4B,GACpC,IAAI,CA0GN"}

package/dist/DateInput/useOwnScrollGesture.js

@@ -6,7 +6,8 @@
  * @file useOwnScrollGesture.ts
  * @input A scroll container ref and which axis it owns
  * @output Stops touch gestures on that container from reaching an ancestor
- * @position Internal behavior hook; consumed by Wheel.tsx and MonthScroller.tsx
+ * @position Internal behavior hook; consumed by Wheel.tsx, PickerWheel.tsx and
+ *   MonthScroller.tsx
  *
  * Lets a nested scroller keep the finger that lands on it.
  *
@@ -106,13 +107,17 @@ export const SWIPE_DISTANCE = 32;
 export function useOwnScrollGesture(ref, axis = 'all', options = {}) {
   const {
     isEnabled = true,
-    onSwipe
+    onSwipe,
+    isPointerKept = false
   } = options;
 
   // Read through a ref so a caller need not memoize the callback: re-running
   // this effect would tear the listeners off mid-gesture.
   const onSwipeRef = useRef(onSwipe);
   onSwipeRef.current = onSwipe;
+
+  // Syncs touch listeners on the element with `isEnabled`. They decide which
+  // gesture owns a horizontal scroll.
   useEffect(() => {
     const element = ref.current;
     if (element == null || !isEnabled) {
@@ -180,6 +185,8 @@ export function useOwnScrollGesture(ref, axis = 'all', options = {}) {
       // bookkeeping.
       claimed = null;
     };
+    const keepPointer = event => event.stopPropagation();
+    const isKeepingPointer = axis === 'all' && isPointerKept;
     element.addEventListener('touchstart', onStart, {
       passive: true
     });
@@ -192,11 +199,17 @@ export function useOwnScrollGesture(ref, axis = 'all', options = {}) {
     element.addEventListener('touchcancel', onEnd, {
       passive: true
     });
+    if (isKeepingPointer) {
+      element.addEventListener('pointerdown', keepPointer);
+    }
     return () => {
       element.removeEventListener('touchstart', onStart);
       element.removeEventListener('touchmove', onMove);
       element.removeEventListener('touchend', onEnd);
       element.removeEventListener('touchcancel', onEnd);
+      if (isKeepingPointer) {
+        element.removeEventListener('pointerdown', keepPointer);
+      }
     };
-  }, [ref, axis, isEnabled]);
+  }, [ref, axis, isEnabled, isPointerKept]);
 }

package/dist/DateInput/usePointerDragScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePointerDragScroll.d.ts","sourceRoot":"","sources":["../../src/DateInput/usePointerDragScroll.ts"],"names":[],"mappings":"AAwDA;;;GAGG;AACH,eAAO,MAAM,SAAS,IAAI,CAAC;AAK3B,qEAAqE;AACrE,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;;OAIG;IACH,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACzC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,SAAS,GAAE,OAAc,GACxB,sBAAsB,CAmJxB"}
+{"version":3,"file":"usePointerDragScroll.d.ts","sourceRoot":"","sources":["../../src/DateInput/usePointerDragScroll.ts"],"names":[],"mappings":"AAwDA;;;GAGG;AACH,eAAO,MAAM,SAAS,IAAI,CAAC;AAK3B,qEAAqE;AACrE,MAAM,MAAM,sBAAsB,GAAG;IACnC;;;;OAIG;IACH,aAAa,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACzC,CAAC;AAEF;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,SAAS,GAAE,OAAc,GACxB,sBAAsB,CAoJxB"}

package/dist/DateInput/usePointerDragScroll.js

@@ -74,6 +74,8 @@ const SETTLE_FALLBACK_MS = 260;
  */
 export function usePointerDragScroll(ref, isEnabled = true) {
   const isDraggingRef = useRef(false);
+
+  // Syncs pointer listeners with `isEnabled`. A mouse drag scrolls the element.
   useEffect(() => {
     const element = ref.current;
     if (element == null || !isEnabled) {

package/dist/DateInput/useScrollSettle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollSettle.d.ts","sourceRoot":"","sources":["../../src/DateInput/useScrollSettle.ts"],"names":[],"mappings":"AA0DA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,4EAA4E;AAC5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACvC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,EACxC,SAAS,GAAE,OAAc,EACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GACnC,iBAAiB,CAuGnB"}
+{"version":3,"file":"useScrollSettle.d.ts","sourceRoot":"","sources":["../../src/DateInput/useScrollSettle.ts"],"names":[],"mappings":"AA0DA;;;;;GAKG;AACH,eAAO,MAAM,eAAe,MAAM,CAAC;AAEnC,4EAA4E;AAC5E,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;;OAKG;IACH,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;CACvC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAC7B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,EACxC,SAAS,GAAE,OAAc,EACzB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GACnC,iBAAiB,CAyGnB"}

package/dist/DateInput/useScrollSettle.js

@@ -81,6 +81,9 @@ export function useScrollSettle(ref, onSettle, isEnabled = true, isHeldRef) {
   const onSettleRef = useRef(onSettle);
   onSettleRef.current = onSettle;
   const isAtRestRef = useRef(true);
+
+  // Syncs scroll, touch and pointer listeners with `isEnabled`. They find when
+  // scrolling stops.
   useEffect(() => {
     const element = ref.current;
     if (element == null || !isEnabled) {

package/dist/DateInput/useWheelListbox.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @file useWheelListbox.ts
+ * @input A wheel's label, options, committed value and active row, and its
+ *   presentation's three moves: a step, an end, a row
+ * @output useWheelListbox: the listbox and option props both wheels share
+ * @position Internal hook of ScrollWheel (Wheel.tsx) and PickerWheel.tsx
+ *
+ * A wheel is a listbox: one tab stop, with Arrow, Page, Home and End keys.
+ * Each presentation decides what its keys and clicks do to its own column.
+ *
+ * SYNC: When modified, update Wheel.tsx and PickerWheel.tsx.
+ */
+import { type KeyboardEvent } from 'react';
+import type { WheelOption } from './wheelOptions.js';
+export interface WheelListboxProps {
+    /** Accessible name for the column. */
+    label: string;
+    /** Rows, top to bottom. */
+    options: ReadonlyArray<WheelOption>;
+    /** Committed value. */
+    value: number;
+    /** The row `aria-activedescendant` names. */
+    activeIndex: number;
+    /** An Arrow or Page key: a step of `delta` rows. */
+    stepBy: (delta: number) => void;
+    /** Home or End. */
+    toEnd: (end: 'first' | 'last') => void;
+    /** A click on row `index`. */
+    activate: (index: number) => void;
+}
+/**
+ * The listbox and option props of one wheel column: ids, ARIA, the keys and
+ * a click on a row. `aria-activedescendant` marks the active row, and a click
+ * reaches every row. The scrolling column steps from the row under its band. The
+ * touch column steps from the row it is heading to.
+ *
+ * @example
+ * ```
+ * const {listboxProps, optionProps} = useWheelListbox({label, options, value, activeIndex, stepBy, toEnd, activate});
+ * <div {...listboxProps}>{options.map((option, index) => <div key={option.value} {...optionProps(option, index)} />)}</div>
+ * ```
+ */
+export declare function useWheelListbox({ label, options, value, activeIndex, stepBy, toEnd, activate, }: WheelListboxProps): {
+    listboxProps: {
+        role: "listbox";
+        'aria-label': string;
+        'aria-activedescendant': string;
+        tabIndex: number;
+        onKeyDown: (event: KeyboardEvent) => void;
+    };
+    optionProps: (option: WheelOption, index: number) => {
+        id: string;
+        role: "option";
+        'aria-selected': boolean;
+        'aria-disabled': true | undefined;
+        onClick: () => void;
+    };
+};
+//# sourceMappingURL=useWheelListbox.d.ts.map

package/dist/DateInput/useWheelListbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWheelListbox.d.ts","sourceRoot":"","sources":["../../src/DateInput/useWheelListbox.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAqB,KAAK,aAAa,EAAC,MAAM,OAAO,CAAC;AAC7D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,MAAM,WAAW,iBAAiB;IAChC,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACpC,uBAAuB;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,WAAW,EAAE,MAAM,CAAC;IACpB,oDAAoD;IACpD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,mBAAmB;IACnB,KAAK,EAAE,CAAC,GAAG,EAAE,OAAO,GAAG,MAAM,KAAK,IAAI,CAAC;IACvC,8BAA8B;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,KAAK,EACL,WAAW,EACX,MAAM,EACN,KAAK,EACL,QAAQ,GACT,EAAE,iBAAiB;;;;;;2BAGR,aAAa;;0BAwCC,WAAW,SAAS,MAAM;;;;;;;EAQnD"}

package/dist/DateInput/useWheelListbox.js

@@ -0,0 +1,88 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useWheelListbox.ts
+ * @input A wheel's label, options, committed value and active row, and its
+ *   presentation's three moves: a step, an end, a row
+ * @output useWheelListbox: the listbox and option props both wheels share
+ * @position Internal hook of ScrollWheel (Wheel.tsx) and PickerWheel.tsx
+ *
+ * A wheel is a listbox: one tab stop, with Arrow, Page, Home and End keys.
+ * Each presentation decides what its keys and clicks do to its own column.
+ *
+ * SYNC: When modified, update Wheel.tsx and PickerWheel.tsx.
+ */
+import { useCallback, useId } from 'react';
+/** Rows a Page Up or Page Down key moves. */
+const PAGE_ROWS = 10;
+/**
+ * The listbox and option props of one wheel column: ids, ARIA, the keys and
+ * a click on a row. `aria-activedescendant` marks the active row, and a click
+ * reaches every row. The scrolling column steps from the row under its band. The
+ * touch column steps from the row it is heading to.
+ *
+ * @example
+ * ```
+ * const {listboxProps, optionProps} = useWheelListbox({label, options, value, activeIndex, stepBy, toEnd, activate});
+ * <div {...listboxProps}>{options.map((option, index) => <div key={option.value} {...optionProps(option, index)} />)}</div>
+ * ```
+ */
+export function useWheelListbox({
+  label,
+  options,
+  value,
+  activeIndex,
+  stepBy,
+  toEnd,
+  activate
+}) {
+  const id = useId();
+  const onKeyDown = useCallback(event => {
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        stepBy(1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        stepBy(-1);
+        break;
+      case 'PageDown':
+        event.preventDefault();
+        stepBy(PAGE_ROWS);
+        break;
+      case 'PageUp':
+        event.preventDefault();
+        stepBy(-PAGE_ROWS);
+        break;
+      case 'Home':
+        event.preventDefault();
+        toEnd('first');
+        break;
+      case 'End':
+        event.preventDefault();
+        toEnd('last');
+        break;
+      default:
+        break;
+    }
+  }, [stepBy, toEnd]);
+  return {
+    listboxProps: {
+      role: 'listbox',
+      'aria-label': label,
+      'aria-activedescendant': `${id}-${options[activeIndex]?.value}`,
+      tabIndex: 0,
+      onKeyDown
+    },
+    optionProps: (option, index) => ({
+      id: `${id}-${option.value}`,
+      role: 'option',
+      'aria-selected': option.value === value,
+      'aria-disabled': option.isDisabled || undefined,
+      onClick: () => activate(index)
+    })
+  };
+}