@remit/ui 0.0.77 → 0.0.78

package/package.json

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

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

@@ -15,9 +15,7 @@
  * 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.
+ * and snapped back, and nothing else happened.
  */
 
 import assert from "node:assert/strict";
@@ -123,36 +121,6 @@ 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,
@@ -309,7 +277,7 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 		let longPressed = 0;
 		let opened = 0;
 		const peeks: SwipePeek[] = [];
-		const row = mountAnchor({
+		const row = mount({
 			onLongPress: () => longPressed++,
 			onOpen: () => opened++,
 			onPeek: (next) => peeks.push(next),
@@ -331,7 +299,7 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 	it("a hold that drifts vertically past the axis threshold still enters selection mode", async () => {
 		let longPressed = 0;
 		const peeks: SwipePeek[] = [];
-		const row = mountAnchor({
+		const row = mount({
 			onLongPress: () => longPressed++,
 			onOpen: () => undefined,
 			onPeek: (next) => peeks.push(next),
@@ -349,10 +317,10 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 
 	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.
+		// press was still live, and react-aria synthesizes a click for an
+		// unresolved press.
 		let clicks = 0;
-		const row = mountAnchor({
+		const row = mount({
 			onLongPress: () => undefined,
 			onOpen: () => undefined,
 			onPeek: () => undefined,
@@ -367,10 +335,10 @@ describe("SwipeableRow gesture wiring (react-aria long press + axis arbitration)
 		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({
+	it("suppresses the native context menu raised over a drifting hold", async () => {
+		// Android Chrome raises its own menu at its own threshold, which can land
+		// mid-drift and ahead of the app's long press.
+		const row = mount({
 			onLongPress: () => undefined,
 			onOpen: () => undefined,
 			onPeek: () => undefined,

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

@@ -3,11 +3,7 @@ import { describe, it } from "node:test";
 import { createElement } from "react";
 import { renderToString } from "react-dom/server";
 import type { ThreadRowData } from "./app-shell-types.js";
-import {
-	SwipeableRow,
-	type SwipeableRowOpenProps,
-	type SwipePeek,
-} from "./swipeable-row.js";
+import { SwipeableRow, type SwipePeek } from "./swipeable-row.js";
 
 const thread: ThreadRowData = {
 	id: "thread-1",
@@ -63,45 +59,14 @@ describe("SwipeableRow", () => {
 		assert.match(read, /aria-label="Mark as unread"/);
 	});
 
-	it("renders the open affordance as a button by default", () => {
-		const html = render("none");
-		assert.match(html, /<button[^>]*>/);
-		assert.doesNotMatch(html, /<a /);
-	});
-
-	it("renders the open affordance as a real anchor when linkComponent is given", () => {
-		const html = renderToString(
-			createElement(SwipeableRow, {
-				...baseProps,
-				peek: "none",
-				linkComponent: ({ className, children }: SwipeableRowOpenProps) =>
-					createElement(
-						"a",
-						{ href: "/mail/m1?selectedMessageId=t1", className },
-						children,
-					),
-			}),
-		);
-		assert.match(html, /<a [^>]*href="\/mail\/m1\?selectedMessageId=t1"/);
-		assert.match(html, /Q3 planning notes/);
-	});
-
-	it("keeps the button (not the anchor) in selection mode even with a linkComponent", () => {
-		const html = renderToString(
-			createElement(SwipeableRow, {
-				...baseProps,
-				selectionMode: true,
-				peek: "none",
-				linkComponent: ({ className, children }: SwipeableRowOpenProps) =>
-					createElement(
-						"a",
-						{ href: "/should-not-render", className },
-						children,
-					),
-			}),
-		);
-		assert.doesNotMatch(html, /<a /);
-		assert.match(html, /<button[^>]*>/);
+	it("opens through a button, never an anchor (#116)", () => {
+		for (const html of [
+			render("none"),
+			render("none", { selectionMode: true }),
+		]) {
+			assert.match(html, /<button[^>]*data-message-row/);
+			assert.doesNotMatch(html, /<a /);
+		}
 	});
 
 	it("gives the row checkbox semantics while in selection mode", () => {

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

@@ -69,31 +69,6 @@ export const SelectionChecked: Story = {
 	args: { peek: "none", selectionMode: true, checked: true },
 };
 
-/**
- * The open affordance is rendered as a real `<a href>` via `linkComponent`,
- * so deep-link, middle-click and open-in-new-tab work. Consumers pass their
- * router's Link; here a plain anchor stands in. Inspect the DOM: the row is an
- * anchor, not a button.
- */
-export const AsAnchor: Story = {
-	name: "As anchor (linkComponent)",
-	args: {
-		peek: "none",
-		linkComponent: ({ onOpenClick, children, ...rowProps }) => (
-			<a
-				{...rowProps}
-				href="/mail/inbox?selectedMessageId=thread-1"
-				onClick={(e) => {
-					e.preventDefault();
-					onOpenClick(e);
-				}}
-			>
-				{children}
-			</a>
-		),
-	},
-};
-
 export const Acting: Story = {
 	name: "Acting (interactive)",
 	render: () => {
@@ -130,7 +105,7 @@ export const Acting: Story = {
 	},
 };
 
-function AnchorRow({
+function GestureRow({
 	onLongPress,
 	selectionMode,
 	checked,
@@ -147,23 +122,14 @@ function AnchorRow({
 				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>
 	);
 }
 
+const rowElement = (canvasElement: HTMLElement) =>
+	canvasElement.querySelector<HTMLButtonElement>("button[data-message-row]");
+
 /**
  * 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
@@ -177,7 +143,7 @@ export const LongPressToSelect: Story = {
 		const [selected, setSelected] = useState(false);
 		return (
 			<div className="space-y-2">
-				<AnchorRow
+				<GestureRow
 					selectionMode={selected}
 					checked={selected}
 					onLongPress={() => setSelected((v) => !v)}
@@ -206,7 +172,7 @@ export const LongPressWithDrift: Story = {
 		const [selected, setSelected] = useState(false);
 		return (
 			<div className="space-y-2">
-				<AnchorRow
+				<GestureRow
 					selectionMode={selected}
 					checked={selected}
 					onLongPress={() => setSelected(true)}
@@ -220,10 +186,10 @@ export const LongPressWithDrift: Story = {
 		);
 	},
 	play: async ({ canvasElement }) => {
-		const anchor = canvasElement.querySelector<HTMLAnchorElement>("a[href]");
-		if (!anchor) return;
+		const row = rowElement(canvasElement);
+		if (!row) return;
 		const touch = (type: string, clientX: number, clientY: number) =>
-			anchor.dispatchEvent(
+			row.dispatchEvent(
 				new PointerEvent(type, {
 					bubbles: true,
 					pointerType: "touch",
@@ -247,30 +213,29 @@ export const LongPressWithDrift: Story = {
 };
 
 /**
- * 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.
+ * A touch long press over a row normally raises the browser's own context menu,
+ * 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 />
+			<GestureRow />
 			<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 row = rowElement(canvasElement);
 		const outcome = canvasElement.querySelector<HTMLParagraphElement>(
 			'[data-testid="context-menu-outcome"]',
 		);
-		if (!anchor || !outcome) return;
-		anchor.dispatchEvent(
+		if (!row || !outcome) return;
+		row.dispatchEvent(
 			new PointerEvent("pointerdown", {
 				bubbles: true,
 				pointerType: "touch",
@@ -281,7 +246,7 @@ export const TouchContextMenuSuppressed: Story = {
 			bubbles: true,
 			cancelable: true,
 		});
-		anchor.dispatchEvent(menu);
+		row.dispatchEvent(menu);
 		outcome.textContent = menu.defaultPrevented
 			? "Native context menu suppressed on touch."
 			: "Native context menu allowed.";

package/src/components/swipeable-row.tsx

@@ -1,4 +1,3 @@
-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";
@@ -64,26 +63,6 @@ export function commitPeek(offset: number): SwipePeek {
 	return "none";
 }
 
-/**
- * Props the row's interactive (open) element must receive — the swipe gesture
- * 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 extends DOMAttributes {
-	className: string;
-	style: React.CSSProperties;
-	/** 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. */
-	onOpenClick: (e: { preventDefault: () => void }) => void;
-	children: React.ReactNode;
-}
-
 export function SwipeableRow({
 	thread,
 	selectionMode,
@@ -95,7 +74,6 @@ export function SwipeableRow({
 	onLongPress,
 	onOpen,
 	onAct,
-	linkComponent,
 }: {
 	thread: ThreadRowData;
 	selectionMode: boolean;
@@ -109,12 +87,6 @@ export function SwipeableRow({
 	/** Tapping a revealed action performs it: "leading" = toggle read,
 	 *  "trailing" = delete. */
 	onAct: (side: "leading" | "trailing") => void;
-	/** Render the open affordance as a real anchor (router Link / `<a href>`)
-	 *  instead of the default `<button onOpen>`. Receives the gesture handlers,
-	 *  style, peek-aware onClickCapture and row body to spread onto the anchor.
-	 *  When provided, a plain tap navigates via the anchor's native click (so
-	 *  deep-link/middle-click work); onOpen is not called for the tap. */
-	linkComponent?: (props: SwipeableRowOpenProps) => React.ReactNode;
 }) {
 	const gesture = useRef<{
 		startX: number;
@@ -197,9 +169,8 @@ export function SwipeableRow({
 		// or a real cancel arrived) — those handle themselves, so do nothing.
 		if (!g) return;
 		// 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.
+		// live, and an unresolved press synthesizes a click on release. 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));
@@ -216,8 +187,6 @@ export function SwipeableRow({
 			onPeek("none");
 			return;
 		}
-		// A real anchor handles the open via its native click — don't double-fire.
-		if (linkComponent) return;
 		onOpen();
 	};
 
@@ -242,12 +211,6 @@ export function SwipeableRow({
 		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 }) => {
-		if (peek !== "none") e.preventDefault();
-	};
-
 	const offset = dragX ?? peekOffset(peek);
 	const revealed: SwipePeek =
 		offset > 0 ? "leading" : offset < 0 ? "trailing" : "none";
@@ -255,12 +218,9 @@ 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. 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]",
+		// This row's long press enters selection mode; without this, the hold
+		// starts a native text selection across the row's subject and snippet.
+		"select-none",
 		comfortableRowClass({ active: checked || active }),
 	);
 	const interactiveStyle: React.CSSProperties = {
@@ -297,14 +257,14 @@ export function SwipeableRow({
 			)}
 			{/*
 			 * Tappable, focusable entry point into selection mode — long-press is
-			 * never the only way in. Nested inside the row's own open control
-			 * (button or, via linkComponent, an anchor); mirrors the leading-slot
-			 * toggle already shipped in the web client's row.
+			 * never the only way in. A span, not a <button>: it sits inside the
+			 * row's own open button, which may not nest one. The checkbox role and
+			 * label are what the user and the test suite address, so both stay.
 			 */}
-			{/* biome-ignore lint/a11y/useSemanticElements: a native <input type="checkbox"> can't host the Avatar as its visible content; role="checkbox" on a button mirrors the row-checkbox pattern already shipped in MessageListItem.tsx */}
-			<button
-				type="button"
+			{/* biome-ignore lint/a11y/useSemanticElements: a native <input type="checkbox"> can't host the Avatar as its visible content, and a nested <button> inside the row's own button is invalid HTML */}
+			<span
 				role="checkbox"
+				tabIndex={0}
 				aria-checked={checked}
 				aria-label={`Select message from ${thread.fromName}`}
 				onPointerDown={stopRowGesture}
@@ -315,10 +275,16 @@ export function SwipeableRow({
 					e.stopPropagation();
 					onLongPress();
 				}}
+				onKeyDown={(e) => {
+					if (e.key !== "Enter" && e.key !== " ") return;
+					e.preventDefault();
+					e.stopPropagation();
+					onLongPress();
+				}}
 				className="-m-2 inline-flex size-11 shrink-0 items-center justify-center rounded-full"
 			>
 				<Avatar name={thread.fromName} email={thread.fromEmail} size="sm" />
-			</button>
+			</span>
 			<ComfortableRowTextContent thread={thread} />
 		</>
 	);
@@ -350,29 +316,21 @@ export function SwipeableRow({
 				</button>
 			)}
 
-			{/* In selection mode the row is tap-to-toggle, never a navigation link —
-			    keep the button so a checkbox tap can't open a thread. */}
-			{linkComponent && !selectionMode ? (
-				linkComponent({
-					...gestureProps,
-					className: interactiveClassName,
-					style: interactiveStyle,
-					onOpenClick,
-					children: body,
-				})
-			) : (
-				// biome-ignore lint/a11y/useAriaPropsSupportedByRole: role is only ever "checkbox" (aria-checked's owning role) when selectionMode is true; the ternaries are linked, biome can't see that statically
-				<button
-					type="button"
-					role={selectionMode ? "checkbox" : undefined}
-					aria-checked={selectionMode ? checked : undefined}
-					{...gestureProps}
-					className={interactiveClassName}
-					style={interactiveStyle}
-				>
-					{body}
-				</button>
-			)}
+			{/* `data-message-row` is the mail app's row marker: its key dispatcher
+			    reads it to tell a row apart from a control nested inside one, and
+			    the e2e suite locates rows by it. */}
+			{/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: role is only ever "checkbox" (aria-checked's owning role) when selectionMode is true; the ternaries are linked, biome can't see that statically */}
+			<button
+				type="button"
+				role={selectionMode ? "checkbox" : undefined}
+				aria-checked={selectionMode ? checked : undefined}
+				data-message-row
+				{...gestureProps}
+				className={interactiveClassName}
+				style={interactiveStyle}
+			>
+				{body}
+			</button>
 		</div>
 	);
 }

package/src/index.ts

@@ -598,7 +598,6 @@ export {
 export {
 	commitPeek,
 	SwipeableRow,
-	type SwipeableRowOpenProps,
 	type SwipePeek,
 } from "./components/swipeable-row.js";
 export { TouchListBody } from "./components/touch-list.js";