@remit/ui 0.0.55 → 0.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "type": "module",
   "files": [
     "src"

package/src/components/swipeable-row.gesture.test.ts

@@ -11,6 +11,13 @@
  * The fix tags SwipeableRow's own axis-abort cancel so it can tell the two
  * apart; these tests exercise both paths against the real hook, not a
  * description of the fix.
+ *
+ * The second: a finger held on glass drifts, and it drifts past the distance
+ * at which the drag starts tracking. Cancelling the press there meant a real
+ * hold on a phone never entered selection mode — the row followed the drift
+ * and snapped back, and nothing else happened. The drift cases below run
+ * against the anchor (`linkComponent`) row the mailbox list actually renders,
+ * which is also where the native link menu has to stay suppressed.
  */
 
 import assert from "node:assert/strict";
@@ -116,6 +123,45 @@ function mount(handlers: Handlers) {
 	return row;
 }
 
+// The mailbox list renders the open affordance as a real anchor via
+// `linkComponent`; the native long-press menu only bites on an `<a href>`.
+function mountAnchor(handlers: Handlers) {
+	act(() => {
+		root.render(
+			createElement(SwipeableRow, {
+				thread,
+				selectionMode: false,
+				checked: false,
+				active: false,
+				peek: "none",
+				onPeek: handlers.onPeek,
+				onToggleCheck: () => undefined,
+				onLongPress: handlers.onLongPress,
+				onOpen: handlers.onOpen,
+				onAct: () => undefined,
+				linkComponent: ({ onOpenClick, children, ...rowProps }) =>
+					createElement(
+						"a",
+						{ ...rowProps, id: "row", href: "/thread/1", onClick: onOpenClick },
+						children,
+					),
+			}),
+		);
+	});
+	const row = dom.window.document.getElementById("row");
+	assert.ok(row, "anchor row did not mount");
+	return row;
+}
+
+function contextMenu(row: Element) {
+	const event = new dom.window.MouseEvent("contextmenu", {
+		bubbles: true,
+		cancelable: true,
+	});
+	row.dispatchEvent(event);
+	return event;
+}
+
 // Each dispatch is wrapped in a synchronous act() so React commits the
 // resulting state update before the next call reads it. Without this, a
 // handler in the next dispatch can close over a stale pre-commit value (a
@@ -195,7 +241,7 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 		);
 	});
 
-	it("a horizontal drag past the axis threshold cancels the long press and commits a swipe peek, not onOpen", async () => {
+	it("a horizontal drag past the escape distance cancels the long press and commits a swipe peek, not onOpen", async () => {
 		let longPressed = 0;
 		let opened = 0;
 		let committed: SwipePeek | undefined;
@@ -221,7 +267,7 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 		assert.equal(committed, "leading");
 	});
 
-	it("a vertical drag past the axis threshold cancels the long press and lets scroll win (no peek, no open)", async () => {
+	it("a vertical drag past the escape distance cancels the long press and lets scroll win (no peek, no open)", async () => {
 		let longPressed = 0;
 		let opened = 0;
 		let peeked = 0;
@@ -255,4 +301,84 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 
 		assert.equal(longPressed, 1);
 	});
+
+	it("a hold that drifts past the axis threshold still enters selection mode", async () => {
+		// The reported phone bug: the row tracked the drift (the visible shiver)
+		// and the press died, but the drift was too short to commit a peek, so
+		// the whole gesture produced nothing.
+		let longPressed = 0;
+		let opened = 0;
+		const peeks: SwipePeek[] = [];
+		const row = mountAnchor({
+			onLongPress: () => longPressed++,
+			onOpen: () => opened++,
+			onPeek: (next) => peeks.push(next),
+		});
+
+		pointerDown(row, 100, 200);
+		pointerMove(row, 103, 201);
+		pointerMove(row, 106, 203);
+		pointerMove(row, 109, 205);
+		pointerMove(row, 112, 206); // dx=12 — past the axis threshold, under the escape
+		await wait(THRESHOLD_WAIT);
+		pointerUp(row);
+
+		assert.equal(longPressed, 1);
+		assert.equal(opened, 0);
+		assert.deepEqual(peeks, [], "drift must not commit or reset a peek");
+	});
+
+	it("a hold that drifts vertically past the axis threshold still enters selection mode", async () => {
+		let longPressed = 0;
+		const peeks: SwipePeek[] = [];
+		const row = mountAnchor({
+			onLongPress: () => longPressed++,
+			onOpen: () => undefined,
+			onPeek: (next) => peeks.push(next),
+		});
+
+		pointerDown(row, 100, 200);
+		pointerMove(row, 101, 206);
+		pointerMove(row, 102, 213); // dy=13 — past the axis threshold, under the escape
+		await wait(THRESHOLD_WAIT);
+		pointerUp(row);
+
+		assert.equal(longPressed, 1);
+		assert.deepEqual(peeks, []);
+	});
+
+	it("an aborted short drag opens nothing on release", async () => {
+		// The drag claimed the axis but never reached the escape distance, so the
+		// press was still live. react-aria synthesizes a click for an unresolved
+		// press, which on the anchor row is a navigation.
+		let clicks = 0;
+		const row = mountAnchor({
+			onLongPress: () => undefined,
+			onOpen: () => undefined,
+			onPeek: () => undefined,
+		});
+		row.addEventListener("click", () => clicks++);
+
+		pointerDown(row, 100, 200);
+		pointerMove(row, 120, 201); // dx=20 — past the axis threshold, under the escape
+		pointerUp(row);
+		await wait(200); // react-aria synthesizes its click 80ms after release
+
+		assert.equal(clicks, 0);
+	});
+
+	it("suppresses the native link menu raised over a drifting hold", async () => {
+		// Android Chrome raises the anchor's context menu at its own threshold,
+		// which can land mid-drift and ahead of the app's long press.
+		const row = mountAnchor({
+			onLongPress: () => undefined,
+			onOpen: () => undefined,
+			onPeek: () => undefined,
+		});
+
+		pointerDown(row, 100, 200);
+		pointerMove(row, 112, 206);
+
+		assert.equal(contextMenu(row).defaultPrevented, true);
+	});
 });

package/src/components/swipeable-row.stories.tsx

@@ -192,6 +192,60 @@ export const LongPressToSelect: Story = {
 	},
 };
 
+/**
+ * The same gesture with a real finger's drift. A hand holding still on glass
+ * wanders several pixels over the 500ms hold — further than the distance at
+ * which the drag starts tracking the row, which is why a hold used to nudge
+ * the row and then do nothing. The swipe only takes the gesture once it has
+ * travelled far enough to commit a peek, so the drifting hold below still ends
+ * in selection mode. The play step drives the press, the drift and the hold.
+ */
+export const LongPressWithDrift: Story = {
+	name: "Long press with finger drift (interactive)",
+	render: () => {
+		const [selected, setSelected] = useState(false);
+		return (
+			<div className="space-y-2">
+				<AnchorRow
+					selectionMode={selected}
+					checked={selected}
+					onLongPress={() => setSelected(true)}
+				/>
+				<p data-testid="drift-outcome" className="text-xs text-fg-muted">
+					{selected
+						? "Drifting hold entered selection mode."
+						: "Waiting for the drifting hold…"}
+				</p>
+			</div>
+		);
+	},
+	play: async ({ canvasElement }) => {
+		const anchor = canvasElement.querySelector<HTMLAnchorElement>("a[href]");
+		if (!anchor) return;
+		const touch = (type: string, clientX: number, clientY: number) =>
+			anchor.dispatchEvent(
+				new PointerEvent(type, {
+					bubbles: true,
+					pointerType: "touch",
+					pointerId: 1,
+					clientX,
+					clientY,
+				}),
+			);
+		touch("pointerdown", 100, 200);
+		for (const [x, y] of [
+			[103, 201],
+			[106, 203],
+			[109, 205],
+			[112, 206],
+		]) {
+			touch("pointermove", x, y);
+		}
+		await new Promise((resolve) => setTimeout(resolve, 700));
+		touch("pointerup", 112, 206);
+	},
+};
+
 /**
  * A touch long press over a link row normally raises the browser's own link
  * context menu ("Open in new tab / Copy link address"), which collides with the

package/src/components/swipeable-row.tsx

@@ -16,20 +16,36 @@ export type SwipePeek = "none" | "leading" | "trailing";
 /** Width a peeked row settles at to reveal its action; also the drag distance
  *  past which a release commits the peek rather than snapping back. */
 const SWIPE_ACTION_WIDTH = 72;
-/** Movement (px) before a pointer drag claims the horizontal (swipe) axis; below
- *  this a press is still a tap / long-press and vertical scroll wins. */
+/** Movement (px) before a pointer drag claims an axis; below this a press is
+ *  still a tap / long-press and vertical scroll wins. Claiming an axis only
+ *  decides what the row tracks — it does not decide the long press. */
 const SWIPE_AXIS_THRESHOLD = 10;
+/**
+ * Movement (px) along the claimed axis before a drag takes the gesture away
+ * from a still-pending long press.
+ *
+ * A finger resting on glass for the 500ms hold drifts, and it drifts further
+ * than the axis threshold — that threshold is calibrated for a drag starting
+ * to track, which has to feel immediate. Killing the press at that distance
+ * meant a real hold read as a swipe: the row followed the drift, the press
+ * died, and on release the drift was too short to commit a peek, so the
+ * gesture produced nothing at all.
+ *
+ * The escape distance is the commit distance, so the swipe only takes the
+ * gesture once it has moved far enough to actually produce a peek. Below it a
+ * release snaps back, which is to say the swipe was never worth the press.
+ */
+const LONG_PRESS_ESCAPE = SWIPE_ACTION_WIDTH / 2;
 
 /**
- * Tags a pointercancel dispatched by this component's own axis arbitration
- * (see `cancelLongPress` below) so `onPointerCancel` can tell it apart from
- * one react-aria dispatches itself when its own long press fires, or a
- * genuine browser-triggered cancel. Both of those arrive with no axis
- * claimed yet and must reset gesture state silently; a tagged one arrives
- * *because* `onPointerMove` just claimed an axis and is already handling
- * gesture state inline, so `onPointerCancel` must ignore it — otherwise it
- * re-reads a gesture with no axis claimed and mistakes the abort for a tap,
- * firing a spurious onOpen/onToggleCheck.
+ * Tags a pointercancel dispatched by this component's own arbitration (see
+ * `cancelLongPress` below) so `onPointerCancel` can tell it apart from one
+ * react-aria dispatches itself when its own long press fires, or a genuine
+ * browser-triggered cancel. Both of those end the gesture and must reset it
+ * silently; a tagged one arrives *because* `onPointerMove`/`onPointerUp` is
+ * already handling that gesture inline, so `onPointerCancel` must ignore it —
+ * otherwise it drops the drag and the release reads as a tap, firing a
+ * spurious onOpen/onToggleCheck.
  */
 const AXIS_CANCEL = "__swipeableRowAxisCancel";
 
@@ -104,7 +120,8 @@ export function SwipeableRow({
 		startX: number;
 		startY: number;
 		axis: "none" | "horizontal" | "vertical";
-		moved: boolean;
+		/** The drag has passed LONG_PRESS_ESCAPE and already cancelled the press. */
+		escaped: boolean;
 	} | null>(null);
 	const [dragX, setDragX] = useState<number | null>(null);
 
@@ -131,7 +148,7 @@ export function SwipeableRow({
 			startX: e.clientX,
 			startY: e.clientY,
 			axis: "none",
-			moved: false,
+			escaped: false,
 		};
 	};
 
@@ -143,19 +160,25 @@ export function SwipeableRow({
 		const dy = e.clientY - g.startY;
 		if (g.axis === "none") {
 			if (Math.abs(dy) > SWIPE_AXIS_THRESHOLD && Math.abs(dy) > Math.abs(dx)) {
-				// vertical scroll wins: abandon the swipe + long-press, let the list scroll
+				// vertical scroll wins: stop tracking the swipe, let the list scroll
 				g.axis = "vertical";
-				cancelLongPress(e);
-				gesture.current = null;
-				return;
-			}
-			if (Math.abs(dx) > SWIPE_AXIS_THRESHOLD) {
+			} else if (
+				Math.abs(dx) > SWIPE_AXIS_THRESHOLD &&
+				Math.abs(dx) > Math.abs(dy)
+			) {
 				g.axis = "horizontal";
-				g.moved = true;
-				cancelLongPress(e);
 				e.currentTarget.setPointerCapture(e.pointerId);
 			}
 		}
+		if (g.axis === "none") return;
+		// The drag only takes the gesture from a pending long press once it has
+		// travelled the commit distance along the axis it claimed (see
+		// LONG_PRESS_ESCAPE). Latched so the cancel is dispatched once.
+		const travel = g.axis === "horizontal" ? Math.abs(dx) : Math.abs(dy);
+		if (!g.escaped && travel > LONG_PRESS_ESCAPE) {
+			g.escaped = true;
+			cancelLongPress(e);
+		}
 		if (g.axis !== "horizontal") return;
 		const base = peekOffset(peek);
 		const next = Math.max(
@@ -165,18 +188,25 @@ export function SwipeableRow({
 		setDragX(next);
 	};
 
-	const onPointerUp = () => {
+	const onPointerUp = (e: React.PointerEvent) => {
 		const g = gesture.current;
 		gesture.current = null;
 		const offset = dragX;
 		setDragX(null);
-		// g is null when the gesture was already consumed (long-press fired, or
-		// a vertical scroll took over) — those handle themselves, so do nothing.
+		// g is null when the gesture was already consumed (the long press fired,
+		// or a real cancel arrived) — those handle themselves, so do nothing.
 		if (!g) return;
-		if (g.axis === "horizontal" && offset !== null) {
-			onPeek(commitPeek(offset));
+		// A drag that claimed an axis but never escaped left react-aria's press
+		// live, and an unresolved press synthesizes a click on release — which on
+		// the anchor row means navigating. The drag was neither a swipe nor a
+		// tap, so end the press with it.
+		if (g.axis !== "none" && !g.escaped) cancelLongPress(e);
+		if (g.axis === "horizontal") {
+			if (offset !== null) onPeek(commitPeek(offset));
 			return;
 		}
+		// The list scrolled under the finger; the release is not a tap.
+		if (g.axis === "vertical") return;
 		// a tap: no axis claimed
 		if (selectionMode) {
 			onToggleCheck();
@@ -192,11 +222,10 @@ export function SwipeableRow({
 	};
 
 	// A genuine cancel — react-aria's own dispatch when its long press fires,
-	// or a real browser-triggered interruption — always resets silently, never
-	// as a tap-to-open/toggle/peek-commit. An axis-claim cancel (tagged, see
-	// AXIS_CANCEL) is a no-op here: onPointerMove already handled that gesture
-	// inline, either continuing to track it (horizontal) or nulling it itself
-	// (vertical) — see the comment there.
+	// or a real browser-triggered interruption (the browser taking over the
+	// pan, say) — always resets silently, never as a tap-to-open/toggle/peek
+	// -commit. This component's own cancel (tagged, see AXIS_CANCEL) is a no-op
+	// here: the handler that dispatched it owns that gesture's state.
 	const onPointerCancel = (e: React.PointerEvent) => {
 		const tagged = (e.nativeEvent as unknown as Record<string, boolean>)[
 			AXIS_CANCEL