@remit/ui 0.0.47 → 0.0.49

package/package.json

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

package/src/components/filter-rule-editor.stories.tsx

@@ -254,11 +254,13 @@ export const DegradedStandingWiden: Story = {
 };
 
 /**
- * Editing a persisted filter (RFC 038 D6): scope and expiry render read-only,
- * with a note that they — and the semantic anchor — are fixed at creation. The
- * name and the literal clauses stay editable; the widen chip is display-only.
+ * Editing a persisted filter (RFC 038 D6, reader #266): scope and expiry stay
+ * live and editable — a standing filter can move to "until a date" and back,
+ * or its date can change. The semantic anchor is the one thing fixed at
+ * creation: the widen chip renders display-only with a one-line note, and
+ * "Just once" drops out of the scope toggle since no saved filter can hold it.
  */
-export const LifecycleLocked: Story = {
+export const AnchorLocked: Story = {
 	args: {
 		rule: {
 			...demoRule,
@@ -269,7 +271,7 @@ export const LifecycleLocked: Story = {
 		folders: demoFolders,
 		preview: READY(31),
 		semanticAvailable: false,
-		lifecycleLocked: true,
+		anchorLocked: true,
 	},
 };
 

package/src/components/filter-rule-editor.tsx

@@ -56,14 +56,20 @@ export interface FilterRuleEditorProps {
 	 */
 	clauseFields?: ClauseField[];
 	/**
-	 * Render the scope and expiry read-only (RFC 038 D6). A persisted filter's
-	 * scope, expiry, and semantic anchor are fixed at creation — the update
-	 * endpoint carries none of them — so editing a filter shows them as a static
-	 * summary with a note rather than live controls that would silently discard
-	 * the change (reader #266 tracks lifting this). The name and the literal
-	 * predicate stay editable.
+	 * Whether the semantic anchor is fixed and cannot be added, removed, or
+	 * repointed (RFC 038 D6, reader #266). True for an existing, persisted
+	 * filter — the update endpoint carries no anchor field at all, so
+	 * repointing one would silently change what a saved filter matches with
+	 * nothing visible changing, and that deserves a new filter instead. The
+	 * widen chip renders display-only (no remove affordance regardless of
+	 * `onRemoveWiden`) and carries a one-line note explaining why.
+	 *
+	 * Scope and expiry are NOT covered by this flag — they stay editable even
+	 * on an existing filter (reader #266). The only other thing this locks is
+	 * the "Just once" scope option, meaningless for an already-persisted
+	 * filter, which is dropped from the scope toggle.
 	 */
-	lifecycleLocked?: boolean;
+	anchorLocked?: boolean;
 	/** The inline clause form, when adding or editing a clause. */
 	clauseEdit?: ClauseEditState;
 	onStartAddClause?: () => void;
@@ -252,7 +258,7 @@ export function FilterRuleEditor({
 	notice,
 	semanticAvailable = false,
 	clauseFields,
-	lifecycleLocked = false,
+	anchorLocked = false,
 	clauseEdit,
 	onStartAddClause,
 	onStartEditClause,
@@ -278,6 +284,12 @@ export function FilterRuleEditor({
 	const join = matchJoinWord(rule.matchOperator);
 	const blockedReason = commitBlockedReason(rule, preview);
 	const needsName = rule.scope === "standing" || rule.scope === "until";
+	// A persisted filter is always Standing or Temporary — "once" was never a
+	// scope a saved row could hold, so an existing filter's editor never offers
+	// it (reader #266).
+	const availableScopeOptions = anchorLocked
+		? scopeOptions.filter((option) => option.value !== "once")
+		: scopeOptions;
 
 	return (
 		<div className="flex min-h-0 flex-col">
@@ -314,16 +326,22 @@ export function FilterRuleEditor({
 										{join}
 									</span>
 								)}
-								<WidenChip widen={rule.widen} onRemove={onRemoveWiden} />
+								<WidenChip
+									widen={rule.widen}
+									onRemove={anchorLocked ? undefined : onRemoveWiden}
+								/>
 							</>
 						)}
 
 						{!clauseEdit && (
 							<AddChipButton label="Add clause" onClick={onStartAddClause} />
 						)}
-						{!rule.widen && semanticAvailable && !clauseEdit && (
-							<AddChipButton label="…and similar" onClick={onAddWiden} />
-						)}
+						{!rule.widen &&
+							!anchorLocked &&
+							semanticAvailable &&
+							!clauseEdit && (
+								<AddChipButton label="…and similar" onClick={onAddWiden} />
+							)}
 					</div>
 
 					{clauseEdit && (
@@ -338,6 +356,13 @@ export function FilterRuleEditor({
 						/>
 					)}
 
+					{anchorLocked && rule.widen && (
+						<p className="text-2xs text-fg-subtle">
+							This filter's similar-mail match is fixed to the message it was
+							created from — create a new filter to change it.
+						</p>
+					)}
+
 					{showOperator && (
 						<div className="flex items-center gap-2">
 							<span className="text-xs text-fg-muted">Match</span>
@@ -374,22 +399,14 @@ export function FilterRuleEditor({
 
 				<section className="space-y-2">
 					<p className="text-xs font-medium text-fg-muted">How long</p>
-					{lifecycleLocked ? (
-						<p className="text-xs text-fg">
-							{rule.scope === "until"
-								? `Until ${rule.until ?? ""}`
-								: "Always — runs on matching mail"}
-						</p>
-					) : (
-						<SegmentedControl
-							name="rule-scope"
-							size="sm"
-							aria-label="Rule scope"
-							options={scopeOptions}
-							value={rule.scope}
-							onChange={(value) => onChangeScope?.(value)}
-						/>
-					)}
+					<SegmentedControl
+						name="rule-scope"
+						size="sm"
+						aria-label="Rule scope"
+						options={availableScopeOptions}
+						value={rule.scope}
+						onChange={(value) => onChangeScope?.(value)}
+					/>
 					{needsName && (
 						<Input
 							value={rule.name ?? ""}
@@ -399,7 +416,7 @@ export function FilterRuleEditor({
 							className="w-full"
 						/>
 					)}
-					{!lifecycleLocked && rule.scope === "until" && (
+					{rule.scope === "until" && (
 						<div className="flex items-center gap-2 text-xs text-fg-muted">
 							<span>Until</span>
 							<Input
@@ -411,13 +428,6 @@ export function FilterRuleEditor({
 							/>
 						</div>
 					)}
-					{lifecycleLocked && (
-						<p className="text-2xs text-fg-subtle">
-							{rule.widen
-								? "The scope, expiry, and similar-mail match are set when a filter is created."
-								: "The scope and expiry are set when a filter is created."}
-						</p>
-					)}
 				</section>
 
 				<div className="border-t border-line pt-3">

package/src/components/filter-rule.render.test.ts

@@ -555,35 +555,48 @@ describe("FilterRuleEditor", () => {
 		assert.match(editor(), /47 messages match/);
 	});
 
-	it("renders scope and expiry read-only when the lifecycle is locked", () => {
+	it("keeps scope and expiry live and editable on an anchor-locked (existing) filter (reader #266)", () => {
 		const html = editor({
 			rule: { ...demoRule, scope: "until", until: "2027-09-01" },
-			lifecycleLocked: true,
+			anchorLocked: true,
 		});
-		// No live scope toggle, no editable date input — a static summary and a note.
-		assert.doesNotMatch(html, /aria-label="Rule scope"/);
-		assert.doesNotMatch(html, /aria-label="Expiry date"/);
-		assert.match(html, /Until 2027-09-01/);
-		assert.match(html, /set when a filter is created/);
-		// The name stays editable.
+		assert.match(html, /aria-label="Rule scope"/);
+		assert.match(html, /aria-label="Expiry date"/);
 		assert.match(html, /aria-label="Rule name"/);
 	});
 
-	it("names the similar-mail match in the locked note only when a widen is present", () => {
+	it("drops the once option from the scope toggle on an anchor-locked filter", () => {
+		const locked = editor({ anchorLocked: true });
+		assert.doesNotMatch(locked, />Just once</);
+		const unlocked = editor({ anchorLocked: false });
+		assert.match(unlocked, />Just once</);
+	});
+
+	it("locks the widen chip and explains why only when one is present", () => {
 		const withWiden = editor({
 			rule: { ...demoRule, widen: { anchorCount: 2 } },
-			lifecycleLocked: true,
+			anchorLocked: true,
 		});
-		assert.match(
+		assert.doesNotMatch(
 			withWiden,
-			/similar-mail match are set when a filter is created/,
+			/aria-label="Remove the similar-mail widen"/,
 		);
+		assert.match(withWiden, /similar-mail match is fixed to the message/);
+
 		const literal = editor({
 			rule: { ...demoRule, widen: undefined },
-			lifecycleLocked: true,
+			anchorLocked: true,
+		});
+		assert.doesNotMatch(literal, /similar-mail match is fixed/);
+	});
+
+	it("never offers to add a widen on an anchor-locked filter, even when the deployment can serve it", () => {
+		const html = editor({
+			rule: { ...demoRule, widen: undefined },
+			anchorLocked: true,
+			semanticAvailable: true,
 		});
-		assert.match(literal, /scope and expiry are set when a filter is created/);
-		assert.doesNotMatch(literal, /similar-mail match/);
+		assert.doesNotMatch(html, /…and similar/);
 	});
 });
 

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,
+		}),
+	};
 }