@parallelworks/ui 0.5.1 → 0.5.2

package/dist/chunks/RowContextMenu-D3G3DPQk.js

@@ -1,319 +0,0 @@
-import { CheckIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, UserIcon } from "../icons.js";
-import { c as useStrings, i as useNotify, n as useLink } from "./Provider-wC9G01Ou.js";
-import cx from "classnames";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
-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
-	};
-}
-/** 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"
-	};
-}
-/** 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() {
-	const [menu, setMenu] = useState(null);
-	const onCloseRef = useRef(void 0);
-	return {
-		openMenu: useCallback((x, y, items, onClose) => {
-			if (items.length > 0) {
-				onCloseRef.current?.();
-				onCloseRef.current = onClose;
-				setMenu({
-					x,
-					y,
-					items
-				});
-			}
-		}, []),
-		contextMenu: /* @__PURE__ */ jsx(RowContextMenu, {
-			state: menu,
-			onClose: useCallback(() => {
-				onCloseRef.current?.();
-				onCloseRef.current = void 0;
-				setMenu(null);
-			}, [])
-		})
-	};
-}
-/** 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) => {
-			setActive(true);
-			openMenu(x, y, items, () => setActive(false));
-		}, [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 }) {
-	const ref = useRef(null);
-	const [pos, setPos] = useState(null);
-	useLayoutEffect(() => {
-		if (!state || !ref.current) {
-			setPos(null);
-			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);
-		setPos({
-			left: Math.max(pad, Math.min(state.x, window.innerWidth - width - pad)),
-			top: Math.max(pad, top)
-		});
-	}, [state]);
-	useEffect(() => {
-		if (!state) return;
-		const close = () => 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", {
-		className: "fixed inset-0 z-50",
-		onClick: 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 min-w-44 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,
-				visibility: pos ? "visible" : "hidden"
-			},
-			onClick: (e) => e.stopPropagation(),
-			children: /* @__PURE__ */ jsx(MenuItemList, {
-				items: state.items,
-				onClose,
-				side
-			})
-		})
-	}), document.body);
-}
-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 items.map((item, i) => item.kind === "divider" ? /* @__PURE__ */ jsx("div", {
-		"aria-hidden": "true",
-		className: "my-1 h-px bg-(--theme-border)"
-	}, `divider-${i}`) : /* @__PURE__ */ jsx(MenuRow, {
-		item,
-		onClose,
-		side
-	}, `${item.label}-${i}`));
-}
-function MenuRow({ item, onClose, side }) {
-	const Link = useLink();
-	const notify = useNotify();
-	const { list: t } = useStrings();
-	const [openSub, setOpenSub] = useState(false);
-	const closeTimer = useRef(void 0);
-	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",
-			onMouseEnter: open,
-			onMouseLeave: close,
-			children: [/* @__PURE__ */ jsxs("div", {
-				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(ChevronRightIcon, { 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"),
-				children: /* @__PURE__ */ jsx(MenuItemList, {
-					items: item.items,
-					onClose,
-					side
-				})
-			})]
-		});
-	}
-	if (item.kind === "link") return /* @__PURE__ */ jsxs(Link, {
-		to: item.to,
-		onClick: onClose,
-		className: cx(MENU_ITEM_CLASSES, item.destructive ? "text-red-500" : "text-(--theme-app)"),
-		children: [item.icon, item.label]
-	});
-	return /* @__PURE__ */ jsxs("button", {
-		type: "button",
-		disabled: item.disabled,
-		onClick: () => {
-			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();
-		},
-		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(CheckIcon, { className: "ml-auto opacity-80" })
-		]
-	});
-}
-/** Builds the Copy submenu entries for whichever fields a row has, in stable
-* order. The menu itself performs the copy and notifies; `t` is an optional
-* host translator for the field labels (falls back to the provider defaults'
-* English). */
-function copySubmenu({ name, nameLabel, email, username, uid, id, url, extra, t }) {
-	const items = [
-		{
-			label: nameLabel ?? (t ? t("rowContextMenu.labelName") : "name"),
-			value: name,
-			icon: /* @__PURE__ */ jsx(CopyIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelEmail") : "email",
-			value: email,
-			icon: /* @__PURE__ */ jsx(MailIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelUsername") : "username",
-			value: username,
-			icon: /* @__PURE__ */ jsx(UserIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelUid") : "UID",
-			value: uid === null || uid === void 0 ? null : String(uid),
-			icon: /* @__PURE__ */ jsx(KeyIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelId") : "ID",
-			value: id,
-			icon: /* @__PURE__ */ jsx(IdCardIcon, {})
-		},
-		{
-			label: t ? t("rowContextMenu.labelUrl") : "URL",
-			value: url,
-			icon: /* @__PURE__ */ jsx(LinkIcon, {})
-		},
-		...(extra ?? []).map((e) => ({
-			label: e.label,
-			value: e.value,
-			icon: e.icon ?? /* @__PURE__ */ jsx(CopyIcon, {})
-		}))
-	].filter((f) => f.value).map((f) => ({
-		kind: "action",
-		label: t ? t("rowContextMenu.copy", { label: f.label }) : `Copy ${f.label}`,
-		icon: f.icon,
-		copy: {
-			text: f.value,
-			label: f.label
-		}
-	}));
-	return {
-		kind: "submenu",
-		label: t ? t("common.copy") : "Copy",
-		icon: /* @__PURE__ */ jsx(ClipboardIcon, {}),
-		items
-	};
-}
-/** 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(MoreIcon, { className: "h-4 w-4" })
-	});
-}
-//#endregion
-export { toRowMenuItem as a, useRowMenuActive as c, rowContextMenuProps as i, assembleRowMenu as n, toolbarActionToRowAction as o, copySubmenu as r, useRowMenu as s, MoreButton as t };