@parallelworks/ui 0.19.0 → 0.20.0

package/dist/list/ListViewControls.js

@@ -0,0 +1,372 @@
+import { useStrings } from "../components/Provider.js";
+import { CheckIcon, ChevronDownIcon, ChevronRightIcon, ChevronUpIcon, DisplayIcon, FilterIcon } from "../icons.js";
+import { TOOLTIP_ID, TooltipInfo } from "../components/Tooltip.js";
+import { isTextEntryContext } from "./textEntry.js";
+import cx from "classnames";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/list/ListViewControls.tsx
+/** Shared chrome for the toolbar control buttons (Filter, Display, Search) so
+* they read as a consistent button cluster — matched by ListSearchControl. */
+var listControlButtonClasses = "relative flex h-7 w-7 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app) transition-colors";
+var FLYOUT = "min-w-44 rounded-lg border border-(--theme-border) bg-(--theme-app-bg) py-1 shadow-lg";
+/** Toggle pill shared by the Display menu's column + pinned-action pickers. */
+function pillClass(on) {
+	return cx("whitespace-nowrap rounded-full border px-2.5 py-1 text-[12px] transition-colors", on ? "border-transparent bg-(--theme-muted-panel-bg) text-(--theme-app)" : "border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)");
+}
+var SECTION_LABEL = "mb-2 text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)";
+/** Portals into .ds-root so the panel escapes the toolbar's overflow clipping. */
+function AnchoredPopover({ icon, label, active, shortcut, panelClassName, children }) {
+	const btnRef = useRef(null);
+	const panelRef = useRef(null);
+	const [pos, setPos] = useState(null);
+	const close = useCallback(() => setPos(null), []);
+	const open = useCallback(() => {
+		const r = btnRef.current?.getBoundingClientRect();
+		if (r) setPos({
+			right: Math.max(8, Math.round(window.innerWidth - r.right)),
+			top: Math.round(r.bottom) + 4
+		});
+	}, []);
+	useEffect(() => {
+		if (!pos) return;
+		const onKey = (e) => {
+			if (e.key === "Escape") close();
+		};
+		const onScroll = (e) => {
+			if (e.target instanceof Node && panelRef.current?.contains(e.target)) return;
+			close();
+		};
+		window.addEventListener("keydown", onKey);
+		window.addEventListener("scroll", onScroll, true);
+		window.addEventListener("resize", close);
+		return () => {
+			window.removeEventListener("keydown", onKey);
+			window.removeEventListener("scroll", onScroll, true);
+			window.removeEventListener("resize", close);
+		};
+	}, [pos, close]);
+	useEffect(() => {
+		if (!shortcut) return;
+		const onKey = (e) => {
+			if (e.metaKey || e.ctrlKey || e.altKey) return;
+			if (e.key.toLowerCase() !== shortcut.toLowerCase()) return;
+			if (isTextEntryContext(e.target)) return;
+			e.preventDefault();
+			open();
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [shortcut, open]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+		ref: btnRef,
+		type: "button",
+		onClick: () => pos ? close() : open(),
+		"aria-label": label,
+		"data-tooltip-id": TOOLTIP_ID,
+		"data-tooltip-content": label,
+		"data-tooltip-shortcut": shortcut ? shortcut.toUpperCase() : void 0,
+		className: cx(listControlButtonClasses, active && "border-(--theme-link) text-(--theme-app)"),
+		children: [icon, active && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 h-1.5 w-1.5 rounded-full bg-(--theme-link)" })]
+	}), pos && createPortal(/* @__PURE__ */ jsx("div", {
+		role: "none",
+		className: "fixed inset-0 z-50",
+		onMouseDown: close,
+		onContextMenu: (e) => {
+			e.preventDefault();
+			close();
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref: panelRef,
+			role: "menu",
+			onMouseDown: (e) => e.stopPropagation(),
+			className: cx("absolute rounded-lg border border-(--theme-border) bg-(--theme-app-bg) shadow-lg", panelClassName),
+			style: {
+				right: pos.right,
+				top: pos.top
+			},
+			children
+		})
+	}), document.querySelector(".ds-root") ?? document.body)] });
+}
+/** Small on/off switch for the Display menu's boolean options. */
+function Switch({ checked, onChange, label }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		"aria-label": label,
+		onClick: onChange,
+		className: cx("relative inline-flex h-4 w-7 shrink-0 items-center rounded-full transition-colors", checked ? "bg-(--theme-link)" : "bg-(--theme-border)"),
+		children: /* @__PURE__ */ jsx("span", { className: cx("inline-block h-3 w-3 rounded-full bg-white transition-transform", checked ? "translate-x-3.5" : "translate-x-0.5") })
+	});
+}
+function ListDisplayMenu({ view, label }) {
+	const t = useStrings().list;
+	const toggleable = view.columns.filter((c) => !c.alwaysVisible);
+	const hasGrouping = view.groupBys.length > 0;
+	const orderDirLabel = view.orderDir === "asc" ? t.ascending : t.descending;
+	return /* @__PURE__ */ jsxs(AnchoredPopover, {
+		icon: /* @__PURE__ */ jsx(DisplayIcon, { className: "h-3.5 w-3.5" }),
+		label: label ?? t.displayOptions,
+		panelClassName: "w-72 p-3",
+		children: [
+			hasGrouping && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-(--theme-app)",
+					children: t.grouping
+				}), /* @__PURE__ */ jsx(GroupingDropdown, { view })]
+			}),
+			view.orderBys.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: cx("flex items-center justify-between gap-3", hasGrouping && "mt-2.5"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-(--theme-app)",
+					children: t.ordering
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-1",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: view.toggleOrderDir,
+						"aria-label": orderDirLabel,
+						title: orderDirLabel,
+						className: "flex h-7 w-7 items-center justify-center rounded-md border border-(--theme-border) text-(--theme-muted-text-color) hover:bg-(--theme-muted-panel-bg) hover:text-(--theme-app)",
+						children: view.orderDir === "asc" ? /* @__PURE__ */ jsx(ChevronUpIcon, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-3 w-3" })
+					}), /* @__PURE__ */ jsx(OrderingDropdown, { view })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cx("flex items-center justify-between gap-3", (hasGrouping || view.orderBys.length > 0) && "mt-2.5"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-(--theme-app)",
+					children: t.columnHeaders
+				}), /* @__PURE__ */ jsx(Switch, {
+					checked: view.showColumnHeaders,
+					onChange: view.toggleColumnHeaders,
+					label: t.showColumnHeaders
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "mt-2.5 flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-(--theme-app)",
+					children: t.showActions
+				}), /* @__PURE__ */ jsx(Switch, {
+					checked: view.showActions,
+					onChange: view.toggleShowActions,
+					label: t.showRowActions
+				})]
+			}),
+			view.showActions && /* @__PURE__ */ jsxs("div", {
+				className: "mt-2.5 flex items-center justify-between gap-3 pl-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-[13px] text-(--theme-muted-text-color)",
+					children: t.alwaysShowActions
+				}), /* @__PURE__ */ jsx(Switch, {
+					checked: view.alwaysShowActions,
+					onChange: view.toggleAlwaysShowActions,
+					label: t.alwaysShowRowActions
+				})]
+			}),
+			toggleable.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 border-t border-(--theme-border) pt-3",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: SECTION_LABEL,
+					children: t.displayProperties
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: toggleable.map((c) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => view.toggleColumn(c.key),
+						className: pillClass(view.isVisible(c.key)),
+						children: c.label
+					}, c.key))
+				})]
+			}),
+			view.showActions && view.actions.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "mt-3 border-t border-(--theme-border) pt-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cx(SECTION_LABEL, "flex items-center gap-1"),
+					children: [t.pinnedActions, /* @__PURE__ */ jsx(TooltipInfo, {
+						className: "inline-flex",
+						text: t.pinnedActionsHelp
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					className: "flex flex-wrap gap-1.5",
+					children: view.actions.map((a) => /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => view.togglePinned(a.key),
+						className: pillClass(view.isPinned(a.key)),
+						children: a.label
+					}, a.key))
+				})]
+			}),
+			!view.isDisplayDefault && /* @__PURE__ */ jsx("div", {
+				className: "mt-3 border-t border-(--theme-border) pt-2",
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: view.resetDisplay,
+					className: "link text-[12px]",
+					children: t.reset
+				})
+			})
+		]
+	});
+}
+/** Capture phase: the popover panel stops mousedown propagation, so a
+* bubble-phase listener never sees clicks inside it. */
+function useCloseOnOutsideClick(open, close) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (!open) return;
+		const onDown = (e) => {
+			if (e.target instanceof Node && !ref.current?.contains(e.target)) close();
+		};
+		document.addEventListener("mousedown", onDown, true);
+		return () => document.removeEventListener("mousedown", onDown, true);
+	}, [open, close]);
+	return ref;
+}
+function GroupingDropdown({ view }) {
+	const t = useStrings().list;
+	const [open, setOpen] = useState(false);
+	const ref = useCloseOnOutsideClick(open, useCallback(() => setOpen(false), []));
+	const current = view.groupBys.find((g) => g.value === view.groupBy);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setOpen((o) => !o),
+			className: "flex items-center gap-1.5 rounded-md border border-(--theme-border) px-2 py-1 text-[12px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
+			children: [current?.label ?? t.none, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-2.5 w-2.5 opacity-60" })]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: cx("absolute right-0 top-full z-20 mt-1", FLYOUT),
+			children: view.groupBys.map((g) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => {
+					view.setGroupBy(g.value);
+					setOpen(false);
+				},
+				className: cx("flex w-full items-center justify-between gap-3 px-3 py-1.5 text-left text-[13px] hover:bg-(--theme-muted-panel-bg)", view.groupBy === g.value ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
+				children: [g.label, view.groupBy === g.value && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" })]
+			}, g.value))
+		})]
+	});
+}
+function OrderingDropdown({ view }) {
+	const t = useStrings().list;
+	const [open, setOpen] = useState(false);
+	const ref = useCloseOnOutsideClick(open, useCallback(() => setOpen(false), []));
+	const current = view.orderBys.find((o) => o.value === view.orderBy);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "relative",
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			onClick: () => setOpen((o) => !o),
+			className: "flex items-center gap-1.5 rounded-md border border-(--theme-border) px-2 py-1 text-[12px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
+			children: [current?.label ?? t.none, /* @__PURE__ */ jsx(ChevronDownIcon, { className: "h-2.5 w-2.5 opacity-60" })]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: cx("absolute right-0 top-full z-20 mt-1", FLYOUT),
+			children: view.orderBys.map((o) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => {
+					view.setOrderBy(o.value);
+					setOpen(false);
+				},
+				className: cx("flex w-full items-center justify-between gap-3 px-3 py-1.5 text-left text-[13px] hover:bg-(--theme-muted-panel-bg)", view.orderBy === o.value ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
+				children: [o.label, view.orderBy === o.value && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" })]
+			}, o.value))
+		})]
+	});
+}
+function ListFilterMenu({ view, label }) {
+	const t = useStrings().list;
+	if (view.facets.length === 0) return null;
+	return /* @__PURE__ */ jsx(AnchoredPopover, {
+		icon: /* @__PURE__ */ jsx(FilterIcon, { className: "h-3.5 w-3.5" }),
+		label: label ?? t.filter,
+		active: view.activeFilterCount > 0,
+		shortcut: "f",
+		panelClassName: "w-56 py-1",
+		children: /* @__PURE__ */ jsx(FilterMenuBody, { view })
+	});
+}
+/** Single-open submenu prevents overlapping; resets on panel remount so Filter opens clean. */
+function FilterMenuBody({ view }) {
+	const t = useStrings().list;
+	const [openKey, setOpenKey] = useState(null);
+	const closeTimer = useRef(void 0);
+	const openFacet = (key) => {
+		clearTimeout(closeTimer.current);
+		setOpenKey(key);
+	};
+	const scheduleClose = () => {
+		closeTimer.current = setTimeout(() => setOpenKey(null), 160);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between px-3 py-1",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-[11px] font-medium uppercase tracking-wide text-(--theme-muted-text-color)",
+			children: t.filter
+		}), view.activeFilterCount > 0 && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: view.clearFilters,
+			className: "text-[12px] text-(--theme-muted-text-color) hover:text-(--theme-app)",
+			children: t.clear
+		})]
+	}), view.facets.map((facet) => /* @__PURE__ */ jsx(FilterFacetRow, {
+		view,
+		facet,
+		open: openKey === facet.key,
+		onEnter: () => openFacet(facet.key),
+		onLeave: scheduleClose
+	}, facet.key))] });
+}
+function FilterFacetRow({ view, facet, open, onEnter, onLeave }) {
+	const selected = view.filters[facet.key] ?? [];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		role: "none",
+		onMouseEnter: onEnter,
+		onMouseLeave: onLeave,
+		onFocus: onEnter,
+		onBlur: onLeave,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			"aria-expanded": open,
+			"aria-haspopup": "menu",
+			onClick: onEnter,
+			className: "flex w-full cursor-default items-center justify-between gap-3 px-3 py-1.5 text-[13px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
+			children: [/* @__PURE__ */ jsx("span", { children: facet.label }), /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-1.5",
+				children: [selected.length > 0 && /* @__PURE__ */ jsx("span", {
+					className: "text-[11px] text-(--theme-muted-text-color)",
+					children: selected.length
+				}), /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3 w-3 opacity-60" })]
+			})]
+		}), open && /* @__PURE__ */ jsx("div", {
+			className: cx("absolute right-full top-0 z-10 max-h-[70vh] overflow-y-auto", FLYOUT),
+			children: facet.options.map((option) => {
+				const checked = selected.includes(option.value);
+				return /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					onClick: () => view.setFacetValues(facet.key, checked ? selected.filter((v) => v !== option.value) : [...selected, option.value]),
+					className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-[13px] text-(--theme-app) hover:bg-(--theme-muted-panel-bg)",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "flex h-3.5 w-3.5 shrink-0 items-center justify-center text-(--theme-link)",
+							children: checked && /* @__PURE__ */ jsx(CheckIcon, { className: "h-3 w-3" })
+						}),
+						option.icon,
+						option.label
+					]
+				}, option.value);
+			})
+		})]
+	});
+}
+//#endregion
+export { ListDisplayMenu, ListFilterMenu, listControlButtonClasses };