@declarion/react 0.65.0 → 0.66.0

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

@@ -0,0 +1,44 @@
+import { applyAppendSort as e, applyShiftClickSort as t, parseSort as n, removeSortField as r, serializeSort as i, stripUnsupportedSortSegments as a } from "../../../lib/sort.js";
+import { useCallback as o, useMemo as s } from "react";
+//#region src/components/pages/list/useListSort.ts
+function c({ searchParams: c, setSearchParams: l, defaultSort: u, commitScreenTabSearch: d }) {
+	let f = c.get("sort") ?? u ?? "", p = s(() => n(f), [f]), m = s(() => {
+		let e = /* @__PURE__ */ new Map();
+		for (let t of p) t.nulls && e.set(t.field, t.nulls);
+		return e;
+	}, [p]), h = s(() => a(f), [f]), g = s(() => p.map((e) => ({
+		id: e.field,
+		desc: e.dir === "desc"
+	})), [p]), _ = o((e) => {
+		let t = e.slice(0, 5), n = new URLSearchParams(c), r = t.length === 0 ? "" : i(t);
+		r === (u ?? "") ? n.delete("sort") : n.set("sort", r), n.set("page", "1"), d(n.toString()), l(n);
+	}, [
+		c,
+		d,
+		l,
+		u
+	]);
+	return {
+		value: f,
+		cols: p,
+		nullsByField: m,
+		forRequest: h,
+		tableSorting: g,
+		write: _,
+		applyColumn: o((e, t, n) => _([{
+			field: e,
+			dir: t,
+			...n ? { nulls: n } : {}
+		}]), [_]),
+		shiftClickColumn: o((e) => _(t(p, e)), [p, _]),
+		appendColumn: o((t, n, r) => _(e(p, {
+			field: t,
+			dir: n,
+			...r ? { nulls: r } : {}
+		})), [p, _]),
+		clearColumn: o((e) => _(r(p, e)), [p, _]),
+		clearAll: o(() => _([]), [_])
+	};
+}
+//#endregion
+export { c as useListSort };

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

@@ -0,0 +1,148 @@
+import { coerceDisplayString as e } from "../../../lib/display-value.js";
+import { useText as t } from "../../../hooks/useText.js";
+import { toast as n } from "../../../lib/toast.js";
+import { useCreateObject as r, useDeleteObject as i, useUpdateObject as a } from "../../../hooks/useMutations.js";
+import { filtersEqual as o } from "../../../lib/filters.js";
+import { baseViewSearchParams as s, viewQuery as c } from "./useActiveView.js";
+import { useCallback as l, useMemo as u } from "react";
+import { useQueryClient as d } from "@tanstack/react-query";
+//#region src/components/pages/list/useListViews.ts
+function f(t, n) {
+	let r = e(n.id);
+	r && t.setQueriesData({ queryKey: ["entity-data", "view"] }, (t) => {
+		if (!t) return t;
+		let i = t.data.findIndex((t) => e(t.id) === r);
+		if (i === -1) return {
+			...t,
+			data: [n, ...t.data]
+		};
+		let a = [...t.data];
+		return a[i] = {
+			...a[i],
+			...n
+		}, {
+			...t,
+			data: a
+		};
+	});
+}
+function p(e) {
+	let t = new URLSearchParams(e);
+	return t.delete("filters"), t.delete("columns"), t.delete("sort"), t;
+}
+function m({ screenCode: m, screen: h, entity: g, searchParams: _, setSearchParams: v, userId: y, tenantId: b, all: x, activeId: S, active: C, clearedKey: w, filters: T, visibleColumns: E, sort: D }) {
+	let O = t(), k = d(), A = r("view"), j = a("view"), M = i("view"), N = u(() => {
+		if (!S || !C) return !1;
+		let e = c(g, C, h), t = e.filters, n = C.columns?.length ? C.columns : h?.default_columns ?? h?.columns ?? [], r = e.sort ?? "";
+		return !o(T, t) || E.join(",") !== n.join(",") || D !== r;
+	}, [
+		S,
+		C,
+		T,
+		E,
+		D,
+		g,
+		h
+	]), P = l((e) => {
+		let t = new URLSearchParams(_), r = s(_);
+		e.id ? r.set("view", e.id) : typeof window < "u" && window.sessionStorage?.setItem(w, "1"), v(r);
+		let i = t.get("view"), a = i ? x.find((e) => e.id === i) : void 0, o = (a?.columns?.length ? a.columns : h?.default_columns ?? h?.columns ?? []).join(",");
+		(t.get("columns") ?? o) !== o && n.info(O("list.view.applied_title", "View applied"), O("list.view.applied_body", "Your unsaved column changes were replaced."), { action: {
+			label: O("list.view.undo", "Undo"),
+			onClick: () => v(t)
+		} });
+	}, [
+		O,
+		_,
+		v,
+		w,
+		x,
+		h?.default_columns,
+		h?.columns
+	]), F = l(() => {
+		let e = p(_);
+		e.set("page", "1"), v(e);
+	}, [_, v]), I = l(async () => {
+		if (!C?.id || C.source !== "personal") return;
+		let e = await j.mutateAsync({
+			pkValues: C.id,
+			data: {
+				filters: T,
+				columns: E,
+				sort: D
+			}
+		});
+		e?.data && f(k, e.data), v(p(_)), await k.invalidateQueries({ queryKey: ["entity-data", "view"] });
+	}, [
+		C,
+		j,
+		T,
+		E,
+		D,
+		k,
+		_,
+		v
+	]);
+	return {
+		all: x,
+		activeId: S,
+		active: C,
+		clearedKey: w,
+		isDirty: N,
+		apply: P,
+		discard: F,
+		saveAsNew: l(async (t) => {
+			if (!y || !b) return;
+			let n = await A.mutateAsync({
+				tenant_id: b,
+				screen_code: m,
+				name: { en: t },
+				filters: T,
+				columns: E,
+				sort: D,
+				is_shared: !1,
+				is_default: !1
+			}), r = e(n.data.id);
+			if (!r) return;
+			f(k, n.data);
+			let i = p(_);
+			i.set("view", r), v(i), await k.invalidateQueries({ queryKey: ["entity-data", "view"] });
+		}, [
+			y,
+			b,
+			A,
+			m,
+			T,
+			E,
+			D,
+			k,
+			_,
+			v
+		]),
+		overwriteActive: I,
+		deleteView: l(async (e) => {
+			if (e.id && e.source === "personal") {
+				if (await M.mutateAsync(e.id), e.id === S) {
+					typeof window < "u" && window.sessionStorage?.setItem(w, "1");
+					let e = new URLSearchParams(_);
+					e.delete("view"), e.set("page", "1"), v(e, { replace: !0 });
+				}
+				await k.invalidateQueries({ queryKey: ["entity-data", "view"] });
+			}
+		}, [
+			M,
+			S,
+			w,
+			_,
+			v,
+			k
+		]),
+		isSaving: A.isPending || j.isPending,
+		isDeleting: M.isPending
+	};
+}
+function h(e, t) {
+	return t && t.source === "personal" ? e(t.name) : null;
+}
+//#endregion
+export { h as overwritableViewName, m as useListViews };

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

@@ -0,0 +1,106 @@
+import { buildDetailHrefFromId as e } from "../../../types/schema.js";
+import { useSchema as t } from "../../../hooks/useSchema.js";
+import { useText as n } from "../../../hooks/useText.js";
+import { buildActionBody as r, executeAction as i } from "../../../api/data.js";
+import { PEEK_ACTION_CODE as a, applyRowState as o, defaultFlatForSlot as s, filterLayoutForSlot as c } from "../../../lib/actions.js";
+import { useActionRunner as l } from "../../actions/ActionRunner.js";
+import { dispatchAction as u } from "../../../lib/action-dispatch.js";
+import { effectiveScreenForRecord as d, variantActionCodesForRecord as f } from "../../../lib/variants.js";
+import { useCallback as p, useMemo as m } from "react";
+//#region src/components/pages/list/useRowMenu.ts
+function h(e, t) {
+	let n = (e) => e === "__peek" && !t.peek || e === "__open" && !t.open, r = [];
+	for (let i of e) if (i.kind === "action") {
+		if (n(i.code)) continue;
+		r.push(i);
+	} else {
+		let e = h(i.items, t);
+		e.length > 0 && r.push({
+			...i,
+			items: e
+		});
+	}
+	return r;
+}
+function g(e, t) {
+	for (let n of e) if (n.kind === "action") {
+		if (n.code === t) return !0;
+	} else if (g(n.items, t)) return !0;
+	return !1;
+}
+function _({ row: _, rowId: v, screen: y, fullScreen: b, entity: x, entityCode: S, rowActions: C, tabNavigate: w, peekAllowed: T, hasDetailTarget: E, onPeek: D }) {
+	let O = n(), k = n("errors"), { run: A } = l(), { data: j } = t(), M = b.detail_screen === void 0 && y.detail_screen !== void 0 ? {
+		...b,
+		detail_screen: y.detail_screen
+	} : b, N = d(x, M, _) ?? M, P = m(() => {
+		let e = {}, t = N.row_actions === void 0 ? void 0 : new Set(N.row_actions);
+		for (let { code: n, action: r } of C) (!t || t.has(n)) && (e[n] = r);
+		return e;
+	}, [C, N.row_actions]), F = m(() => ({
+		entity: x,
+		entityCode: S ?? "",
+		screen: N,
+		screenRoute: N.route,
+		selectedRows: [],
+		selectedIds: [],
+		t: O,
+		tabNavigate: (e, t) => w(e, {
+			title: t?.title,
+			icon: t?.icon,
+			search: t?.search
+		}),
+		runActionApi: (e, t) => i(e, t),
+		openPeek: (e) => D(e ?? _),
+		recordHref: (t) => e(N, t, x, j?.screens)
+	}), [
+		x,
+		S,
+		N,
+		O,
+		w,
+		D,
+		_,
+		j?.screens
+	]), I = m(() => {
+		let e = N.action_layout ?? null, t = x.action_layout ?? null, n = e ?? t ?? s(P, "list_row");
+		return c(n, P, void 0, "list_row");
+	}, [
+		N,
+		x,
+		P
+	]), L = m(() => h(o(O, I, P, void 0, _, [], f(x, _)), {
+		peek: T,
+		open: E
+	}), [
+		O,
+		I,
+		P,
+		_,
+		x,
+		T,
+		E
+	]);
+	return {
+		layout: L,
+		entityActions: P,
+		runRowAction: p((e, t) => {
+			let n = u(k, e, t, { row: _ });
+			if (n !== null) return A({
+				action: t,
+				title: O(t.display?.name) || e,
+				row: _,
+				execute: (e) => i(n, r(e, [v]))
+			});
+		}, [
+			O,
+			k,
+			A,
+			v,
+			_
+		]),
+		widgetContext: F,
+		hasPeek: m(() => g(L, a), [L])
+	};
+}
+//#endregion
+export { _ as useRowMenu };

package/dist-lib/components/pages/list/visible-filters.js

@@ -0,0 +1,19 @@
+//#region src/components/pages/list/visible-filters.ts
+function e(e, t) {
+	let n = !1, r = (e) => e.flatMap((e) => {
+		if (e.or || e.and) {
+			let t = e.or ? "or" : "and", n = r(e[t]);
+			return n.length === 0 ? [] : [{
+				...e,
+				[t]: n
+			}];
+		}
+		return e.field && Object.hasOwn(t, e.field) ? [e] : (n = !0, []);
+	});
+	return {
+		filters: r(e),
+		omitted: n
+	};
+}
+//#endregion
+export { e as visibleFilters };

package/dist-lib/{Preferences.impl-Ct5xwZtT.js → components/pages/profile/Preferences.impl.js}

@@ -1,14 +1,17 @@
-import { Pt as e, wt as t } from "./useCurrentScreen-BZOHBGQZ.js";
-import { t as n } from "./Icons-lt-7lhYR.js";
-import { r } from "./CopyButton-DRIT_f0k.js";
-import { t as i } from "./Kbd-CNttVu0z.js";
-import { $ as a, z as o } from "./PropertyGridEditor-XrP6TZ5s.js";
-import { t as s } from "./SectionCard-BYHoHWJc.js";
-import { i as c, t as l } from "./useBranding-zcxEic2k.js";
-import { t as u } from "./utils-D_QDpB8_.js";
-import { t as d } from "./PageHeader-DiwLe7CO.js";
-import { n as f, t as p } from "./FieldRow-DedGIY9R.js";
-import { t as m } from "./PageShell-BJz1MiTH.js";
+import { textWithNodes as e } from "../../../lib/language.js";
+import { Icon as t } from "../../primitives/Icons.js";
+import { Btn as n } from "../../primitives/Btn.js";
+import { Kbd as r } from "../../primitives/Kbd.js";
+import { useText as i } from "../../../hooks/useText.js";
+import { SectionCard as a } from "../../primitives/SectionCard.js";
+import { BoolToggle as o } from "../../primitives/BoolToggle.js";
+import { BRANDING_PARAM_CODE as s } from "../../../lib/branding.js";
+import { useBranding as c } from "../../../hooks/useBranding.js";
+import { usePreferencesStore as l } from "../../../stores/preferences.js";
+import { cn as u } from "../../../lib/utils.js";
+import { PageHeader as d } from "../../chrome/PageHeader.js";
+import { FieldRow as f, FieldsGrid as p } from "../../detail-layout/FieldRow.js";
+import { PageShell as m } from "../../chrome/PageShell.js";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/pages/profile/Preferences.impl.tsx
 var _ = [
@@ -66,34 +69,34 @@ var _ = [
 	]
 ];
 function x() {
-	let x = o((e) => e.colorScheme), C = o((e) => e.accent), w = o((e) => e.density), T = o((e) => e.radius), E = o((e) => e.zebra), D = o((e) => e.set), O = o((e) => e.resetToDefaults), { branding: k } = l(), A = t();
+	let x = l((e) => e.colorScheme), C = l((e) => e.accent), w = l((e) => e.density), T = l((e) => e.radius), E = l((e) => e.zebra), D = l((e) => e.set), O = l((e) => e.resetToDefaults), { branding: k } = c(), A = i();
 	return /* @__PURE__ */ g(m, {
 		header: /* @__PURE__ */ h(d, {
 			title: A("profile.preferences", "Preferences"),
-			actions: /* @__PURE__ */ h(r, {
-				icon: /* @__PURE__ */ h(n.refresh, { size: 13 }),
+			actions: /* @__PURE__ */ h(n, {
+				icon: /* @__PURE__ */ h(t.refresh, { size: 13 }),
 				onClick: () => O(k?.preferences),
 				children: A("profile.preferences.reset", "Reset to defaults")
 			})
 		}),
-		children: [/* @__PURE__ */ h(s, {
+		children: [/* @__PURE__ */ h(a, {
 			title: A("profile.preferences.appearance", "Appearance"),
-			icon: /* @__PURE__ */ h(n.moon, { size: 14 }),
+			icon: /* @__PURE__ */ h(t.moon, { size: 14 }),
 			footer: e(A("profile.preferences.subtitle", "These settings apply for this session; a reload returns to your workspace defaults, which admins set through the {parameter} parameter."), { parameter: /* @__PURE__ */ h("span", {
 				className: "mono",
-				children: c
+				children: s
 			}) }),
-			children: /* @__PURE__ */ g(f, { children: [
-				/* @__PURE__ */ h(p, {
+			children: /* @__PURE__ */ g(p, { children: [
+				/* @__PURE__ */ h(f, {
 					label: A("profile.preferences.theme", "Theme"),
-					children: /* @__PURE__ */ h(S, { children: [["light", A("profile.preferences.theme.light", "Light")], ["dark", A("profile.preferences.theme.dark", "Dark")]].map(([e, t]) => /* @__PURE__ */ h(r, {
+					children: /* @__PURE__ */ h(S, { children: [["light", A("profile.preferences.theme.light", "Light")], ["dark", A("profile.preferences.theme.dark", "Dark")]].map(([e, t]) => /* @__PURE__ */ h(n, {
 						kind: x === e ? "primary" : "default",
 						"aria-pressed": x === e,
 						onClick: () => D("colorScheme", e),
 						children: t
 					}, e)) })
 				}),
-				/* @__PURE__ */ h(p, {
+				/* @__PURE__ */ h(f, {
 					label: A("profile.preferences.accent", "Accent color"),
 					hint: A("profile.preferences.accent_hint", "Your personal accent across the app"),
 					children: /* @__PURE__ */ h(S, { children: _.map((e) => /* @__PURE__ */ h("button", {
@@ -107,17 +110,17 @@ function x() {
 						className: u("size-6 cursor-pointer rounded-md border-2", C === e ? "border-foreground" : "border-transparent")
 					}, e)) })
 				}),
-				/* @__PURE__ */ h(p, {
+				/* @__PURE__ */ h(f, {
 					label: A("profile.preferences.density", "Density"),
 					hint: A("profile.preferences.density_hint", "Compact saves space; cozy is easier on the eyes"),
-					children: /* @__PURE__ */ h(S, { children: v.map(([e, t, n]) => /* @__PURE__ */ h(r, {
+					children: /* @__PURE__ */ h(S, { children: v.map(([e, t, r]) => /* @__PURE__ */ h(n, {
 						kind: w === e ? "primary" : "default",
 						"aria-pressed": w === e,
 						onClick: () => D("density", e),
-						children: A(t, n)
+						children: A(t, r)
 					}, e)) })
 				}),
-				/* @__PURE__ */ h(p, {
+				/* @__PURE__ */ h(f, {
 					label: A("profile.preferences.radius", "Border radius"),
 					children: /* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h("input", {
 						type: "range",
@@ -131,23 +134,23 @@ function x() {
 						children: [T, y]
 					})] })
 				}),
-				/* @__PURE__ */ h(p, {
+				/* @__PURE__ */ h(f, {
 					label: A("profile.preferences.zebra", "Zebra rows"),
 					labelId: "preferences-zebra",
 					hint: A("profile.preferences.zebra_hint", "Alternating row backgrounds on tables"),
-					children: /* @__PURE__ */ h(a, {
+					children: /* @__PURE__ */ h(o, {
 						value: E,
 						ariaLabelledby: "preferences-zebra",
 						onChange: (e) => D("zebra", e)
 					})
 				})
 			] })
-		}), /* @__PURE__ */ h(s, {
+		}), /* @__PURE__ */ h(a, {
 			title: A("profile.preferences.keyboard", "Keyboard"),
-			icon: /* @__PURE__ */ h(n.command, { size: 14 }),
-			children: /* @__PURE__ */ h(f, { children: b.map(([e, t, n]) => /* @__PURE__ */ h(p, {
+			icon: /* @__PURE__ */ h(t.command, { size: 14 }),
+			children: /* @__PURE__ */ h(p, { children: b.map(([e, t, n]) => /* @__PURE__ */ h(f, {
 				label: A(e, t),
-				children: /* @__PURE__ */ h(i, { children: n })
+				children: /* @__PURE__ */ h(r, { children: n })
 			}, e)) })
 		})]
 	});

package/dist-lib/components/pages/profile/Preferences.js

@@ -0,0 +1,12 @@
+import { Suspense as e, lazy as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/pages/profile/Preferences.tsx
+var r = t(() => import("./Preferences.impl.js").then((e) => ({ default: e.Preferences })));
+function i() {
+	return /* @__PURE__ */ n(e, {
+		fallback: null,
+		children: /* @__PURE__ */ n(r, {})
+	});
+}
+//#endregion
+export { i as Preferences };