@parallelworks/ui 0.36.0 → 0.38.0

package/dist/list/RowContextMenu.d.ts

@@ -24,15 +24,24 @@ export type RowMenuItem = {
         text: string;
         label: string;
     };
+    /** More text a menu's search matches, beside the label. */
+    keywords?: string;
 } | {
     kind: 'submenu';
     label: string;
     icon?: ReactNode;
     items: RowMenuItem[];
+    search?: MenuSearch | undefined;
 } | {
     kind: 'divider';
 };
-export type OpenMenu = (x: number, y: number, items: RowMenuItem[], onClose?: () => void) => void;
+/** A field atop a menu that narrows it, submenus included, to the items it matches. */
+export interface MenuSearch {
+    placeholder: string;
+    /** Shown when nothing matches. */
+    empty: string;
+}
+export type OpenMenu = (x: number, y: number, items: RowMenuItem[], onClose?: () => void, search?: MenuSearch) => void;
 /** The shared shape every entity action hook's per-row actions boil down to.
  * Each hook's bespoke `*RowAction` type is structurally assignable to this. */
 export interface RowAction {

package/dist/list/RowContextMenu.js

@@ -14,7 +14,7 @@ import { keyedByContent } from "../components/keys.js";
 import { TOOLTIP_ID } from "../components/Tooltip.js";
 import cx from "classnames";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 //#region src/list/RowContextMenu.tsx
 /** Converts a single row action to a menu item: a `to` makes it a link, otherwise an action. */
@@ -74,14 +74,15 @@ function assembleRowMenu({ lead = [], actions, exclude, order, trailing = ["dele
 function useRowMenu(zClassName = "z-50") {
 	const [menu, setMenu] = useState(null);
 	const onCloseRef = useRef(void 0);
-	const openMenu = useCallback((x, y, items, onClose) => {
+	const openMenu = useCallback((x, y, items, onClose, search) => {
 		if (items.length > 0) {
 			onCloseRef.current?.();
 			onCloseRef.current = onClose;
 			setMenu({
 				x,
 				y,
-				items
+				items,
+				search
 			});
 		}
 	}, []);
@@ -104,9 +105,12 @@ function useRowMenuActive(openMenu) {
 	const [active, setActive] = useState(false);
 	return {
 		active,
-		openMenu: useCallback((x, y, items) => {
+		openMenu: useCallback((x, y, items, onClose, search) => {
 			setActive(true);
-			openMenu(x, y, items, () => setActive(false));
+			openMenu(x, y, items, () => {
+				setActive(false);
+				onClose?.();
+			}, search);
 		}, [openMenu])
 	};
 }
@@ -120,22 +124,46 @@ function rowContextMenuProps(openMenu, items) {
 function RowContextMenu({ state, onClose, zClassName }) {
 	const ref = useRef(null);
 	const [pos, setPos] = useState(null);
+	const opener = useRef(null);
+	const wasOpen = useRef(false);
 	useLayoutEffect(() => {
-		if (!state || !ref.current) {
+		const menu = ref.current;
+		if (!state || !menu) {
 			setPos(null);
+			wasOpen.current = false;
 			return;
 		}
-		const { width, height } = ref.current.getBoundingClientRect();
-		const pad = 8;
-		const top = height > window.innerHeight - pad - state.y && state.y - height - pad >= 0 ? state.y - height : Math.min(state.y, window.innerHeight - height - pad);
+		if (!wasOpen.current) {
+			opener.current = document.activeElement;
+			wasOpen.current = true;
+		}
+		const { width, height } = menu.getBoundingClientRect();
+		const pad = MENU_EDGE;
+		const openUp = height > window.innerHeight - pad - state.y && state.y - height - pad >= 0;
+		const top = Math.max(pad, openUp ? state.y - height : Math.min(state.y, window.innerHeight - height - pad));
 		setPos({
 			left: Math.max(pad, Math.min(state.x, window.innerWidth - width - pad)),
-			top: Math.max(pad, top)
+			top,
+			maxHeight: (openUp ? state.y : window.innerHeight - pad) - top
 		});
 	}, [state]);
+	const placed = pos !== null;
+	useEffect(() => {
+		const menu = ref.current;
+		if (!placed || !menu) return;
+		const from = opener.current;
+		const target = menu.querySelector(":scope > div > input[type=\"search\"]") ?? (focusVisible(from) ? menu.querySelector(MENU_ITEMS) : null);
+		if (!target) return;
+		target.focus({ preventScroll: true });
+		return () => {
+			if (from instanceof HTMLElement && document.activeElement === document.body) from.focus({ preventScroll: true });
+		};
+	}, [placed, state]);
 	useEffect(() => {
 		if (!state) return;
-		const close = () => onClose();
+		const close = (e) => {
+			if (!(e.target instanceof Node && ref.current?.contains(e.target))) onClose();
+		};
 		const onKey = (e) => {
 			if (e.key === "Escape") onClose();
 		};
@@ -178,23 +206,116 @@ function RowContextMenu({ state, onClose, zClassName }) {
 		children: /* @__PURE__ */ jsx("div", {
 			ref,
 			role: "menu",
-			className: "absolute min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg backdrop-blur-xl",
+			className: "absolute flex min-w-44 flex-col rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg backdrop-blur-xl",
 			style: {
 				left: pos?.left ?? state.x,
 				top: pos?.top ?? state.y,
+				maxHeight: state.search ? pos?.maxHeight : void 0,
 				visibility: pos ? "visible" : "hidden"
 			},
+			onKeyDown: (e) => {
+				const step = {
+					ArrowDown: 1,
+					ArrowUp: -1
+				}[e.key];
+				if (!step || e.defaultPrevented || !ref.current) return;
+				e.preventDefault();
+				const items = [...ref.current.querySelectorAll(MENU_ITEMS)];
+				const at = items.indexOf(document.activeElement);
+				focusItem(items[((at < 0 ? step > 0 ? 0 : items.length - 1 : at + step) + items.length) % items.length]);
+			},
 			children: /* @__PURE__ */ jsx(MenuItemList, {
 				items: state.items,
+				search: state.search,
 				onClose,
 				side
 			})
 		})
 	}), document.body);
 }
+var MENU_EDGE = 8;
+function focusItem(item) {
+	item?.focus({ preventScroll: true });
+	item?.scrollIntoView?.({ block: "nearest" });
+}
+function SubmenuPanel({ side, panelRef, searchable, children }) {
+	const [place, setPlace] = useState(null);
+	useLayoutEffect(() => {
+		const rect = panelRef.current?.getBoundingClientRect();
+		if (rect) {
+			const bottom = window.innerHeight - MENU_EDGE;
+			const lift = Math.max(0, Math.min(rect.bottom - bottom, rect.top - MENU_EDGE));
+			setPlace({
+				lift,
+				maxHeight: bottom - (rect.top - lift)
+			});
+		}
+	}, [panelRef]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: panelRef,
+		className: cx("absolute -top-1 z-10 flex min-w-44 flex-col rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg", side === "left" ? "right-full" : "left-full"),
+		style: place ? {
+			...searchable ? { maxHeight: place.maxHeight } : {},
+			...place.lift > 0 ? { transform: `translateY(-${place.lift}px)` } : {}
+		} : void 0,
+		children
+	});
+}
+var MENU_ITEMS = "button:not([disabled]), a[href]";
+function focusVisible(element) {
+	try {
+		return !!element?.matches(":focus-visible");
+	} catch {
+		return false;
+	}
+}
 var MENU_ITEM_CLASSES = "flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-[13px] hover:bg-(--theme-muted-panel-bg) transition-colors cursor-pointer [&>svg]:h-4 [&>svg]:w-4 [&>svg]:shrink-0";
-function MenuItemList({ items, onClose, side }) {
-	return keyedByContent(items, (it) => it.kind === "divider" ? "divider" : it.label).map(({ key, item }) => item.kind === "divider" ? /* @__PURE__ */ jsx("div", {
+function matchesSearch(item, needle) {
+	const keywords = item.kind === "action" ? item.keywords ?? "" : "";
+	return `${item.label} ${keywords}`.toLowerCase().includes(needle);
+}
+function searchMatches(items, needle) {
+	const found = /* @__PURE__ */ new Map();
+	const walk = (list) => {
+		for (const item of list) if (item.kind === "submenu") walk(item.items);
+		else if (item.kind !== "divider" && !found.has(item.label) && matchesSearch(item, needle)) found.set(item.label, item);
+	};
+	walk(items);
+	return [...found.values()];
+}
+function MenuSearchField({ search, query, onQuery, onEnter }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "px-2 pt-0.5 pb-1",
+		children: /* @__PURE__ */ jsx("input", {
+			type: "search",
+			"aria-label": search.placeholder,
+			placeholder: search.placeholder,
+			value: query,
+			onChange: (e) => onQuery(e.target.value),
+			onKeyDown: (e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					onEnter();
+				} else if (e.key === "ArrowDown") {
+					e.preventDefault();
+					focusItem(e.currentTarget.parentElement?.parentElement?.querySelector(MENU_ITEMS));
+				}
+			},
+			className: "w-full rounded-md border border-(--theme-border) bg-(--theme-muted-panel-bg) px-2 py-1 text-[13px] text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:border-(--theme-element) focus:outline-none"
+		})
+	});
+}
+function MenuItemList({ items, search, onClose, side }) {
+	const [query, setQuery] = useState("");
+	const needle = query.trim().toLowerCase();
+	const searching = !!search && !!needle;
+	const shown = searching ? searchMatches(items, needle) : items;
+	const run = useRunItem(onClose);
+	const pickFirst = () => {
+		const first = shown.find((item) => item.kind === "action" && !item.disabled);
+		if (first?.kind === "action") run(first);
+	};
+	const rows = keyedByContent(shown, (it) => it.kind === "divider" ? "divider" : it.label).map(({ key, item }) => item.kind === "divider" ? /* @__PURE__ */ jsx("div", {
 		"aria-hidden": "true",
 		className: "my-1 h-px bg-(--theme-border)"
 	}, key) : /* @__PURE__ */ jsx(MenuRow, {
@@ -202,13 +323,30 @@ function MenuItemList({ items, onClose, side }) {
 		onClose,
 		side
 	}, key));
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		search && /* @__PURE__ */ jsx(MenuSearchField, {
+			search,
+			query,
+			onQuery: setQuery,
+			onEnter: pickFirst
+		}),
+		searching ? /* @__PURE__ */ jsx("div", {
+			className: "max-h-[min(20rem,60vh)] min-h-0 overflow-y-auto",
+			children: rows
+		}) : rows,
+		searching && shown.length === 0 && /* @__PURE__ */ jsx("div", {
+			className: "px-3 py-1.5 text-[13px] text-(--theme-muted-text-color)",
+			children: search.empty
+		})
+	] });
 }
 function MenuRow({ item, onClose, side }) {
 	const Link = useLink();
-	const notify = useNotify();
-	const { list: t } = useStrings();
+	const run = useRunItem(onClose);
 	const [openSub, setOpenSub] = useState(false);
 	const closeTimer = useRef(void 0);
+	const panel = useRef(null);
+	const hovered = useRef(false);
 	if (item.kind === "submenu") {
 		const open = () => {
 			clearTimeout(closeTimer.current);
@@ -220,10 +358,19 @@ function MenuRow({ item, onClose, side }) {
 		return /* @__PURE__ */ jsxs("div", {
 			className: "relative",
 			role: "none",
-			onMouseEnter: open,
-			onMouseLeave: close,
+			onMouseEnter: () => {
+				hovered.current = true;
+				open();
+			},
+			onMouseLeave: () => {
+				hovered.current = false;
+				if (!panel.current?.contains(document.activeElement)) close();
+			},
 			onFocus: open,
-			onBlur: close,
+			onBlur: (e) => {
+				const to = e.relatedTarget;
+				if (!e.currentTarget.contains(to) && (to !== null || !hovered.current)) close();
+			},
 			children: [/* @__PURE__ */ jsxs("button", {
 				type: "button",
 				"aria-expanded": openSub,
@@ -234,10 +381,13 @@ function MenuRow({ item, onClose, side }) {
 					className: "flex items-center gap-2.5",
 					children: [item.icon, item.label]
 				}), /* @__PURE__ */ jsx(LuChevronRight, { className: "h-3 w-3 shrink-0 opacity-60" })]
-			}), openSub && /* @__PURE__ */ jsx("div", {
-				className: cx("absolute -top-1 z-10 min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-panel-bg) py-1 shadow-lg", side === "left" ? "right-full" : "left-full"),
+			}), openSub && /* @__PURE__ */ jsx(SubmenuPanel, {
+				side,
+				panelRef: panel,
+				searchable: !!item.search,
 				children: /* @__PURE__ */ jsx(MenuItemList, {
 					items: item.items,
+					search: item.search,
 					onClose,
 					side
 				})
@@ -267,15 +417,7 @@ function MenuRow({ item, onClose, side }) {
 			"data-tooltip-id": TOOLTIP_ID,
 			"data-tooltip-content": item.tooltip
 		} : {},
-		onClick: () => {
-			if (item.disabled) return;
-			if (item.copy) {
-				const { text, label } = item.copy;
-				navigator.clipboard?.writeText(text).then(() => notify.success(t.copied(label)), () => notify.error(t.couldntCopy(label)));
-			}
-			item.onSelect?.();
-			onClose();
-		},
+		onClick: () => run(item),
 		className: cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)", item.disabled && "opacity-40 cursor-not-allowed hover:bg-transparent"),
 		children: [
 			item.icon,
@@ -284,6 +426,19 @@ function MenuRow({ item, onClose, side }) {
 		]
 	});
 }
+function useRunItem(onClose) {
+	const notify = useNotify();
+	const { list: t } = useStrings();
+	return (item) => {
+		if (item.disabled) return;
+		if (item.copy) {
+			const { text, label } = item.copy;
+			navigator.clipboard?.writeText(text).then(() => notify.success(t.copied(label)), () => notify.error(t.couldntCopy(label)));
+		}
+		item.onSelect?.();
+		onClose();
+	};
+}
 /** Returns a builder for the Copy submenu, labeled from the provider's strings. */
 function useCopySubmenu() {
 	const { list: t } = useStrings();