@remit/ui 0.0.47 → 0.0.48

package/package.json

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

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

@@ -129,3 +129,107 @@ export const Acting: Story = {
 		);
 	},
 };
+
+function AnchorRow({
+	onLongPress,
+	selectionMode,
+	checked,
+}: {
+	onLongPress?: () => void;
+	selectionMode?: boolean;
+	checked?: boolean;
+}) {
+	return (
+		<PhoneFrame>
+			<SwipeableRow
+				{...baseArgs}
+				peek="none"
+				selectionMode={selectionMode ?? false}
+				checked={checked ?? false}
+				onLongPress={onLongPress ?? (() => undefined)}
+				linkComponent={({ onOpenClick, children, ...rowProps }) => (
+					<a
+						{...rowProps}
+						href="/mail/inbox?selectedMessageId=thread-1"
+						onClick={(e) => {
+							e.preventDefault();
+							onOpenClick(e);
+						}}
+					>
+						{children}
+					</a>
+				)}
+			/>
+		</PhoneFrame>
+	);
+}
+
+/**
+ * The long press is the way into multi-select on touch. Press and hold the row
+ * (mouse hold works too — react-aria fires the long press for both) and it
+ * flips into the selection state the `SelectionChecked` story shows: the
+ * leading avatar becomes a filled, ticked checkbox and a tap toggles the row
+ * instead of opening it.
+ */
+export const LongPressToSelect: Story = {
+	name: "Long press to select (interactive)",
+	render: () => {
+		const [selected, setSelected] = useState(false);
+		return (
+			<div className="space-y-2">
+				<AnchorRow
+					selectionMode={selected}
+					checked={selected}
+					onLongPress={() => setSelected((v) => !v)}
+				/>
+				<p className="text-xs text-fg-muted">
+					{selected
+						? "In selection mode — long press again to exit."
+						: "Press and hold the row."}
+				</p>
+			</div>
+		);
+	},
+};
+
+/**
+ * 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
+ * long-press-to-select gesture above. `useLongPress` suppresses that menu when
+ * the press came from touch or pen, while leaving a mouse right-click's menu
+ * alone. The play step drives a synthetic touch press then a contextmenu and
+ * writes the outcome below.
+ */
+export const TouchContextMenuSuppressed: Story = {
+	name: "Touch context menu suppressed",
+	render: () => (
+		<div className="space-y-2">
+			<AnchorRow />
+			<p data-testid="context-menu-outcome" className="text-xs text-fg-muted">
+				Waiting for a touch press…
+			</p>
+		</div>
+	),
+	play: async ({ canvasElement }) => {
+		const anchor = canvasElement.querySelector<HTMLAnchorElement>("a[href]");
+		const outcome = canvasElement.querySelector<HTMLParagraphElement>(
+			'[data-testid="context-menu-outcome"]',
+		);
+		if (!anchor || !outcome) return;
+		anchor.dispatchEvent(
+			new PointerEvent("pointerdown", {
+				bubbles: true,
+				pointerType: "touch",
+				pointerId: 1,
+			}),
+		);
+		const menu = new MouseEvent("contextmenu", {
+			bubbles: true,
+			cancelable: true,
+		});
+		anchor.dispatchEvent(menu);
+		outcome.textContent = menu.defaultPrevented
+			? "Native context menu suppressed on touch."
+			: "Native context menu allowed.";
+	},
+};

package/src/components/swipeable-row.tsx

@@ -108,8 +108,8 @@ export function SwipeableRow({
 	} | null>(null);
 	const [dragX, setDragX] = useState<number | null>(null);
 
-	// Long-press timing/threshold and contextmenu/text-selection suppression
-	// are owned by react-aria; this component only arbitrates the swipe axis.
+	// Long-press timing/threshold and touch contextmenu suppression are owned
+	// by useLongPress; this component only arbitrates the swipe axis.
 	const { longPressProps } = useLongPress({
 		onLongPress,
 		isDisabled: selectionMode,
@@ -228,9 +228,9 @@ export function SwipeableRow({
 		"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.
+		// Safari fires the callout, racing the app's handler. useLongPress
+		// suppresses the touch-fired contextmenu; the callout fires no
+		// cancelable event, so CSS is the only lever left for it.
 		"select-none [-webkit-touch-callout:none]",
 		comfortableRowClass({ active: checked || active }),
 	);

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

@@ -59,11 +59,11 @@ function mount(props: {
 	return row;
 }
 
-function pointerDown(row: Element) {
+function pointerDown(row: Element, pointerType = "touch") {
 	row.dispatchEvent(
 		new dom.window.PointerEvent("pointerdown", {
 			bubbles: true,
-			pointerType: "touch",
+			pointerType,
 			pointerId: 1,
 			clientX: 10,
 			clientY: 10,
@@ -71,6 +71,15 @@ function pointerDown(row: Element) {
 	);
 }
 
+function dispatchContextMenu(row: Element) {
+	const event = new dom.window.MouseEvent("contextmenu", {
+		bubbles: true,
+		cancelable: true,
+	});
+	row.dispatchEvent(event);
+	return event;
+}
+
 function pointerUp() {
 	dom.window.document.dispatchEvent(
 		new dom.window.PointerEvent("pointerup", {
@@ -83,6 +92,18 @@ function pointerUp() {
 	);
 }
 
+function pointerUpOn(row: Element) {
+	row.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 }),
@@ -192,29 +213,72 @@ describe("useLongPress (react-aria wrapper)", () => {
 			"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,
+			dispatchContextMenu(row).defaultPrevented,
 			true,
-			"react-aria suppresses the link context menu that Android/Chrome fires after a touch long press",
+			"the link context menu Android/Chrome fires after a touch long press is suppressed",
 		);
 	});
 
-	it("does not suppress contextmenu when no long press occurred", async () => {
+	it("suppresses the touch contextmenu even before the long-press threshold", async () => {
+		// Android Chrome can raise the link menu at its own threshold, ahead of
+		// the app's long press; keying suppression to the pointer type rather
+		// than to a fired long press covers that race.
+		const row = mount({ onLongPress: () => undefined });
+
+		pointerDown(row, "touch");
+		assert.equal(dispatchContextMenu(row).defaultPrevented, true);
+	});
+
+	it("does not suppress contextmenu from a mouse right-click", async () => {
+		// Desktop right-click must keep its native context menu; a mouse
+		// pointerdown precedes the contextmenu, so the pointer type is known.
+		const row = mount({ onLongPress: () => undefined });
+
+		pointerDown(row, "mouse");
+		assert.equal(dispatchContextMenu(row).defaultPrevented, false);
+	});
+
+	it("does not suppress contextmenu when no pointer interaction preceded it", 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(dispatchContextMenu(row).defaultPrevented, false);
+	});
+
+	it("does not suppress the keyboard menu that follows a touch long press", async () => {
+		// The reported a11y regression: the touch press's pointer type must not
+		// linger and suppress the keyboard-invoked menu (Context-Menu key /
+		// Shift+F10), which fires with no preceding pointerdown.
+		const row = mount({ onLongPress: () => undefined });
+
+		pointerDown(row, "touch");
+		assert.equal(
+			dispatchContextMenu(row).defaultPrevented,
+			true,
+			"the touch long-press menu is still suppressed",
+		);
+		pointerUpOn(row);
+		await wait(THRESHOLD);
+
+		assert.equal(
+			dispatchContextMenu(row).defaultPrevented,
+			false,
+			"the later keyboard-invoked menu must not inherit the touch press's type",
+		);
+	});
+
+	it("does not suppress the keyboard menu after a touch tap that raised no menu", async () => {
+		// A tap that lifts without a menu must still disarm suppression. The wait
+		// clears react-aria's own transient post-touch contextmenu listener,
+		// which it removes shortly after pointerup — in a browser a keyboard menu
+		// arrives long after that window, so only this hook's ref decides.
+		const row = mount({ onLongPress: () => undefined });
+
+		pointerDown(row, "touch");
+		pointerUpOn(row);
+		await wait(THRESHOLD);
 
-		assert.equal(contextMenuEvent.defaultPrevented, false);
+		assert.equal(dispatchContextMenu(row).defaultPrevented, false);
 	});
 });

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

@@ -1,5 +1,6 @@
 import type { DOMAttributes } from "@react-types/shared";
-import { useLongPress as useAriaLongPress } from "react-aria";
+import { type PointerEvent, useCallback, useRef } from "react";
+import { mergeProps, useLongPress as useAriaLongPress } from "react-aria";
 
 export interface UseLongPressOptions {
 	/** Called once the threshold elapses while the press stays over the target. */
@@ -31,6 +32,15 @@ export interface UseLongPressResult {
  * `-webkit-touch-callout: none` in CSS at the call site, since iOS fires no
  * cancelable event for it.
  *
+ * The `contextmenu` suppression is keyed to the active pointer's type, tracked
+ * off `pointerdown` on the same element: a touch or pen press suppresses the
+ * menu Android Chrome and iOS Safari raise on a long press over a link, while a
+ * mouse right-click is left alone so the desktop context menu keeps working. It
+ * does not delegate this to react-aria's own suppression — that listener is
+ * transient (added on press start, scoped to the touched node, and torn down
+ * shortly after pointerup), so a press ended early by the swipe gesture's axis
+ * arbitration, or a menu raised over a descendant node, slips past 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.
@@ -41,10 +51,44 @@ export function useLongPress({
 	delayMs = 500,
 	accessibilityDescription,
 }: UseLongPressOptions): UseLongPressResult {
-	return useAriaLongPress({
+	const { longPressProps } = useAriaLongPress({
 		isDisabled,
 		threshold: delayMs,
 		accessibilityDescription,
 		onLongPress,
 	});
+
+	const pointerTypeRef = useRef<string>("");
+
+	const onPointerDown = useCallback((event: PointerEvent) => {
+		pointerTypeRef.current = event.pointerType;
+	}, []);
+
+	// A press that lifts without raising a menu disarms suppression, so a later
+	// keyboard-invoked menu can't inherit its pointer type. Not cleared on
+	// pointercancel: on Android the browser (and react-aria's own long-press
+	// timer) can fire pointercancel before the long-press contextmenu, which
+	// would race the suppression away.
+	const onPointerUp = useCallback(() => {
+		pointerTypeRef.current = "";
+	}, []);
+
+	const onContextMenu = useCallback((event: { preventDefault: () => void }) => {
+		// Consume the armed pointer type. A keyboard-invoked menu (Context-Menu
+		// key / Shift+F10) fires no pointerdown, so without spending the type on
+		// use it would inherit the last touch press's and be wrongly suppressed.
+		const pointerType = pointerTypeRef.current;
+		pointerTypeRef.current = "";
+		if (pointerType === "touch" || pointerType === "pen") {
+			event.preventDefault();
+		}
+	}, []);
+
+	return {
+		longPressProps: mergeProps(longPressProps, {
+			onPointerDown,
+			onPointerUp,
+			onContextMenu,
+		}),
+	};
 }