@remit/ui 0.0.146 → 0.0.147

package/package.json

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

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

@@ -102,6 +102,12 @@ export interface FolderTreePickerProps {
 	) => Promise<FolderTreeNode>;
 	/** Escape. The picker never owns its presentation, so it cannot close itself. */
 	onCancel?: () => void;
+	/**
+	 * Takes focus on mount. A picker that opens away from where it was triggered
+	 * — a portalled popover — leaves the keyboard behind on the trigger, so Tab
+	 * walks the surrounding toolbar instead of entering the tree.
+	 */
+	autoFocusFilter?: boolean;
 	/** The provider's hierarchy separator. */
 	delimiter?: string;
 	labels?: FolderTreePickerLabels;
@@ -147,6 +153,7 @@ export const FolderTreePicker = ({
 	onCancel,
 	delimiter = "/",
 	labels,
+	autoFocusFilter = false,
 }: FolderTreePickerProps) => {
 	const text = { ...defaultLabels, ...labels };
 	const [query, setQuery] = useState("");
@@ -163,10 +170,16 @@ export const FolderTreePicker = ({
 	const [focusedIndex, setFocusedIndex] = useState(-1);
 
 	const rowRefs = useRef<Array<HTMLButtonElement | null>>([]);
+	const filterRef = useRef<HTMLInputElement>(null);
 	const roving = useRef(false);
 	const createAbort = useRef<AbortController | null>(null);
 	useEffect(() => () => createAbort.current?.abort(), []);
 
+	useEffect(() => {
+		if (!autoFocusFilter) return;
+		filterRef.current?.focus();
+	}, [autoFocusFilter]);
+
 	const trimmedQuery = query.trim().toLowerCase();
 	const ordered = useMemo(
 		() => orderFolderNodes(folders, delimiter),
@@ -413,6 +426,7 @@ export const FolderTreePicker = ({
 	return (
 		<div className="flex min-h-0 w-full min-w-0 flex-col">
 			<Input
+				ref={filterRef}
 				variant="inline"
 				className="border-b border-line px-3 py-2"
 				icon={<Search className="size-4" aria-hidden="true" />}

package/src/components/popover-menu.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Mail, MailOpen, Tag } from "lucide-react";
-import { PopoverMenu } from "./popover-menu.js";
+import { useState } from "react";
+import { PopoverMenu, PopoverMenuRow } from "./popover-menu.js";
 
 const meta: Meta<typeof PopoverMenu> = {
 	title: "Kit/PopoverMenu",
@@ -78,6 +79,50 @@ export const ManyItems: Story = {
 	},
 };
 
+function GrowingMenu() {
+	const [rows, setRows] = useState(2);
+	return (
+		<div className="flex h-screen items-end justify-end p-4">
+			<PopoverMenu
+				triggerLabel="More actions"
+				items={Array.from({ length: rows }, (_, i) => ({
+					key: `label-${i}`,
+					label: `Label ${i + 1}`,
+					icon: <Tag className="size-4" />,
+					onSelect: () => undefined,
+				}))}
+			>
+				<PopoverMenuRow
+					label="Show more"
+					onSelect={() => setRows((current) => current + 10)}
+				/>
+			</PopoverMenu>
+		</div>
+	);
+}
+
+/**
+ * A panel that grows after it has been placed — a list arriving from a fetch,
+ * a confirmation bar appearing on a pick. It stays anchored to its trigger as
+ * it grows, rather than keeping the position it was given at its opening size
+ * and running off the bottom of the screen.
+ */
+export const GrowsAfterOpening: Story = {
+	name: "Panel grows after it opens",
+	parameters: { layout: "fullscreen" },
+	render: () => <GrowingMenu />,
+	play: async ({ canvasElement }) => {
+		canvasElement
+			.querySelector<HTMLButtonElement>('[aria-label="More actions"]')
+			?.click();
+		await new Promise((resolve) => setTimeout(resolve, 60));
+		// The panel is portalled onto the body, so it is outside the canvas.
+		Array.from(document.body.querySelectorAll<HTMLButtonElement>("button"))
+			.find((button) => button.textContent?.trim() === "Show more")
+			?.click();
+	},
+};
+
 export const WithNestedPicker: Story = {
 	args: {
 		triggerLabel: "More actions",

package/src/components/popover-menu.tsx

@@ -53,8 +53,11 @@ function clampToViewport(
 /**
  * Measures the anchor and the panel's own size, then keeps the panel's fixed
  * position clamped to the viewport for as long as it is open — reset on every
- * resize and on scroll anywhere in the ancestor chain, since a fixed position
- * does not follow a scrolled anchor on its own.
+ * resize, on scroll anywhere in the ancestor chain (a fixed position does not
+ * follow a scrolled anchor on its own), and whenever the panel's own box
+ * changes. A panel placed once at the size it opened with runs off the bottom
+ * as soon as its content arrives: a loading line gives way to a full list, a
+ * confirmation bar appears on a pick, a filter shrinks it back.
  */
 function useAnchoredPlacement(
 	panelRef: RefObject<HTMLElement | null>,
@@ -92,7 +95,14 @@ function useAnchoredPlacement(
 		place();
 		window.addEventListener("resize", place);
 		window.addEventListener("scroll", place, true);
+		const panel = panelRef.current;
+		let observer: ResizeObserver | null = null;
+		if (panel && typeof ResizeObserver !== "undefined") {
+			observer = new ResizeObserver(place);
+			observer.observe(panel);
+		}
 		return () => {
+			observer?.disconnect();
 			window.removeEventListener("resize", place);
 			window.removeEventListener("scroll", place, true);
 		};
@@ -116,6 +126,11 @@ export interface PopoverMenuPortalProps {
  * page — the compose body, a card, anything with its own `overflow` — no
  * matter how high its `z-index` climbs; escaping that ancestor takes leaving
  * its DOM subtree, which only a portal does.
+ *
+ * The wrapper carries the menu layer's own `z-50`: as a body child it would
+ * otherwise stack by document order alone and lose to every fixed surface
+ * already on the page. `z-[60]` stays above it, for confirmation dialogs and
+ * error banners that must cover an open menu.
  */
 export function PopoverMenuPortal({
 	open,
@@ -127,7 +142,10 @@ export function PopoverMenuPortal({
 	const style = useAnchoredPlacement(panelRef, open, align, getAnchor);
 	if (!open) return null;
 	return createPortal(
-		<div style={style ?? { position: "fixed", visibility: "hidden" }}>
+		<div
+			className="z-50"
+			style={style ?? { position: "fixed", visibility: "hidden" }}
+		>
 			{children}
 		</div>,
 		document.body,

package/src/index.ts

@@ -493,6 +493,7 @@ export {
 	type PopoverMenuItem,
 	PopoverMenuPanel,
 	type PopoverMenuPanelProps,
+	PopoverMenuPortal,
 	type PopoverMenuProps,
 	PopoverMenuRow,
 	type PopoverMenuRowProps,