@remit/ui 0.0.67 → 0.0.68

package/package.json

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

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

@@ -0,0 +1,81 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import { createElement } from "react";
+import { renderToString } from "react-dom/server";
+import { FolderRow, type FolderRowProps } from "./folder-row.js";
+
+const render = (props: Partial<FolderRowProps>) =>
+	renderToString(
+		createElement(FolderRow, {
+			label: "Travel",
+			depth: 0,
+			expanded: false,
+			ariaLabel: "Move to Travel",
+			...props,
+		}),
+	);
+
+describe("FolderRow", () => {
+	it("is a tree item that carries its nesting and its label", () => {
+		const html = render({ depth: 2 });
+		assert.match(html, /<button[^>]*role="treeitem"/);
+		assert.match(html, /aria-level="3"/);
+		assert.match(html, /aria-label="Move to Travel"/);
+		assert.match(html, /aria-expanded="false"/);
+		assert.match(html, />Travel</);
+	});
+
+	it("indents by its depth and leaves a root flush", () => {
+		assert.match(render({ depth: 2 }), /width:28px/);
+		assert.doesNotMatch(render({ depth: 0 }), /style="width/);
+	});
+
+	it("turns the chevron once its children are on screen", () => {
+		assert.doesNotMatch(render({}), /rotate-90/);
+		assert.match(render({ expanded: true }), /rotate-90/);
+	});
+
+	it("checks the row that is the destination", () => {
+		const html = render({ selected: true });
+		assert.match(html, /aria-selected="true"/);
+		assert.match(html, /text-accent/);
+	});
+
+	it("leaves an unchosen row unselected and unchecked", () => {
+		const html = render({});
+		assert.match(html, /aria-selected="false"/);
+		assert.doesNotMatch(html, /text-accent/);
+	});
+
+	it("marks where the messages live now without disabling anything", () => {
+		const html = render({ current: true, currentTag: "current" });
+		assert.match(html, /aria-current="true"/);
+		assert.match(html, />current</);
+		assert.doesNotMatch(html, /disabled/);
+	});
+
+	it("renders a context branch as readable, not operable", () => {
+		const html = render({
+			context: true,
+			ariaLabel: "Travel (containing folder)",
+		});
+		assert.doesNotMatch(html, /<button/);
+		assert.match(html, /<div[^>]*role="treeitem"/);
+		assert.match(html, /aria-label="Travel \(containing folder\)"/);
+		assert.match(html, /opacity-60/);
+	});
+
+	it("insets the hairline to where the label starts", () => {
+		assert.match(render({ separated: true, depth: 1 }), /left:74px/);
+		assert.match(
+			render({ separated: true, depth: 1, context: true }),
+			/left:74px/,
+		);
+		assert.doesNotMatch(render({ depth: 1 }), /left:74px/);
+	});
+
+	it("takes its place in a roving tab order", () => {
+		assert.match(render({ tabIndex: 0 }), /tabindex="0"/);
+		assert.match(render({ tabIndex: -1 }), /tabindex="-1"/);
+	});
+});

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

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ReactNode } from "react";
+import { FolderRow } from "./folder-row.js";
+
+const meta: Meta<typeof FolderRow> = {
+	title: "Mail/FolderRow",
+	component: FolderRow,
+	parameters: { layout: "centered" },
+};
+export default meta;
+
+type Story = StoryObj<typeof FolderRow>;
+
+function List({ children }: { children: ReactNode }) {
+	return (
+		<div className="w-[320px] overflow-hidden rounded-lg border border-line bg-surface font-sans text-fg">
+			{children}
+		</div>
+	);
+}
+
+export const Closed: Story = {
+	name: "Closed",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Travel"
+				depth={0}
+				expanded={false}
+				ariaLabel="Move to Travel"
+				tabIndex={0}
+			/>
+		</List>
+	),
+};
+
+export const Open: Story = {
+	name: "Open, with its children indented under it",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Travel"
+				depth={0}
+				expanded
+				ariaLabel="Move to Travel"
+				separated
+			/>
+			<FolderRow
+				label="Hotels"
+				depth={1}
+				expanded={false}
+				ariaLabel="Move to Hotels"
+				separated
+			/>
+			<FolderRow
+				label="Flights"
+				depth={1}
+				expanded={false}
+				ariaLabel="Move to Flights"
+			/>
+		</List>
+	),
+};
+
+export const Selected: Story = {
+	name: "The destination",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Hotels"
+				depth={1}
+				expanded={false}
+				selected
+				ariaLabel="Move to Hotels"
+			/>
+		</List>
+	),
+};
+
+/** Where the messages live now: a marker, never a disabled control. */
+export const Current: Story = {
+	name: "The folder you are in",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Inbox"
+				depth={0}
+				expanded={false}
+				current
+				currentTag="current"
+				ariaLabel="Inbox (current folder)"
+			/>
+		</List>
+	),
+};
+
+/** A branch on screen only to hold the match under it: it reads, it never operates. */
+export const Context: Story = {
+	name: "A branch held open by a match below it",
+	render: () => (
+		<List>
+			<FolderRow
+				label="Travel"
+				depth={0}
+				expanded
+				context
+				ariaLabel="Travel (containing folder)"
+				separated
+			/>
+			<FolderRow
+				label="Hotels"
+				depth={1}
+				expanded={false}
+				ariaLabel="Move to Hotels"
+			/>
+		</List>
+	),
+};

package/src/components/folder-row.tsx

@@ -0,0 +1,147 @@
+import { Check, ChevronRight, Folder } from "lucide-react";
+import type { Ref } from "react";
+import { cn } from "../lib/cn.js";
+
+export const FOLDER_ROW_BASE =
+	"flex min-h-11 min-w-0 flex-1 items-center gap-2 px-3 py-2.5 text-left text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset";
+
+export const FOLDER_INDENT_STEP = 14;
+
+/**
+ * Where a row's text starts: `px-3` plus the chevron and folder icon columns
+ * with their gaps. The hairline separator is inset to it, so the line begins
+ * under the label the way a native mobile list draws it.
+ */
+export const FOLDER_ROW_TEXT_INSET = 60;
+
+export const FolderRowIndent = ({ depth }: { depth: number }) =>
+	depth > 0 ? (
+		<span
+			aria-hidden="true"
+			className="shrink-0"
+			style={{ width: depth * FOLDER_INDENT_STEP }}
+		/>
+	) : null;
+
+export const FolderRowSeparator = ({ depth }: { depth: number }) => (
+	<span
+		aria-hidden="true"
+		className="pointer-events-none absolute right-0 bottom-0 h-px bg-line"
+		style={{ left: FOLDER_ROW_TEXT_INSET + depth * FOLDER_INDENT_STEP }}
+	/>
+);
+
+export interface FolderRowProps {
+	label: string;
+	/** Indents the row and carries the nesting to `aria-level`. */
+	depth: number;
+	/** Its children are on screen. */
+	expanded: boolean;
+	/** What the row is announced as, e.g. `Move to Archive`. */
+	ariaLabel: string;
+	/** Chosen as the destination: checked, and announced as selected. */
+	selected?: boolean;
+	/**
+	 * On screen only to hold a match below it. A branch reads and never
+	 * operates, so it is neither focusable nor a target.
+	 */
+	context?: boolean;
+	/** Where the messages live now: a marker, never a disabled control. */
+	current?: boolean;
+	/** Inline tag shown on the current row, e.g. `current`. */
+	currentTag?: string;
+	/** A hairline under the label, drawn for every row but the last. */
+	separated?: boolean;
+	tabIndex?: number;
+	onActivate?: () => void;
+	onFocus?: () => void;
+	ref?: Ref<HTMLButtonElement>;
+}
+
+/**
+ * One folder in a tree: opens where you tap it, and says whether it is the
+ * destination, the folder you are in, or a branch on the way to a match.
+ */
+export const FolderRow = ({
+	label,
+	depth,
+	expanded,
+	ariaLabel,
+	selected = false,
+	context = false,
+	current = false,
+	currentTag,
+	separated = false,
+	tabIndex,
+	onActivate,
+	onFocus,
+	ref,
+}: FolderRowProps) => {
+	const chevron = (
+		<ChevronRight
+			className={cn(
+				"size-4 shrink-0 text-fg-subtle transition-transform",
+				expanded && "rotate-90",
+			)}
+			aria-hidden="true"
+		/>
+	);
+	const icon = (
+		<Folder className="size-4 shrink-0 text-fg-subtle" aria-hidden="true" />
+	);
+	if (context) {
+		return (
+			<div className="relative flex items-center">
+				{/* biome-ignore lint/a11y/useFocusableInteractive: an ancestor held on screen by a match below it — a branch, not a destination */}
+				<div
+					role="treeitem"
+					aria-level={depth + 1}
+					aria-selected={false}
+					aria-expanded={expanded}
+					aria-label={ariaLabel}
+					className={cn(FOLDER_ROW_BASE, "opacity-60")}
+				>
+					<FolderRowIndent depth={depth} />
+					{chevron}
+					{icon}
+					<span className="min-w-0 flex-1 truncate">{label}</span>
+				</div>
+				{separated && <FolderRowSeparator depth={depth} />}
+			</div>
+		);
+	}
+	return (
+		<div className="relative flex items-center">
+			<button
+				ref={ref}
+				type="button"
+				role="treeitem"
+				aria-level={depth + 1}
+				aria-selected={selected}
+				aria-expanded={expanded}
+				aria-current={current ? "true" : undefined}
+				aria-label={ariaLabel}
+				tabIndex={tabIndex}
+				onClick={onActivate}
+				onFocus={onFocus}
+				className={cn(
+					FOLDER_ROW_BASE,
+					"hover:bg-surface-raised active:bg-surface-sunken",
+					current && "text-fg-muted",
+				)}
+			>
+				<FolderRowIndent depth={depth} />
+				{chevron}
+				{icon}
+				<span className="min-w-0 flex-1 truncate">{label}</span>
+				{current && currentTag && (
+					<span className="shrink-0 text-xs text-fg-muted">{currentTag}</span>
+				)}
+				{selected && (
+					<Check className="size-4 shrink-0 text-accent" aria-hidden="true" />
+				)}
+			</button>
+			{separated && <FolderRowSeparator depth={depth} />}
+		</div>
+	);
+};

package/src/components/folder-tree-picker.create.test.ts

@@ -24,10 +24,13 @@ const folders: FolderTreeNode[] = [
 	{ id: "inbox", label: "Inbox", path: "INBOX", isCurrent: true },
 	{ id: "travel", label: "Travel", path: "Travel" },
 	{ id: "hotels", label: "Hotels", path: "Travel/Hotels" },
+	{ id: "receipts", label: "Receipts", path: "Travel/Hotels/Receipts" },
+	{ id: "flights", label: "Flights", path: "Travel/Flights" },
 	{ id: "archive", label: "Archive", path: "Archive" },
 ];
 
 let dom: JSDOM;
+const scrolledIntoView: Element[] = [];
 let container: HTMLElement;
 let root: Root;
 let act: typeof reactAct;
@@ -54,6 +57,12 @@ before(async () => {
 	(
 		globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }
 	).IS_REACT_ACT_ENVIRONMENT = true;
+	Object.defineProperty(dom.window.HTMLElement.prototype, "scrollIntoView", {
+		configurable: true,
+		value: function scrollIntoView(this: Element) {
+			scrolledIntoView.push(this);
+		},
+	});
 
 	const react = await import("react");
 	act = react.act;
@@ -68,6 +77,7 @@ after(() => {
 });
 
 beforeEach(() => {
+	scrolledIntoView.length = 0;
 	container = dom.window.document.createElement("div");
 	dom.window.document.body.append(container);
 	root = createRoot(container);
@@ -154,9 +164,13 @@ const open = async (...labels: string[]) => {
 	}
 };
 
-/** The block holding a folder's create action and any form opened from it. */
-const createBlockOf = (label: string): Element | null =>
-	byAriaLabel(`New folder inside ${label}`)?.closest('[role="none"]') ?? null;
+/**
+ * The block a folder's create action lives in — and, while the form is open,
+ * the form that took its place. Keyed on the anchor rather than the action, so
+ * it still resolves once the action has given way.
+ */
+const createBlockOf = (anchor: string): Element | null =>
+	container.querySelector(`[data-create-anchor="${anchor}"]`);
 
 const rowOf = (label: string): Element | null =>
 	byAriaLabel(`Move to ${label}`)?.closest('[role="none"]') ?? null;
@@ -229,6 +243,84 @@ describe("opening folders", () => {
 	});
 });
 
+describe("one open branch", () => {
+	it("closes the folder that was open when another opens", async () => {
+		await mount({});
+		await open("Travel");
+		assert.ok(byAriaLabel("Move to Hotels"));
+		await open("Archive");
+		assert.equal(byAriaLabel("Move to Hotels"), null);
+		assert.equal(
+			byAriaLabel("Move to Travel")?.getAttribute("aria-expanded"),
+			"false",
+		);
+		assert.equal(
+			byAriaLabel("Move to Archive")?.getAttribute("aria-expanded"),
+			"true",
+		);
+	});
+
+	it("keeps the ancestors of the folder being opened open", async () => {
+		await mount({});
+		await open("Travel", "Hotels");
+		assert.ok(byAriaLabel("Move to Receipts"));
+		assert.equal(
+			byAriaLabel("Move to Travel")?.getAttribute("aria-expanded"),
+			"true",
+		);
+		assert.equal(
+			byAriaLabel("Move to Hotels")?.getAttribute("aria-expanded"),
+			"true",
+		);
+	});
+
+	it("closes a sibling branch without closing the folder holding both", async () => {
+		await mount({});
+		await open("Travel", "Hotels");
+		await open("Flights");
+		assert.equal(byAriaLabel("Move to Receipts"), null);
+		assert.equal(
+			byAriaLabel("Move to Hotels")?.getAttribute("aria-expanded"),
+			"false",
+		);
+		assert.equal(
+			byAriaLabel("Move to Travel")?.getAttribute("aria-expanded"),
+			"true",
+		);
+	});
+
+	it("leaves one create action inside the branch that stayed open", async () => {
+		await mount({ onCreateFolder: resolving });
+		await open("Travel", "Hotels");
+		await open("Archive");
+		assert.equal(byAriaLabel("New folder inside Travel"), null);
+		assert.equal(byAriaLabel("New folder inside Hotels"), null);
+		assert.ok(byAriaLabel("New folder inside Archive"));
+	});
+});
+
+describe("create action prominence", () => {
+	it("keeps the pinned action prominent and the nested one quiet", async () => {
+		await mount({ onCreateFolder: resolving });
+		assert.equal(byAriaLabel("New folder")?.dataset.prominence, "prominent");
+		await open("Travel");
+		assert.equal(
+			byAriaLabel("New folder inside Travel")?.dataset.prominence,
+			"quiet",
+		);
+		assert.equal(byAriaLabel("New folder")?.dataset.prominence, "prominent");
+	});
+
+	it("stays the same action either way", async () => {
+		await mount({ onCreateFolder: resolving });
+		await open("Travel");
+		const pinned = byAriaLabel("New folder");
+		const nested = byAriaLabel("New folder inside Travel");
+		assert.equal(pinned?.tagName, nested?.tagName);
+		assert.equal(pinned?.textContent, nested?.textContent);
+	});
+});
+
 describe("create form anchoring", () => {
 	it("offers the action at the end of an opened folder's children", async () => {
 		await mount({ onCreateFolder: resolving });
@@ -242,7 +334,7 @@ describe("create form anchoring", () => {
 		await mount({ onCreateFolder: resolving });
 		await open("Travel");
 		await click(byAriaLabel("New folder inside Travel"));
-		assert.ok(createBlockOf("Travel")?.querySelector("input"));
+		assert.ok(createBlockOf("travel")?.querySelector("input"));
 		assert.equal(rowOf("Travel")?.querySelector("input"), null);
 	});
 
@@ -250,7 +342,7 @@ describe("create form anchoring", () => {
 		await mount({ onCreateFolder: resolving });
 		await open("Travel");
 		await click(byAriaLabel("New folder inside Travel"));
-		assert.match(createBlockOf("Travel")?.textContent ?? "", /Inside\s*Travel/);
+		assert.match(createBlockOf("travel")?.textContent ?? "", /Inside\s*Travel/);
 		assert.equal(container.querySelector("select"), null);
 	});
 
@@ -259,8 +351,8 @@ describe("create form anchoring", () => {
 		await open("Travel", "Hotels");
 		await click(byAriaLabel("New folder inside Travel"));
 		await click(byAriaLabel("New folder inside Hotels"));
-		assert.equal(createBlockOf("Travel")?.querySelector("input"), null);
-		assert.ok(createBlockOf("Hotels")?.querySelector("input"));
+		assert.equal(createBlockOf("travel")?.querySelector("input"), null);
+		assert.ok(createBlockOf("hotels")?.querySelector("input"));
 	});
 
 	it("creates at top level from the action pinned above the tree", async () => {
@@ -285,6 +377,61 @@ describe("create form anchoring", () => {
 	});
 });
 
+describe("the form takes the place of the action that opened it", () => {
+	it("replaces the pinned action", async () => {
+		await mount({ onCreateFolder: resolving });
+		await click(byAriaLabel("New folder"));
+		assert.equal(byAriaLabel("New folder"), null);
+		assert.ok(createBlockOf("top")?.querySelector("input"));
+	});
+
+	it("replaces a nested action and leaves the others alone", async () => {
+		await mount({ onCreateFolder: resolving });
+		await open("Travel", "Hotels");
+		await click(byAriaLabel("New folder inside Hotels"));
+		assert.equal(byAriaLabel("New folder inside Hotels"), null);
+		assert.ok(byAriaLabel("New folder inside Travel"));
+		assert.ok(byAriaLabel("New folder"));
+	});
+
+	it("puts the action back once the form closes", async () => {
+		await mount({ onCreateFolder: resolving });
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await click(byText("Cancel"));
+		assert.ok(byAriaLabel("New folder inside Travel"));
+	});
+});
+
+describe("an opened form is reachable", () => {
+	it("brings the whole form into view, buttons included", async () => {
+		await mount({ onCreateFolder: resolving });
+		await open("Archive");
+		await click(byAriaLabel("New folder inside Archive"));
+		const scrolled = scrolledIntoView.at(-1);
+		assert.ok(scrolled, "nothing was scrolled into view");
+		assert.ok(scrolled.contains(nameField()));
+		assert.ok(scrolled.contains(byText("Create folder") ?? null));
+		assert.ok(scrolled.contains(byText("Cancel") ?? null));
+	});
+
+	it("scrolls the list rather than the page", async () => {
+		await mount({ onCreateFolder: resolving });
+		await open("Archive");
+		await click(byAriaLabel("New folder inside Archive"));
+		const tree = container.querySelector('[role="tree"]');
+		assert.ok(tree?.contains(scrolledIntoView.at(-1) ?? null));
+	});
+
+	it("keeps room below the last row for a form opened from it", async () => {
+		await mount({ onCreateFolder: resolving });
+		assert.match(
+			container.querySelector('[role="tree"]')?.className ?? "",
+			/\bpb-\d/,
+		);
+	});
+});
+
 describe("create wait", () => {
 	it("passes the opened folder's path as the parent and selects what comes back", async () => {
 		const calls: Array<[string, string]> = [];
@@ -335,7 +482,7 @@ describe("create wait", () => {
 		await click(byText("Create folder"));
 		const alert = container.querySelector('[role="alert"]');
 		assert.equal(alert?.textContent, "The mail server refused that name.");
-		assert.ok(createBlockOf("Travel")?.querySelector("input"));
+		assert.ok(createBlockOf("travel")?.querySelector("input"));
 	});
 
 	it("says what is missing instead of going dead on an empty name", async () => {