@remit/ui 0.0.71 → 0.0.72

package/package.json

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

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

@@ -158,6 +158,31 @@ const typeName = async (value: string) => {
 	});
 };
 
+const filterField = (): HTMLInputElement | null =>
+	container.querySelector('input[type="search"]');
+
+const typeFilter = async (value: string) => {
+	const input = filterField();
+	assert.ok(input, "filter field not rendered");
+	const setter = Object.getOwnPropertyDescriptor(
+		dom.window.HTMLInputElement.prototype,
+		"value",
+	)?.set;
+	await act(async () => {
+		setter?.call(input, value);
+		input.dispatchEvent(new dom.window.Event("input", { bubbles: true }));
+	});
+};
+
+const press = async (target: Element | null | undefined, key: string) => {
+	assert.ok(target, "control not rendered");
+	await act(async () => {
+		target.dispatchEvent(
+			new dom.window.KeyboardEvent("keydown", { key, bubbles: true }),
+		);
+	});
+};
+
 const open = async (...labels: string[]) => {
 	for (const label of labels) {
 		await click(byAriaLabel(`Move to ${label}`));
@@ -529,32 +554,131 @@ describe("create wait", () => {
 	});
 });
 
-describe("filter and keyboard", () => {
-	const filterField = (): HTMLInputElement | null =>
-		container.querySelector('input[type="search"]');
-
-	const typeFilter = async (value: string) => {
-		const input = filterField();
-		assert.ok(input);
-		const setter = Object.getOwnPropertyDescriptor(
-			dom.window.HTMLInputElement.prototype,
-			"value",
-		)?.set;
-		await act(async () => {
-			setter?.call(input, value);
-			input.dispatchEvent(new dom.window.Event("input", { bubbles: true }));
+describe("the form's keys stay in the form", () => {
+	it("takes a space in the name without acting on the tree", async () => {
+		const selected: string[] = [];
+		await mount({
+			onSelect: (id) => selected.push(id),
+			onCreateFolder: resolving,
 		});
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await press(nameField(), " ");
+		assert.deepEqual(selected, ["travel"]);
+		assert.ok(byAriaLabel("Move to Hotels"));
+		assert.ok(createBlockOf("travel")?.querySelector("input"));
+	});
+
+	it("closes the form on Escape and leaves the picker open", async () => {
+		let cancelled = 0;
+		await mount({
+			onCancel: () => {
+				cancelled += 1;
+			},
+			onCreateFolder: resolving,
+		});
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await press(nameField(), "Escape");
+		assert.equal(nameField(), null);
+		assert.equal(cancelled, 0);
+	});
+});
+
+describe("a draft outlives the rows under it", () => {
+	const startDraft = async (props: PickerProps) => {
+		await mount(props);
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await typeName("Car hire");
 	};
 
-	const press = async (target: Element | null | undefined, key: string) => {
-		assert.ok(target, "control not rendered");
+	it("keeps the form and the typed name when another folder opens", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await open("Archive");
+		assert.equal(nameField()?.value, "Car hire");
+		assert.ok(createBlockOf("top")?.querySelector("input"));
+		assert.match(container.textContent ?? "", /Inside\s*Travel/);
+	});
+
+	it("keeps the form when its own folder is closed again", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await open("Travel");
+		assert.equal(byAriaLabel("Move to Hotels"), null);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("keeps the form when the filter empties the list", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await typeFilter("zzz");
+		assert.match(container.textContent ?? "", /No folders match "zzz"/);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("puts the form back among the children when its folder opens again", async () => {
+		await startDraft({ onCreateFolder: resolving });
+		await open("Archive");
+		await open("Travel");
+		assert.ok(createBlockOf("travel")?.querySelector("input"));
+		assert.equal(createBlockOf("top")?.querySelector("input"), null);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("states a failure that lands after the folder it was opened in closed", async () => {
+		let fail: ((error: Error) => void) | undefined;
+		await startDraft({
+			onCreateFolder: () =>
+				new Promise<FolderTreeNode>((_resolve, reject) => {
+					fail = reject;
+				}),
+		});
+		await click(byText("Create folder"));
+		await open("Archive");
+		assert.ok(byText("Creating folder…"), "the wait went off screen");
 		await act(async () => {
-			target.dispatchEvent(
-				new dom.window.KeyboardEvent("keydown", { key, bubbles: true }),
-			);
+			fail?.(new Error("The mail server refused that name."));
 		});
-	};
+		assert.equal(
+			container.querySelector('[role="alert"]')?.textContent,
+			"The mail server refused that name.",
+		);
+		assert.equal(nameField()?.value, "Car hire");
+	});
+
+	it("keeps the wait on screen when the filter clears the list", async () => {
+		await startDraft({
+			onCreateFolder: () => new Promise<FolderTreeNode>(() => undefined),
+		});
+		await click(byText("Create folder"));
+		await typeFilter("zzz");
+		assert.ok(byText("Creating folder…"), "the wait went off screen");
+	});
+
+	it("selects what comes back from a form the list moved under", async () => {
+		const selected: string[] = [];
+		let confirm: ((folder: FolderTreeNode) => void) | undefined;
+		await mount({
+			onSelect: (id) => selected.push(id),
+			onCreateFolder: () =>
+				new Promise<FolderTreeNode>((resolve) => {
+					confirm = resolve;
+				}),
+		});
+		await open("Travel");
+		await click(byAriaLabel("New folder inside Travel"));
+		await typeName("Car hire");
+		await click(byText("Create folder"));
+		await open("Archive");
+		assert.ok(byText("Creating folder…"), "the wait went off screen");
+		await act(async () => {
+			confirm?.(created("Car hire", "Travel"));
+		});
+		assert.deepEqual(selected, ["travel", "archive", "made"]);
+		assert.equal(nameField(), null);
+	});
+});
 
+describe("filter and keyboard", () => {
 	const focused = (): string | null =>
 		dom.window.document.activeElement?.getAttribute("aria-label") ?? null;
 
@@ -587,6 +711,12 @@ describe("filter and keyboard", () => {
 		assert.match(container.textContent ?? "", /No folders match "zzz"/);
 	});
 
+	it("says the list is empty rather than blaming the filter", async () => {
+		await mount({ folders: [] });
+		await typeFilter("zzz");
+		assert.match(container.textContent ?? "", /No folders to show/);
+	});
+
 	it("picks and opens the focused row on Enter", async () => {
 		const selected: string[] = [];
 		await mount({ onSelect: (id) => selected.push(id) });

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

@@ -93,9 +93,10 @@ describe("FolderTreePicker render", () => {
 		);
 	});
 
-	it("renders the empty state when no folder matches", () => {
+	it("says the list is empty when there is nothing to list", () => {
 		const html = render({ folders: [] });
-		assert.match(html, /No folders match/);
+		assert.match(html, /No folders to show/);
+		assert.doesNotMatch(html, /No folders match/);
 	});
 
 	it("applies caller-supplied labels", () => {

package/src/components/folder-tree-picker.stories.tsx

@@ -160,6 +160,7 @@ export const LongList: Story = {
 	render: () => <Picker options={longFolders} />,
 };
 
+/** An account with nothing to list: the message states that, not a filter. */
 export const Empty: Story = {
 	name: "No folders",
 	render: () => <Picker options={[]} />,
@@ -309,6 +310,46 @@ export const CreateFailed: Story = {
 	},
 };
 
+/**
+ * Looking somewhere else does not throw the draft away: opening another folder
+ * closes the branch the form was in, and the form is pinned above the tree with
+ * the typed name and the folder it will be made in.
+ */
+export const CreateWhileTheListMoves: Story = {
+	name: "Create — kept while the list moves",
+	render: () => <Picker />,
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
+		clickAriaLabel(canvasElement, "New folder inside Travel");
+		await tick();
+		typeFolderName(canvasElement, "Car hire");
+		await tick();
+		await expand(canvasElement, "Finance");
+	},
+};
+
+/** A failure is stated where the user is looking, whatever the list has done. */
+export const CreateFailedAfterTheListMoved: Story = {
+	name: "Create — failed after the list moved",
+	render: () => (
+		<Picker
+			onCreateFolder={rejects(
+				"The mail server refused the folder name. Try another one.",
+			)}
+		/>
+	),
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
+		clickAriaLabel(canvasElement, "New folder inside Travel");
+		await tick();
+		typeFolderName(canvasElement, "Car hire");
+		await tick();
+		clickText(canvasElement, "Create folder");
+		await tick();
+		await expand(canvasElement, "Finance");
+	},
+};
+
 const wizardSteps: StepId[] = ["match", "folder", "rule", "review"];
 
 function WizardFolderStep() {

package/src/components/folder-tree-picker.tsx

@@ -53,6 +53,8 @@ export interface FolderTreePickerLabels {
 	/** Suffix announced for an ancestor held on screen by a match below it. */
 	contextSuffix?: string;
 	emptyMessage?: (query: string) => string;
+	/** Shown when there is no folder to list at all, filter or no filter. */
+	noFolders?: string;
 	/** Accessible label for a selectable row, e.g. `Move to X`. */
 	optionLabel?: (label: string) => string;
 	newFolder?: string;
@@ -110,6 +112,7 @@ const defaultLabels: Required<FolderTreePickerLabels> = {
 	currentTag: "current",
 	contextSuffix: "(containing folder)",
 	emptyMessage: (query) => `No folders match "${query}"`,
+	noFolders: "No folders to show",
 	optionLabel: (label) => `Move to ${label}`,
 	newFolder: "New folder",
 	newSubfolder: (label) => `New folder inside ${label}`,
@@ -282,6 +285,11 @@ export const FolderTreePicker = ({
 
 	const handleTreeKeyDown = useCallback(
 		(event: ReactKeyboardEvent<HTMLElement>) => {
+			// The create form sits inside the tree, so what is typed into its name
+			// field reaches here too. Only a row's own keys move the tree.
+			const source = event.target;
+			if (!(source instanceof Element)) return;
+			if (!source.closest('[role="treeitem"]')) return;
 			const move = (next: number) => {
 				event.preventDefault();
 				roving.current = true;
@@ -337,6 +345,14 @@ export const FolderTreePicker = ({
 		[rows, focusedIndex, delimiter, activateRow, setExpanded, onCancel],
 	);
 
+	const draftAnchorOnScreen =
+		draft !== null &&
+		draft.anchorId !== null &&
+		(displayRows?.some(
+			(entry) => entry.kind === "create" && entry.parent.id === draft.anchorId,
+		) ??
+			false);
+
 	const draftForm = draft && (
 		<NewFolderForm
 			parentLabel={draft.parentLabel}
@@ -414,8 +430,10 @@ export const FolderTreePicker = ({
 			/>
 
 			{onCreateFolder && (
+				// Closing or filtering away the folder a draft was opened in leaves
+				// the form here instead of unmounting it mid-type or mid-create.
 				<div className="shrink-0 border-b border-line" data-create-anchor="top">
-					{draft?.anchorId === null ? (
+					{draft && !draftAnchorOnScreen ? (
 						draftForm
 					) : (
 						<NewFolderAction
@@ -430,7 +448,7 @@ export const FolderTreePicker = ({
 
 			{rows.length === 0 ? (
 				<p className="px-3 py-3 text-sm text-fg-muted" aria-live="polite">
-					{text.emptyMessage(query)}
+					{folders.length === 0 ? text.noFolders : text.emptyMessage(query)}
 				</p>
 			) : (
 				// A flattened tree: `aria-level` carries the nesting the indentation