@astryxdesign/core 0.7.7 → 0.7.8-canary.0d54fd3

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)
+    })
+  };
+}

package/dist/DateInput/wheelOptions.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @file wheelOptions.ts
+ * @input Nothing; types, the row height and pure functions
+ * @output WheelOption, WheelProps, WHEEL_ROW_HEIGHT, nearestEnabledIndex,
+ *   steppedIndex and endIndex: what both wheels share
+ * @position Internal; read by Wheel.tsx (which re-exports all of it) and
+ *   PickerWheel.tsx
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/DateInput/Wheel.tsx
+ * - /packages/core/src/DateInput/PickerWheel.tsx
+ */
+/**
+ * The row height, px (`dateInputTouchSizes.wheelItemSize`): the pitch of both
+ * columns' rows, and the unit of the touch wheel's offset.
+ */
+export declare const WHEEL_ROW_HEIGHT = 28;
+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;
+    /**
+     * Where the row falls when a key steps the wheel; without it, rows step in
+     * list order. A 12-hour hour column sets the full hour, so 12 PM comes before
+     * 1 PM.
+     */
+    order?: number;
+}
+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. The scrolling column then waits to listen
+     * and scroll, because a hidden scroller's offsets mean nothing. The touch
+     * wheel turns its gestures off, and shows a value set from outside without
+     * motion.
+     */
+    isActive?: boolean;
+}
+/**
+ * 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`.
+ *
+ * @example
+ * ```
+ * // Hours 0-23 with 09:00-17:00 bounds: stopping on 7 rests on 9.
+ * nearestEnabledIndex(hourOptions, 7, 10); // 9
+ * ```
+ */
+export declare function nearestEnabledIndex(options: ReadonlyArray<WheelOption>, index: number, towardIndex: number): number;
+/**
+ * The row a key moves a wheel to from `from` by `delta` rows, in key order. It
+ * is the next enabled row from the target in the key's direction. Past the
+ * last enabled row, it is the last enabled row before the target. Null when no
+ * enabled row lies in that direction, so the key commits nothing.
+ */
+export declare function steppedIndex(options: ReadonlyArray<WheelOption>, from: number, delta: number): number | null;
+/** The first or the last enabled row in key order: where Home or End moves a wheel. */
+export declare function endIndex(options: ReadonlyArray<WheelOption>, end: 'first' | 'last'): number | null;
+//# sourceMappingURL=wheelOptions.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wheelOptions.d.ts","sourceRoot":"","sources":["../../src/DateInput/wheelOptions.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH;;;GAGG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC,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;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;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;;;;;OAKG;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;AAaD;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,MAAM,GACZ,MAAM,GAAG,IAAI,CAyBf;AAED,uFAAuF;AACvF,wBAAgB,QAAQ,CACtB,OAAO,EAAE,aAAa,CAAC,WAAW,CAAC,EACnC,GAAG,EAAE,OAAO,GAAG,MAAM,GACpB,MAAM,GAAG,IAAI,CAKf"}

package/dist/DateInput/wheelOptions.js

@@ -0,0 +1,98 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file wheelOptions.ts
+ * @input Nothing; types, the row height and pure functions
+ * @output WheelOption, WheelProps, WHEEL_ROW_HEIGHT, nearestEnabledIndex,
+ *   steppedIndex and endIndex: what both wheels share
+ * @position Internal; read by Wheel.tsx (which re-exports all of it) and
+ *   PickerWheel.tsx
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/DateInput/Wheel.tsx
+ * - /packages/core/src/DateInput/PickerWheel.tsx
+ */
+
+/**
+ * The row height, px (`dateInputTouchSizes.wheelItemSize`): the pitch of both
+ * columns' rows, and the unit of the touch wheel's offset.
+ */
+export const WHEEL_ROW_HEIGHT = 28;
+/**
+ * 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`.
+ *
+ * @example
+ * ```
+ * // Hours 0-23 with 09:00-17:00 bounds: stopping on 7 rests on 9.
+ * nearestEnabledIndex(hourOptions, 7, 10); // 9
+ * ```
+ */
+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;
+}
+
+/** The rows' indices in the order keys step them: by `order`, else list order. */
+function inKeyOrder(options) {
+  const indices = options.map((_, index) => index);
+  if (options.every(option => option.order == null)) {
+    return indices;
+  }
+  return indices.sort((a, b) => (options[a].order ?? a) - (options[b].order ?? b));
+}
+
+/**
+ * The row a key moves a wheel to from `from` by `delta` rows, in key order. It
+ * is the next enabled row from the target in the key's direction. Past the
+ * last enabled row, it is the last enabled row before the target. Null when no
+ * enabled row lies in that direction, so the key commits nothing.
+ */
+export function steppedIndex(options, from, delta) {
+  const count = options.length;
+  if (count === 0 || delta === 0) {
+    return null;
+  }
+  const rows = inKeyOrder(options);
+  const start = Math.max(0, rows.indexOf(from));
+  const isEnabled = position => !options[rows[position]].isDisabled;
+  const step = Math.sign(delta);
+  const target = Math.min(count - 1, Math.max(0, start + delta));
+  for (let position = target; position >= 0 && position < count; position += step) {
+    if (isEnabled(position)) {
+      return position === start ? null : rows[position];
+    }
+  }
+  for (let position = target; position !== start; position -= step) {
+    if (isEnabled(position)) {
+      return rows[position];
+    }
+  }
+  return null;
+}
+
+/** The first or the last enabled row in key order: where Home or End moves a wheel. */
+export function endIndex(options, end) {
+  const enabled = inKeyOrder(options).filter(index => !options[index].isDisabled);
+  return (end === 'first' ? enabled[0] : enabled[enabled.length - 1]) ?? null;
+}

package/dist/DateInput/wheelPhysics.d.ts

@@ -0,0 +1,127 @@
+import { type SpringDescription } from '../motion/spring.js';
+/** A motion of the wheel's offset, from t = 0 to `duration` (seconds). */
+export interface WheelCurve {
+    /** Seconds until the wheel is at rest on `to`. */
+    readonly duration: number;
+    /** Where the motion ends. */
+    readonly to: number;
+    /** Offset at `t` seconds; `to` from `duration` on. */
+    value(t: number): number;
+    /** Velocity at `t` seconds, px/s; 0 from `duration` on. */
+    velocity(t: number): number;
+}
+/** How a release moves the wheel. */
+export type WheelPlanKind = 'coast' | 'snap' | 'edge' | 'return';
+/** What a release does: the curve, and the row it ends on. */
+export interface WheelPlan {
+    readonly kind: WheelPlanKind;
+    /** The row the wheel comes to rest on. */
+    readonly index: number;
+    readonly curve: WheelCurve;
+}
+/** The rows a wheel moves over. */
+export interface WheelLayout {
+    /** Row height, px. */
+    readonly rowHeight: number;
+    readonly rowCount: number;
+}
+/**
+ * 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 declare const MAX_PLAN_SECONDS = 30;
+/** The constants' scale for a wheel whose rows are `rowHeight` px tall. */
+export declare function scaleFor(rowHeight: number): number;
+/** The wheel at rest on `offset`: a curve that does not move. */
+export declare function restCurve(offset: number): WheelCurve;
+/** The offsets of the first and last rows. */
+export declare function offsetBounds({ rowHeight, rowCount }: WheelLayout): {
+    min: number;
+    max: number;
+};
+/**
+ * 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 declare function dragOffset(offset: number, layout: WheelLayout): number;
+/** The nearest row to `offset`, clamped to the rows. */
+export declare function nearestIndex(offset: number, layout: WheelLayout): number;
+/**
+ * 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 declare function snapCurve(from: number, to: number, scale?: number): WheelCurve;
+/**
+ * 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 declare function coastCurve(from: number, velocity: number, to: number, scale?: number): WheelCurve;
+/**
+ * The bounce spring, from `from` with `velocity`, onto `to`. `bounce` is
+ * `scroll.bounce`'s spring as its caller resolves it.
+ */
+export declare function bounceCurve(from: number, velocity: number, to: number, scale?: number, bounce?: SpringDescription): WheelCurve;
+/**
+ * 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 declare function edgeCurve(from: number, velocity: number, edge: number, scale?: number, bounceSpring?: SpringDescription): WheelCurve;
+/**
+ * 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 declare function projectRelease(offset: number, velocity: number, scale?: number): number;
+/**
+ * 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 declare function planRelease(offset: number, velocity: number, layout: WheelLayout, bounce?: SpringDescription): WheelPlan;
+/**
+ * The tap spin onto a row: UIKit's animated setContentOffset, over
+ * `duration` seconds on `curve`.
+ */
+export declare function spinCurve(from: number, to: number, duration: number, curve: readonly [number, number, number, number]): WheelCurve;
+/**
+ * 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 declare function tickTimes(curve: WheelCurve, rowHeight: number, { after, until, last, step, }?: {
+    after?: number;
+    until?: number;
+    last?: number;
+    step?: number;
+}): number[];
+/**
+ * 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 declare function reachesRow(from: number, to: number, rowHeight: number): boolean;
+//# sourceMappingURL=wheelPhysics.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wheelPhysics.d.ts","sourceRoot":"","sources":["../../src/DateInput/wheelPhysics.ts"],"names":[],"mappings":"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"}