@astryxdesign/core 0.7.7 → 0.7.8-canary.0588a13

package/dist/DateInput/TouchDateField.js

@@ -70,12 +70,13 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, sizeVars, borderVars, fontWeightVars, typeScaleVars, typographyVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
-import { focusOutlineStyles, getInputARIA, isImeKeyEvent, mergeProps, rtlStyles, themeProps, formatSharedDate, plainDateFromISO, plainDateToday, plainDateFormat, DATE_FORMAT_WEEKDAY_ONLY } from "../utils/index.js";
+import { focusOutlineStyles, getInputARIA, isImeKeyEvent, mergeProps, rtlStyles, themeProps, formatSharedDate, plainDateFromISO, plainDateToday } from "../utils/index.js";
 import { plainDateFormatStandaloneMonthYear } from "../utils/plainDate.js";
 import { chainEventHandlers } from "../utils/chainEventHandlers.js";
 import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { usePressFeedback } from "../hooks/usePressFeedback.js";
 import { normalizeDayOfWeek } from "../utils/dateTypes.js";
+import { getWeekdayHeaders } from "../Calendar/getWeekdayHeaderNames.js";
 import { MonthScroller } from "./MonthScroller.js";
 import { MonthYearWheels } from "./MonthYearWheels.js";
 import { DEFAULT_MONTH_REACH, clampIndex, fromMonthIndex, monthIndexOf } from "./monthGeometry.js";
@@ -322,6 +323,7 @@ export function TouchDateField({
   const scrollerHandleRef = useRef(null);
   // Pending focus handoff from the clear button; see handleClear.
   const clearFocusTimerRef = useRef(null);
+  // Releases the focus timer on unmount.
   useEffect(() => () => {
     if (clearFocusTimerRef.current != null) {
       clearTimeout(clearFocusTimerRef.current);
@@ -342,33 +344,7 @@ export function TouchDateField({
     year,
     month
   } = fromMonthIndex(monthIndex);
-
-  /**
-   * Three-letter weekday names — "Sun", not Calendar's "Su".
-   *
-   * The sheet is full width and the columns are ~51px, so there is room for
-   * the form people actually read, and a picker operated by thumb should not
-   * make anyone decode "Tu" against "Th".
-   *
-   * This is CLDR's `abbreviated` width, which `Intl` produces natively — no
-   * truncation, so the 28 non-English locales stay correct rather than being
-   * sliced to three characters. (Verified against the CLDR tables for all 30
-   * locales in the catalog.) Calendar's 2-letter row is CLDR's *short* width,
-   * which `Intl` cannot express, which is exactly why that surface needs a
-   * generated table and this one does not.
-   *
-   * Built here rather than taken from `useCalendarDays`, which supplies the
-   * short form for Calendar's own header. The rotation matches: day 4 of
-   * January 1970 was a Sunday, so offsetting from it by `weekStartsOn` walks
-   * the week in the same order the panes lay out their columns.
-   */
-  const dayNames = useMemo(() => Array.from({
-    length: 7
-  }, (_, offset) => plainDateFormat({
-    year: 1970,
-    month: 1,
-    day: 4 + (weekStartsOn + offset) % 7
-  }, DATE_FORMAT_WEEKDAY_ONLY, locale)), [locale, weekStartsOn]);
+  const weekdayHeaders = useMemo(() => getWeekdayHeaders(locale, weekStartsOn), [locale, weekStartsOn]);
   const monthYearLabel = plainDateFormatStandaloneMonthYear({
     year,
     month,
@@ -689,12 +665,15 @@ export function TouchDateField({
           className: "xrvj5dj x1mzazjb x6k0iem x6s0dn4 x1jl3cmp xuedmi6 xcj1dhv xzg1mie xlshs6z xg01cxk"
         }
       }[!!isWheelOpen << 0],
-      children: dayNames.map(name => /*#__PURE__*/_jsx("div", {
+      children: weekdayHeaders.map(({
+        dayOfWeek,
+        name
+      }) => /*#__PURE__*/_jsx("div", {
         ...{
           className: "x2b8uid x141an7d x1sodnla xv1l7n4"
         },
         children: name
-      }, name))
+      }, dayOfWeek))
     }), /*#__PURE__*/_jsxs("div", {
       ...{
         className: "xrvj5dj xm8gem x1n2onr6"

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 WheelHandle, 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, ref, }: 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":"AA2DA,OAAO,EAKL,KAAK,UAAU,EAChB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EACL,mBAAmB,EACnB,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,gBAAgB,CAAC;AAoMxB;;;;;;;;;;;;;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,EACf,GAAG,GACJ,EAAE,UAAU,+BAqVZ;yBA5Ve,WAAW"}

package/dist/DateInput/Wheel.js

@@ -4,51 +4,46 @@
 
 /**
  * @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; a ref for
+ *   programmatic turns
+ * @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, useImperativeHandle, 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 { canSpinTo, 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;
 
 /**
@@ -57,10 +52,21 @@ const ITEM_BLOCK_SIZE = dateInputTouchSizes.wheelItemSize;
  * at the top — which is what a `view()` timeline over the `cover` range means,
  * and why this reads as a cylinder rotating under the finger.
  */
-const falloff = "x1tut0r7-B";
+const tip = "x18sn2u9-B";
+
+/**
+ * Colour keeps every row at WCAG AA, which an opacity fade does not. The ends
+ * stop halfway to the secondary text colour, because that colour alone falls
+ * below AA in two shipped themes.
+ */
+const fade = "x1ofkhwi-B";
 
-/** Motion-free equivalent: the depth cue survives as opacity alone. */
-const fadeOnly = "xuvekqa-B";
+/**
+ * A disabled row keeps its disabled colour and fades by opacity instead: WCAG
+ * 1.4.3 exempts inactive components from the contrast minimum.
+ */
+const tipAndDim = "x1tut0r7-B";
+const dim = "xuvekqa-B";
 const styles = {
   scroller: {
     kZKoxP: "xm8gem",
@@ -78,47 +84,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 +126,28 @@ export function nearestEnabledIndex(options, index, towardIndex) {
  * />
  * ```
  */
-export function Wheel({
+export function ScrollWheel({
   label,
   options,
   value,
   onChange,
-  isActive = true
+  isActive = true,
+  ref
 }) {
-  const id = useId();
+  // A spin commits the row at once. The new value then scrolls the column
+  // there, as any new value does.
+  useImperativeHandle(ref, () => ({
+    spinTo: async index => {
+      if (!canSpinTo(options, index)) {
+        return false;
+      }
+      const option = options[index];
+      if (option.value !== value) {
+        onChange(option.value);
+      }
+      return true;
+    }
+  }), [options, value, onChange]);
   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 +291,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 +326,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 +367,44 @@ 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) {
+  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 +416,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,42 +429,46 @@ 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"
           },
+          4: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 x1sodnla x1tgivj0 xuxw1ft x1ypdohk x16khyan x87ps6o x1jbe559 xuedmi6 xssvwzl x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782"
+          },
           2: {
             className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 xuxw1ft x1ypdohk x16khyan x87ps6o x1jbe559 xuedmi6 xjse4m1 x2mo6ok"
           },
+          6: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 xuxw1ft x1ypdohk x16khyan x87ps6o x1jbe559 xuedmi6 xssvwzl x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xjse4m1 x2mo6ok"
+          },
           1: {
             className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 x1sodnla xuxw1ft x87ps6o x1jbe559 xuedmi6 xnbbluu xt0e3qv"
           },
+          5: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 x1sodnla xuxw1ft x87ps6o x1jbe559 xuedmi6 xssvwzl x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xnbbluu xt0e3qv"
+          },
           3: {
             className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 xuxw1ft x87ps6o x1jbe559 xuedmi6 x2mo6ok xnbbluu xt0e3qv"
+          },
+          7: {
+            className: "x78zum5 x6s0dn4 xl56j7k x6hpsvf xf314gf x1hdbdi8 xc342km xng3xce xjbqb8w x18juvz8 xuxw1ft x87ps6o x1jbe559 xuedmi6 xssvwzl x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 x2mo6ok xnbbluu xt0e3qv"
           }
-        }[!!(index === activeIndex) << 1 | !!option.isDisabled << 0],
+        }[!!(index !== activeIndex && !option.isDisabled) << 2 | !!(index === activeIndex) << 1 | !!option.isDisabled << 0],
         children: /*#__PURE__*/_jsx("span", {
           ...{
-            className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xb3r6kr xlyipyv x1iu2jvn xk3h8ob x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xlp1x4z"
-          },
+            0: {
+              className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xb3r6kr xlyipyv x1trhrh1 x1pljy2o x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xlp1x4z"
+            },
+            1: {
+              className: "x78zum5 x6s0dn4 xl56j7k xh8yej3 x5yr21d xb3r6kr xlyipyv x190lv1 xg8s4dl x1u6ievf xwms9i0 x1esw782 xlp1x4z x1iu2jvn xk3h8ob"
+            }
+          }[!!option.isDisabled << 0],
           children: option.label
         })
       }, option.value))
     })]
   });
 }
-Wheel.displayName = 'Wheel';
+ScrollWheel.displayName = 'ScrollWheel';

package/dist/DateInput/datePickerTouch.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file datePickerTouch.ts
+ * @input The date and time pickers' touch-only pieces
+ * @output Re-exports what the date and time sheets use only under a finger:
+ *   TimeWheels
+ * @position The pickers' touch layer. The sheets import touch behaviour from
+ *   here only, so a desktop build can replace this one module.
+ *
+ * SYNC: When modified, update TouchTimeField.tsx and TouchDateTimeField.tsx.
+ */
+export { TimeWheels } from '../TimeInput/TimeWheels.js';
+export type { TimeWheelsProps } from '../TimeInput/TimeWheels.js';
+//# sourceMappingURL=datePickerTouch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datePickerTouch.d.ts","sourceRoot":"","sources":["../../src/DateInput/datePickerTouch.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAEH,OAAO,EAAC,UAAU,EAAC,MAAM,yBAAyB,CAAC;AACnD,YAAY,EAAC,eAAe,EAAC,MAAM,yBAAyB,CAAC"}

package/dist/DateInput/datePickerTouch.js

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file datePickerTouch.ts
+ * @input The date and time pickers' touch-only pieces
+ * @output Re-exports what the date and time sheets use only under a finger:
+ *   TimeWheels
+ * @position The pickers' touch layer. The sheets import touch behaviour from
+ *   here only, so a desktop build can replace this one module.
+ *
+ * SYNC: When modified, update TouchTimeField.tsx and TouchDateTimeField.tsx.
+ */
+
+export { TimeWheels } from "../TimeInput/TimeWheels.js";

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"}