@parallelworks/ui 0.41.0 → 0.43.0

package/dist/list/RowContextMenu.js

@@ -1,515 +0,0 @@
-import { safeUrl } from "../safeUrl.js";
-import { useLink, useNotify, useStrings } from "../components/Provider.js";
-import { BsThreeDots } from "../icons/bs/BsThreeDots.js";
-import { FaCheck } from "../icons/fa/FaCheck.js";
-import { FaKey } from "../icons/fa/FaKey.js";
-import { FaLink } from "../icons/fa/FaLink.js";
-import { FaUser } from "../icons/fa/FaUser.js";
-import { FiCopy } from "../icons/fi/FiCopy.js";
-import { HiOutlineClipboardCopy } from "../icons/hi/HiOutlineClipboardCopy.js";
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
-import { LuIdCard } from "../icons/lu/LuIdCard.js";
-import { LuMail } from "../icons/lu/LuMail.js";
-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 { 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. */
-function toRowMenuItem(action) {
-	if (action.to) return {
-		kind: "link",
-		label: action.label,
-		icon: action.icon,
-		to: action.to,
-		destructive: action.destructive
-	};
-	return {
-		kind: "action",
-		label: action.label,
-		icon: action.icon,
-		onSelect: action.onSelect,
-		disabled: action.disabled,
-		destructive: action.destructive,
-		tooltip: action.tooltip
-	};
-}
-/** Bridges a toolbar action (icon component, `onClick`/`href`) onto the shared
-* `RowAction` shape. Typed structurally so any toolbar action shape matching
-* these fields is assignable. */
-function toolbarActionToRowAction(action) {
-	const Icon = action.icon;
-	return {
-		key: action.key,
-		label: action.label,
-		icon: /* @__PURE__ */ jsx(Icon, {}),
-		onSelect: action.onClick,
-		to: action.href,
-		disabled: action.disabled,
-		destructive: action.key === "delete" || action.key === "destroy",
-		tooltip: action.disabledTooltip
-	};
-}
-/** Assembles a row's context menu in the shared order: leading link(s) → middle
-* actions → extra items → Copy submenu → trailing (destructive) actions last. */
-function assembleRowMenu({ lead = [], actions, exclude, order, trailing = ["delete"], extra = [], copy }) {
-	const trailingSet = new Set(trailing);
-	const excludeSet = new Set(exclude);
-	let middle = actions.filter((a) => !trailingSet.has(a.key) && !excludeSet.has(a.key));
-	if (order) {
-		const byKey = new Map(middle.map((a) => [a.key, a]));
-		middle = order.map((key) => byKey.get(key)).filter((a) => a !== void 0);
-	}
-	const trailingItems = trailing.map((key) => actions.find((a) => a.key === key)).filter((a) => a !== void 0);
-	return [
-		...lead,
-		...middle.map(toRowMenuItem),
-		...extra,
-		...copy ? [copy] : [],
-		...trailingItems.map(toRowMenuItem)
-	];
-}
-function useRowMenu(zClassName = "z-50") {
-	const [menu, setMenu] = useState(null);
-	const onCloseRef = useRef(void 0);
-	const openMenu = useCallback((x, y, items, onClose, search) => {
-		if (items.length > 0) {
-			onCloseRef.current?.();
-			onCloseRef.current = onClose;
-			setMenu({
-				x,
-				y,
-				items,
-				search
-			});
-		}
-	}, []);
-	const close = useCallback(() => {
-		onCloseRef.current?.();
-		onCloseRef.current = void 0;
-		setMenu(null);
-	}, []);
-	return {
-		openMenu,
-		contextMenu: /* @__PURE__ */ jsx(RowContextMenu, {
-			state: menu,
-			onClose: close,
-			zClassName
-		})
-	};
-}
-/** The full-screen menu overlay drops CSS :hover on the triggering row; wrap openMenu here to substitute a JS-driven `active` highlight. */
-function useRowMenuActive(openMenu) {
-	const [active, setActive] = useState(false);
-	return {
-		active,
-		openMenu: useCallback((x, y, items, onClose, search) => {
-			setActive(true);
-			openMenu(x, y, items, () => {
-				setActive(false);
-				onClose?.();
-			}, search);
-		}, [openMenu])
-	};
-}
-function rowContextMenuProps(openMenu, items) {
-	return { onContextMenu: (e) => {
-		e.preventDefault();
-		if (items.length > 0) e.stopPropagation();
-		openMenu(e.clientX, e.clientY, items);
-	} };
-}
-function RowContextMenu({ state, onClose, zClassName }) {
-	const ref = useRef(null);
-	const [pos, setPos] = useState(null);
-	const opener = useRef(null);
-	const wasOpen = useRef(false);
-	useLayoutEffect(() => {
-		const menu = ref.current;
-		if (!state || !menu) {
-			setPos(null);
-			wasOpen.current = false;
-			return;
-		}
-		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,
-			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 = (e) => {
-			if (!(e.target instanceof Node && ref.current?.contains(e.target))) onClose();
-		};
-		const onKey = (e) => {
-			if (e.key === "Escape") onClose();
-		};
-		window.addEventListener("scroll", close, true);
-		window.addEventListener("resize", close);
-		window.addEventListener("keydown", onKey);
-		return () => {
-			window.removeEventListener("scroll", close, true);
-			window.removeEventListener("resize", close);
-			window.removeEventListener("keydown", onKey);
-		};
-	}, [state, onClose]);
-	if (!state) return null;
-	const side = (pos?.left ?? state.x) > window.innerWidth * .6 ? "left" : "right";
-	return createPortal(/* @__PURE__ */ jsx("div", {
-		role: "none",
-		className: cx("fixed inset-0", zClassName),
-		onClick: (e) => {
-			if (e.target === e.currentTarget) onClose();
-		},
-		onContextMenu: (e) => {
-			e.preventDefault();
-			if (ref.current?.contains(e.target)) {
-				onClose();
-				return;
-			}
-			const { clientX, clientY } = e;
-			const overlay = e.currentTarget;
-			overlay.style.pointerEvents = "none";
-			const under = document.elementFromPoint(clientX, clientY);
-			overlay.style.pointerEvents = "";
-			onClose();
-			under?.dispatchEvent(new MouseEvent("contextmenu", {
-				bubbles: true,
-				cancelable: true,
-				clientX,
-				clientY
-			}));
-		},
-		children: /* @__PURE__ */ jsx("div", {
-			ref,
-			role: "menu",
-			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 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, {
-		item,
-		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 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);
-			setOpenSub(true);
-		};
-		const close = () => {
-			closeTimer.current = setTimeout(() => setOpenSub(false), 160);
-		};
-		return /* @__PURE__ */ jsxs("div", {
-			className: "relative",
-			role: "none",
-			onMouseEnter: () => {
-				hovered.current = true;
-				open();
-			},
-			onMouseLeave: () => {
-				hovered.current = false;
-				if (!panel.current?.contains(document.activeElement)) close();
-			},
-			onFocus: open,
-			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,
-				"aria-haspopup": "menu",
-				onClick: open,
-				className: cx(MENU_ITEM_CLASSES, "justify-between text-(--theme-app)"),
-				children: [/* @__PURE__ */ jsxs("span", {
-					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(SubmenuPanel, {
-				side,
-				panelRef: panel,
-				searchable: !!item.search,
-				children: /* @__PURE__ */ jsx(MenuItemList, {
-					items: item.items,
-					search: item.search,
-					onClose,
-					side
-				})
-			})]
-		});
-	}
-	if (item.kind === "link") {
-		const className = cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)");
-		if (item.reloadDocument) return /* @__PURE__ */ jsxs("a", {
-			href: safeUrl(item.to),
-			onClick: onClose,
-			className,
-			children: [item.icon, item.label]
-		});
-		return /* @__PURE__ */ jsxs(Link, {
-			to: item.to,
-			onClick: onClose,
-			className,
-			children: [item.icon, item.label]
-		});
-	}
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		disabled: item.disabled && !item.tooltip,
-		"aria-disabled": item.disabled,
-		...item.disabled && item.tooltip ? {
-			"data-tooltip-id": TOOLTIP_ID,
-			"data-tooltip-content": item.tooltip
-		} : {},
-		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,
-			item.label,
-			item.selected && /* @__PURE__ */ jsx(FaCheck, { className: "ml-auto opacity-80" })
-		]
-	});
-}
-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();
-	return useCallback(({ name, nameLabel, email, username, uid, id, url, extra }) => {
-		const items = [
-			{
-				label: nameLabel ?? t.labelName,
-				value: name,
-				icon: /* @__PURE__ */ jsx(FiCopy, {})
-			},
-			{
-				label: t.labelEmail,
-				value: email,
-				icon: /* @__PURE__ */ jsx(LuMail, {})
-			},
-			{
-				label: t.labelUsername,
-				value: username,
-				icon: /* @__PURE__ */ jsx(FaUser, {})
-			},
-			{
-				label: t.labelUid,
-				value: uid === null || uid === void 0 ? null : String(uid),
-				icon: /* @__PURE__ */ jsx(FaKey, {})
-			},
-			{
-				label: t.labelId,
-				value: id,
-				icon: /* @__PURE__ */ jsx(LuIdCard, {})
-			},
-			{
-				label: t.labelUrl,
-				value: url,
-				icon: /* @__PURE__ */ jsx(FaLink, {})
-			},
-			...(extra ?? []).map((e) => ({
-				label: e.label,
-				value: e.value,
-				icon: e.icon ?? /* @__PURE__ */ jsx(FiCopy, {})
-			}))
-		].flatMap(({ label, value, icon }) => value ? [{
-			kind: "action",
-			label: t.copy(label),
-			icon,
-			copy: {
-				text: value,
-				label
-			}
-		}] : []);
-		return {
-			kind: "submenu",
-			label: t.copyMenu,
-			icon: /* @__PURE__ */ jsx(HiOutlineClipboardCopy, {}),
-			items
-		};
-	}, [t]);
-}
-/** Stays visible while active (menu open) so it doesn't vanish behind the overlay. */
-function MoreButton({ onOpen, active, className }) {
-	const { list: t } = useStrings();
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		"aria-label": t.moreActions,
-		onClick: (e) => {
-			e.stopPropagation();
-			const r = e.currentTarget.getBoundingClientRect();
-			onOpen(r.right, r.bottom);
-		},
-		className: cx("rounded p-1 cursor-pointer text-(--theme-muted-text-color) transition-colors hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) focus-visible:opacity-100", active ? "opacity-100" : "opacity-0 group-hover:opacity-100", className),
-		children: /* @__PURE__ */ jsx(BsThreeDots, { className: "h-4 w-4" })
-	});
-}
-//#endregion
-export { MoreButton, assembleRowMenu, rowContextMenuProps, toRowMenuItem, toolbarActionToRowAction, useCopySubmenu, useRowMenu, useRowMenuActive };