@remit/ui 0.0.140 → 0.0.142

package/package.json

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

package/src/components/role-appointment-list.confirm-proposal.test.ts

@@ -0,0 +1,167 @@
+import "@remit/test-dom";
+import assert from "node:assert/strict";
+import { afterEach, beforeEach, describe, it } from "node:test";
+import { act, createElement, useState } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import type { FolderRole } from "./folder-role.js";
+import {
+	type CandidateFolder,
+	type RoleAppointment,
+	RoleAppointmentList,
+} from "./role-appointment-list.js";
+
+const folders: CandidateFolder[] = [
+	{
+		mailboxId: "mb-inbox",
+		providerPath: "INBOX",
+		hierarchyDelimiter: "/",
+		messageCount: 4821,
+	},
+	{
+		mailboxId: "mb-deleted",
+		providerPath: "INBOX/Deleted Messages",
+		hierarchyDelimiter: "/",
+		messageCount: 512,
+	},
+	{
+		mailboxId: "mb-concepten",
+		providerPath: "INBOX/Concepten",
+		hierarchyDelimiter: "/",
+		messageCount: 340,
+	},
+];
+
+let container: HTMLElement;
+let root: Root;
+let appointed: Array<[FolderRole, string | null]>;
+
+beforeEach(() => {
+	appointed = [];
+	container = document.createElement("div");
+	document.body.append(container);
+	root = createRoot(container);
+});
+
+afterEach(async () => {
+	await act(async () => {
+		root.unmount();
+	});
+	container.remove();
+});
+
+const mount = async (appointments: Record<string, RoleAppointment>) => {
+	await act(async () => {
+		root.render(
+			createElement(RoleAppointmentList, {
+				accountEmail: "you@example.com",
+				folders,
+				appointments,
+				displayNames: {},
+				onAppoint: (role: FolderRole, mailboxId: string | null) => {
+					appointed.push([role, mailboxId]);
+				},
+				onRename: () => {},
+			}),
+		);
+	});
+};
+
+const buttonNamed = (text: string): HTMLButtonElement | undefined =>
+	[...container.querySelectorAll("button")].find(
+		(button) => button.textContent?.trim() === text,
+	);
+
+const click = async (element: Element | undefined) => {
+	assert.ok(element, "the control is rendered");
+	await act(async () => {
+		element.dispatchEvent(
+			new MouseEvent("click", { bubbles: true, cancelable: true }),
+		);
+	});
+};
+
+describe("confirming a proposed folder role", () => {
+	it("commits the folder the picker already shows", async () => {
+		await mount({
+			trash: { mailboxId: "mb-deleted", source: "Proposed" },
+		});
+		await click(buttonNamed("Set as Trash"));
+		assert.deepEqual(appointed, [["trash", "mb-deleted"]]);
+	});
+
+	it("offers the commit on every proposed role, naming that role", async () => {
+		await mount({
+			trash: { mailboxId: "mb-deleted", source: "Proposed" },
+			drafts: { mailboxId: "mb-concepten", source: "Proposed" },
+		});
+		await click(buttonNamed("Set as Drafts"));
+		assert.deepEqual(appointed, [["drafts", "mb-concepten"]]);
+	});
+
+	it("leaves a vouched row alone — there is nothing to confirm", async () => {
+		await mount({
+			trash: { mailboxId: "mb-deleted", source: "Appointed" },
+			drafts: { mailboxId: "mb-concepten", source: "Flagged" },
+			inbox: { mailboxId: "mb-inbox", source: "Reserved" },
+		});
+		assert.equal(buttonNamed("Set as Trash"), undefined);
+		assert.equal(buttonNamed("Set as Drafts"), undefined);
+		assert.equal(buttonNamed("Set as Inbox"), undefined);
+	});
+
+	it("offers nothing to commit when the proposal resolves to no folder", async () => {
+		await mount({ trash: { mailboxId: null, source: "Proposed" } });
+		assert.equal(buttonNamed("Set as Trash"), undefined);
+	});
+});
+
+function Controlled({ accepts }: { accepts: boolean }) {
+	const [appointments, setAppointments] = useState<
+		Record<string, RoleAppointment>
+	>({ trash: { mailboxId: "mb-deleted", source: "Proposed" } });
+	return createElement(RoleAppointmentList, {
+		accountEmail: "you@example.com",
+		folders,
+		appointments,
+		displayNames: {},
+		onAppoint: (role: FolderRole, mailboxId: string | null) => {
+			appointed.push([role, mailboxId]);
+			if (!accepts || mailboxId === null) return;
+			setAppointments({ [role]: { mailboxId, source: "Appointed" } });
+		},
+		onRename: () => {},
+	});
+}
+
+describe("where focus goes when a proposal is committed", () => {
+	const mountControlled = async (accepts: boolean) => {
+		await act(async () => {
+			root.render(createElement(Controlled, { accepts }));
+		});
+	};
+
+	const trashPicker = (): Element | null =>
+		container.querySelector('select[aria-label="Folder for Trash"]');
+
+	it("hands focus to the picker once the role re-resolves", async () => {
+		await mountControlled(true);
+		const button = buttonNamed("Set as Trash");
+		button?.focus();
+		await click(button);
+		assert.equal(
+			buttonNamed("Set as Trash"),
+			undefined,
+			"the commit removes itself",
+		);
+		assert.equal(document.activeElement, trashPicker());
+	});
+
+	it("leaves focus on the commit when the role does not re-resolve", async () => {
+		await mountControlled(false);
+		const button = buttonNamed("Set as Trash");
+		button?.focus();
+		await click(button);
+		assert.equal(buttonNamed("Set as Trash"), button);
+		assert.equal(document.activeElement, button);
+	});
+});

package/src/components/role-appointment-list.stories.tsx

@@ -199,7 +199,11 @@ export const ReservedSource: Story = {
 	},
 };
 
-/** `Proposed` — a name matched. Nobody confirmed it, and the row does not pretend otherwise. */
+/**
+ * `Proposed` — a name matched. Nobody confirmed it, and the row does not
+ * pretend otherwise. `Set as Trash` commits the folder the picker already
+ * shows, which re-picking that same option cannot do.
+ */
 export const ProposedSource: Story = {
 	name: "proposed",
 	args: {
@@ -211,6 +215,26 @@ export const ProposedSource: Story = {
 	},
 };
 
+/**
+ * Density check: a server that advertises no SPECIAL-USE flags, so every role
+ * but INBOX rests on a name match alone. Each row carries its own commit, so
+ * the screen stays a list rather than five stacked callouts.
+ */
+export const ProposedThroughout: Story = {
+	name: "proposed throughout",
+	args: {
+		folders: HOSTNET_FOLDERS,
+		initial: {
+			inbox: { mailboxId: "mb-inbox", source: "Reserved" },
+			drafts: { mailboxId: "mb-concepten", source: "Proposed" },
+			sent: { mailboxId: "mb-sent-messages", source: "Proposed" },
+			archive: { mailboxId: "mb-archive", source: "Proposed" },
+			junk: { mailboxId: "mb-spam", source: "Proposed" },
+			trash: { mailboxId: "mb-deleted", source: "Proposed" },
+		},
+	},
+};
+
 /**
  * `Stale` — the folder the user chose is gone from the mail server. The one row
  * representing a broken decision, so it is a callout with its repair rather

package/src/components/role-appointment-list.tsx

@@ -1,5 +1,5 @@
 import { Check, Folder } from "lucide-react";
-import { useId, useRef, useState } from "react";
+import { useEffect, useId, useRef, useState } from "react";
 import { folderLeaf } from "../lib/folder-tree.js";
 import { Banner } from "./banner.js";
 import { Button } from "./button.js";
@@ -119,6 +119,7 @@ function RoleAppointmentRow({
 }: RoleAppointmentRowProps) {
 	const [draftName, setDraftName] = useState(displayName);
 	const selectRef = useRef<HTMLSelectElement>(null);
+	const confirmingProposal = useRef(false);
 	const subtitleId = useId();
 	const { mailboxId, source, staleFolderPath } = appointment;
 	const appointed = folders.find((f) => f.mailboxId === mailboxId) ?? null;
@@ -126,6 +127,12 @@ function RoleAppointmentRow({
 	const renameDirty =
 		appointed != null && draftName.trim() !== displayName.trim();
 
+	useEffect(() => {
+		if (!confirmingProposal.current || source === "Proposed") return;
+		confirmingProposal.current = false;
+		selectRef.current?.focus();
+	}, [source]);
+
 	const subtitle = (() => {
 		if (source === "None") {
 			const needsOne = role === "trash" ? " Deleting mail needs one." : "";
@@ -194,6 +201,19 @@ function RoleAppointmentRow({
 						</option>
 					))}
 				</Select>
+				{source === "Proposed" && appointed && (
+					<Button
+						variant="secondary"
+						size="sm"
+						className="shrink-0"
+						onClick={() => {
+							confirmingProposal.current = true;
+							onAppoint(role, appointed.mailboxId);
+						}}
+					>
+						{`Set as ${label}`}
+					</Button>
+				)}
 				{appointed && (
 					<>
 						<Input

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

@@ -12,17 +12,25 @@
  * need a real `document`/`window`/`PointerEvent`, which `renderToString`
  * (the pattern used elsewhere in this repo for presentational components)
  * cannot exercise.
+ *
+ * The clock is mocked. Every timing assertion here is about one boundary —
+ * the press crossed the threshold, or it ended first — and racing that
+ * boundary against a wall clock on a loaded runner turns a passing test red
+ * (#645). Time only moves when `advance` moves it.
  */
 
 import "@remit/test-dom";
 import assert from "node:assert/strict";
-import { afterEach, beforeEach, describe, it } from "node:test";
+import { afterEach, beforeEach, describe, it, mock } from "node:test";
 import { act, createElement } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { useLongPress } from "./use-long-press.js";
 
 const THRESHOLD = 40;
 
+/** Past react-aria's own teardown of its transient post-pointerup contextmenu listener. */
+const AFTER_ARIA_CONTEXTMENU_TEARDOWN = 100;
+
 let container: HTMLElement;
 let root: Root;
 
@@ -106,17 +114,27 @@ function pointerCancel(row: Element) {
 	row.dispatchEvent(new PointerEvent("pointercancel", { bubbles: true }));
 }
 
-function wait(ms: number) {
-	return act(() => new Promise((resolve) => setTimeout(resolve, ms)));
+function advance(ms: number) {
+	return act(() => {
+		mock.timers.tick(ms);
+	});
 }
 
 beforeEach(() => {
 	container = document.getElementById("root") as unknown as HTMLElement;
 	container.innerHTML = "";
 	root = createRoot(container);
+	mock.timers.enable({ apis: ["setTimeout"] });
 });
 
 afterEach(() => {
+	// The hook's contextmenu arming is module state bounded by a timer, and a
+	// test that leaves the finger down leaves it armed. Release the pointer so
+	// the next test starts disarmed rather than inheriting a dead timer id.
+	act(() => {
+		pointerUp();
+	});
+	mock.timers.reset();
 	act(() => {
 		root.unmount();
 	});
@@ -128,7 +146,10 @@ describe("useLongPress (react-aria wrapper)", () => {
 		const row = mount({ onLongPress: () => fired++ });
 
 		pointerDown(row);
-		await wait(THRESHOLD + 40);
+		await advance(THRESHOLD - 1);
+		assert.equal(fired, 0, "the threshold had not elapsed yet");
+
+		await advance(1);
 
 		assert.equal(fired, 1);
 	});
@@ -138,9 +159,9 @@ describe("useLongPress (react-aria wrapper)", () => {
 		const row = mount({ onLongPress: () => fired++ });
 
 		pointerDown(row);
-		await wait(THRESHOLD / 2);
+		await advance(THRESHOLD - 1);
 		pointerUp();
-		await wait(THRESHOLD + 40);
+		await advance(THRESHOLD);
 
 		assert.equal(fired, 0);
 	});
@@ -153,9 +174,9 @@ describe("useLongPress (react-aria wrapper)", () => {
 		const row = mount({ onLongPress: () => fired++ });
 
 		pointerDown(row);
-		await wait(THRESHOLD / 2);
+		await advance(THRESHOLD - 1);
 		pointerCancel(row);
-		await wait(THRESHOLD + 40);
+		await advance(THRESHOLD);
 
 		assert.equal(fired, 0);
 	});
@@ -165,7 +186,7 @@ describe("useLongPress (react-aria wrapper)", () => {
 		const row = mount({ onLongPress: () => fired++, isDisabled: true });
 
 		pointerDown(row);
-		await wait(THRESHOLD + 40);
+		await advance(THRESHOLD);
 
 		assert.equal(fired, 0);
 	});
@@ -175,7 +196,7 @@ describe("useLongPress (react-aria wrapper)", () => {
 		const row = mount({ onLongPress: () => fired++ });
 
 		pointerDown(row);
-		await wait(THRESHOLD + 40);
+		await advance(THRESHOLD);
 		assert.equal(
 			fired,
 			1,
@@ -228,7 +249,7 @@ describe("useLongPress (react-aria wrapper)", () => {
 			"the touch long-press menu is still suppressed",
 		);
 		pointerUpOn(row);
-		await wait(THRESHOLD);
+		await advance(AFTER_ARIA_CONTEXTMENU_TEARDOWN);
 
 		assert.equal(
 			dispatchContextMenu(row).defaultPrevented,
@@ -238,15 +259,15 @@ describe("useLongPress (react-aria wrapper)", () => {
 	});
 
 	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.
+		// A tap that lifts without a menu must still disarm suppression. The
+		// advance 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, so only this hook's ref decides.
 		const row = mount({ onLongPress: () => undefined });
 
 		pointerDown(row, "touch");
 		pointerUpOn(row);
-		await wait(THRESHOLD);
+		await advance(AFTER_ARIA_CONTEXTMENU_TEARDOWN);
 
 		assert.equal(dispatchContextMenu(row).defaultPrevented, false);
 	});