@declarion/react 0.65.0 → 0.66.0

package/dist-lib/components/pages/list/RowContextMenu.js

@@ -0,0 +1,55 @@
+import { Dropdown as e } from "../../primitives/Dropdown.js";
+import { RowMenuContent as t } from "../../actions/ResponsiveActionBar.js";
+import { useRowMenu as n } from "./useRowMenu.js";
+import { useCallback as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/pages/list/RowContextMenu.tsx
+function c({ x: c, y: l, row: u, rowId: d, screen: f, fullScreen: p, entity: m, entityCode: h, rowActions: g, tabNavigate: _, peekAllowed: v, hasDetailTarget: y, onPeek: b, onClose: x }) {
+	let { layout: S, entityActions: C, runRowAction: w, widgetContext: T } = n({
+		row: u,
+		rowId: d,
+		screen: f,
+		fullScreen: p,
+		entity: m,
+		entityCode: h,
+		rowActions: g,
+		tabNavigate: _,
+		peekAllowed: v,
+		hasDetailTarget: y,
+		onPeek: b
+	}), [E, D] = i(null), O = r((e, t) => (x(), w(e, t)), [x, w]);
+	return S.length === 0 ? null : /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+		onClick: x,
+		onContextMenu: (e) => {
+			e.preventDefault(), x();
+		},
+		style: {
+			position: "fixed",
+			inset: 0,
+			zIndex: 190
+		}
+	}), /* @__PURE__ */ o(e, {
+		open: !0,
+		anchor: null,
+		anchorPoint: {
+			x: c,
+			y: l
+		},
+		onClose: x,
+		width: 220,
+		children: /* @__PURE__ */ o("div", {
+			onClick: x,
+			children: /* @__PURE__ */ o(t, {
+				layout: S,
+				entityActions: C,
+				onRun: O,
+				loading: E,
+				onLoadingChange: D,
+				row: u,
+				widgetContext: T
+			})
+		})
+	})] });
+}
+//#endregion
+export { c as RowContextMenu };

package/dist-lib/components/pages/list/SaveViewDialog.js

@@ -0,0 +1,111 @@
+import { Btn as e } from "../../primitives/Btn.js";
+import { useText as t } from "../../../hooks/useText.js";
+import { TextInput as n } from "../../primitives/Fields.js";
+import { useEffect as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/pages/list/SaveViewDialog.tsx
+function c({ open: c, pending: l, onClose: u, onSave: d, overwriteViewName: f, onOverwrite: p }) {
+	let m = t(), [h, g] = i(""), _ = !!(f && p);
+	if (r(() => {
+		c && g("");
+	}, [c]), !c) return null;
+	let v = h.trim();
+	return /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("div", {
+		onClick: u,
+		style: {
+			position: "fixed",
+			inset: 0,
+			background: "var(--scrim)",
+			zIndex: 70
+		}
+	}), /* @__PURE__ */ s("div", {
+		role: "dialog",
+		"aria-label": m("list.view.save_dialog_title", "Save view"),
+		"aria-modal": "true",
+		style: {
+			position: "fixed",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			width: 360,
+			maxWidth: "calc(100vw - 32px)",
+			background: "var(--surface)",
+			border: "1px solid var(--border)",
+			borderRadius: "var(--radius-lg)",
+			boxShadow: "var(--shadow-lg)",
+			zIndex: 80,
+			padding: 16,
+			display: "flex",
+			flexDirection: "column",
+			gap: 12
+		},
+		children: [
+			/* @__PURE__ */ s("div", { children: [/* @__PURE__ */ o("h3", {
+				style: {
+					margin: 0,
+					fontSize: 14,
+					color: "var(--text)"
+				},
+				children: m("list.view.save_dialog_title", "Save view")
+			}), /* @__PURE__ */ o("p", {
+				style: {
+					margin: "4px 0 0",
+					fontSize: 12,
+					color: "var(--text-3)"
+				},
+				children: m("list.view.save_dialog_body", "Views save columns, order, filters, and sort. Widths stay personal to this device and are never part of a view.")
+			})] }),
+			/* @__PURE__ */ s("label", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 4
+				},
+				children: [/* @__PURE__ */ o("span", {
+					style: {
+						fontSize: 11.5,
+						color: "var(--text-3)",
+						fontWeight: 500
+					},
+					children: m("list.view.name", "Name")
+				}), /* @__PURE__ */ o(n, {
+					autoFocus: !0,
+					"aria-label": m("list.view.name_input", "View name"),
+					value: h,
+					onChange: g,
+					placeholder: m("list.view.name_placeholder", "My filtered view"),
+					onKeyDown: (e) => {
+						e.key === "Escape" && u(), e.key === "Enter" && v && !l && d(v);
+					}
+				})]
+			}),
+			/* @__PURE__ */ s("div", {
+				style: {
+					display: "flex",
+					justifyContent: "flex-end",
+					gap: 8
+				},
+				children: [
+					/* @__PURE__ */ o(e, {
+						onClick: u,
+						disabled: l,
+						children: m("dialog.cancel", "Cancel")
+					}),
+					_ && /* @__PURE__ */ o(e, {
+						onClick: () => void p(),
+						disabled: l,
+						children: m("list.view.overwrite", "Overwrite “{name}”", { name: f ?? "" })
+					}),
+					/* @__PURE__ */ o(e, {
+						kind: "primary",
+						onClick: () => void d(v),
+						disabled: !v || l,
+						children: m("list.view.save_as", "Save as new")
+					})
+				]
+			})
+		]
+	})] });
+}
+//#endregion
+export { c as SaveViewDialog };

package/dist-lib/{SortHeaderMenu-Co5PvhTA.js → components/pages/list/SortHeaderMenu.js}

@@ -1,34 +1,35 @@
-import { wt as e } from "./useCurrentScreen-BZOHBGQZ.js";
-import { t } from "./Icons-lt-7lhYR.js";
-import { n, t as r } from "./MenuItem-CfkVXPvC.js";
+import { Icon as e } from "../../primitives/Icons.js";
+import { Dropdown as t } from "../../primitives/Dropdown.js";
+import { useText as n } from "../../../hooks/useText.js";
+import { MenuItem as r } from "../../primitives/MenuItem.js";
 import { useRef as i, useState as a } from "react";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/pages/list/SortHeaderMenu.tsx
 function l({ field: l, activeDir: u, activeNulls: d, inMultiSort: f, canAppend: p, onApply: m, onAppend: h, onClearColumn: g, onClearAll: _ }) {
-	let v = e(), y = i(null), [b, x] = a(!1), S = [
+	let v = n(), y = i(null), [b, x] = a(!1), S = [
 		{
 			label: v("list.sort.asc_empty_last", "Sort ascending, empty last"),
 			dir: "asc",
 			nulls: "last",
-			icon: t.arrowUp
+			icon: e.arrowUp
 		},
 		{
 			label: v("list.sort.asc_empty_first", "Sort ascending, empty first"),
 			dir: "asc",
 			nulls: "first",
-			icon: t.arrowUp
+			icon: e.arrowUp
 		},
 		{
 			label: v("list.sort.desc_empty_last", "Sort descending, empty last"),
 			dir: "desc",
 			nulls: "last",
-			icon: t.arrowDown
+			icon: e.arrowDown
 		},
 		{
 			label: v("list.sort.desc_empty_first", "Sort descending, empty first"),
 			dir: "desc",
 			nulls: "first",
-			icon: t.arrowDown
+			icon: e.arrowDown
 		}
 	], C = d ?? "last", w = !f && p;
 	return /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s("button", {
@@ -52,16 +53,16 @@ function l({ field: l, activeDir: u, activeNulls: d, inMultiSort: f, canAppend:
 			cursor: "pointer",
 			opacity: b ? 1 : .55
 		},
-		children: /* @__PURE__ */ s(t.cheveron, { size: 12 })
-	}), /* @__PURE__ */ c(n, {
+		children: /* @__PURE__ */ s(e.cheveron, { size: 12 })
+	}), /* @__PURE__ */ c(t, {
 		open: b,
 		anchor: y.current,
 		onClose: () => x(!1),
 		align: "start",
 		width: 240,
 		children: [
-			S.map((e) => {
-				let n = u === e.dir && C === e.nulls, i = e.icon;
+			S.map((t) => {
+				let n = u === t.dir && C === t.nulls, i = t.icon;
 				return /* @__PURE__ */ s(r, {
 					icon: /* @__PURE__ */ c("span", {
 						style: {
@@ -69,16 +70,16 @@ function l({ field: l, activeDir: u, activeNulls: d, inMultiSort: f, canAppend:
 							alignItems: "center",
 							gap: 2
 						},
-						children: [/* @__PURE__ */ s(i, { size: 11 }), n ? /* @__PURE__ */ s(t.check, { size: 11 }) : null]
+						children: [/* @__PURE__ */ s(i, { size: 11 }), n ? /* @__PURE__ */ s(e.check, { size: 11 }) : null]
 					}),
 					onClick: () => {
-						x(!1), m(e.dir, e.nulls);
+						x(!1), m(t.dir, t.nulls);
 					},
-					children: e.label
-				}, `${e.dir}:${e.nulls}`);
+					children: t.label
+				}, `${t.dir}:${t.nulls}`);
 			}),
 			w ? /* @__PURE__ */ c(o, { children: [/* @__PURE__ */ s(r, { divider: !0 }), /* @__PURE__ */ s(r, {
-				icon: /* @__PURE__ */ s(t.plus, { size: 11 }),
+				icon: /* @__PURE__ */ s(e.plus, { size: 11 }),
 				onClick: () => {
 					x(!1), h("asc", d);
 				},

package/dist-lib/{cardProjection-Cxlogzh8.js → components/pages/list/cardProjection.js}

@@ -1,5 +1,5 @@
-import { cn as e } from "./useCurrentScreen-BZOHBGQZ.js";
-import { p as t } from "./ActionRunner-DdBFhqGe.js";
+import { getPrimaryKeyFields as e } from "../../../types/schema.js";
+import { parseSort as t } from "../../../lib/sort.js";
 //#region src/components/pages/list/cardProjection.ts
 var n = 4, r = 2, i = 2, a = [
 	"screen_card",
@@ -497,4 +497,4 @@ var Y = class {
 	}
 };
 //#endregion
-export { h as i, p as n, g as r, f as t };
+export { P as extractDisplayTemplateFields, f as resolveCard, p as resolveListProjection, g as resolveQuickPeekFieldNames, h as resolveVariantRenderFields };

package/dist-lib/components/pages/list/column-sizing.js

@@ -0,0 +1,17 @@
+//#region src/components/pages/list/column-sizing.ts
+function e(e) {
+	return `--header-${e}-size`;
+}
+function t(e) {
+	return `--col-${e}-size`;
+}
+function n(e) {
+	return `calc(var(${e}) * 1px)`;
+}
+function r(n) {
+	let r = n.getFlatHeaders(), i = {};
+	for (let n of r) i[e(n.id)] = n.getSize(), i[t(n.column.id)] = n.column.getSize();
+	return i;
+}
+//#endregion
+export { r as buildColumnSizeVars, t as colSizeVar, e as headerSizeVar, n as sizeFromVar };

package/dist-lib/components/pages/list/columns.js

@@ -0,0 +1,168 @@
+import { coerceDisplayString as e } from "../../../lib/display-value.js";
+import { fieldDisplayName as t } from "../../../types/schema.js";
+import { Icon as n } from "../../primitives/Icons.js";
+import { Pill as r } from "../../primitives/Pill.js";
+import { Check as i } from "../../primitives/Check.js";
+import { fieldAccessInfo as a, isFieldReadable as o } from "../../../lib/field-classification.js";
+import { MAX_COL_WIDTH as s } from "../../../stores/list-layout.js";
+import { renderSchemaField as c, resolveSchemaFieldLabel as l } from "../../file-widgets/host.js";
+import { resolveCellRenderer as u } from "../../fields/cells/registry.js";
+import { verdictLabel as d, verdictTone as f } from "../../../lib/evidence-verdict.js";
+import { RowActionsCell as p } from "./RowActionsCell.js";
+import { createElement as m } from "react";
+//#region src/components/pages/list/columns.ts
+function h(e, t, r, i, o) {
+	let s = a(r, i);
+	if (!s || s.read !== "denied") return o ? m("span", { title: o }, t) : t;
+	let c = s.required_permission ? e("list.columns.locked_permission", "Locked column: requires \"{permission}\"", { permission: s.required_permission }) : e("list.columns.locked_classification", "Locked column: {classification} classification", { classification: s.classification });
+	return m("span", {
+		title: c,
+		"aria-label": c,
+		className: "inline-flex items-center gap-1"
+	}, m(n.lock, { size: 12 }), t);
+}
+function g(e) {
+	return {
+		minSize: Math.min(60, e),
+		maxSize: Math.max(s, e)
+	};
+}
+function _(n) {
+	let { visibleCols: a, entity: s, screen: _, schema: v, entityCode: y, rowActions: b, hasBatchActions: x, hasExplicitRowActions: S, canUpdate: C, canDelete: w, peekEnabled: T, hasDetailTarget: E, t: D, tabNavigate: O, refsRef: k, rowSelectionKey: A, setPeekRow: j } = n;
+	if (a.length === 0 || !s) return [];
+	let M = [];
+	x && M.push({
+		id: "_select",
+		enableResizing: !1,
+		header: ({ table: e }) => m(i, {
+			checked: e.getIsAllRowsSelected(),
+			indeterminate: e.getIsSomeRowsSelected(),
+			onChange: () => e.toggleAllRowsSelected()
+		}),
+		size: 34,
+		cell: ({ row: e }) => m("span", { "data-testid": "row-select-checkbox" }, m(i, {
+			checked: e.getIsSelected(),
+			onChange: () => e.toggleSelected()
+		}))
+	});
+	for (let n of a) {
+		if (n.startsWith("$status.")) {
+			let e = n.slice(8), t = s.status_groups?.[e];
+			if (!t) continue;
+			let i = new Map(t.statuses.map((e) => [e.code, e]));
+			M.push({
+				id: n,
+				header: D(t.name) || e,
+				size: 140,
+				...g(140),
+				cell: ({ row: t }) => {
+					let n = t.original.$statuses?.find((t) => t.group_code === e);
+					if (!n) return m("span", { className: "text-sm text-muted-foreground" }, "-");
+					let a = i.get(n.status_code);
+					return m(r, {
+						tone: a?.color ?? "slate",
+						size: "xs"
+					}, D(a?.name) || n.status_code);
+				}
+			});
+			continue;
+		}
+		if (n.startsWith("$property.")) {
+			let t = n.slice(10), r = s.properties?.[t];
+			if (!r) continue;
+			M.push({
+				id: n,
+				header: () => h(D, D(r.name) || t, s, t, D(r.description) || void 0),
+				size: 150,
+				...g(150),
+				enableSorting: !1,
+				cell: ({ row: n }) => {
+					let r = n.original.$properties?.find((e) => e.property_code === t);
+					return !r || r.value == null ? m("span", { className: "text-sm text-muted-foreground" }, "-") : m("span", { className: "text-sm" }, e(r.value));
+				}
+			});
+			continue;
+		}
+		if (n === "$evidence") {
+			M.push({
+				id: n,
+				header: D("list.columns.evidence", "Evidence"),
+				size: 140,
+				...g(140),
+				enableSorting: !1,
+				cell: ({ row: e }) => {
+					let t = e.original.$evidence?.verdict ?? "unverified";
+					return m(r, {
+						tone: f(t),
+						size: "xs",
+						dot: !0
+					}, d(D, t));
+				}
+			});
+			continue;
+		}
+		if (s.files?.get(n)) {
+			M.push({
+				id: n,
+				accessorFn: (e) => e.$files?.[n] ?? null,
+				header: () => h(D, l(D, s, n, v?.entities), s, n),
+				size: 150,
+				...g(150),
+				cell: ({ row: e }) => c({
+					entity: s,
+					entityCode: y,
+					fieldName: n,
+					record: e.original,
+					mode: "display",
+					surface: "list",
+					refs: k.current,
+					t: D
+				})
+			});
+			continue;
+		}
+		let i = s.fields.get(n);
+		if (!i) continue;
+		let a = t(D, i, n, v?.entities), p = i.display?.width, _ = u({
+			field: i,
+			fieldName: n,
+			surface: "list",
+			entity: s,
+			entityCode: y,
+			entities: v?.entities,
+			screens: v?.screens,
+			refs: () => k.current,
+			t: D
+		});
+		M.push({
+			id: n,
+			accessorKey: n,
+			header: () => h(D, a, s, n, D(i.display?.description) || void 0),
+			enableSorting: i.type !== "json" && o(s, n),
+			size: p ?? 150,
+			...g(p ?? 150),
+			cell: ({ getValue: e, row: t }) => _(e(), t.original)
+		});
+	}
+	return (!S && C || !S && w || b.length > 0) && M.push({
+		id: "_actions",
+		enableResizing: !1,
+		header: "",
+		size: 40,
+		cell: ({ row: e }) => m(p, {
+			row: e.original,
+			rowId: A(s, e.original),
+			screen: _,
+			fullScreen: _,
+			entity: s,
+			entityCode: y,
+			rowActions: b,
+			tabNavigate: O,
+			peekAllowed: T,
+			hasDetailTarget: E,
+			onPeek: j
+		})
+	}), M;
+}
+//#endregion
+export { _ as buildListColumns };

package/dist-lib/components/pages/list/filter-meta.js

@@ -0,0 +1,84 @@
+import { effectiveSpecialValues as e, fieldDisplayName as t } from "../../../types/schema.js";
+//#region src/components/pages/list/filter-meta.ts
+function n(e, t, n, r) {
+	if (!t || !n) return [];
+	let a = t.filter_operators ?? {}, o = (t.filters ?? []).filter((e) => a[e]?.length);
+	return i({
+		t: e,
+		screen: t,
+		entity: n,
+		entities: r
+	}, o, a);
+}
+function r(e, t, n, r) {
+	return !t || !n ? [] : i({
+		t: e,
+		screen: t,
+		entity: n,
+		entities: r
+	}, Object.keys(n.filter_operators), n.filter_operators);
+}
+function i({ t: n, screen: r, entity: i, entities: a }, o, s) {
+	let c = [];
+	for (let l of o) {
+		let o = s[l];
+		if (l.startsWith("$status.")) {
+			let e = l.slice(8), t = i.status_groups?.[e];
+			if (!t) continue;
+			c.push({
+				code: l,
+				label: n(t.name) || e,
+				type: "status",
+				operators: o,
+				options: t.statuses.map((e) => ({
+					value: e.code,
+					label: n(e.name) || e.code,
+					color: e.color
+				}))
+			});
+			continue;
+		}
+		if (l.startsWith("$property.")) {
+			let e = l.slice(10), t = i.properties?.[e];
+			if (!t) continue;
+			c.push({
+				code: l,
+				label: n(t.name) || e,
+				type: "property",
+				operators: o
+			});
+			continue;
+		}
+		let u = i.fields.get(l);
+		if (!u) continue;
+		let d = t(n, u, l, a), f = u.values?.map((e) => ({
+			value: e.code,
+			label: n(e.name) || e.code,
+			color: e.color
+		})), p = e(u.special_values, r?.special_values?.[l]);
+		c.push({
+			code: l,
+			label: d,
+			type: u.type,
+			operators: o,
+			options: f,
+			ref: u.ref,
+			specialValues: p.length > 0 ? p : void 0
+		});
+	}
+	return c;
+}
+function a(e, n, r, i) {
+	if (i.startsWith("$status.")) {
+		let t = n.status_groups?.[i.slice(8)];
+		return t && e(t.name) || i;
+	}
+	if (i.startsWith("$property.")) {
+		let t = n.properties?.[i.slice(10)];
+		return t && e(t.name) || i;
+	}
+	let a = n.fields.get(i);
+	return a ? t(e, a, i, r) : i;
+}
+//#endregion
+export { r as buildFilterDisplayMeta, n as buildFilterFieldMeta, a as filterFieldLabel };

package/dist-lib/components/pages/list/page-size.js

@@ -0,0 +1,11 @@
+//#region src/components/pages/list/page-size.ts
+var e = 1e3, t = [
+	25,
+	50,
+	100,
+	200,
+	500,
+	1e3
+];
+//#endregion
+export { e as PER_PAGE_MAX, t as PER_PAGE_OPTIONS };

package/dist-lib/components/pages/list/sortable-header.js

@@ -0,0 +1,18 @@
+//#region src/components/pages/list/sortable-header.ts
+var e = /* @__PURE__ */ new Set([
+	"secret",
+	"password",
+	"json",
+	"string_array",
+	"int_array",
+	"uuid_array",
+	"multilang_array"
+]);
+function t(t, n) {
+	if (t === "_actions" || t === "_select" || t.startsWith("$property.") || t.startsWith("$refs.")) return !1;
+	if (t.startsWith("$status.")) return !0;
+	let r = n?.fields.get(t);
+	return !r || n?.list_pagination === "cursor" && r.cross_store_sortable === !1 ? !1 : !e.has(r.type);
+}
+//#endregion
+export { t as isHeaderSortable };

package/dist-lib/components/pages/list/table-features.js

@@ -0,0 +1,11 @@
+import { columnResizingFeature as e, columnSizingFeature as t, columnVisibilityFeature as n, rowSelectionFeature as r, rowSortingFeature as i, tableFeatures as a } from "@tanstack/react-table";
+//#region src/components/pages/list/table-features.ts
+var o = a({
+	rowSortingFeature: i,
+	rowSelectionFeature: r,
+	columnSizingFeature: t,
+	columnResizingFeature: e,
+	columnVisibilityFeature: n
+});
+//#endregion
+export { o as listTableFeatures };