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

package/dist/DateInput/wheelPhysics.js

@@ -0,0 +1,341 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file wheelPhysics.ts
+ * @input A wheel's offset and release velocity, its rows, and the UIKit
+ *   picker constants (motion/uikit/picker.ts)
+ * @output The curves a picker wheel moves on: the release plan, the tap spin,
+ *   the rubber band, and the row crossings that tick
+ * @position Pure math of the touch picker wheel (PickerWheel.tsx)
+ *
+ * Positions are px, times seconds and velocities px/s. Row k is under the
+ * band at an offset of k rows. UIKit's pt values scale by `scale`.
+ *
+ * SYNC: When modified, update wheelPhysics.test.ts and PickerWheel.tsx.
+ */
+
+import { cubicBezier } from "../motion/bezier.js";
+import { projectDistance } from "../motion/projection.js";
+import { solveDecay } from "../motion/decay.js";
+import { rubberBand } from "../motion/rubberBand.js";
+import { solveSpring, toSpring } from "../motion/spring.js";
+import { picker } from "../motion/uikit/picker.js";
+import { scroll } from "../motion/uikit/scroll.js";
+
+/** A motion of the wheel's offset, from t = 0 to `duration` (seconds). */
+
+/** How a release moves the wheel. */
+
+/** What a release does: the curve, and the row it ends on. */
+
+/** The rows a wheel moves over. */
+
+/** UIKit's row height in pt: the unit the picker constants are measured in. */
+const UIKIT_ROW_HEIGHT = picker.geometry.rowHeight;
+
+/** Below half a device pixel at 3×, a motion is on its row. */
+const AT_REST_PT = 1 / 6;
+
+/**
+ * The longest a plan runs, s: the animator's limit (`MAX_DURATION_MS` in
+ * motion/animator.ts). A spring that has not settled by then (an undamped
+ * one, which never does) snaps onto its end.
+ */
+export const MAX_PLAN_SECONDS = 30;
+
+/** The constants' scale for a wheel whose rows are `rowHeight` px tall. */
+export function scaleFor(rowHeight) {
+  return rowHeight / UIKIT_ROW_HEIGHT;
+}
+
+/** The wheel at rest on `offset`: a curve that does not move. */
+export function restCurve(offset) {
+  return {
+    duration: 0,
+    to: offset,
+    value: () => offset,
+    velocity: () => 0
+  };
+}
+
+/** The offsets of the first and last rows. */
+export function offsetBounds({
+  rowHeight,
+  rowCount
+}) {
+  return {
+    min: 0,
+    max: Math.max(0, rowCount - 1) * rowHeight
+  };
+}
+
+/**
+ * The offset a drag shows for the finger's `offset`: past the first or last
+ * row it is rubber-banded, as a UIPickerView's table is.
+ */
+export function dragOffset(offset, layout) {
+  const {
+    min,
+    max
+  } = offsetBounds(layout);
+  const dimension = picker.geometry.rubberBandDimension * scaleFor(layout.rowHeight);
+  if (offset < min) {
+    return min + rubberBand(offset - min, dimension);
+  }
+  if (offset > max) {
+    return max + rubberBand(offset - max, dimension);
+  }
+  return offset;
+}
+
+/** The nearest row to `offset`, clamped to the rows. */
+export function nearestIndex(offset, layout) {
+  const index = Math.round(offset / layout.rowHeight);
+  return Math.min(Math.max(index, 0), Math.max(0, layout.rowCount - 1));
+}
+
+/**
+ * Ease from `from` onto `to` as UIKit does after a release without velocity.
+ * The distance left falls as e^(−k t), and the ease ends within half a device
+ * pixel.
+ */
+export function snapCurve(from, to, scale = 1) {
+  const distance = from - to;
+  const rate = picker.snapRate * 1000;
+  const epsilon = AT_REST_PT * scale;
+  if (Math.abs(distance) <= epsilon) {
+    return {
+      duration: 0,
+      to,
+      value: () => to,
+      velocity: () => 0
+    };
+  }
+  const duration = Math.log(Math.abs(distance) / epsilon) / rate;
+  return {
+    duration,
+    to,
+    value: t => t >= duration ? to : to + distance * Math.exp(-rate * t),
+    velocity: t => t >= duration ? 0 : -rate * distance * Math.exp(-rate * t)
+  };
+}
+
+/**
+ * A coast from `from` at `velocity` that keeps the velocity and ends on `to` at
+ * the stop speed. The rate is re-solved, so the speed falls from |velocity| to
+ * the stop speed over exactly `to − from`.
+ */
+export function coastCurve(from, velocity, to, scale = 1) {
+  const stopSpeed = picker.release.stopSpeed * 1000 * scale;
+  const distance = to - from;
+  const speed = Math.abs(velocity);
+  if (distance === 0 || Math.sign(distance) !== Math.sign(velocity) || speed <= stopSpeed) {
+    return snapCurve(from, to, scale);
+  }
+  const direction = Math.sign(distance);
+  // Per second: the speed falls by λ × the distance covered.
+  const lambda = (speed - stopSpeed) / Math.abs(distance);
+  const duration = Math.log(speed / stopSpeed) / lambda;
+  return {
+    duration,
+    to,
+    value: t => t >= duration ? to : from + direction * speed * -Math.expm1(-lambda * t) / lambda,
+    velocity: t => t >= duration ? 0 : direction * speed * Math.exp(-lambda * t)
+  };
+}
+
+/**
+ * The bounce spring, from `from` with `velocity`, onto `to`. `bounce` is
+ * `scroll.bounce`'s spring as its caller resolves it.
+ */
+export function bounceCurve(from, velocity, to, scale = 1, bounce = scroll.bounce) {
+  const spring = solveSpring(toSpring(bounce), {
+    from,
+    to,
+    velocity
+  });
+  const duration = Math.min(MAX_PLAN_SECONDS, spring.settleTime(AT_REST_PT * scale));
+  return {
+    duration,
+    to,
+    value: t => t >= duration ? to : spring.value(t),
+    velocity: t => t >= duration ? 0 : spring.velocity(t)
+  };
+}
+
+/**
+ * A coast that runs into an end: the normal decay until the offset reaches
+ * `edge`, then the bounce spring with the velocity it has there.
+ */
+export function edgeCurve(from, velocity, edge, scale = 1, bounceSpring = scroll.bounce) {
+  const decay = solveDecay({
+    from,
+    velocity
+  });
+  const hit = decay.timeToReach(edge);
+  if (hit == null) {
+    return bounceCurve(from, velocity, edge, scale, bounceSpring);
+  }
+  const bounce = bounceCurve(edge, decay.velocity(hit), edge, scale, bounceSpring);
+  const duration = Math.min(MAX_PLAN_SECONDS, hit + bounce.duration);
+  return {
+    duration,
+    to: edge,
+    value: t => t >= duration ? edge : t < hit ? decay.value(t) : bounce.value(t - hit),
+    velocity: t => t >= duration ? 0 : t < hit ? decay.velocity(t) : bounce.velocity(t - hit)
+  };
+}
+
+/**
+ * Where the scroll view projects a release. This is the coast's rest point at
+ * the normal rate, short of the stop speed. UIScrollView sums it the same way
+ * (`projectDistance`: r ÷ (1 − r) ms of the speed).
+ */
+export function projectRelease(offset, velocity, scale = 1) {
+  const stopSpeed = picker.release.stopSpeed * 1000 * scale;
+  const speed = Math.abs(velocity);
+  if (speed <= stopSpeed) {
+    return offset;
+  }
+  return offset + Math.sign(velocity) * projectDistance(speed - stopSpeed);
+}
+
+/**
+ * What the wheel does when the finger lifts at `offset` with `velocity`
+ * (px/s, positive when the rows move up). `bounce` is `scroll.bounce`'s
+ * spring as the wheel resolves it. The velocity is the pan's
+ * `scrollVelocity()` at the lift. The plan follows UIKit, as measured:
+ *
+ * - Inside the rows, a release slower than `release.minimumSpeed` carries no
+ *   velocity. Past an end, the velocity is kept.
+ * - The scroll view projects the coast (`projectRelease`), and the picker
+ *   snaps that to the nearest row. The coast keeps the release velocity and
+ *   stops exactly on that row.
+ * - A projection past an end is not re-solved. The coast decays at the normal
+ *   rate into the end, and the bounce takes its velocity there.
+ * - A release without velocity eases onto the nearest row at `snapRate`.
+ * - A release past an end returns on the bounce spring.
+ * - A spring that has not settled by the animator's limit snaps onto its end
+ *   there, as the animator's own motion does.
+ *
+ * @example
+ * ```
+ * const plan = planRelease(963.67, 933.4, {rowHeight: 32, rowCount: 60});
+ * plan.index; // 45: the coast stops on row 45 after about 2.3 s
+ * ```
+ */
+export function planRelease(offset, velocity, layout, bounce = scroll.bounce) {
+  const scale = scaleFor(layout.rowHeight);
+  const {
+    min,
+    max
+  } = offsetBounds(layout);
+  if (offset < min || offset > max) {
+    const edge = offset < min ? min : max;
+    return {
+      kind: 'return',
+      index: nearestIndex(edge, layout),
+      curve: bounceCurve(offset, velocity, edge, scale, bounce)
+    };
+  }
+  const minimumSpeed = picker.release.minimumSpeed * 1000 * scale;
+  const speed = Math.abs(velocity) < minimumSpeed ? 0 : velocity;
+  const projected = projectRelease(offset, speed, scale);
+  if (projected < min || projected > max) {
+    const edge = projected < min ? min : max;
+    return {
+      kind: 'edge',
+      index: nearestIndex(edge, layout),
+      curve: edgeCurve(offset, speed, edge, scale, bounce)
+    };
+  }
+  const index = nearestIndex(projected, layout);
+  const target = index * layout.rowHeight;
+  if (speed === 0) {
+    return {
+      kind: 'snap',
+      index,
+      curve: snapCurve(offset, target, scale)
+    };
+  }
+  const curve = coastCurve(offset, speed, target, scale);
+  return {
+    kind: curve.duration > 0 ? 'coast' : 'snap',
+    index,
+    curve
+  };
+}
+
+/**
+ * The tap spin onto a row: UIKit's animated setContentOffset, over
+ * `duration` seconds on `curve`.
+ */
+export function spinCurve(from, to, duration, curve) {
+  if (from === to || !(duration > 0)) {
+    return restCurve(to);
+  }
+  const ease = cubicBezier(curve);
+  const distance = to - from;
+  // Velocity from the eased progress's slope, by a central difference.
+  const step = 1e-4;
+  return {
+    duration,
+    to,
+    value: t => t >= duration ? to : from + distance * ease(t / duration),
+    velocity: t => {
+      if (t >= duration || t < 0) {
+        return 0;
+      }
+      const a = ease(Math.max(0, t / duration - step));
+      const b = ease(Math.min(1, t / duration + step));
+      return distance * (b - a) / (2 * step * duration);
+    }
+  };
+}
+
+/**
+ * The times (seconds, ascending) at which a row's centre reaches the band's
+ * centre during `curve`, after `after` and up to `until`. They are thinned so
+ * that two are never closer than the selection tick's minimum interval. `last`
+ * is the time of the previous tick, if any. Leaving the row the wheel starts on
+ * is not a tick; reaching the next one is.
+ */
+export function tickTimes(curve, rowHeight, {
+  after = 0,
+  until = curve.duration,
+  last = -Infinity,
+  step = 1 / 240
+} = {}) {
+  const interval = picker.selectionTick.minimumIntervalMs / 1000;
+  const times = [];
+  let previous = curve.value(after);
+  let lastTick = last;
+  for (let t = after + step; t < until + step; t += step) {
+    const time = Math.min(t, until);
+    const value = curve.value(time);
+    if (reachesRow(previous, value, rowHeight) && time - lastTick >= interval) {
+      times.push(time);
+      lastTick = time;
+    }
+    previous = value;
+    if (time === until) {
+      break;
+    }
+  }
+  return times;
+}
+
+/**
+ * Whether moving from offset `from` to `to` brings a row's centre onto the
+ * band's. That is a multiple of `rowHeight` in (from, to] moving up, or in [to,
+ * from) moving down.
+ */
+export function reachesRow(from, to, rowHeight) {
+  if (to > from) {
+    return Math.floor(to / rowHeight) > Math.floor(from / rowHeight);
+  }
+  if (to < from) {
+    return Math.ceil(to / rowHeight) < Math.ceil(from / rowHeight);
+  }
+  return false;
+}

package/dist/DateInput/wheelStrip.d.ts

@@ -0,0 +1,92 @@
+import { type WheelCurve, type WheelLayout } from './wheelPhysics.js';
+/** How a motion ended: arrived on its row, or stopped before. */
+export type WheelMotionOutcome = 'arrived' | 'stopped';
+/** Options for one motion. */
+export interface PlayOptions {
+    /** Tick as rows reach the band (a drag's release); a tap's spin does not. */
+    ticks?: boolean;
+    /** Called once when the motion ends, either way. */
+    onEnd?: (outcome: WheelMotionOutcome, offset: number) => void;
+    /** Started by a touch drag's release, which cross-fades under Reduce Motion. */
+    touchRelease?: boolean;
+    /**
+     * The momentum that continues a throw: a coast, and its bounce at an end.
+     * It is direct movement, so it plays under Reduce Motion too, as scrolling
+     * keeps decelerating under iOS Reduce Motion.
+     */
+    momentum?: boolean;
+}
+/** One picker column's offset and everything that moves it. */
+export interface WheelStrip {
+    /** The strip the offset moves (null detaches it). */
+    attach(strip: HTMLElement | null): void;
+    /** Update the rows (a new option list); keeps the offset. */
+    setLayout(layout: WheelLayout): void;
+    /**
+     * Tell `listener` the position of the row nearest the band whenever it
+     * changes. That is on a drag frame, where a motion stops or ends, and at
+     * rest. A cross-fade's landing counts as an end. A motion itself reports
+     * nothing until it ends, so the compositor plays it without the main thread
+     * painting a mark per row.
+     */
+    onNearestChange(listener: ((position: number) => void) | null): void;
+    /** Whether a motion is playing. */
+    isMoving(): boolean;
+    /**
+     * The offset on screen at `time` (ms, the document timeline's clock; default
+     * now). It is the animator's presentation value. So a motion that has not
+     * started on screen yet shows its start.
+     */
+    offset(time?: number): number;
+    /** Where the wheel will be at rest: the motion's end, or the offset now. */
+    target(): number;
+    /**
+     * Show `offset` at once, stopping any motion: a drag frame or a park. A drag
+     * frame passes `ticks`, which also keeps the strip on its own compositing
+     * layer for the frames that follow.
+     */
+    setOffset(offset: number, options?: {
+        ticks?: boolean;
+    }): void;
+    /** Forget the previous drag frame (a new gesture starts). */
+    resetDrag(): void;
+    /**
+     * Stop the motion where it was on screen at `time` (a finger landing on a
+     * spinning wheel: its touch-down time). Returns that offset.
+     */
+    stop(time?: number): number;
+    /** Play `curve` from the current offset; the strip ends at `curve.to`. */
+    play(curve: WheelCurve, options?: PlayOptions): void;
+    /**
+     * Forget the row last reported nearest the band, so the next report names it
+     * again even unchanged. A caller that clears its mark as a motion starts then
+     * gets it back. That happens when the motion ends on the row it began on.
+     */
+    forgetNearest(): void;
+    /** Stop everything; a motion still running ends as stopped. */
+    dispose(): void;
+}
+/**
+ * Creates a wheel's strip on a fresh animator. It uses the internal animator
+ * for three jobs the public handle lacks:
+ *
+ * - It plays a closed-form curve on the compositor: a coast onto a row, a
+ *   snap, a spin.
+ * - It times haptic ticks on that curve's clock.
+ * - It substitutes Reduce Motion's cross-fade for a move.
+ *
+ * A release's coast and its bounce at an end are momentum (`decay`), so they
+ * keep their motion under Reduce Motion. Every other curve is a transition
+ * (`play`). Under Reduce Motion the animator cross-fades it after a touch or
+ * on a coarse pointer. Otherwise it lands at once.
+ *
+ * @example
+ * ```
+ * const strip = createWheelStrip({rowHeight: 28, rowCount: 60});
+ * strip.attach(element);
+ * strip.setOffset(30 * 28);
+ * strip.play(planRelease(strip.offset(), 900, layout).curve, {ticks: true, momentum: true});
+ * ```
+ */
+export declare function createWheelStrip(initialLayout: WheelLayout): WheelStrip;
+//# sourceMappingURL=wheelStrip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wheelStrip.d.ts","sourceRoot":"","sources":["../../src/DateInput/wheelStrip.ts"],"names":[],"mappings":"AAqBA,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,gBAAgB,CAAC;AAExB,iEAAiE;AACjE,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAC;AAEvD,8BAA8B;AAC9B,MAAM,WAAW,WAAW;IAC1B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,oDAAoD;IACpD,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,+DAA+D;AAC/D,MAAM,WAAW,UAAU;IACzB,qDAAqD;IACrD,MAAM,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,6DAA6D;IAC7D,SAAS,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC;;;;;;OAMG;IACH,eAAe,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC;IACrE,mCAAmC;IACnC,QAAQ,IAAI,OAAO,CAAC;IACpB;;;;OAIG;IACH,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,4EAA4E;IAC5E,MAAM,IAAI,MAAM,CAAC;IACjB;;;;OAIG;IACH,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAC,KAAK,CAAC,EAAE,OAAO,CAAA;KAAC,GAAG,IAAI,CAAC;IAC7D,6DAA6D;IAC7D,SAAS,IAAI,IAAI,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,0EAA0E;IAC1E,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrD;;;;OAIG;IACH,aAAa,IAAI,IAAI,CAAC;IACtB,+DAA+D;IAC/D,OAAO,IAAI,IAAI,CAAC;CACjB;AAgBD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,gBAAgB,CAAC,aAAa,EAAE,WAAW,GAAG,UAAU,CA+MvE"}

package/dist/DateInput/wheelStrip.js

@@ -0,0 +1,258 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file wheelStrip.ts
+ * @input The touch wheel's strip (its flat rows in one element), its layout,
+ *   and curves from wheelPhysics.ts
+ * @output createWheelStrip: the one owner of a wheel's offset. It writes a
+ *   drag's frames, plays and stops curves, ticks, and reports the nearest row
+ * @position Glue of the touch picker wheel (PickerWheel.tsx) over the shared
+ *   animator (motion/animator.ts)
+ *
+ * The strip is the one element that moves, on `translate`, so a motion plays
+ * on the compositor with no layout or paint per frame.
+ *
+ * SYNC: When modified, update wheelStrip.test.ts and PickerWheel.tsx.
+ */
+
+import { canVibrate, playHaptic } from "../gestures/haptics.js";
+import { createMotionAnimator } from "../motion/animator.js";
+import { reducedMotionFade } from "../motion/reducedMotion.js";
+import { picker } from "../motion/uikit/picker.js";
+import { nearestIndex, reachesRow, tickTimes } from "./wheelPhysics.js";
+
+/** How a motion ended: arrived on its row, or stopped before. */
+
+/** Options for one motion. */
+
+/** One picker column's offset and everything that moves it. */
+
+function now() {
+  const time = typeof document !== 'undefined' ? document.timeline?.currentTime : null;
+  return typeof time === 'number' ? time : performance.now();
+}
+
+/**
+ * Creates a wheel's strip on a fresh animator. It uses the internal animator
+ * for three jobs the public handle lacks:
+ *
+ * - It plays a closed-form curve on the compositor: a coast onto a row, a
+ *   snap, a spin.
+ * - It times haptic ticks on that curve's clock.
+ * - It substitutes Reduce Motion's cross-fade for a move.
+ *
+ * A release's coast and its bounce at an end are momentum (`decay`), so they
+ * keep their motion under Reduce Motion. Every other curve is a transition
+ * (`play`). Under Reduce Motion the animator cross-fades it after a touch or
+ * on a coarse pointer. Otherwise it lands at once.
+ *
+ * @example
+ * ```
+ * const strip = createWheelStrip({rowHeight: 28, rowCount: 60});
+ * strip.attach(element);
+ * strip.setOffset(30 * 28);
+ * strip.play(planRelease(strip.offset(), 900, layout).curve, {ticks: true, momentum: true});
+ * ```
+ */
+export function createWheelStrip(initialLayout) {
+  const animator = createMotionAnimator(null);
+  let layout = initialLayout;
+  let running = null;
+  let nearestListener = null;
+  let lastNearest = null;
+  let lastTick = -Infinity;
+  /** Last offset a drag frame showed, for its ticks. */
+  let dragPrevious = null;
+  const shown = time =>
+  // The strip's top sits on the band's row: offset `o` is `translate` −o.
+  -animator.get('y', time);
+  const reportNearest = offset => {
+    const position = nearestIndex(offset, layout);
+    if (position === lastNearest) {
+      return;
+    }
+    lastNearest = position;
+    nearestListener?.(position);
+  };
+  const tick = time => {
+    if (time - lastTick < picker.selectionTick.minimumIntervalMs) {
+      return;
+    }
+    lastTick = time;
+    playHaptic('selection');
+  };
+  const clear = motion => {
+    for (const timer of motion.timers) {
+      clearTimeout(timer);
+    }
+    motion.timers.length = 0;
+    if (running === motion) {
+      running = null;
+    }
+  };
+
+  /**
+   * The motion's timers, from `origin` (when it started on screen): its
+   * ticks, a cross-fade's landing, and its end.
+   */
+  const schedule = (motion, origin, {
+    endMs,
+    ticks,
+    landingMs
+  }) => {
+    for (const timer of motion.timers) {
+      clearTimeout(timer);
+    }
+    motion.timers.length = 0;
+    const elapsed = now() - origin;
+    if (ticks) {
+      for (const t of tickTimes(motion.curve, layout.rowHeight)) {
+        motion.timers.push(setTimeout(() => {
+          if (running === motion) {
+            tick(now());
+          }
+        }, Math.max(0, t * 1000 - elapsed)));
+      }
+    }
+    if (landingMs != null) {
+      motion.timers.push(setTimeout(() => {
+        if (running === motion) {
+          reportNearest(motion.curve.to);
+        }
+      }, Math.max(0, landingMs - elapsed)));
+    }
+    motion.timers.push(setTimeout(() => {
+      if (running !== motion) {
+        return;
+      }
+      clear(motion);
+      reportNearest(motion.curve.to);
+      motion.onEnd?.('arrived', motion.curve.to);
+    }, Math.max(0, endMs - elapsed)));
+  };
+  const stop = time => {
+    const motion = running;
+    if (motion == null) {
+      return shown();
+    }
+    const offset = shown(time);
+    clear(motion);
+    // `set` ends the strip's animation and puts it where it was shown.
+    animator.set({
+      y: -offset
+    });
+    reportNearest(offset);
+    motion.onEnd?.('stopped', offset);
+    return offset;
+  };
+  return {
+    attach(strip) {
+      animator.attach(strip);
+    },
+    setLayout(next) {
+      layout = next;
+    },
+    onNearestChange(listener) {
+      nearestListener = listener;
+      lastNearest = null;
+    },
+    isMoving() {
+      return running != null;
+    },
+    offset(time) {
+      return shown(time);
+    },
+    target() {
+      return running?.curve.to ?? shown();
+    },
+    setOffset(offset, {
+      ticks = false
+    } = {}) {
+      if (running != null) {
+        stop();
+      }
+      if (ticks && dragPrevious != null && canVibrate() && reachesRow(dragPrevious, offset, layout.rowHeight)) {
+        tick(now());
+      }
+      dragPrevious = offset;
+      // A park is a one-off write: no layer for a strip at rest.
+      animator.set({
+        y: -offset
+      }, {
+        promote: ticks
+      });
+      reportNearest(offset);
+    },
+    resetDrag() {
+      dragPrevious = null;
+    },
+    stop,
+    play(curve, {
+      ticks = false,
+      onEnd,
+      touchRelease = false,
+      momentum = false
+    } = {}) {
+      stop();
+      dragPrevious = null;
+      const element = animator.element;
+      // What Reduce Motion makes of a transition: null while motion plays.
+      // Momentum is never substituted.
+      const fade = momentum ? null : reducedMotionFade(element, {
+        touchRelease
+      });
+      const endMs = fade == null ? curve.duration * 1000 : fade.duration;
+      if (!(endMs > 0)) {
+        animator.set({
+          y: -curve.to
+        });
+        reportNearest(curve.to);
+        onEnd?.('arrived', curve.to);
+        return;
+      }
+      const motionCurve = {
+        duration: curve.duration,
+        at: t => -curve.value(t),
+        velocity: t => -curve.velocity(t)
+      };
+      const handle = momentum ? animator.decay({
+        y: motionCurve
+      }, {
+        touchRelease
+      }) : animator.play({
+        y: motionCurve
+      }, {
+        touchRelease
+      });
+      const motion = {
+        curve,
+        onEnd,
+        timers: []
+      };
+      running = motion;
+      const plan = {
+        endMs,
+        // A cross-fade has no travel to tick through.
+        ticks: ticks && fade == null && canVibrate(),
+        // A cross-fade lands its rows at its midpoint, faded out.
+        landingMs: fade == null ? null : endMs / 2
+      };
+      schedule(motion, now(), plan);
+      // A busy main thread can hold a motion's first frame: its timers then
+      // follow the start the browser gives it. The animator's start promise
+      // only resolves, so nothing here waits on a rejection.
+      void handle.started.then(start => {
+        if (running === motion) {
+          schedule(motion, start, plan);
+        }
+      });
+    },
+    forgetNearest() {
+      lastNearest = null;
+    },
+    dispose() {
+      stop();
+      animator.dispose();
+    }
+  };
+}

package/dist/DateTimeInput/TouchDateTimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"AA6GA,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AAoV3E,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,UAAkB,EAClB,UAAkB,EAElB,aAAa,EAAE,cAAc,EAC7B,kBAAkB,EAAE,mBAAmB,EACvC,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EAEZ,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,kBAAkB,+BA8/BpB;yBAriCe,kBAAkB"}
+{"version":3,"file":"TouchDateTimeField.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/TouchDateTimeField.tsx"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAC,kBAAkB,EAAoB,MAAM,iBAAiB,CAAC;AA6S3E,wBAAgB,kBAAkB,CAAC,EACjC,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,UAAkB,EAClB,UAAkB,EAElB,aAAa,EAAE,cAAc,EAC7B,kBAAkB,EAAE,mBAAmB,EACvC,QAAgB,EAChB,WAAW,EAAE,oBAAoB,EACjC,eAAe,EAAE,wBAAwB,EACzC,SAAS,EACT,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EAEZ,cAAc,EAAE,eAAe,EAC/B,YAAY,EAAE,gBAAoB,EAClC,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,GAAG,SAAS,EACb,EAAE,kBAAkB,+BAk8BpB;yBAz+Be,kBAAkB"}