npm - @remit/ui - Versions diffs - 0.0.19 → 0.0.20 - Mend

@remit/ui 0.0.19 → 0.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/package.json +5 -1
package/src/components/swipeable-row.gesture.test.ts +258 -0
package/src/components/swipeable-row.tsx +73 -32
package/src/index.ts +10 -0
package/src/lib/use-long-press.test.ts +220 -0
package/src/lib/use-long-press.ts +50 -0

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "type": "module",
   "files": [
     "src"
@@ -18,9 +18,11 @@
     "@fontsource-variable/geist": "^5",
     "@fontsource-variable/hanken-grotesk": "^5",
     "@fontsource-variable/inter": "^5",
+    "@react-types/shared": "^3.36.0",
     "clsx": "^2",
     "dompurify": "^3.4.7",
     "lucide-react": "^0.468",
+    "react-aria": "^3.50.0",
     "react-resizable-panels": "^2.1.9",
     "react-simple-pull-to-refresh": "^1.3.4",
     "tailwind-merge": "^2",
@@ -33,7 +35,9 @@
   },
   "devDependencies": {
     "@storybook/react": "^9",
+    "@types/jsdom": "^28.0.3",
     "@types/react-dom": "^19",
+    "jsdom": "^29.1.1",
     "react": "^19",
     "react-dom": "^19",
     "typescript": "*"

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

@@ -0,0 +1,258 @@
+/**
+ * SwipeableRow — jsdom gesture tests against the real react-aria long-press
+ * wiring interacting with axis arbitration.
+ *
+ * The one this guards against: react-aria's `useLongPress` dispatches its
+ * own synthetic `pointercancel` right before calling `onLongPress` (to
+ * preempt other pointer consumers). SwipeableRow's `onPointerCancel` was
+ * originally aliased straight to `onPointerUp`, whose "no axis claimed"
+ * branch reads as a tap and calls `onOpen`/`onToggleCheck` — so a clean long
+ * press would fire onLongPress AND a spurious onOpen in the same gesture.
+ * 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.
+ */
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { ThreadRowData } from "./app-shell-types.js";
+import { SwipeableRow, type SwipePeek } from "./swipeable-row.js";
+const THRESHOLD_WAIT = 560; // default react-aria threshold (500ms) + margin
+const thread: ThreadRowData = {
+	id: "thread-1",
+	accountId: "account-1",
+	fromName: "Alex Rivera",
+	fromEmail: "alex@example.com",
+	subject: "Q3 planning notes",
+	snippet: "Notes from the planning session.",
+	timeLabel: "9:42",
+	isRead: false,
+};
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.SVGElement = dom.window.SVGElement;
+	globalThis.PointerEvent = dom.window.PointerEvent;
+	// jsdom does not implement the pointer-capture methods at all (not even
+	// as no-ops) — SwipeableRow calls setPointerCapture once it claims the
+	// horizontal axis, so an unpolyfilled call throws mid-gesture.
+	dom.window.Element.prototype.setPointerCapture = () => undefined;
+	dom.window.Element.prototype.releasePointerCapture = () => undefined;
+	dom.window.Element.prototype.hasPointerCapture = () => false;
+	Object.defineProperty(globalThis, "navigator", {
+		value: dom.window.navigator,
+		configurable: true,
+	});
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+});
+after(() => {
+	dom.window.close();
+});
+beforeEach(() => {
+	container = dom.window.document.getElementById(
+		"root",
+	) as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+});
+afterEach(() => {
+	act(() => {
+		root.unmount();
+	});
+});
+interface Handlers {
+	onLongPress: () => void;
+	onOpen: () => void;
+	onPeek: (next: SwipePeek) => void;
+}
+function mount(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,
+			}),
+		);
+	});
+	// The open affordance is the one button with no aria-label — the
+	// leading/trailing action buttons ("Mark as read" etc.) only render once
+	// peeked, but querying by absence of aria-label is stable at rest too.
+	const row = [...dom.window.document.querySelectorAll("button")].find(
+		(b) => !b.hasAttribute("aria-label"),
+	);
+	assert.ok(row, "open-affordance button did not mount");
+	return row;
+}
+// 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
+// real gap we hit developing this test: an unwrapped dispatch sequence read
+// a stale `null` dragX in onPointerUp and mistook the just-completed swipe
+// commit for a bare tap, firing a spurious onOpen).
+function pointerDown(row: Element, x = 10, y = 10) {
+	act(() => {
+		row.dispatchEvent(
+			new dom.window.PointerEvent("pointerdown", {
+				bubbles: true,
+				pointerType: "touch",
+				pointerId: 1,
+				clientX: x,
+				clientY: y,
+			}),
+		);
+	});
+}
+function pointerMove(row: Element, x: number, y: number) {
+	act(() => {
+		row.dispatchEvent(
+			new dom.window.PointerEvent("pointermove", {
+				bubbles: true,
+				pointerType: "touch",
+				pointerId: 1,
+				clientX: x,
+				clientY: y,
+			}),
+		);
+	});
+}
+function pointerUp(row: Element) {
+	// Dispatched on the row, not document: SwipeableRow's own onPointerUp is a
+	// React prop on the row element, delegated via React's root-container
+	// listener — an event whose target is `document` (an ancestor of the
+	// root, not a descendant) never bubbles into that delegated listener.
+	// A real browser routes pointerup to the pointer-capturing element
+	// regardless of finger position once setPointerCapture has been called
+	// (the horizontal-swipe case here), so this also matches real behavior.
+	act(() => {
+		row.dispatchEvent(
+			new dom.window.PointerEvent("pointerup", {
+				bubbles: true,
+				pointerType: "touch",
+				pointerId: 1,
+			}),
+		);
+	});
+}
+function wait(ms: number) {
+	return act(() => new Promise((resolve) => setTimeout(resolve, ms)));
+}
+describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)", () => {
+	it("fires onLongPress on an unmoved press, with no spurious onOpen", async () => {
+		let longPressed = 0;
+		let opened = 0;
+		const row = mount({
+			onLongPress: () => longPressed++,
+			onOpen: () => opened++,
+			onPeek: () => undefined,
+		});
+		pointerDown(row);
+		await wait(THRESHOLD_WAIT);
+		pointerUp(row);
+		assert.equal(longPressed, 1);
+		assert.equal(
+			opened,
+			0,
+			"react-aria's own pointercancel (dispatched right before onLongPress) must not be read as a tap-to-open",
+		);
+	});
+	it("a horizontal drag past the axis threshold cancels the long press and commits a swipe peek, not onOpen", async () => {
+		let longPressed = 0;
+		let opened = 0;
+		let committed: SwipePeek | undefined;
+		const row = mount({
+			onLongPress: () => longPressed++,
+			onOpen: () => opened++,
+			onPeek: (next) => {
+				committed = next;
+			},
+		});
+		pointerDown(row);
+		pointerMove(row, 50, 10); // dx=40, past SWIPE_AXIS_THRESHOLD(10) and >= half SWIPE_ACTION_WIDTH(36)
+		pointerUp(row);
+		await wait(THRESHOLD_WAIT);
+		assert.equal(
+			longPressed,
+			0,
+			"long press must be cancelled once the horizontal axis is claimed",
+		);
+		assert.equal(opened, 0);
+		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 () => {
+		let longPressed = 0;
+		let opened = 0;
+		let peeked = 0;
+		const row = mount({
+			onLongPress: () => longPressed++,
+			onOpen: () => opened++,
+			onPeek: () => peeked++,
+		});
+		pointerDown(row);
+		pointerMove(row, 10, 50); // dy=40, past SWIPE_AXIS_THRESHOLD(10), vertical wins
+		pointerUp(row);
+		await wait(THRESHOLD_WAIT);
+		assert.equal(longPressed, 0);
+		assert.equal(opened, 0);
+		assert.equal(peeked, 0, "vertical scroll must not commit or reset a peek");
+	});
+	it("a small move within the axis threshold still allows the long press to fire", async () => {
+		let longPressed = 0;
+		const row = mount({
+			onLongPress: () => longPressed++,
+			onOpen: () => undefined,
+			onPeek: () => undefined,
+		});
+		pointerDown(row);
+		pointerMove(row, 13, 12); // dx=3, dy=2 — within SWIPE_AXIS_THRESHOLD(10)
+		await wait(THRESHOLD_WAIT);
+		assert.equal(longPressed, 1);
+	});
+});

package/src/components/swipeable-row.tsx CHANGED Viewed

@@ -1,6 +1,9 @@
+import type { DOMAttributes } from "@react-types/shared";
 import { Check, Mail, MailOpen, Trash2 } from "lucide-react";
 import { useRef, useState } from "react";
+import { mergeProps } from "react-aria";
 import { cn } from "../lib/cn.js";
+import { useLongPress } from "../lib/use-long-press.js";
 import type { ThreadRowData } from "./app-shell-types.js";
 import { Avatar } from "./avatar.js";
 import {
@@ -17,6 +20,19 @@ const SWIPE_ACTION_WIDTH = 72;
  *  this a press is still a tap / long-press and vertical scroll wins. */
 const SWIPE_AXIS_THRESHOLD = 10;
+/**
+ * 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.
+ */
+const AXIS_CANCEL = "__swipeableRowAxisCancel";
 function peekOffset(peek: SwipePeek): number {
 	if (peek === "leading") return SWIPE_ACTION_WIDTH;
 	if (peek === "trailing") return -SWIPE_ACTION_WIDTH;
@@ -34,19 +50,17 @@ export function commitPeek(offset: number): SwipePeek {
 /**
  * Props the row's interactive (open) element must receive — the swipe gesture
- * handlers, the transform/transition style, the row body, plus an onClick that
- * suppresses navigation when the row is peeked. A consumer passes `linkComponent`
- * to render these on a real anchor (e.g. a router Link) so the open affordance is
- * a true `<a href>` — keeping open-in-new-tab, middle-click, deep-link and a11y
- * — instead of the default JS-only `<button onOpen>`.
+ * handlers (merged with react-aria's long-press props: pointer handlers,
+ * `aria-describedby`, and friends), the transform/transition style, the row
+ * body, plus an onClick that suppresses navigation when the row is peeked. A
+ * consumer passes `linkComponent` to render these on a real anchor (e.g. a
+ * router Link) so the open affordance is a true `<a href>` — keeping
+ * open-in-new-tab, middle-click, deep-link and a11y — instead of the default
+ * JS-only `<button onOpen>`.
  */
-export interface SwipeableRowOpenProps {
+export interface SwipeableRowOpenProps extends DOMAttributes {
 	className: string;
 	style: React.CSSProperties;
-	onPointerDown: (e: React.PointerEvent) => void;
-	onPointerMove: (e: React.PointerEvent) => void;
-	onPointerUp: () => void;
-	onPointerCancel: () => void;
 	/** Wire to the anchor's onClick. When the row is peeked it calls
 	 *  preventDefault so a tap closes the peek instead of navigating; otherwise
 	 *  it is a no-op and the anchor's native navigation proceeds. */
@@ -86,9 +100,6 @@ export function SwipeableRow({
 	 *  deep-link/middle-click work); onOpen is not called for the tap. */
 	linkComponent?: (props: SwipeableRowOpenProps) => React.ReactNode;
 }) {
-	const pressTimer = useRef<ReturnType<typeof setTimeout> | undefined>(
-		undefined,
-	);
 	const gesture = useRef<{
 		startX: number;
 		startY: number;
@@ -97,7 +108,23 @@ export function SwipeableRow({
 	} | null>(null);
 	const [dragX, setDragX] = useState<number | null>(null);
-	const cancelLongPress = () => clearTimeout(pressTimer.current);
+	// Long-press timing/threshold and contextmenu/text-selection suppression
+	// are owned by react-aria; this component only arbitrates the swipe axis.
+	const { longPressProps } = useLongPress({
+		onLongPress,
+		isDisabled: selectionMode,
+		accessibilityDescription: "Select message",
+	});
+	// react-aria's usePress has no imperative "cancel" — a synthetic
+	// pointercancel is the mechanism it uses itself to abort other pointer
+	// consumers when its own long press fires. Reused here in reverse, tagged
+	// so onPointerCancel below can recognize it as ours (see AXIS_CANCEL).
+	const cancelLongPress = (e: React.PointerEvent) => {
+		const event = new PointerEvent("pointercancel", { bubbles: true });
+		(event as PointerEvent & Record<string, boolean>)[AXIS_CANCEL] = true;
+		e.currentTarget.dispatchEvent(event);
+	};
 	const onPointerDown = (e: React.PointerEvent) => {
 		gesture.current = {
@@ -106,13 +133,6 @@ export function SwipeableRow({
 			axis: "none",
 			moved: false,
 		};
-		// selection mode is tap-to-toggle only — no long-press, no swipe drag
-		if (selectionMode) return;
-		pressTimer.current = setTimeout(() => {
-			gesture.current = null;
-			setDragX(null);
-			onLongPress();
-		}, 500);
 	};
 	const onPointerMove = (e: React.PointerEvent) => {
@@ -125,14 +145,14 @@ export function SwipeableRow({
 			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
 				g.axis = "vertical";
-				cancelLongPress();
+				cancelLongPress(e);
 				gesture.current = null;
 				return;
 			}
 			if (Math.abs(dx) > SWIPE_AXIS_THRESHOLD) {
 				g.axis = "horizontal";
 				g.moved = true;
-				cancelLongPress();
+				cancelLongPress(e);
 				e.currentTarget.setPointerCapture(e.pointerId);
 			}
 		}
@@ -146,7 +166,6 @@ export function SwipeableRow({
 	};
 	const onPointerUp = () => {
-		cancelLongPress();
 		const g = gesture.current;
 		gesture.current = null;
 		const offset = dragX;
@@ -172,6 +191,28 @@ export function SwipeableRow({
 		onOpen();
 	};
+	// 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.
+	const onPointerCancel = (e: React.PointerEvent) => {
+		const tagged = (e.nativeEvent as unknown as Record<string, boolean>)[
+			AXIS_CANCEL
+		];
+		if (tagged) return;
+		gesture.current = null;
+		setDragX(null);
+	};
+	const gestureProps = mergeProps(longPressProps, {
+		onPointerDown,
+		onPointerMove,
+		onPointerUp,
+		onPointerCancel,
+	});
 	// A tap on a peeked anchor must close the peek, not navigate; suppress the
 	// native click in that case. onPointerUp already snapped it closed.
 	const onOpenClick = (e: { preventDefault: () => void }) => {
@@ -185,6 +226,12 @@ export function SwipeableRow({
 	const interactiveClassName = cn(
 		// opaque bg so the row occludes the action behind it until peeked
 		"relative touch-pan-y bg-surface",
+		// This row's long press enters selection mode; without these, Android
+		// Chrome opens the link context menu / starts text selection and iOS
+		// Safari fires the callout, racing the app's handler. react-aria
+		// suppresses contextmenu/text-selection but not iOS's callout — it
+		// fires no cancelable event, so CSS is the only lever.
+		"select-none [-webkit-touch-callout:none]",
 		comfortableRowClass({ active: checked || active }),
 	);
 	const interactiveStyle: React.CSSProperties = {
@@ -278,12 +325,9 @@ export function SwipeableRow({
 			    keep the button so a checkbox tap can't open a thread. */}
 			{linkComponent && !selectionMode ? (
 				linkComponent({
+					...gestureProps,
 					className: interactiveClassName,
 					style: interactiveStyle,
-					onPointerDown,
-					onPointerMove,
-					onPointerUp,
-					onPointerCancel: onPointerUp,
 					onOpenClick,
 					children: body,
 				})
@@ -293,10 +337,7 @@ export function SwipeableRow({
 					type="button"
 					role={selectionMode ? "checkbox" : undefined}
 					aria-checked={selectionMode ? checked : undefined}
-					onPointerDown={onPointerDown}
-					onPointerMove={onPointerMove}
-					onPointerUp={onPointerUp}
-					onPointerCancel={onPointerUp}
+					{...gestureProps}
 					className={interactiveClassName}
 					style={interactiveStyle}
 				>

package/src/index.ts CHANGED Viewed

@@ -1,3 +1,8 @@
+// Re-exported so a consumer can compose useLongPress's longPressProps with its
+// own DOM props (its pressProps include an onClick react-aria uses for its
+// own bookkeeping; a plain object spread silently drops one side's handler
+// instead of chaining them) without importing react-aria directly.
+export { mergeProps } from "react-aria";
 export {
 	AddressDisplay,
 	type AddressDisplayProps,
@@ -446,3 +451,8 @@ export {
 	sanitizeInlineStyle,
 	sanitizeStyleElementCss,
 } from "./lib/email-sanitizer.js";
+export {
+	type UseLongPressOptions,
+	type UseLongPressResult,
+	useLongPress,
+} from "./lib/use-long-press.js";

package/src/lib/use-long-press.test.ts ADDED Viewed

@@ -0,0 +1,220 @@
+/**
+ * use-long-press — exercises the real hook (react-aria's `useLongPress`)
+ * against a jsdom-mounted element, not a reimplementation of its logic. The
+ * hook this replaces (`packages/web-client/src/hooks/useLongPress.ts`) had a
+ * decoy test that reimplemented the timer/threshold logic locally and so
+ * gave zero regression coverage on the actual hook; these tests dispatch
+ * real PointerEvents at a real mounted node and assert on the callback and
+ * the DOM side effects react-aria owns (contextmenu suppression).
+ *
+ * jsdom is a devDependency scoped to this one test — react-aria's
+ * pointerdown → threshold timer → onLongPress path, its global
+ * pointerup/pointercancel listeners, and its contextmenu suppression all
+ * need a real `document`/`window`/`PointerEvent`, which `renderToString`
+ * (the pattern used elsewhere in this repo for presentational components)
+ * cannot exercise.
+ */
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import { act, createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { useLongPress } from "./use-long-press.js";
+const THRESHOLD = 40;
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+function Row(props: {
+	onLongPress: () => void;
+	isDisabled?: boolean;
+	accessibilityDescription?: string;
+}) {
+	const { longPressProps } = useLongPress({
+		onLongPress: props.onLongPress,
+		isDisabled: props.isDisabled,
+		delayMs: THRESHOLD,
+		accessibilityDescription: props.accessibilityDescription,
+	});
+	return createElement(
+		"a",
+		{ id: "row", href: "/thread/1", ...longPressProps },
+		"row",
+	);
+}
+function mount(props: {
+	onLongPress: () => void;
+	isDisabled?: boolean;
+	accessibilityDescription?: string;
+}) {
+	act(() => {
+		root.render(createElement(Row, props));
+	});
+	const row = dom.window.document.getElementById("row");
+	assert.ok(row, "row did not mount");
+	return row;
+}
+function pointerDown(row: Element) {
+	row.dispatchEvent(
+		new dom.window.PointerEvent("pointerdown", {
+			bubbles: true,
+			pointerType: "touch",
+			pointerId: 1,
+			clientX: 10,
+			clientY: 10,
+		}),
+	);
+}
+function pointerUp() {
+	dom.window.document.dispatchEvent(
+		new dom.window.PointerEvent("pointerup", {
+			bubbles: true,
+			pointerType: "touch",
+			pointerId: 1,
+			clientX: 10,
+			clientY: 10,
+		}),
+	);
+}
+function pointerCancel(row: Element) {
+	row.dispatchEvent(
+		new dom.window.PointerEvent("pointercancel", { bubbles: true }),
+	);
+}
+function wait(ms: number) {
+	return act(() => new Promise((resolve) => setTimeout(resolve, ms)));
+}
+before(async () => {
+	const { JSDOM: JSDOMCtor } = await import("jsdom");
+	dom = new JSDOMCtor(
+		"<!doctype html><html><body><div id=root></div></body></html>",
+		{ url: "http://localhost/", pretendToBeVisual: true },
+	);
+	globalThis.window = dom.window as unknown as typeof globalThis.window;
+	globalThis.document = dom.window.document;
+	globalThis.HTMLElement = dom.window.HTMLElement;
+	globalThis.Element = dom.window.Element;
+	globalThis.SVGElement = dom.window.SVGElement;
+	globalThis.PointerEvent = dom.window.PointerEvent;
+	Object.defineProperty(globalThis, "navigator", {
+		value: dom.window.navigator,
+		configurable: true,
+	});
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+});
+after(() => {
+	dom.window.close();
+});
+beforeEach(() => {
+	container = dom.window.document.getElementById(
+		"root",
+	) as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+});
+afterEach(() => {
+	act(() => {
+		root.unmount();
+	});
+});
+describe("useLongPress (react-aria wrapper)", () => {
+	it("fires onLongPress after the threshold with no interruption", async () => {
+		let fired = 0;
+		const row = mount({ onLongPress: () => fired++ });
+		pointerDown(row);
+		await wait(THRESHOLD + 40);
+		assert.equal(fired, 1);
+	});
+	it("does not fire when released before the threshold", async () => {
+		let fired = 0;
+		const row = mount({ onLongPress: () => fired++ });
+		pointerDown(row);
+		await wait(THRESHOLD / 2);
+		pointerUp();
+		await wait(THRESHOLD + 40);
+		assert.equal(fired, 0);
+	});
+	it("does not fire when cancelled via a pointercancel before the threshold", async () => {
+		// This is the mechanism SwipeableRow's axis arbitration relies on: it
+		// dispatches a synthetic pointercancel to abort a pending long press
+		// once a horizontal or vertical drag claims the gesture.
+		let fired = 0;
+		const row = mount({ onLongPress: () => fired++ });
+		pointerDown(row);
+		await wait(THRESHOLD / 2);
+		pointerCancel(row);
+		await wait(THRESHOLD + 40);
+		assert.equal(fired, 0);
+	});
+	it("does not fire while isDisabled", async () => {
+		let fired = 0;
+		const row = mount({ onLongPress: () => fired++, isDisabled: true });
+		pointerDown(row);
+		await wait(THRESHOLD + 40);
+		assert.equal(fired, 0);
+	});
+	it("suppresses the native contextmenu that follows a touch long press", async () => {
+		let fired = 0;
+		const row = mount({ onLongPress: () => fired++ });
+		pointerDown(row);
+		await wait(THRESHOLD + 40);
+		assert.equal(
+			fired,
+			1,
+			"long press must have fired for this to be meaningful",
+		);
+		const contextMenuEvent = new dom.window.MouseEvent("contextmenu", {
+			bubbles: true,
+			cancelable: true,
+		});
+		row.dispatchEvent(contextMenuEvent);
+		assert.equal(
+			contextMenuEvent.defaultPrevented,
+			true,
+			"react-aria suppresses the link context menu that Android/Chrome fires after a touch long press",
+		);
+	});
+	it("does not suppress contextmenu when no long press occurred", async () => {
+		mount({ onLongPress: () => undefined });
+		const row = dom.window.document.getElementById("row") as Element;
+		const contextMenuEvent = new dom.window.MouseEvent("contextmenu", {
+			bubbles: true,
+			cancelable: true,
+		});
+		row.dispatchEvent(contextMenuEvent);
+		assert.equal(contextMenuEvent.defaultPrevented, false);
+	});
+});

package/src/lib/use-long-press.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import type { DOMAttributes } from "@react-types/shared";
+import { useLongPress as useAriaLongPress } from "react-aria";
+export interface UseLongPressOptions {
+	/** Called once the threshold elapses while the press stays over the target. */
+	onLongPress: () => void;
+	/** Long press is a no-op while true (e.g. a row already in selection mode). */
+	isDisabled?: boolean;
+	/** @default 500 */
+	delayMs?: number;
+	/**
+	 * Announced to assistive technology as the long-press action, e.g.
+	 * "Select message". TalkBack/VoiceOver have no gesture equivalent for a
+	 * timed hold, so this description — not the gesture itself — is what
+	 * makes the action discoverable to a screen reader user.
+	 */
+	accessibilityDescription?: string;
+}
+export interface UseLongPressResult {
+	/** Spread onto the pressable element (anchor, button, or row container). */
+	longPressProps: DOMAttributes;
+}
+/**
+ * Long-press detection backed by react-aria's `useLongPress`. Owns
+ * `contextmenu` suppression and iOS text-selection suppression, and treats
+ * `<a href>` targets specially so link navigation and middle-click survive
+ * outside the press. It does not, and cannot, suppress iOS's native callout
+ * (share sheet) on an anchor — that still requires
+ * `-webkit-touch-callout: none` in CSS at the call site, since iOS fires no
+ * cancelable event for it.
+ *
+ * Single source of truth for the app's long-press threshold — both mobile
+ * row consumers (the plain row and the swipeable row) go through this hook
+ * so their timing can't drift apart again.
+ */
+export function useLongPress({
+	onLongPress,
+	isDisabled,
+	delayMs = 500,
+	accessibilityDescription,
+}: UseLongPressOptions): UseLongPressResult {
+	return useAriaLongPress({
+		isDisabled,
+		threshold: delayMs,
+		accessibilityDescription,
+		onLongPress,
+	});
+}