@remit/ui 0.0.56 → 0.0.58

package/src/lib/sender-derivation.test.ts

@@ -0,0 +1,106 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	collapsibleDomain,
+	deriveSenderClauses,
+	distinctSenders,
+} from "./sender-derivation.js";
+
+describe("distinctSenders", () => {
+	it("drops empties and blanks, trimming what remains", () => {
+		assert.deepEqual(
+			distinctSenders(["  npm@github.com ", "", "   ", "a@x.com"]),
+			["npm@github.com", "a@x.com"],
+		);
+	});
+
+	it("de-duplicates case-insensitively, keeping first-seen casing and order", () => {
+		assert.deepEqual(
+			distinctSenders([
+				"NPM@github.com",
+				"a@x.com",
+				"npm@GITHUB.com",
+				"a@x.com",
+			]),
+			["NPM@github.com", "a@x.com"],
+		);
+	});
+});
+
+describe("collapsibleDomain", () => {
+	it("returns the shared registrable domain when every sender matches it", () => {
+		assert.equal(
+			collapsibleDomain([
+				"npm@github.com",
+				"notifications@github.com",
+				"ci@sub.github.com",
+			]),
+			"github.com",
+		);
+	});
+
+	it("does not collapse a single sender to its whole domain", () => {
+		assert.equal(collapsibleDomain(["npm@github.com"]), null);
+	});
+
+	it("does not collapse when a sender's domain differs", () => {
+		assert.equal(collapsibleDomain(["npm@github.com", "a@x.com"]), null);
+	});
+
+	it("does not collapse when any sender's domain cannot be resolved", () => {
+		assert.equal(
+			collapsibleDomain(["npm@github.com", "malformed-no-at-sign"]),
+			null,
+		);
+	});
+});
+
+describe("deriveSenderClauses", () => {
+	it("emits one From clause per distinct sender when domains differ", () => {
+		assert.deepEqual(
+			deriveSenderClauses(["npm@github.com", "npm@github.com", "a@x.com"]),
+			[
+				{ field: "From", value: "npm@github.com" },
+				{ field: "From", value: "a@x.com" },
+			],
+		);
+	});
+
+	it("collapses to a single FromDomain clause when every sender shares a domain", () => {
+		assert.deepEqual(
+			deriveSenderClauses([
+				"npm@github.com",
+				"notifications@github.com",
+				"ci@sub.github.com",
+			]),
+			[{ field: "FromDomain", value: "github.com" }],
+		);
+	});
+
+	it("keeps per-address From clauses for the mixed case", () => {
+		assert.deepEqual(
+			deriveSenderClauses([
+				"npm@github.com",
+				"ci@github.com",
+				"newsletter@example.org",
+			]),
+			[
+				{ field: "From", value: "npm@github.com" },
+				{ field: "From", value: "ci@github.com" },
+				{ field: "From", value: "newsletter@example.org" },
+			],
+		);
+	});
+
+	it("is empty when no sender survives", () => {
+		assert.deepEqual(deriveSenderClauses(["", "  "]), []);
+	});
+
+	it("collapses a multi-label public suffix to the registrable domain", () => {
+		// The public-suffix list is what makes this foo.co.uk; the trailing two
+		// labels of the host are co.uk, which matches every British domain.
+		assert.deepEqual(deriveSenderClauses(["a@foo.co.uk", "b@foo.co.uk"]), [
+			{ field: "FromDomain", value: "foo.co.uk" },
+		]);
+	});
+});

package/src/lib/sender-derivation.ts

@@ -0,0 +1,85 @@
+/**
+ * Senders in a selection turned into clauses (RFC 038 D2).
+ *
+ * The widen fallback for a deployment that ships no vector pipeline reaches for
+ * this: the semantic anchor matches nothing there, so a widen degrades to the
+ * literal vocabulary RFC 031 already matches vector-free — one `From` clause per
+ * distinct sender, or a single `FromDomain` clause when they all sit on one
+ * registrable domain. The same predicate matches at index time (RFC 034), so a
+ * standing filter built from it keeps working on future mail.
+ */
+
+import { getDomain } from "tldts";
+import type { RuleClause } from "../components/filter-rule.js";
+
+/**
+ * Distinct sender addresses from the selection, trimmed, empties dropped, and
+ * de-duplicated case-insensitively while preserving first-seen casing and order.
+ */
+export const distinctSenders = (senders: readonly string[]): string[] => {
+	const seen = new Set<string>();
+	const out: string[] = [];
+	for (const raw of senders) {
+		const value = raw.trim();
+		if (value === "") continue;
+		const key = value.toLowerCase();
+		if (seen.has(key)) continue;
+		seen.add(key);
+		out.push(value);
+	}
+	return out;
+};
+
+const hostOf = (address: string): string => {
+	const at = address.lastIndexOf("@");
+	return at >= 0 ? address.slice(at + 1) : address;
+};
+
+/**
+ * The registrable domain behind a sender address, public-suffix aware (tldts
+ * `getDomain`), or `null` when the address carries none. The one place an
+ * address is turned into a `FromDomain` value — a clause the prefill derives and
+ * a domain the value field suggests must be the same string, or the suggestion
+ * would offer a domain the matcher never produces.
+ */
+export const senderDomain = (address: string): string | null =>
+	getDomain(hostOf(address.trim()));
+
+/**
+ * The single registrable domain the whole selection collapses to, or `null` when
+ * it does not collapse. A collapse needs at least two distinct senders that all
+ * resolve to one registrable domain (public-suffix aware, via tldts `getDomain`)
+ * — the "anyone at this domain" signal (RFC 038 D2). One sender stays a precise
+ * `From` clause rather than widening a single address to its whole domain, and a
+ * sender whose domain can't be resolved blocks the collapse.
+ */
+export const collapsibleDomain = (
+	senders: readonly string[],
+): string | null => {
+	const distinct = distinctSenders(senders);
+	if (distinct.length < 2) return null;
+	let shared: string | null = null;
+	for (const sender of distinct) {
+		const domain = senderDomain(sender);
+		if (domain === null) return null;
+		if (shared === null) shared = domain;
+		else if (shared !== domain) return null;
+	}
+	return shared;
+};
+
+/**
+ * The literal clauses standing in for the selection. When every sender shares one
+ * registrable domain, a single `FromDomain` clause replaces the per-address `From`
+ * chips (RFC 038 D2); otherwise one `From` clause per distinct sender, each
+ * matching the sender address or display name (match.ts `clauseMatches`).
+ */
+export const deriveSenderClauses = (
+	senders: readonly string[],
+): Omit<RuleClause, "id">[] => {
+	const domain = collapsibleDomain(senders);
+	if (domain !== null) return [{ field: "FromDomain", value: domain }];
+	return distinctSenders(senders).map(
+		(value): Omit<RuleClause, "id"> => ({ field: "From", value }),
+	);
+};

package/src/lib/suggest-keys.test.ts

@@ -0,0 +1,101 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { suggestKeyAction } from "./suggest-keys.js";
+
+const state = (overrides: Partial<Parameters<typeof suggestKeyAction>[0]>) => ({
+	key: "ArrowDown",
+	open: true,
+	count: 3,
+	activeIndex: -1,
+	...overrides,
+});
+
+describe("suggestKeyAction", () => {
+	it("consumes nothing while the list is closed", () => {
+		for (const key of ["ArrowDown", "ArrowUp", "Enter", "Escape"]) {
+			assert.deepEqual(suggestKeyAction(state({ key, open: false })), {
+				type: "none",
+			});
+		}
+	});
+
+	it("consumes nothing when the list is empty", () => {
+		assert.deepEqual(suggestKeyAction(state({ count: 0 })), { type: "none" });
+	});
+
+	it("moves down from the typed value into the first option", () => {
+		assert.deepEqual(suggestKeyAction(state({ key: "ArrowDown" })), {
+			type: "move",
+			index: 0,
+		});
+	});
+
+	it("wraps down off the end and up off the start", () => {
+		assert.deepEqual(
+			suggestKeyAction(state({ key: "ArrowDown", activeIndex: 2 })),
+			{ type: "move", index: 0 },
+		);
+		assert.deepEqual(
+			suggestKeyAction(state({ key: "ArrowUp", activeIndex: 0 })),
+			{ type: "move", index: 2 },
+		);
+	});
+
+	it("moves up from the typed value into the last option", () => {
+		assert.deepEqual(suggestKeyAction(state({ key: "ArrowUp" })), {
+			type: "move",
+			index: 2,
+		});
+	});
+
+	it("takes the highlighted suggestion on Enter", () => {
+		assert.deepEqual(
+			suggestKeyAction(state({ key: "Enter", activeIndex: 1 })),
+			{ type: "accept", index: 1 },
+		);
+	});
+
+	it("leaves Enter alone when nothing is highlighted, so the typed value stands", () => {
+		assert.deepEqual(suggestKeyAction(state({ key: "Enter" })), {
+			type: "none",
+		});
+	});
+
+	it("takes the highlighted suggestion on a caller's extra accept keys", () => {
+		assert.deepEqual(
+			suggestKeyAction(
+				state({ key: "Tab", activeIndex: 0, acceptKeys: ["Tab", ","] }),
+			),
+			{ type: "accept", index: 0 },
+		);
+		assert.deepEqual(
+			suggestKeyAction(
+				state({ key: ",", activeIndex: 0, acceptKeys: ["Tab", ","] }),
+			),
+			{ type: "accept", index: 0 },
+		);
+	});
+
+	it("leaves a key nobody declared alone", () => {
+		assert.deepEqual(suggestKeyAction(state({ key: "Tab", activeIndex: 0 })), {
+			type: "none",
+		});
+	});
+
+	it("dismisses on Escape whatever is highlighted", () => {
+		assert.deepEqual(suggestKeyAction(state({ key: "Escape" })), {
+			type: "dismiss",
+		});
+		assert.deepEqual(
+			suggestKeyAction(state({ key: "Escape", activeIndex: 2 })),
+			{ type: "dismiss" },
+		);
+	});
+
+	it("ignores a stale highlight past the end of a shortened list", () => {
+		assert.deepEqual(
+			suggestKeyAction(state({ key: "Enter", count: 1, activeIndex: 2 })),
+			{ type: "none" },
+		);
+	});
+});

package/src/lib/suggest-keys.ts

@@ -0,0 +1,63 @@
+/**
+ * The keyboard contract for a single-value field with a suggestion list, as pure
+ * decisions over the list's state. Kept apart from the component so the rules are
+ * testable without a DOM, matching `search-chip-keys.ts`.
+ *
+ * The list is a shortcut, never a constraint: nothing here can change what the
+ * user typed. A key the list has no use for is left alone, so the field, the
+ * form, and the surrounding dialog keep their own handling of it.
+ *
+ * Follows the ARIA combobox pattern's list-with-manual-selection behaviour —
+ * arrows move a highlight, an accept key takes the highlighted option, Escape
+ * closes the list and leaves the value.
+ */
+
+export type SuggestAction =
+	/** Move the highlight to `index`. */
+	| { type: "move"; index: number }
+	/** Take the suggestion at `index` as the field's value. */
+	| { type: "accept"; index: number }
+	/** Close the list, keeping whatever is typed. */
+	| { type: "dismiss" }
+	/** The list has no use for this key — the caller keeps its own handling. */
+	| { type: "none" };
+
+export interface SuggestKeyState {
+	key: string;
+	/** Whether the list is on screen. A closed list consumes nothing. */
+	open: boolean;
+	count: number;
+	/** The highlighted option, `-1` when the typed value is what stands. */
+	activeIndex: number;
+	/**
+	 * Keys that take the highlighted suggestion, beyond `Enter` which always
+	 * does. A chips field adds `Tab` and `,`; a plain field adds nothing.
+	 */
+	acceptKeys?: readonly string[];
+}
+
+const NONE: SuggestAction = { type: "none" };
+
+export function suggestKeyAction(state: SuggestKeyState): SuggestAction {
+	if (!state.open || state.count <= 0) return NONE;
+
+	if (state.key === "ArrowDown") {
+		const next = state.activeIndex + 1;
+		return { type: "move", index: next >= state.count ? 0 : next };
+	}
+
+	if (state.key === "ArrowUp") {
+		const previous = state.activeIndex - 1;
+		return { type: "move", index: previous < 0 ? state.count - 1 : previous };
+	}
+
+	if (state.key === "Escape") return { type: "dismiss" };
+
+	const accepts =
+		state.key === "Enter" || (state.acceptKeys ?? []).includes(state.key);
+	if (accepts && state.activeIndex >= 0 && state.activeIndex < state.count) {
+		return { type: "accept", index: state.activeIndex };
+	}
+
+	return NONE;
+}

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

@@ -1,7 +1,59 @@
 import type { DOMAttributes } from "@react-types/shared";
-import { type PointerEvent, useCallback, useRef } from "react";
+import { type PointerEvent, useCallback } from "react";
 import { mergeProps, useLongPress as useAriaLongPress } from "react-aria";
 
+/**
+ * Suppression lives on the document, not on the row.
+ *
+ * There is one pointer, and the element under it does not survive the press: a
+ * long press on a mailbox row enters selection mode, which swaps the swipeable
+ * row for the plain one *while the finger is still down*. A handler on the row
+ * that armed the press is torn down with it, and Android Chrome then raises its
+ * link menu over the selection the press just made. A capture-phase listener on
+ * the document sees the menu whichever node ends up under the finger.
+ *
+ * Set while a touch or pen press is down. A press that never delivers its
+ * `pointerup` — the browser took the gesture, the tab went to the background —
+ * would leave suppression armed forever, so arming is bounded by this timer as
+ * well as by the release.
+ */
+let armedTimer: ReturnType<typeof setTimeout> | undefined;
+
+/** Longer than any press a human holds before the browser ends the gesture. */
+const MAX_ARMED_MS = 5_000;
+
+/**
+ * One press raises at most one menu, so suppression is spent on use. The
+ * release disarms too, which is what keeps a keyboard-invoked menu
+ * (Context-Menu key / Shift+F10) raised later from inheriting a press that is
+ * long over. Deliberately keyed to `pointerup` and not to `pointercancel`: on
+ * Android the browser — and react-aria's own long-press timer — can cancel the
+ * pointer before the `contextmenu` it raised arrives, which would race the
+ * suppression away.
+ */
+function suppressContextMenu(event: Event): void {
+	event.preventDefault();
+	disarm();
+}
+
+function disarm(): void {
+	if (armedTimer === undefined) return;
+	clearTimeout(armedTimer);
+	armedTimer = undefined;
+	document.removeEventListener("contextmenu", suppressContextMenu, true);
+	document.removeEventListener("pointerup", disarm, true);
+}
+
+function arm(): void {
+	if (armedTimer === undefined) {
+		document.addEventListener("contextmenu", suppressContextMenu, true);
+		document.addEventListener("pointerup", disarm, true);
+	} else {
+		clearTimeout(armedTimer);
+	}
+	armedTimer = setTimeout(disarm, MAX_ARMED_MS);
+}
+
 export interface UseLongPressOptions {
 	/** Called once the threshold elapses while the press stays over the target. */
 	onLongPress: () => void;
@@ -32,14 +84,17 @@ 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.
+ * The `contextmenu` suppression is armed by a touch or pen `pointerdown` and
+ * runs on the document in the capture phase: a touch 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. Two
+ * reasons it is neither react-aria's own suppression nor a handler on the row.
+ * react-aria's listener is transient — added on press start, scoped to the
+ * touched node, torn down shortly after pointerup — so a press ended early by
+ * the swipe gesture's axis arbitration slips past it. And the row itself does
+ * not survive the press: the long press enters selection mode, which replaces
+ * the swipeable row with the plain one while the finger is still down, so a
+ * handler bound to the pressed node is gone by the time the menu arrives.
  *
  * 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
@@ -58,37 +113,15 @@ export function useLongPress({
 		onLongPress,
 	});
 
-	const pointerTypeRef = useRef<string>("");
-
+	// Only a touch or pen press arms it: a mouse right-click, and a keyboard menu
+	// (Context-Menu key / Shift+F10) that is preceded by no press at all, keep
+	// the native menu.
 	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();
-		}
+		if (event.pointerType !== "touch" && event.pointerType !== "pen") return;
+		arm();
 	}, []);
 
 	return {
-		longPressProps: mergeProps(longPressProps, {
-			onPointerDown,
-			onPointerUp,
-			onContextMenu,
-		}),
+		longPressProps: mergeProps(longPressProps, { onPointerDown }),
 	};
 }

package/src/lib/use-suggest-list.test.ts

@@ -0,0 +1,169 @@
+/**
+ * use-suggest-list — drives the real hook on a jsdom-mounted input, because what
+ * matters is the interaction between its state and the keystrokes the field
+ * receives: an accepted suggestion, a dismissal that leaves the typed value
+ * alone, a result set that changes under a stale highlight. The key rules
+ * themselves are pure and tested in `suggest-keys.test.ts`.
+ */
+
+import assert from "node:assert/strict";
+import { after, afterEach, before, beforeEach, describe, it } from "node:test";
+import type { JSDOM } from "jsdom";
+import { act, createElement, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { useSuggestList } from "./use-suggest-list.js";
+
+let dom: JSDOM;
+let container: HTMLElement;
+let root: Root;
+
+const accepted: string[] = [];
+
+function Field(props: { options: string[] }) {
+	const [value, setValue] = useState("typed");
+	const suggest = useSuggestList({
+		count: props.options.length,
+		onAccept: (index) => accepted.push(props.options[index]),
+	});
+	return createElement("input", {
+		id: "field",
+		value,
+		onChange: (event: { target: { value: string } }) => {
+			suggest.reopen();
+			setValue(event.target.value);
+		},
+		onKeyDown: suggest.handleKeyDown,
+		"data-open": String(suggest.open),
+		"data-active": String(suggest.activeIndex),
+		...suggest.comboboxProps,
+	});
+}
+
+function mount(options: string[]) {
+	act(() => {
+		root.render(createElement(Field, { options }));
+	});
+	const field = dom.window.document.getElementById("field");
+	assert.ok(field, "field did not mount");
+	// React's change-event polyfill tracks the focused input across keystrokes;
+	// keys arriving at an unfocused field are not a state this ever sees.
+	act(() => {
+		(field as HTMLInputElement).focus();
+	});
+	return field;
+}
+
+function press(field: Element, key: string) {
+	const event = new dom.window.KeyboardEvent("keydown", {
+		key,
+		bubbles: true,
+		cancelable: true,
+	});
+	act(() => {
+		field.dispatchEvent(event);
+	});
+	return event;
+}
+
+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.KeyboardEvent = dom.window.KeyboardEvent;
+	(
+		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
+	).IS_REACT_ACT_ENVIRONMENT = true;
+});
+
+after(() => {
+	dom.window.close();
+});
+
+beforeEach(() => {
+	accepted.length = 0;
+	container = dom.window.document.getElementById(
+		"root",
+	) as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+});
+
+afterEach(() => {
+	act(() => {
+		root.unmount();
+	});
+});
+
+const OPTIONS = ["one", "two", "three"];
+
+describe("useSuggestList", () => {
+	it("opens only when there is something to suggest", () => {
+		assert.equal(mount([]).getAttribute("data-open"), "false");
+		assert.equal(mount(OPTIONS).getAttribute("data-open"), "true");
+	});
+
+	it("wires the combobox for a screen reader", () => {
+		const field = mount(OPTIONS);
+		assert.equal(field.getAttribute("role"), "combobox");
+		assert.equal(field.getAttribute("aria-expanded"), "true");
+		assert.equal(field.getAttribute("aria-autocomplete"), "list");
+		assert.ok(field.getAttribute("aria-controls"));
+		assert.equal(field.getAttribute("aria-activedescendant"), null);
+	});
+
+	it("points at the highlighted option once one is highlighted", () => {
+		const field = mount(OPTIONS);
+		press(field, "ArrowDown");
+		assert.equal(field.getAttribute("data-active"), "0");
+		assert.equal(
+			field.getAttribute("aria-activedescendant"),
+			`${field.getAttribute("aria-controls")}-option-0`,
+		);
+	});
+
+	it("takes the highlighted suggestion on Enter and leaves Enter alone otherwise", () => {
+		const field = mount(OPTIONS);
+		const bare = press(field, "Enter");
+		assert.deepEqual(accepted, []);
+		assert.equal(bare.defaultPrevented, false, "the field's own Enter stands");
+
+		press(field, "ArrowDown");
+		press(field, "ArrowDown");
+		press(field, "Enter");
+		assert.deepEqual(accepted, ["two"]);
+	});
+
+	it("closes on Escape without touching what was typed, and owns the key while open", () => {
+		const field = mount(OPTIONS);
+		assert.equal(field.getAttribute("data-escape-owner"), "");
+		press(field, "Escape");
+		assert.equal(field.getAttribute("data-open"), "false");
+		assert.equal(field.getAttribute("data-escape-owner"), null);
+		assert.equal((field as HTMLInputElement).value, "typed");
+	});
+
+	it("leaves Escape to the surrounding surface once the list is closed", () => {
+		const field = mount(OPTIONS);
+		press(field, "Escape");
+		const second = press(field, "Escape");
+		assert.equal(second.defaultPrevented, false);
+	});
+
+	it("offers the list again for a changed result set, with no highlight carried over", () => {
+		const field = mount(OPTIONS);
+		press(field, "ArrowDown");
+		press(field, "Escape");
+		act(() => {
+			root.render(createElement(Field, { options: ["only"] }));
+		});
+		assert.equal(field.getAttribute("data-open"), "true");
+		assert.equal(field.getAttribute("data-active"), "-1");
+	});
+});