@multiplatform.one/forms 7.4.1 → 7.5.0

package/src/Wheel/Wheel.spec.tsx

@@ -0,0 +1,292 @@
+import { act, cleanup, fireEvent, screen } from "@testing-library/react";
+import { Preset } from "@multiplatform.one/theme";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Wheel } from "./index";
+
+afterEach(cleanup);
+
+describe("Wheel contrast contract", () => {
+  it("keeps inactive item text on the AA $color11 ramp (not opacity-dimmed)", () => {
+    renderWithProviders(
+      <Wheel items={[1, 2, 3, 4, 5]} value={3} onChange={() => {}} visibleItems={5} />,
+    );
+    const selected = screen.getByTestId("wheel").querySelector('[data-selected="true"]');
+    expect(selected).toBeTruthy();
+    // Selected / inactive use token classes — opacity on the row must stay 1 so
+    // $color11 clears 4.5:1 (see fix-wheel-contrast.md).
+    const rows = screen.getByTestId("wheel").querySelectorAll('[data-testid="wheel-item"]');
+    for (const row of rows) {
+      expect(getComputedStyle(row as HTMLElement).opacity).toBe("1");
+    }
+  });
+
+  it("marks disabled wheels for a11y probes without crushing contrast via container opacity", () => {
+    renderWithProviders(<Wheel items={[1, 2, 3, 4, 5]} value={3} disabled visibleItems={5} />);
+    const wheel = screen.getByTestId("wheel");
+    expect(wheel.getAttribute("data-disabled")).toBe("true");
+    expect(wheel.getAttribute("aria-disabled")).toBe("true");
+    expect(getComputedStyle(wheel).opacity).toBe("1");
+  });
+});
+
+// ── LC-68 MOTION-RIDES-KNOB ───────────────────────────────────
+// Discrete snaps (keyboard) gate on knobProps.transition: undefined at
+// animation "none" (which also carries prefers-reduced-motion) means snap
+// duration 0 — the wheel JUMPS, no rAF tween. With motion on, the same snap
+// tweens across frames (positive control proving the probe measures motion,
+// not just the end state). A `|| "quick"` fallback re-enabling the tween at
+// none is the violation this locks out.
+describe("Wheel snaps ride the animation knob (LC-68)", () => {
+  const items = [10, 20, 30, 40, 50];
+
+  function rowTransform(index: number): string {
+    const row = screen
+      .getByTestId("wheel")
+      .querySelector(`[data-testid="wheel-item"][data-index="${index}"]`) as HTMLElement | null;
+    return row?.style.transform ?? "(virtualized out)";
+  }
+
+  function wheelSnapshot(): string {
+    return items.map((_, index) => rowTransform(index)).join(" | ");
+  }
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  function useFrameClock() {
+    vi.useFakeTimers({
+      toFake: [
+        "setTimeout",
+        "clearTimeout",
+        "requestAnimationFrame",
+        "cancelAnimationFrame",
+        "performance",
+      ],
+    });
+  }
+
+  it("jumps instantly on keyboard snap at animation none — settled within one frame", () => {
+    useFrameClock();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Preset overrides={{ animation: "none" }}>
+        <Wheel items={items} onChange={onChange} visibleItems={5} />
+      </Preset>,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+
+    fireEvent.keyDown(wrapper, { key: "ArrowDown" });
+
+    // Snap completed synchronously: selection committed, no tween scheduled.
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(20);
+    expect(wrapper.getAttribute("aria-valuenow")).toBe("1");
+
+    // Positions are already settled — 500ms of frames changes nothing.
+    const settled = wheelSnapshot();
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(wheelSnapshot()).toBe(settled);
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it("tweens the same snap with motion on (positive control)", () => {
+    useFrameClock();
+    const onChange = vi.fn();
+    renderWithProviders(
+      // Default knobs: animation "quick" — knobProps.transition is defined.
+      <Wheel items={items} onChange={onChange} visibleItems={5} />,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+
+    fireEvent.keyDown(wrapper, { key: "ArrowDown" });
+
+    // Tween in flight: selection NOT committed yet, positions move per frame.
+    expect(onChange).not.toHaveBeenCalled();
+    expect(wrapper.getAttribute("aria-valuenow")).toBe("0");
+    const beforeFrames = wheelSnapshot();
+    act(() => {
+      vi.advanceTimersByTime(32);
+    });
+    expect(wheelSnapshot()).not.toBe(beforeFrames);
+    expect(onChange).not.toHaveBeenCalled();
+
+    // Tween completes (quick ≈ 100ms) and commits exactly one change.
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(20);
+    expect(wrapper.getAttribute("aria-valuenow")).toBe("1");
+  });
+
+  function flick(wrapper: HTMLElement) {
+    fireEvent.pointerDown(wrapper, { clientY: 300, pointerId: 1 });
+    act(() => {
+      vi.advanceTimersByTime(16);
+    });
+    fireEvent.pointerMove(wrapper, { clientY: 80, pointerId: 1 });
+    fireEvent.pointerUp(wrapper, { clientY: 80, pointerId: 1 });
+  }
+
+  it("skips momentum coast at animation none — flick snaps in the same turn", () => {
+    useFrameClock();
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Preset overrides={{ animation: "none" }}>
+        <Wheel items={items} onChange={onChange} visibleItems={5} />
+      </Preset>,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+    flick(wrapper);
+
+    // No rAF coast: selection committed before any frames.
+    expect(onChange).toHaveBeenCalled();
+    const settled = wheelSnapshot();
+    const calls = onChange.mock.calls.length;
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(wheelSnapshot()).toBe(settled);
+    expect(onChange).toHaveBeenCalledTimes(calls);
+  });
+
+  it("coasts after a flick with motion on (positive control)", () => {
+    useFrameClock();
+    const onChange = vi.fn();
+    renderWithProviders(<Wheel items={items} onChange={onChange} visibleItems={5} />);
+    const wrapper = screen.getByTestId("wheel-wrapper");
+    flick(wrapper);
+
+    expect(onChange).not.toHaveBeenCalled();
+    const beforeFrames = wheelSnapshot();
+    act(() => {
+      vi.advanceTimersByTime(48);
+    });
+    expect(wheelSnapshot()).not.toBe(beforeFrames);
+    expect(onChange).not.toHaveBeenCalled();
+    act(() => {
+      vi.advanceTimersByTime(2000);
+    });
+    expect(onChange).toHaveBeenCalled();
+  });
+});
+
+describe("Wheel iOS picker contract", () => {
+  it("paints the selection band as a fill with no hairline borders (LC-71)", () => {
+    renderWithProviders(
+      <Wheel items={[1, 2, 3, 4, 5]} value={3} onChange={() => {}} visibleItems={5} />,
+    );
+    const band = screen.getByTestId("wheel-selection");
+    const style = getComputedStyle(band);
+    expect(style.borderTopWidth === "0px" || style.borderTopWidth === "").toBe(true);
+    expect(style.borderBottomWidth === "0px" || style.borderBottomWidth === "").toBe(true);
+  });
+
+  it("seats the selected row in the highlight band", () => {
+    renderWithProviders(
+      <Wheel
+        items={[1, 2, 3, 4, 5, 6, 7]}
+        value={4}
+        onChange={() => {}}
+        visibleItems={5}
+        itemHeight={36}
+      />,
+    );
+    const selected = screen
+      .getByTestId("wheel")
+      .querySelector('[data-testid="wheel-item"][data-selected="true"]') as HTMLElement;
+    expect(selected).toBeTruthy();
+    const translateY = Number(
+      /translateY\(([-\d.]+)px\)/.exec(selected.style.transform)?.[1] ?? NaN,
+    );
+    expect(translateY).toBeCloseTo(2 * 36, 1);
+  });
+
+  it("keeps duplicate values as distinct rows", () => {
+    renderWithProviders(<Wheel items={[1, 1, 2]} value={2} onChange={() => {}} visibleItems={5} />);
+    const rows = screen.getByTestId("wheel").querySelectorAll('[data-testid="wheel-item"]');
+    expect(rows.length).toBeGreaterThanOrEqual(3);
+  });
+
+  it("taps a visible row to snap it to center", () => {
+    vi.useFakeTimers({
+      toFake: [
+        "setTimeout",
+        "clearTimeout",
+        "requestAnimationFrame",
+        "cancelAnimationFrame",
+        "performance",
+      ],
+    });
+    const onChange = vi.fn();
+    renderWithProviders(
+      <Wheel items={[10, 20, 30, 40, 50]} value={10} onChange={onChange} visibleItems={5} />,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+    const row = wrapper.querySelector(
+      '[data-testid="wheel-item"][data-index="1"]',
+    ) as HTMLElement | null;
+    expect(row).toBeTruthy();
+    const translateY = Number(/translateY\(([-\d.]+)px\)/.exec(row!.style.transform)?.[1] ?? 0);
+    const rowHeight = Number.parseFloat(row!.style.height) || 32;
+    const tapY = translateY + rowHeight / 2;
+    fireEvent.pointerDown(wrapper, { clientY: tapY, pointerId: 1 });
+    fireEvent.pointerUp(wrapper, { clientY: tapY, pointerId: 1 });
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(onChange).toHaveBeenCalledWith(20);
+    vi.useRealTimers();
+  });
+
+  it("loops from the last item to the first (hours/minutes wrap)", () => {
+    vi.useFakeTimers({
+      toFake: [
+        "setTimeout",
+        "clearTimeout",
+        "requestAnimationFrame",
+        "cancelAnimationFrame",
+        "performance",
+      ],
+    });
+    const onChange = vi.fn();
+    const minutes = Array.from({ length: 60 }, (_, i) => i);
+    renderWithProviders(
+      <Wheel items={minutes} value={59} onChange={onChange} loop visibleItems={5} />,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+    fireEvent.keyDown(wrapper, { key: "ArrowDown" });
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(onChange).toHaveBeenCalledWith(0);
+    vi.useRealTimers();
+  });
+
+  it("fires onItemCross when a different row seats in the band", () => {
+    vi.useFakeTimers({
+      toFake: [
+        "setTimeout",
+        "clearTimeout",
+        "requestAnimationFrame",
+        "cancelAnimationFrame",
+        "performance",
+      ],
+    });
+    const onItemCross = vi.fn();
+    renderWithProviders(
+      <Wheel items={[10, 20, 30]} value={10} onChange={() => {}} onItemCross={onItemCross} />,
+    );
+    const wrapper = screen.getByTestId("wheel-wrapper");
+    fireEvent.keyDown(wrapper, { key: "ArrowDown" });
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+    expect(onItemCross).toHaveBeenCalledWith(20, 1);
+    vi.useRealTimers();
+  });
+});

package/src/Wheel/WheelEdgeFade.native.tsx

@@ -0,0 +1,67 @@
+import { LinearGradient } from "expo-linear-gradient";
+import { StyleSheet, View as RNView } from "react-native";
+import { useTheme } from "tamagui";
+
+function toTransparent(color: string): string {
+  const fnMatch = color.match(/^(rgb|hsl)a?\(([^)]+)\)$/i);
+  if (fnMatch) {
+    const parts = fnMatch[2].split(",").map((part) => part.trim());
+    const [a, b, c] = parts;
+    return `${fnMatch[1].toLowerCase()}a(${a}, ${b}, ${c}, 0)`;
+  }
+  const hexMatch = color.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+  if (hexMatch) {
+    let hex = hexMatch[1];
+    if (hex.length === 3) {
+      hex = hex
+        .split("")
+        .map((char) => char + char)
+        .join("");
+    }
+    const r = Number.parseInt(hex.slice(0, 2), 16);
+    const g = Number.parseInt(hex.slice(2, 4), 16);
+    const b = Number.parseInt(hex.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, 0)`;
+  }
+  return "transparent";
+}
+
+/**
+ * Cylinder fade toward the edges. Overlay (not row opacity) so inactive
+ * numerals stay on the $color11 ramp (LC-25 / Wheel contrast contract).
+ */
+export function WheelEdgeFade({ height }: { height: number }) {
+  const theme = useTheme();
+  const background = theme.background?.val ?? "#ffffff";
+  const transparent = toTransparent(background);
+  if (height <= 0) return null;
+  return (
+    <>
+      <RNView pointerEvents="none" style={[styles.band, { top: 0, height }]}>
+        <LinearGradient
+          colors={[background, transparent]}
+          start={{ x: 0.5, y: 0 }}
+          end={{ x: 0.5, y: 1 }}
+          style={StyleSheet.absoluteFill}
+        />
+      </RNView>
+      <RNView pointerEvents="none" style={[styles.band, { bottom: 0, height }]}>
+        <LinearGradient
+          colors={[transparent, background]}
+          start={{ x: 0.5, y: 0 }}
+          end={{ x: 0.5, y: 1 }}
+          style={StyleSheet.absoluteFill}
+        />
+      </RNView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  band: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    zIndex: 2,
+  },
+});

package/src/Wheel/WheelEdgeFade.tsx

@@ -0,0 +1,7 @@
+/**
+ * Web uses the CSS mask on the wheel viewport (LC-25: row opacity stays 1 so
+ * $color11 clears AA). Native paints a background fade overlay instead.
+ */
+export function WheelEdgeFade(_props: { height: number }) {
+  return null;
+}

package/src/Wheel/haptic.ts

@@ -0,0 +1,15 @@
+import { isWeb } from "tamagui";
+
+/**
+ * iOS UIPickerView uses UISelectionFeedbackGenerator, not impact. Optional
+ * so web / tests / apps without expo-haptics stay silent.
+ */
+export function fireSelectionHaptic(): void {
+  if (isWeb) return;
+  try {
+    const loaded = require("expo-haptics") as { selectionAsync?: () => Promise<void> };
+    void loaded.selectionAsync?.();
+  } catch {
+    // optional peer
+  }
+}