@declarion/react 0.65.1 → 0.66.1

package/dist-lib/components/detail-layout/SectionBlock.js

@@ -0,0 +1,48 @@
+import { useText as e } from "../../hooks/useText.js";
+import { SectionCard as t } from "../primitives/SectionCard.js";
+import { DynamicIcon as n } from "../shared/DynamicIcon.js";
+import { schemaFieldHasValue as r } from "../file-widgets/host.js";
+import { LayoutRenderer as i } from "./LayoutRenderer.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/detail-layout/SectionBlock.tsx
+function o({ config: r, ctx: o }) {
+	let c = e(), { name: l, items: u, collapsed: d = !1, columns: f, icon: p, badge: m, emphasis: h } = r, g = r.hide_empty_fields === !0 && o.mode === "display";
+	if (g && !s(u, o)) return null;
+	let _ = {
+		...o,
+		withinCard: !0,
+		...f ? { columns: f } : null,
+		...g ? { hideEmptyFields: g } : null
+	}, v = p ? /* @__PURE__ */ a(n, {
+		name: p,
+		size: 14
+	}) : void 0, y = m ? {
+		text: c(m.text),
+		tone: m.tone,
+		dot: m.dot
+	} : void 0;
+	return /* @__PURE__ */ a(t, {
+		title: c(l),
+		defaultOpen: !d,
+		icon: v,
+		badge: y,
+		emphasis: h,
+		headingLevel: o.withinCard ? 3 : 2,
+		children: /* @__PURE__ */ a("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 12
+			},
+			children: /* @__PURE__ */ a(i, {
+				nodes: u,
+				ctx: _
+			})
+		})
+	});
+}
+function s(e, t) {
+	return e.some((e) => !e.fields || e.fields.some((e) => r(t.entity, t.record, e.code)));
+}
+//#endregion
+export { o as SectionBlock };

package/dist-lib/components/detail-layout/StatusesBlock.js

@@ -0,0 +1,18 @@
+import { StatusGroupsDisplay as e } from "../shared/StatusGroupsDisplay.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/detail-layout/StatusesBlock.tsx
+var n = () => {};
+function r({ node: r, ctx: i }) {
+	let { entity: a, objectStatuses: o, onSetStatus: s, isStatusPending: c, isNew: l } = i, u = a.status_groups ?? {};
+	if (l) return null;
+	let d = r.statuses === !0 || r.statuses, f = Object.fromEntries(Object.entries(u).filter(([e]) => d === !0 || d.includes(e)));
+	return Object.keys(f).length === 0 ? null : /* @__PURE__ */ t(e, {
+		statusGroups: f,
+		objectStatuses: o,
+		onSetStatus: s ?? n,
+		isPending: c ?? !1,
+		mode: i.mode
+	});
+}
+//#endregion
+export { r as StatusesBlock };

package/dist-lib/components/detail-layout/TimelineComposer.js

@@ -0,0 +1,205 @@
+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 { useText as r } from "../../hooks/useText.js";
+import { failureTitle as i } from "../../lib/failure.js";
+import { renderField as a } from "../fields/index.js";
+import { registerFieldRegion as o } from "../../lib/field-regions.js";
+import { useQuickAdd as s } from "./useQuickAdd.js";
+import { useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/detail-layout/TimelineComposer.tsx
+var g = "quick_entry", _ = 100, v = 240, y = 800, b = 80;
+function x({ config: x, parentEntity: S, parentId: C, schema: w }) {
+	let { values: T, quickAdd: E, childEntity: D, isPending: O, error: k, isReady: A, handleSubmit: j, handleFieldChange: M } = s(x, S, C, w), N = r(), P = r("errors"), [F, I] = f(v), L = d(null), R = d(null), [z, B] = f(y);
+	l(() => {
+		let e = R.current?.parentElement;
+		if (!e) return;
+		let t = () => {
+			let t = Math.max(_, e.clientHeight - b);
+			B(Math.min(y, t));
+		};
+		t();
+		let n = new ResizeObserver(t);
+		return n.observe(e), () => n.disconnect();
+	}, []), l(() => {
+		I((e) => Math.min(e, z));
+	}, [z]);
+	let V = d(T);
+	V.current = T;
+	let H = d(M);
+	H.current = M;
+	let U = d({}), W = u(() => ({
+		getField: (e) => V.current[e],
+		setField: (e, t) => {
+			H.current(e, t);
+		},
+		focusField: (e) => {
+			let t = U.current[e];
+			t && (t.querySelector("textarea, input, select, [contenteditable]") ?? t).focus();
+		}
+	}), []);
+	l(() => o(g, W), [W]);
+	let G = c((e) => {
+		e.preventDefault(), L.current = {
+			startY: e.clientY,
+			startHeight: F
+		};
+		let t = (e) => {
+			if (!L.current) return;
+			let t = L.current.startY - e.clientY, n = Math.min(z, Math.max(_, L.current.startHeight + t));
+			I(n);
+		}, n = () => {
+			L.current = null, document.removeEventListener("mousemove", t), document.removeEventListener("mouseup", n);
+		};
+		document.addEventListener("mousemove", t), document.addEventListener("mouseup", n);
+	}, [F, z]);
+	if (!E || E.fields.length === 0 || !D) return null;
+	let K = E.fields.find((e) => {
+		let t = D.fields.get(e);
+		return t && (t.type === "text" || t.type === "string");
+	}), q = [], J = [];
+	for (let e of E.fields) {
+		if (e === K) continue;
+		let t = D.fields.get(e);
+		t && (t.type === "enum" ? q.push(e) : J.push(e));
+	}
+	let Y = (e) => {
+		let t = D.fields.get(e);
+		return t ? /* @__PURE__ */ m("div", {
+			ref: (t) => {
+				U.current[e] = t;
+			},
+			children: a({
+				field: t,
+				fieldName: e,
+				value: T[e] ?? "",
+				mode: "edit",
+				onChange: (t) => M(e, t),
+				record: T,
+				t: N
+			})
+		}, e) : null;
+	};
+	return /* @__PURE__ */ h("div", {
+		ref: R,
+		style: {
+			flexShrink: 0,
+			borderTop: "1px solid var(--divider)",
+			background: "var(--surface)",
+			display: "flex",
+			flexDirection: "column",
+			height: `${F}px`
+		},
+		children: [/* @__PURE__ */ m("div", {
+			onMouseDown: G,
+			title: N("record.layout.drag_to_resize", "Drag to resize"),
+			style: {
+				height: 12,
+				cursor: "row-resize",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				flexShrink: 0
+			},
+			children: /* @__PURE__ */ m("div", { style: {
+				width: 56,
+				height: 3,
+				borderRadius: 999,
+				background: "var(--border)"
+			} })
+		}), /* @__PURE__ */ h("form", {
+			onSubmit: j,
+			onKeyDown: (e) => {
+				(e.metaKey || e.ctrlKey) && e.key === "Enter" && (e.preventDefault(), e.currentTarget.requestSubmit());
+			},
+			style: {
+				flex: 1,
+				minHeight: 0,
+				display: "flex",
+				flexDirection: "column",
+				gap: 6,
+				padding: "0 12px 8px"
+			},
+			children: [
+				q.length > 0 && /* @__PURE__ */ m("div", {
+					style: {
+						display: "flex",
+						flexWrap: "wrap",
+						alignItems: "center",
+						gap: 6,
+						flexShrink: 0
+					},
+					children: q.map(Y)
+				}),
+				K && D.fields.get(K) && /* @__PURE__ */ m("div", {
+					style: {
+						flex: 1,
+						minHeight: 0,
+						display: "flex"
+					},
+					ref: (e) => {
+						U.current[K] = e;
+					},
+					children: a({
+						field: D.fields.get(K),
+						fieldName: K,
+						value: T[K] ?? "",
+						mode: "edit",
+						onChange: (e) => M(K, e),
+						record: T,
+						fill: !0,
+						t: N
+					})
+				}),
+				/* @__PURE__ */ h("div", {
+					style: {
+						display: "flex",
+						flexWrap: "wrap",
+						alignItems: "center",
+						gap: 6,
+						flexShrink: 0
+					},
+					children: [J.map(Y), /* @__PURE__ */ h("div", {
+						style: {
+							marginLeft: "auto",
+							display: "flex",
+							alignItems: "center",
+							gap: 8
+						},
+						children: [/* @__PURE__ */ m("span", {
+							style: {
+								fontSize: 10.5,
+								color: "var(--text-4)"
+							},
+							children: e(N("record.related.shortcut_to_add", "{keys} to add"), { keys: /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("span", {
+								className: "mono",
+								children: "⌘"
+							}), /* @__PURE__ */ m("span", {
+								className: "mono",
+								children: "↵"
+							})] }) })
+						}), /* @__PURE__ */ m(n, {
+							type: "submit",
+							kind: "primary",
+							icon: /* @__PURE__ */ m(t.plus, { size: 13 }),
+							disabled: O || !A,
+							children: N("record.related.add", "Add")
+						})]
+					})]
+				}),
+				k != null && /* @__PURE__ */ m("p", {
+					style: {
+						fontSize: 11,
+						color: "var(--danger)",
+						margin: 0,
+						flexShrink: 0
+					},
+					children: i(P, k)
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { x as TimelineComposer };

package/dist-lib/components/detail-layout/blockMeta.js

@@ -0,0 +1,27 @@
+//#region src/components/detail-layout/blockMeta.ts
+function e(e) {
+	return e.children ?? e.associated;
+}
+function t(t, n, r) {
+	let i = e(t);
+	if (i) {
+		if (t.label) return r(t.label);
+		let e = n.entity.children?.find((e) => e.entity === i);
+		if (e?.display?.name) return r(e.display.name);
+		let a = n.schema.entities[i];
+		return a && (r(a.display.name_plural) || r(a.display.name)) || i;
+	}
+	return t.section ? r(t.section.name) : r("record.tabs.fallback", "Tab");
+}
+function n(t, n) {
+	if (t.icon) return t.icon;
+	let r = e(t);
+	if (r) {
+		let e = n.entity.children?.find((e) => e.entity === r);
+		if (e?.display?.icon) return e.display.icon;
+		let t = n.schema.entities[r];
+		if (t) return t.display.icon;
+	}
+}
+//#endregion
+export { n as resolveBlockIcon, t as resolveBlockLabel };

package/dist-lib/components/detail-layout/useManualColumnResize.js

@@ -0,0 +1,94 @@
+import { MAX_COL_WIDTH as e, useListLayout as t } from "../../stores/list-layout.js";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/detail-layout/useManualColumnResize.tsx
+function s(e, t, n) {
+	return `${e}::child::${t}.${n}`;
+}
+function c(t) {
+	return Math.min(e, Math.max(60, Math.round(t)));
+}
+function l(e) {
+	let { widths: o, setWidths: s, resetWidths: l } = t(e), [u, d] = a({}), f = i(null);
+	r(() => {
+		let e = (e) => {
+			let t = f.current;
+			if (!t) return;
+			let n = c(t.startWidth + (e.clientX - t.startX));
+			t.current = n, d({ [t.colId]: n });
+		}, t = () => {
+			let e = f.current;
+			e && (f.current = null, s({ [e.colId]: e.current }), d({}));
+		};
+		return window.addEventListener("mousemove", e), window.addEventListener("mouseup", t), () => {
+			window.removeEventListener("mousemove", e), window.removeEventListener("mouseup", t);
+		};
+	}, [s]);
+	let p = n((e, t) => {
+		t.preventDefault(), t.stopPropagation();
+		let n = t.currentTarget.closest("th")?.getBoundingClientRect().width, r = o[e] ?? (n && n > 0 ? n : 150);
+		f.current = {
+			colId: e,
+			startX: t.clientX,
+			startWidth: Math.round(r),
+			current: Math.round(r)
+		};
+	}, [o]);
+	return {
+		headerStyle: n((e, t) => {
+			let n = u[e] ?? o[e];
+			return n == null ? {
+				...t,
+				position: "relative"
+			} : {
+				...t,
+				position: "relative",
+				width: n,
+				minWidth: n,
+				maxWidth: n
+			};
+		}, [u, o]),
+		cellStyle: n((e, t) => {
+			let n = u[e] ?? o[e];
+			return n == null ? t : {
+				...t,
+				width: n,
+				maxWidth: n,
+				overflow: "hidden",
+				textOverflow: "ellipsis",
+				whiteSpace: "nowrap"
+			};
+		}, [u, o]),
+		onHandleMouseDown: p,
+		hasWidths: Object.keys(o).length > 0,
+		resetWidths: l
+	};
+}
+function u({ colId: e, onMouseDown: t }) {
+	return /* @__PURE__ */ o("span", {
+		"data-testid": "col-resize-handle",
+		"aria-hidden": "true",
+		onMouseDown: (n) => t(e, n),
+		onClick: (e) => e.stopPropagation(),
+		style: {
+			position: "absolute",
+			top: 0,
+			right: 0,
+			height: "100%",
+			width: 9,
+			display: "flex",
+			justifyContent: "center",
+			cursor: "col-resize",
+			userSelect: "none"
+		},
+		children: /* @__PURE__ */ o("span", { style: {
+			width: 2,
+			height: "55%",
+			alignSelf: "center",
+			background: "var(--border)",
+			borderRadius: "var(--radius-xs)"
+		} })
+	});
+}
+//#endregion
+export { u as ManualResizeHandle, s as childLayoutKey, l as useManualColumnResize };

package/dist-lib/components/detail-layout/useQuickAdd.js

@@ -0,0 +1,85 @@
+import { formatWireDateTime as e } from "../../lib/timestamp.js";
+import { pkValuePartsToId as t } from "../../types/schema.js";
+import { createEntity as n } from "../../api/data.js";
+import { ENTITY_CHILDREN_KEY as r } from "../../hooks/useChildrenData.js";
+import { buildQuickAddPayload as i, isQuickAddReady as a } from "../../lib/quick-add.js";
+import { useState as o } from "react";
+import { useMutation as s, useQueryClient as c } from "@tanstack/react-query";
+//#region src/components/detail-layout/useQuickAdd.ts
+function l(l, u, d, f) {
+	let [p, m] = o(() => {
+		let t = l.quick_add, n = f.entities[l.entity], r = {};
+		if (t?.fields) for (let i of t.fields) t.defaults?.[i] == null ? n?.fields.get(i)?.type === "timestamp" && (r[i] = e()) : r[i] = t.defaults[i];
+		return r;
+	}), h = c(), { mutate: g, isPending: _, error: v, reset: y } = s({
+		mutationFn: (e) => n(l.entity, e),
+		onMutate: async (e) => {
+			let n = Array.isArray(d) ? t(d.map(String)) : d, i = [
+				r,
+				u,
+				n,
+				l.entity
+			];
+			await h.cancelQueries({ queryKey: i });
+			let a = h.getQueriesData({ queryKey: i }), o = {
+				...e,
+				id: `__optimistic_${crypto.randomUUID()}`,
+				__optimistic: !0
+			};
+			return h.setQueriesData({ queryKey: i }, (e) => {
+				if (!e || typeof e != "object") return e;
+				if ("pages" in e && Array.isArray(e.pages) && e.pages.length > 0) {
+					let t = e, [n, ...r] = t.pages;
+					return {
+						...t,
+						pages: [{
+							...n,
+							data: [o, ...n.data]
+						}, ...r]
+					};
+				}
+				return e;
+			}), { snapshots: a };
+		},
+		onError: (e, t, n) => {
+			if (n?.snapshots) for (let [e, t] of n.snapshots) h.setQueryData(e, t);
+		},
+		onSuccess: () => {
+			let t = l.quick_add, n = f.entities[l.entity], r = {};
+			if (t?.fields) for (let i of t.fields) r[i] = t?.defaults?.[i] == null ? n?.fields.get(i)?.type === "timestamp" ? e() : "" : t.defaults[i];
+			m(r);
+		},
+		onSettled: () => {
+			let e = Array.isArray(d) ? t(d.map(String)) : d;
+			h.invalidateQueries({ queryKey: [
+				r,
+				u,
+				e,
+				l.entity
+			] });
+		}
+	}), b = l.quick_add, x = f.entities[l.entity], S = b?.fields.filter((e) => x?.fields.get(e)?.required && !x?.fields.get(e)?.generate) ?? [], C = a(p, S);
+	function w(e) {
+		if (e.preventDefault(), !b) return;
+		let t = i(p, b.defaults, l.foreign_key, d);
+		g(t);
+	}
+	function T(e, t) {
+		v && y(), m((n) => ({
+			...n,
+			[e]: t
+		}));
+	}
+	return {
+		values: p,
+		quickAdd: b,
+		childEntity: x,
+		isPending: _,
+		error: v,
+		isReady: C,
+		handleSubmit: w,
+		handleFieldChange: T
+	};
+}
+//#endregion
+export { l as useQuickAdd };