@remit/ui 0.0.153 → 0.0.155

package/package.json

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

package/src/components/bottom-sheet.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { useOverlayScope } from "../lib/overlay-scope.js";
 
 const SNAP_MS = 320;
 const SNAP_EASE = "cubic-bezier(0.32, 0.9, 0.3, 1)";
@@ -32,6 +33,8 @@ export function BottomSheet({
 	children,
 	dismissLabel = "Dismiss",
 }: BottomSheetProps) {
+	useOverlayScope({ id: "bottom-sheet", open, answers: { back: onClose } });
+
 	const sheetRef = useRef<HTMLDivElement>(null);
 	const [height, setHeight] = useState(HEIGHT_FALLBACK);
 	const [drag, setDrag] = useState<number | null>(null);

package/src/components/confirm-dialog.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 import { cn } from "../lib/cn.js";
+import { useOverlayScope } from "../lib/overlay-scope.js";
 import { DialogBackdrop } from "./dialog-backdrop.js";
 
 export interface ConfirmDialogProps {
@@ -38,25 +39,11 @@ export const ConfirmDialog = ({
 }: ConfirmDialogProps) => {
 	const cancelRef = useRef<HTMLButtonElement>(null);
 
-	const handleKeyDown = useCallback(
-		(event: KeyboardEvent) => {
-			if (event.key === "Escape") {
-				event.preventDefault();
-				event.stopPropagation();
-				event.stopImmediatePropagation();
-				onCancel();
-			}
-		},
-		[onCancel],
-	);
-
-	useEffect(() => {
-		if (!isOpen) return;
-		// Capture phase so Esc closes the dialog before any list-level Esc
-		// handler (e.g. clearSelection) also fires on the same keystroke.
-		window.addEventListener("keydown", handleKeyDown, true);
-		return () => window.removeEventListener("keydown", handleKeyDown, true);
-	}, [isOpen, handleKeyDown]);
+	useOverlayScope({
+		id: "confirm-dialog",
+		open: isOpen,
+		answers: { back: onCancel },
+	});
 
 	// Whoever opened the dialog gets the focus back when it closes. Without this
 	// a cancelled confirmation drops focus to the body, and the control the user

package/src/components/dialog.tsx

@@ -1,5 +1,6 @@
-import { type ReactNode, useCallback, useEffect, useRef } from "react";
+import { type ReactNode, useEffect, useRef } from "react";
 import { cn } from "../lib/cn.js";
+import { useOverlayScope } from "../lib/overlay-scope.js";
 import { DialogBackdrop } from "./dialog-backdrop.js";
 
 export interface DialogProps {
@@ -27,27 +28,7 @@ export function Dialog({
 }: DialogProps) {
 	const dialogRef = useRef<HTMLDivElement>(null);
 
-	const handleKeyDown = useCallback(
-		(e: KeyboardEvent) => {
-			if (e.key !== "Escape") return;
-			// A control inside the dialog can own Escape while it has something of
-			// its own to close — an open suggestion list. Escape closes that first;
-			// the next Escape closes the dialog.
-			const focused = document.activeElement;
-			if (focused instanceof Element && focused.closest("[data-escape-owner]"))
-				return;
-			e.preventDefault();
-			e.stopImmediatePropagation();
-			onClose();
-		},
-		[onClose],
-	);
-
-	useEffect(() => {
-		if (!open) return;
-		window.addEventListener("keydown", handleKeyDown, true);
-		return () => window.removeEventListener("keydown", handleKeyDown, true);
-	}, [open, handleKeyDown]);
+	useOverlayScope({ id: "dialog", open, answers: { back: onClose } });
 
 	useEffect(() => {
 		if (!open) return;

package/src/components/folder-role.test.ts

@@ -10,18 +10,55 @@ describe("provenanceFolderLabel", () => {
 
 	it("reads a junk appointment as Spam whatever the server calls it", () => {
 		assert.equal(
-			provenanceFolderLabel({ role: "junk", providerPath: "Bulk Mail" }),
+			provenanceFolderLabel({
+				role: "junk",
+				providerPath: "Bulk Mail",
+				hierarchyDelimiter: "/",
+			}),
 			"Spam",
 		);
 	});
 
 	it("falls back to the leaf of a folder nobody appointed", () => {
 		assert.equal(
-			provenanceFolderLabel({ providerPath: "Projects/Bookkeeping" }),
+			provenanceFolderLabel({
+				providerPath: "Projects/Bookkeeping",
+				hierarchyDelimiter: "/",
+			}),
 			"Bookkeeping",
 		);
 	});
 
+	it("cuts the path on the delimiter the server reports, not on a slash", () => {
+		assert.equal(
+			provenanceFolderLabel({
+				providerPath: "INBOX.Projects.Q3",
+				hierarchyDelimiter: ".",
+			}),
+			"Q3",
+		);
+	});
+
+	it("leaves a slash alone in a folder name on a dotted server", () => {
+		assert.equal(
+			provenanceFolderLabel({
+				providerPath: "INBOX.Reading/Writing",
+				hierarchyDelimiter: ".",
+			}),
+			"Reading/Writing",
+		);
+	});
+
+	it("treats a flat namespace as one folder name", () => {
+		assert.equal(
+			provenanceFolderLabel({
+				providerPath: "Projects/Q3",
+				hierarchyDelimiter: "",
+			}),
+			"Projects/Q3",
+		);
+	});
+
 	it("refuses to label a view rather than a place", () => {
 		assert.equal(provenanceFolderLabel({ role: "all" }), undefined);
 		assert.equal(provenanceFolderLabel({ role: "flagged" }), undefined);
@@ -29,28 +66,43 @@ describe("provenanceFolderLabel", () => {
 
 	it("refuses to label Gmail's own reserved namespace", () => {
 		assert.equal(
-			provenanceFolderLabel({ providerPath: "[Gmail]/All Mail" }),
+			provenanceFolderLabel({
+				providerPath: "[Gmail]/All Mail",
+				hierarchyDelimiter: "/",
+			}),
 			undefined,
 		);
 		assert.equal(
-			provenanceFolderLabel({ providerPath: "[Gmail]/Starred" }),
+			provenanceFolderLabel({
+				providerPath: "[Gmail]/Starred",
+				hierarchyDelimiter: "/",
+			}),
 			undefined,
 		);
 	});
 
 	it("refuses the googlemail.com spelling of the same namespace", () => {
 		assert.equal(
-			provenanceFolderLabel({ providerPath: "[Google Mail]/All Mail" }),
+			provenanceFolderLabel({
+				providerPath: "[Google Mail]/All Mail",
+				hierarchyDelimiter: "/",
+			}),
 			undefined,
 		);
 		assert.equal(
-			provenanceFolderLabel({ providerPath: "[Google Mail]/Starred" }),
+			provenanceFolderLabel({
+				providerPath: "[Google Mail]/Starred",
+				hierarchyDelimiter: "/",
+			}),
 			undefined,
 		);
 	});
 
 	it("labels a user folder that merely mentions Gmail", () => {
-		assert.equal(provenanceFolderLabel({ providerPath: "Gmail" }), "Gmail");
+		assert.equal(
+			provenanceFolderLabel({ providerPath: "Gmail", hierarchyDelimiter: "/" }),
+			"Gmail",
+		);
 	});
 
 	it("has nothing to say about a folder it knows nothing about", () => {

package/src/components/folder-role.tsx

@@ -9,6 +9,7 @@ import {
 	Trash2,
 } from "lucide-react";
 import type { ReactNode } from "react";
+import { folderLeaf, folderPathSegments } from "../lib/folder-tree.js";
 
 /* ------------------------------------------------------------------ */
 /* Folder role vocabulary (RFC 032 exclusive-folder-appointment,       */
@@ -48,30 +49,28 @@ export function canonicalRoleLabel(role: FolderRole): string {
 	return ROLE_LABEL[role];
 }
 
-/**
- * Leaf segment of a provider path (`INBOX/Spam` → `Spam`). Only for the two
- * surfaces whose wire payload carries no `hierarchyDelimiter` — quarantine
- * entries and search-result provenance. Everything else: `folderLeaf`.
- */
-export function providerLeaf(providerPath: string): string {
-	const parts = providerPath.split("/");
-	return parts[parts.length - 1] || providerPath;
-}
-
 /* ------------------------------------------------------------------ */
 /* Provenance: where a search result actually lives                    */
 /* ------------------------------------------------------------------ */
 
 /**
  * The folder a search result was read from. `role` is the account's IMAP
- * special-use appointment (`junk` is `\Junk`); accounts that expose a folder
- * nobody appointed carry only a `providerPath`.
+ * special-use appointment (`junk` is `\Junk`); a folder nobody appointed a role
+ * to carries only its path.
+ *
+ * The path and the separator its own server cuts it on travel together or not
+ * at all: `INBOX.Projects.Q3` is three segments on a `.`-delimited server and a
+ * single folder name on a `/`-delimited one, so a path alone cannot be cut.
  */
-export interface ResultFolder {
-	role?: FolderRole;
-	/** Provider path as the server spells it, e.g. `Projects/Bookkeeping`. */
-	providerPath?: string;
-}
+export type ResultFolder =
+	| {
+			role?: FolderRole;
+			/** Provider path as the server spells it, e.g. `Projects/Bookkeeping`. */
+			providerPath: string;
+			/** The account's own hierarchy separator; `""` means a flat namespace. */
+			hierarchyDelimiter: string;
+	  }
+	| { role?: FolderRole; providerPath?: never; hierarchyDelimiter?: never };
 
 /**
  * Roles that name a view rather than a place a message is filed. A message in
@@ -113,8 +112,12 @@ export function provenanceFolderLabel(
 		return canonicalRoleLabel(folder.role);
 	}
 	if (!folder.providerPath) return undefined;
-	if (GMAIL_NAMESPACES.has(folder.providerPath.split("/")[0])) return undefined;
-	return providerLeaf(folder.providerPath);
+	const segments = folderPathSegments(
+		folder.providerPath,
+		folder.hierarchyDelimiter,
+	);
+	if (GMAIL_NAMESPACES.has(segments[0])) return undefined;
+	return folderLeaf(folder.providerPath, folder.hierarchyDelimiter);
 }
 
 export function roleIcon(role: FolderRole): ReactNode {

package/src/components/mobile-search-view.stories.tsx

@@ -123,7 +123,7 @@ const crossFolderMatches: SearchResult[] = [
 		subject: "Invoices for the quarter",
 		snippet: "The quarterly set, filed with the rest of the bookkeeping.",
 		date: "Jan 30",
-		folder: { providerPath: "Projects/Bookkeeping" },
+		folder: { providerPath: "Projects/Bookkeeping", hierarchyDelimiter: "/" },
 	},
 ];
 

package/src/components/overlay-escape.test.ts

@@ -0,0 +1,135 @@
+/**
+ * Escape on an open overlay closes the overlay and nothing else (#958).
+ *
+ * The window-level triage layer maps Escape to `back`, which closes the
+ * conversation or the list underneath; each of these surfaces used to let the
+ * press reach it, so one keystroke dismissed two things. They share one scoping
+ * mechanism now, and the reading here is the same for all of them: a listener on
+ * `window` never sees the key the overlay answered.
+ */
+import "@remit/test-dom";
+import assert from "node:assert/strict";
+import { afterEach, beforeEach, describe, it } from "node:test";
+import { act, createElement, type ReactNode } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { ConfirmDialog } from "./confirm-dialog.js";
+import { Dialog } from "./dialog.js";
+import { PopoverMenu } from "./popover-menu.js";
+import { SlidePanel, type SlidePanelProps } from "./slide-panel.js";
+
+let root: Root;
+let container: HTMLElement;
+let seen: string[];
+let listener: (event: KeyboardEvent) => void;
+
+beforeEach(() => {
+	container = document.getElementById("root") as unknown as HTMLElement;
+	container.innerHTML = "";
+	root = createRoot(container);
+	seen = [];
+	listener = (event) => seen.push(event.key);
+	window.addEventListener("keydown", listener);
+});
+
+afterEach(() => {
+	window.removeEventListener("keydown", listener);
+	act(() => root.unmount());
+});
+
+const render = (element: ReactNode) => {
+	act(() => root.render(element));
+};
+
+const pressEscape = () => {
+	act(() => {
+		document.body.dispatchEvent(
+			new window.KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+		);
+	});
+};
+
+/** What the overlay under test did with the press, and what leaked past it. */
+const assertScoped = (closed: number) => {
+	assert.equal(closed, 1, "the overlay did not close itself");
+	assert.deepEqual(seen, [], "the layer behind the overlay saw the same press");
+};
+
+describe("Escape is scoped to the overlay it lands on (#958)", () => {
+	it("SlidePanel closes and swallows the key", () => {
+		let closed = 0;
+		render(
+			createElement(
+				SlidePanel,
+				// createElement never folds the children argument into the props
+				// type, so a component with required children needs the cast.
+				{
+					isOpen: true,
+					onClose: () => {
+						closed++;
+					},
+					title: "Add Account",
+				} as SlidePanelProps,
+				"panel body",
+			),
+		);
+
+		pressEscape();
+
+		assertScoped(closed);
+	});
+
+	it("Dialog closes and swallows the key", () => {
+		let closed = 0;
+		render(
+			createElement(
+				Dialog,
+				{ open: true, onClose: () => closed++, title: "Folders" },
+				"dialog body",
+			),
+		);
+
+		pressEscape();
+
+		assertScoped(closed);
+	});
+
+	it("ConfirmDialog closes and swallows the key", () => {
+		let closed = 0;
+		render(
+			createElement(ConfirmDialog, {
+				isOpen: true,
+				title: "Delete 3 messages?",
+				confirmLabel: "Delete",
+				onConfirm: () => undefined,
+				onCancel: () => closed++,
+			}),
+		);
+
+		pressEscape();
+
+		assertScoped(closed);
+	});
+
+	it("PopoverMenu closes and swallows the key", () => {
+		render(
+			createElement(PopoverMenu, {
+				triggerLabel: "More actions",
+				items: [
+					{ key: "read", label: "Mark as read", onSelect: () => undefined },
+				],
+			}),
+		);
+		const trigger = container.querySelector("button") as HTMLButtonElement;
+		act(() => trigger.click());
+		assert.equal(trigger.getAttribute("aria-expanded"), "true");
+
+		pressEscape();
+
+		assert.equal(
+			trigger.getAttribute("aria-expanded"),
+			"false",
+			"the menu did not close itself",
+		);
+		assert.deepEqual(seen, [], "the layer behind the menu saw the same press");
+	});
+});

package/src/components/popover-menu.tsx

@@ -9,6 +9,7 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn.js";
+import { useOverlayScope } from "../lib/overlay-scope.js";
 import { Button } from "./button.js";
 
 /** Viewport-relative bounding box of whatever a menu opens against. */
@@ -293,6 +294,12 @@ export function PopoverMenu({
 	const containerRef = useRef<HTMLDivElement>(null);
 	const panelRef = useRef<HTMLDivElement>(null);
 
+	useOverlayScope({
+		id: "popover-menu",
+		open,
+		answers: { back: () => setOpen(false) },
+	});
+
 	useEffect(() => {
 		if (!open) return;
 		const onPointer = (event: MouseEvent) => {
@@ -304,15 +311,8 @@ export function PopoverMenu({
 				return;
 			setOpen(false);
 		};
-		const onKey = (event: KeyboardEvent) => {
-			if (event.key === "Escape") setOpen(false);
-		};
 		document.addEventListener("mousedown", onPointer);
-		document.addEventListener("keydown", onKey);
-		return () => {
-			document.removeEventListener("mousedown", onPointer);
-			document.removeEventListener("keydown", onKey);
-		};
+		return () => document.removeEventListener("mousedown", onPointer);
 	}, [open]);
 
 	if (items.length === 0 && !children) return null;

package/src/components/quarantine-entry-row.tsx

@@ -1,7 +1,8 @@
 import { Bug } from "lucide-react";
+import { folderLeaf } from "../lib/folder-tree.js";
 import { Badge } from "./badge.js";
 import { Button } from "./button.js";
-import { canonicalRoleLabel, providerLeaf } from "./folder-role.js";
+import { canonicalRoleLabel } from "./folder-role.js";
 import {
 	type QuarantineEntry,
 	quarantineSummary,
@@ -47,7 +48,7 @@ export function QuarantineEntryRow({
 						</Badge>
 					)}
 					<span className="truncate" title={entry.mailboxPath}>
-						{providerLeaf(entry.mailboxPath)}
+						{folderLeaf(entry.mailboxPath, entry.mailboxDelimiter)}
 					</span>
 					<span aria-hidden>·</span>
 					<span>{`uid ${entry.uid}`}</span>

package/src/components/quarantine-fixtures.ts

@@ -14,6 +14,7 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		uid: 40217,
 		mailboxRole: "inbox",
 		mailboxPath: "INBOX",
+		mailboxDelimiter: "/",
 		failureStage: "BodyParse",
 		failureCode: "UnreadableBody",
 		failureMessage: "multipart boundary was never closed",
@@ -42,6 +43,7 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		uid: 40219,
 		mailboxRole: "archive",
 		mailboxPath: "Archive/2026",
+		mailboxDelimiter: "/",
 		failureStage: "BodyParse",
 		failureCode: "UnknownCharset",
 		failureMessage: "declared charset is not a known encoding",
@@ -65,7 +67,9 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		// A folder the user never appointed a role to — the ordinary state of a
 		// plain folder, and the reason mailboxRole is optional.
 		mailboxRole: undefined,
-		mailboxPath: "Clients/Acme Holdings",
+		mailboxPath: "INBOX.Clients.Acme Holdings",
+		// A `.`-delimited server: the row still reads the leaf, not the path.
+		mailboxDelimiter: ".",
 		failureStage: "BodyParse",
 		failureCode: "UnreadableBody",
 		failureMessage: "stream ended before the declared body length",
@@ -91,6 +95,7 @@ export const quarantineDemoEntries: readonly QuarantineEntry[] = [
 		uid: 40263,
 		mailboxRole: "inbox",
 		mailboxPath: "INBOX",
+		mailboxDelimiter: "/",
 		failureStage: "BodyParse",
 		failureCode: "UnreadableBody",
 		failureMessage: "connection closed mid-body",

package/src/components/quarantine-report.ts

@@ -78,6 +78,12 @@ export interface QuarantineEntry {
 	mailboxRole?: FolderRole;
 	/** The user's own folder name. Shown on screen, withheld from the report. */
 	mailboxPath: string;
+	/**
+	 * The separator that folder's own server cuts its paths on, so the row can
+	 * show the leaf. Resolved from the account's mailbox list — the quarantine
+	 * record itself carries no delimiter. `""` means a flat namespace.
+	 */
+	mailboxDelimiter: string;
 	failureStage: QuarantineFailureStage;
 	failureCode: QuarantineFailureCode;
 	/** Parser error text. Shown on screen, never in the report. */

package/src/components/quarantine-section.render.test.ts

@@ -44,6 +44,19 @@ describe("QuarantineSection", () => {
 		assert.match(html, /Acme Holdings/);
 	});
 
+	it("shows the folder name of a dotted path, not the whole path", () => {
+		const html = render([
+			{
+				...base,
+				mailboxPath: "INBOX.Projects.Q3",
+				mailboxDelimiter: ".",
+				mailboxRole: undefined,
+			},
+		]);
+		assert.match(html, />Q3</);
+		assert.doesNotMatch(html, />INBOX\.Projects\.Q3</);
+	});
+
 	it("offers reporting as the only per-row action", () => {
 		const html = render([base]);
 		assert.match(html, /Cut a bug/);

package/src/components/rich-text-correction-menu.tsx

@@ -1,6 +1,7 @@
 import { BookPlus, EyeOff } from "lucide-react";
 import { useEffect, useRef } from "react";
 import { DESKTOP_MEDIA_QUERY } from "../lib/layout-breakpoints.js";
+import { useOverlayScope } from "../lib/overlay-scope.js";
 import { useRovingFocus } from "../lib/roving-focus.js";
 import { useMatchMedia } from "../lib/use-match-media.js";
 import { BottomSheet } from "./bottom-sheet.js";
@@ -135,33 +136,29 @@ export const RichTextCorrectionMenu = ({
 		panelRef.current?.focus();
 	}, []);
 
+	// Escape and every other shortcut go through the shared overlay stack, which
+	// dismisses the menu and leaves nothing for the layer behind it: the panel's
+	// own `onKeyDown` only fires while the panel actually holds focus, and a focus
+	// call that lands a beat later than the browser is ready for is not something
+	// to depend on. The phone branch rides `BottomSheet`'s scope instead.
+	useOverlayScope({
+		id: "correction-menu",
+		open: desktop,
+		answers: { back: () => onDismiss(true) },
+	});
+
 	// A press rather than a click, and a pointer press rather than a mouse one:
 	// the tap that opened this menu is followed by the browser's compatibility
 	// mouse events, which a `mousedown` listener reads as a press somewhere else
 	// and closes the menu on the way up.
-	//
-	// Escape is caught here too, at the document rather than the panel: the
-	// panel takes focus on mount so the panel's own `onKeyDown` ordinarily
-	// gets there first and this one never fires (its `stopPropagation` keeps
-	// the keydown from reaching here), but a focus call that lands a beat
-	// later than the browser is ready for is not something to depend on —
-	// this is what actually closes the menu when that happens.
 	useEffect(() => {
 		if (!desktop) return;
 		const onPointer = (event: Event) => {
 			if (panelRef.current?.contains(event.target as Node)) return;
 			onDismiss(false);
 		};
-		const onDocumentKeyDown = (event: KeyboardEvent) => {
-			if (event.key !== "Escape") return;
-			onDismiss(true);
-		};
 		document.addEventListener("pointerdown", onPointer);
-		document.addEventListener("keydown", onDocumentKeyDown);
-		return () => {
-			document.removeEventListener("pointerdown", onPointer);
-			document.removeEventListener("keydown", onDocumentKeyDown);
-		};
+		return () => document.removeEventListener("pointerdown", onPointer);
 	}, [desktop, onDismiss]);
 
 	/**

package/src/components/search-chip-input.tsx

@@ -1,6 +1,7 @@
 import { Search, X } from "lucide-react";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { resolveAgainstOverlays } from "../lib/overlay-scope.js";
 import type { ComboboxProps } from "../lib/use-suggest-list.js";
 import {
 	type ChipFocusTarget,
@@ -323,6 +324,10 @@ export const SearchChipInput = ({
 				return;
 			}
 			if (isEditableTarget(event.target)) return;
+			// The field is behind whatever is on top of it: an open overlay either
+			// answers the key or contains it, and focusing a field under a modal is
+			// neither (#959).
+			if (resolveAgainstOverlays("focusSearch")) return;
 			event.preventDefault();
 			inputRef.current?.focus();
 		};

package/src/components/search-results.render.test.ts

@@ -235,7 +235,10 @@ describe("SearchResults provenance labels", () => {
 							{
 								...result,
 								id: "c1",
-								folder: { providerPath: "Projects/Books" },
+								folder: {
+									providerPath: "Projects/Books",
+									hierarchyDelimiter: "/",
+								},
 							},
 						],
 					},
@@ -274,7 +277,10 @@ describe("SearchResults provenance labels", () => {
 							{
 								...result,
 								id: "v3",
-								folder: { providerPath: "[Gmail]/Important" },
+								folder: {
+									providerPath: "[Gmail]/Important",
+									hierarchyDelimiter: "/",
+								},
 							},
 						],
 					},

package/src/components/search-results.stories.tsx

@@ -112,7 +112,7 @@ const crossFolderMatches: SearchResult[] = [
 		subject: "Invoices for the quarter",
 		snippet: "The quarterly set, filed with the rest of the bookkeeping.",
 		date: "Jan 30",
-		folder: { providerPath: "Projects/Bookkeeping" },
+		folder: { providerPath: "Projects/Bookkeeping", hierarchyDelimiter: "/" },
 	},
 ];
 
@@ -355,7 +355,10 @@ export const VirtualFoldersGoUnlabelled: Story = {
 						{
 							...topMatches[2],
 							id: "v3",
-							folder: { providerPath: "[Gmail]/Important" },
+							folder: {
+								providerPath: "[Gmail]/Important",
+								hierarchyDelimiter: "/",
+							},
 						},
 						...crossFolderMatches.slice(0, 1),
 					],