@parallelworks/ui 0.2.0 → 0.3.1

package/dist/chunks/list-7PyDF1tz.js

@@ -0,0 +1,465 @@
+import { CheckIcon, ChevronRightIcon, ClipboardIcon, CopyIcon, ErrorIcon, IdCardIcon, KeyIcon, LinkIcon, MailIcon, MoreIcon, UserIcon } from "../icons.js";
+import { c as useStrings, i as useNotify, n as useLink } from "./Provider-DvVvScTQ.js";
+import { n as Table } from "./Table-C5z6qWjM.js";
+import cx from "classnames";
+import { Fragment, 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
+//#region src/list/ListTable.tsx
+var NAME_TEXT = "font-medium text-[13px] leading-tight text-(--theme-app) truncate";
+var SUBTITLE_TEXT = "text-xs leading-tight text-(--theme-muted-text-color) truncate";
+/** table-auto + horizontal scroll; the name column has a min-width floor so it can't be crushed. */
+var listTableProps = {
+	borderless: true,
+	panel: false,
+	rounded: false,
+	theadClassName: "text-(--theme-muted-text-color)",
+	tbodyClassName: "divide-y border-b border-(--theme-border) divide-(--theme-border)",
+	className: "table-auto w-full [&_td:first-child]:pl-4 [&_th:first-child]:pl-4 [&_td:last-child]:pr-4 [&_th:last-child]:pr-4"
+};
+/** Widths come only from the header row, so a windowed body cannot shift the
+*  columns as different content scrolls into view. */
+var listTableFixedProps = {
+	...listTableProps,
+	className: listTableProps.className.replace("table-auto", "table-fixed")
+};
+function NameCell({ icon, name, subtitle, href }) {
+	const Link = useLink();
+	const inner = /* @__PURE__ */ jsxs(Fragment, { children: [icon, /* @__PURE__ */ jsxs("div", {
+		className: "min-w-0",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: NAME_TEXT,
+			children: name
+		}), subtitle && /* @__PURE__ */ jsx("div", {
+			className: SUBTITLE_TEXT,
+			children: subtitle
+		})]
+	})] });
+	return /* @__PURE__ */ jsx(Table.Item, {
+		className: "py-2.5",
+		children: href ? /* @__PURE__ */ jsx(Link, {
+			to: href,
+			className: "flex items-center gap-2.5 min-w-0 cursor-pointer",
+			children: inner
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex items-center gap-2.5 min-w-0",
+			children: inner
+		})
+	});
+}
+function GroupRow({ label, count, colSpan }) {
+	return /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsxs("td", {
+		colSpan,
+		className: "bg-(--theme-muted-panel-bg) py-1.5 text-xs font-medium",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "text-(--theme-app)",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "mx-1.5 opacity-50",
+				children: "·"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-(--theme-muted-text-color)",
+				children: count
+			})
+		]
+	}) });
+}
+function ListError({ error, noun = "data" }) {
+	const { list: t } = useStrings();
+	const message = error && typeof error === "object" && "message" in error ? String(error.message) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col items-center justify-center gap-3 py-20 text-center",
+		children: [/* @__PURE__ */ jsx(ErrorIcon, { className: "h-10 w-10 text-red-400 opacity-80" }), /* @__PURE__ */ jsxs("div", {
+			className: "space-y-1",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-sm font-medium text-(--theme-app)",
+				children: t.couldNotLoad(noun)
+			}), message && /* @__PURE__ */ jsx("p", {
+				className: "max-w-md text-xs text-(--theme-muted-text-color)",
+				children: message
+			})]
+		})]
+	});
+}
+function ListSkeleton({ rows = 6 }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "divide-y border-b border-(--theme-border) divide-(--theme-border)",
+		children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3 px-4 py-2.5 animate-pulse",
+			children: [
+				/* @__PURE__ */ jsx("div", { className: "h-5 w-5 rounded bg-(--theme-muted-panel-bg)" }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "space-y-1.5",
+					children: [/* @__PURE__ */ jsx("div", { className: "h-3 w-40 rounded bg-(--theme-muted-panel-bg)" }), /* @__PURE__ */ jsx("div", { className: "h-2.5 w-24 rounded bg-(--theme-muted-panel-bg)" })]
+				}),
+				/* @__PURE__ */ jsx("div", { className: "ml-auto h-3 w-20 rounded bg-(--theme-muted-panel-bg)" })
+			]
+		}, i))
+	});
+}
+/** Prevents the name column from being crushed under table-auto layout during horizontal overflow. */
+var NAME_MIN_WIDTH_PX = 200;
+/** Trailing cell geometry: icon-button size + gap + padding, sized to fit exactly its pinned buttons. */
+var ACTION_BUTTON_PX = 24;
+var ACTION_GAP_PX = 2;
+var ACTIONS_CELL_PAD_PX = 28;
+/** Width the trailing actions column reserves for `count` always-visible
+* buttons plus the hover `⋯` trigger. */
+function actionsColumnWidth(count) {
+	const buttons = count + 1;
+	return buttons * ACTION_BUTTON_PX + (buttons - 1) * ACTION_GAP_PX + ACTIONS_CELL_PAD_PX;
+}
+/** Shared leading selection checkbox for multi-select rows: stops the row-click
+* and suppresses shift-click text selection. Wrap in <Table.Item> for `leading`. */
+function RowSelectCheckbox({ checked, label, onToggle }) {
+	return /* @__PURE__ */ jsx("input", {
+		type: "checkbox",
+		"aria-label": label,
+		checked,
+		onChange: () => {},
+		onClick: (e) => {
+			e.stopPropagation();
+			onToggle(e);
+		},
+		onMouseDown: (e) => {
+			if (e.shiftKey) e.preventDefault();
+		},
+		className: "h-4 w-4 shrink-0 rounded border-(--theme-border) text-blue-500 focus:ring-blue-500 focus:ring-offset-0 cursor-pointer"
+	});
+}
+/** Sizes to fit pinned buttons + ⋯; below ~44rem only ⋯ remains. Pass a view's
+* chrome (structurally: showActions + actionsWidth) or actionCount. */
+function ListActionsHeader({ view, actionCount = 0, className }) {
+	if (view && !view.showActions) return null;
+	const width = view ? view.actionsWidth : actionsColumnWidth(actionCount);
+	return /* @__PURE__ */ jsx(Table.Header, {
+		caps: false,
+		style: {
+			width,
+			minWidth: width
+		},
+		className: cx("py-2 text-right @max-[43rem]:w-[52px]! @max-[43rem]:min-w-[52px]!", className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Actions"
+		})
+	});
+}
+ListActionsHeader.isTableHeader = true;
+//#endregion
+export { useRowMenu as _, NAME_MIN_WIDTH_PX as a, actionsColumnWidth as c, MoreButton as d, assembleRowMenu as f, toolbarActionToRowAction as g, toRowMenuItem as h, ListSkeleton as i, listTableFixedProps as l, rowContextMenuProps as m, ListActionsHeader as n, NameCell as o, copySubmenu as p, ListError as r, RowSelectCheckbox as s, GroupRow as t, listTableProps as u, useRowMenuActive as v };