@remit/ui 0.0.66 → 0.0.67

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

@@ -11,10 +11,14 @@ import {
 const {
 	orderFolderNodes,
 	filterFolderTree,
+	collapseFolderTree,
+	queryExpandedPaths,
+	withCreateRows,
 	matchesQuery,
-	findFirstSelectable,
-	findLastSelectable,
-	findNextSelectable,
+	findFirstFocusable,
+	findLastFocusable,
+	findNextFocusable,
+	findParentRow,
 } = folderTreePickerInternals;
 
 const node = (
@@ -33,6 +37,8 @@ const folders: FolderTreeNode[] = [
 	node("trash", "Trash", "Deleted Messages"),
 ];
 
+const ordered = orderFolderNodes(folders, "/");
+
 const paths = (rows: readonly { folder: FolderTreeNode }[]): string[] =>
 	rows.map((row) => row.folder.path);
 
@@ -82,9 +88,72 @@ describe("folder ordering", () => {
 	});
 });
 
-describe("filtering", () => {
-	const ordered = orderFolderNodes(folders, "/");
+describe("collapsing", () => {
+	it("shows the top level and nothing under it", () => {
+		const rows = collapseFolderTree(ordered, new Set(), "/");
+		assert.deepEqual(paths(rows), [
+			"INBOX",
+			"Archive",
+			"Travel",
+			"Deleted Messages",
+		]);
+	});
 
+	it("reveals only the children of what is open", () => {
+		const rows = collapseFolderTree(ordered, new Set(["Travel"]), "/");
+		assert.deepEqual(paths(rows), [
+			"INBOX",
+			"Archive",
+			"Travel",
+			"Travel/Hotels",
+			"Deleted Messages",
+		]);
+	});
+
+	it("needs every ancestor open to reach a grandchild", () => {
+		assert.deepEqual(
+			paths(collapseFolderTree(ordered, new Set(["Travel/Hotels"]), "/")),
+			["INBOX", "Archive", "Travel", "Deleted Messages"],
+		);
+		assert.deepEqual(
+			paths(
+				collapseFolderTree(ordered, new Set(["Travel", "Travel/Hotels"]), "/"),
+			),
+			[
+				"INBOX",
+				"Archive",
+				"Travel",
+				"Travel/Hotels",
+				"Travel/Hotels/Receipts",
+				"Deleted Messages",
+			],
+		);
+	});
+
+	it("marks what is open on the row", () => {
+		const rows = collapseFolderTree(ordered, new Set(["Travel"]), "/");
+		assert.deepEqual(
+			rows.map((row) => row.expanded),
+			[false, false, true, false, false],
+		);
+	});
+
+	it("shows a folder whose parent is absent from the list", () => {
+		const orphaned = orderFolderNodes(
+			[
+				node("archive", "Archive", "Archive"),
+				node("apollo", "Apollo", "Work/Projects/Apollo"),
+			],
+			"/",
+		);
+		assert.deepEqual(paths(collapseFolderTree(orphaned, new Set(), "/")), [
+			"Archive",
+			"Work/Projects/Apollo",
+		]);
+	});
+});
+
+describe("filtering", () => {
 	it("matches on the label", () => {
 		assert.equal(matchesQuery(node("a", "Archive", "Archive"), "arch"), true);
 	});
@@ -121,6 +190,17 @@ describe("filtering", () => {
 		);
 	});
 
+	it("opens the ancestors a match hides behind", () => {
+		assert.deepEqual([...queryExpandedPaths(ordered, "receipts", "/")].sort(), [
+			"Travel",
+			"Travel/Hotels",
+		]);
+	});
+
+	it("opens nothing on an empty query, so the list stays as it was", () => {
+		assert.equal(queryExpandedPaths(ordered, "", "/").size, 0);
+	});
+
 	it("carries the depth the row indents by", () => {
 		const rows = filterFolderTree(ordered, "", "/");
 		assert.deepEqual(
@@ -134,38 +214,99 @@ describe("filtering", () => {
 	});
 });
 
-describe("roving focus", () => {
-	const rows = filterFolderTree(
-		orderFolderNodes(folders, "/"),
-		"receipts",
-		"/",
-	);
+describe("create rows", () => {
+	const kinds = (expanded: string[]) =>
+		withCreateRows(
+			collapseFolderTree(ordered, new Set(expanded), "/"),
+			"/",
+		).map((entry) =>
+			entry.kind === "create"
+				? `new inside ${entry.parent.path} @${entry.depth}`
+				: entry.row.folder.path,
+		);
 
-	it("skips context rows when finding the first destination", () => {
-		assert.equal(findFirstSelectable(rows), 2);
+	it("offers none while everything is closed", () => {
+		assert.deepEqual(kinds([]), [
+			"INBOX",
+			"Archive",
+			"Travel",
+			"Deleted Messages",
+		]);
 	});
 
-	it("finds the last destination", () => {
-		assert.equal(findLastSelectable(rows), 2);
+	it("puts the action after the children of the folder it belongs to", () => {
+		assert.deepEqual(kinds(["Travel"]), [
+			"INBOX",
+			"Archive",
+			"Travel",
+			"Travel/Hotels",
+			"new inside Travel @1",
+			"Deleted Messages",
+		]);
 	});
 
-	it("skips the current folder", () => {
-		const all = filterFolderTree(orderFolderNodes(folders, "/"), "", "/");
-		assert.equal(findFirstSelectable(all), 1);
-		assert.equal(findNextSelectable(all, 5, 1), 1);
-		assert.equal(findNextSelectable(all, 1, -1), 5);
+	it("closes the deepest branch first when several are open", () => {
+		assert.deepEqual(kinds(["Travel", "Travel/Hotels"]), [
+			"INBOX",
+			"Archive",
+			"Travel",
+			"Travel/Hotels",
+			"Travel/Hotels/Receipts",
+			"new inside Travel/Hotels @2",
+			"new inside Travel @1",
+			"Deleted Messages",
+		]);
 	});
 
-	it("returns -1 when nothing is selectable", () => {
-		const only = filterFolderTree(
-			orderFolderNodes([node("inbox", "Inbox", "INBOX", true)], "/"),
-			"",
-			"/",
+	it("offers the action on an open folder with no children", () => {
+		assert.deepEqual(kinds(["Archive"]), [
+			"INBOX",
+			"Archive",
+			"new inside Archive @1",
+			"Travel",
+			"Deleted Messages",
+		]);
+	});
+});
+
+describe("roving focus", () => {
+	const rows = filterFolderTree(ordered, "receipts", "/");
+
+	it("skips context rows, which are branches rather than folders to open", () => {
+		assert.equal(findFirstFocusable(rows), 2);
+		assert.equal(findLastFocusable(rows), 2);
+	});
+
+	it("reaches the current folder, which cannot be picked but can be opened", () => {
+		const all = collapseFolderTree(ordered, new Set(), "/");
+		assert.equal(findFirstFocusable(all), 0);
+		assert.equal(findNextFocusable(all, 3, 1), 0);
+		assert.equal(findNextFocusable(all, 0, -1), 3);
+	});
+
+	it("walks only what is on screen, so closed children are skipped", () => {
+		const closed = collapseFolderTree(ordered, new Set(), "/");
+		assert.equal(
+			closed[findNextFocusable(closed, 2, 1)]?.folder.path,
+			"Deleted Messages",
 		);
-		assert.equal(findFirstSelectable(only), -1);
-		assert.equal(findLastSelectable(only), -1);
-		assert.equal(findNextSelectable(only, 0, 1), -1);
-		assert.equal(findNextSelectable([], 0, 1), -1);
+		const open = collapseFolderTree(ordered, new Set(["Travel"]), "/");
+		assert.equal(
+			open[findNextFocusable(open, 2, 1)]?.folder.path,
+			"Travel/Hotels",
+		);
+	});
+
+	it("finds the parent to move focus to when a row closes", () => {
+		const open = collapseFolderTree(ordered, new Set(["Travel"]), "/");
+		assert.equal(findParentRow(open, 3, "/"), 2);
+		assert.equal(findParentRow(open, 2, "/"), -1);
+	});
+
+	it("returns -1 when there is nothing to walk", () => {
+		assert.equal(findFirstFocusable([]), -1);
+		assert.equal(findLastFocusable([]), -1);
+		assert.equal(findNextFocusable([], 0, 1), -1);
 	});
 });
 
@@ -179,17 +320,15 @@ describe("FolderTreePicker render", () => {
 			}),
 		);
 
-	it("renders the folders as a tree with a level per row", () => {
+	it("starts at the top level, with every row closed and openable", () => {
 		const html = render({});
 		assert.match(html, /role="tree"/);
-		assert.equal(html.match(/role="treeitem"/g)?.length, 6);
+		assert.equal(html.match(/role="treeitem"/g)?.length, 4);
+		assert.equal(html.match(/aria-expanded="false"/g)?.length, 4);
+		assert.doesNotMatch(html, /aria-label="Move to Hotels"/);
 		assert.match(
-			tagWith(html, 'aria-label="Move to Hotels"'),
-			/aria-level="2"/,
-		);
-		assert.match(
-			tagWith(html, 'aria-label="Move to Receipts"'),
-			/aria-level="3"/,
+			tagWith(html, 'aria-label="Move to Travel"'),
+			/aria-level="1"/,
 		);
 	});
 
@@ -217,14 +356,13 @@ describe("FolderTreePicker render", () => {
 		assert.doesNotMatch(html, /New folder/);
 	});
 
-	it("offers a create row at the top and one per folder", () => {
+	it("pins one create action above the tree and none inside a closed list", () => {
 		const html = render({
 			onCreateFolder: () =>
 				Promise.resolve(node("made", "Made", "Travel/Made")),
 		});
-		assert.match(html, /New folder<\/button>/);
-		assert.match(html, /aria-label="New folder inside Travel"/);
-		assert.match(html, /aria-label="New folder inside Inbox"/);
+		assert.equal(html.match(/aria-label="New folder"/g)?.length, 1);
+		assert.doesNotMatch(html, /aria-label="New folder inside/);
 	});
 
 	it("renders the empty state when no folder matches", () => {

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

@@ -127,8 +127,9 @@ function Picker({
 	);
 }
 
+/** The list at rest: top level only, one tap deep into anything. */
 export const Default: Story = {
-	name: "Default (browse the tree)",
+	name: "Default (collapsed to top level)",
 	render: () => <Picker />,
 };
 
@@ -198,12 +199,40 @@ const typeFolderName = (canvasElement: HTMLElement, name: string) => {
 
 const tick = () => new Promise((resolve) => setTimeout(resolve, 60));
 
+const expand = async (canvasElement: HTMLElement, ...labels: string[]) => {
+	for (const label of labels) {
+		clickAriaLabel(canvasElement, `Move to ${label}`);
+		await tick();
+	}
+};
+
+/**
+ * One tap picks the destination and opens it. The children arrive indented,
+ * with "New folder" sitting at the end of them as the last folder inside.
+ */
+export const Expanded: Story = {
+	name: "A folder opened (children and its New folder)",
+	render: () => <Picker />,
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
+	},
+};
+
+/** Three levels open at once, each with its own place to add a folder. */
+export const DeepExpansion: Story = {
+	name: "Opened three levels deep",
+	render: () => <Picker />,
+	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel", "Hotels", "Receipts");
+	},
+};
+
 /**
- * "rec" matches two folders nested three levels down. Their parents stay on
- * screen so the branch still reads as a branch — dimmed, and not a destination.
+ * "rec" matches two nested folders. Their parents open to put them on screen
+ * and read as the branches they are, not as an answer to what was typed.
  */
 export const Filtered: Story = {
-	name: "Filtered (ancestors kept for context)",
+	name: "Filtered (ancestors opened for context)",
 	render: () => <Picker />,
 	play: async ({ canvasElement }) => {
 		typeFilter(canvasElement, "rec");
@@ -214,20 +243,22 @@ export const CreateTopLevel: Story = {
 	name: "Create a top-level folder",
 	render: () => <Picker />,
 	play: async ({ canvasElement }) => {
-		clickText(canvasElement, "New folder");
+		clickAriaLabel(canvasElement, "New folder");
 		await tick();
 		typeFolderName(canvasElement, "Insurance");
 	},
 };
 
 /**
- * The row you tapped is the answer to "inside where": the form opens under it
- * and states the parent as text, so there is no second choice to make.
+ * The folder you opened is the answer to "inside where": the action sits among
+ * its children and the form states the parent as text, so there is no second
+ * choice to make.
  */
 export const CreateSubfolder: Story = {
-	name: "Create a subfolder from a row",
+	name: "Create a folder inside an opened one",
 	render: () => <Picker />,
 	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Travel");
 		clickAriaLabel(canvasElement, "New folder inside Travel");
 		await tick();
 		typeFolderName(canvasElement, "Car hire");
@@ -242,6 +273,7 @@ export const CreatePending: Story = {
 	name: "Create — waiting for the server",
 	render: () => <Picker onCreateFolder={neverResolves} />,
 	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Finance");
 		clickAriaLabel(canvasElement, "New folder inside Finance");
 		await tick();
 		typeFolderName(canvasElement, "Mortgage");
@@ -261,6 +293,7 @@ export const CreateFailed: Story = {
 		/>
 	),
 	play: async ({ canvasElement }) => {
+		await expand(canvasElement, "Finance");
 		clickAriaLabel(canvasElement, "New folder inside Finance");
 		await tick();
 		typeFolderName(canvasElement, "Mortgage");
@@ -296,7 +329,7 @@ function WizardFolderStep() {
 				<p className="px-1 text-xs text-fg-muted">
 					{chosen
 						? `Moving to ${chosen.label}.`
-						: "Browse to a folder, or make a new one where you want it."}
+						: "Tap a folder to open it, or make a new one where you want it."}
 				</p>
 				<div className="flex min-h-0 flex-1 overflow-hidden rounded-lg border border-line bg-surface">
 					<FolderTreePicker