@declarion/react 0.65.1 → 0.66.1

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

@@ -0,0 +1,609 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { extractPkValues as t, fieldDisplayName as n } from "../../types/schema.js";
+import { textWithNodes as r } from "../../lib/language.js";
+import { Icon as i } from "../primitives/Icons.js";
+import { Btn as a } from "../primitives/Btn.js";
+import { IconBtn as o } from "../primitives/IconBtn.js";
+import { Pill as s } from "../primitives/Pill.js";
+import { HoverCard as c } from "../primitives/HoverCard.js";
+import { useText as l } from "../../hooks/useText.js";
+import { Spinner as ee } from "../primitives/Spinner.js";
+import { deleteObject as u, encodeObjectId as d, updateEntity as f } from "../../api/data.js";
+import { failureTitle as p } from "../../lib/failure.js";
+import { toast as m } from "../../lib/toast.js";
+import { ENTITY_CHILDREN_KEY as te } from "../../hooks/useChildrenData.js";
+import { renderField as h } from "../fields/index.js";
+import { useTimelineData as g } from "../../hooks/useTimelineData.js";
+import { TimelineComposer as _ } from "./TimelineComposer.js";
+import { useCallback as v, useEffect as y, useLayoutEffect as b, useMemo as x, useRef as S, useState as C } from "react";
+import { useMutation as w, useQueryClient as T } from "@tanstack/react-query";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
+//#region src/components/detail-layout/ChildrenTimeline.tsx
+var k = 80, A = 200, j = 6, M = 2e4, N = 280;
+function P(e) {
+	if (e.length > N) return !0;
+	let t = 0;
+	for (let n of e) if (n === "\n" && ++t >= j) return !0;
+	return !1;
+}
+function F(n, r) {
+	if (I(r)) {
+		let t = r.id;
+		return t == null ? "" : e(t);
+	}
+	return d(t(n, r));
+}
+function I(e) {
+	return e.__optimistic === !0;
+}
+function L({ config: e, parentEntity: t, parentId: n, schema: r }) {
+	let i = l(), o = l("errors"), s = r.entities[e.entity], { rows: c, refs: u, fetchNextPage: d, hasOlder: f, isFetchingOlder: p, isLoading: m, isError: te } = g(t, n, e.entity, e.foreign_key, e.timeline?.time_field, e.limit), h = e.timeline, w = h?.scroll ?? !1, T = (e.sort ?? "").endsWith(":asc"), j = x(() => T ? [...c].reverse() : c, [c, T]), M = h?.auto_scroll ?? "none", N = S(null), P = S(null), L = S(!1), z = S(0), U = S(null), W = S(null), G = S(!0), K = S(null);
+	y(() => {
+		L.current = !1, z.current = 0, U.current = null, W.current = null, G.current = !0, K.current = null;
+	}, [n]), b(() => {
+		p && N.current && (K.current = {
+			scrollHeight: N.current.scrollHeight,
+			scrollTop: N.current.scrollTop
+		});
+	}, [p]), b(() => {
+		let e = N.current;
+		if (!e || j.length === 0 || !s) {
+			z.current = j.length;
+			return;
+		}
+		let t = F(s, j[0]), n = F(s, j[j.length - 1]), r = !L.current, i = j.length > z.current && z.current > 0, a = i && (T && t !== U.current && n === W.current || !T && n !== W.current && t === U.current), o = i && !a;
+		if (r) T && M === "bottom" && (e.scrollTop = e.scrollHeight), L.current = !0;
+		else if (a && K.current) {
+			let t = K.current;
+			T && (e.scrollTop = t.scrollTop + (e.scrollHeight - t.scrollHeight)), K.current = null;
+		} else o && T && G.current && (e.scrollTop = e.scrollHeight);
+		z.current = j.length, U.current = t, W.current = n;
+	}, [
+		j,
+		M,
+		T,
+		s
+	]);
+	let q = v(() => {
+		let e = N.current;
+		e && (G.current = e.scrollHeight - e.scrollTop - e.clientHeight < k);
+	}, []);
+	y(() => {
+		let e = P.current;
+		if (!e || typeof IntersectionObserver > "u") return;
+		let t = new IntersectionObserver((e) => {
+			for (let t of e) t.isIntersecting && f && !p && d();
+		}, {
+			root: N.current ?? null,
+			rootMargin: `${A}px 0px 0px 0px`,
+			threshold: 0
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [
+		f,
+		p,
+		d
+	]);
+	let [J, Y] = C(null);
+	if (!s) return /* @__PURE__ */ D("div", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-3)",
+			padding: "8px 0"
+		},
+		children: o("record.related_entity_not_found", "The related record type is not declared in this deployment.")
+	});
+	let X = e.quick_add?.fields ?? [h?.content_field].filter(Boolean), Z = i(s.display?.name_plural) || i(s.display?.name) || e.entity, Q = f ? /* @__PURE__ */ D("div", {
+		style: {
+			display: "flex",
+			justifyContent: "center",
+			padding: "6px 0"
+		},
+		children: /* @__PURE__ */ D(a, {
+			size: "xs",
+			onClick: () => d(),
+			disabled: p,
+			icon: p ? /* @__PURE__ */ D(ee, { size: 11 }) : void 0,
+			children: p ? i("record.loading", "Loading…") : i("record.timeline.load_older", "Load older")
+		})
+	}) : null, ne = /* @__PURE__ */ D("div", {
+		ref: P,
+		"aria-hidden": "true",
+		style: { height: 1 }
+	}), $;
+	if (te) $ = /* @__PURE__ */ D("div", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--danger)",
+			padding: 12
+		},
+		children: o("record.related_rows_unreadable", "The related records could not be loaded.")
+	});
+	else if (m) $ = /* @__PURE__ */ O("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 8,
+			padding: 12
+		},
+		children: [/* @__PURE__ */ D("div", { style: {
+			height: 64,
+			background: "var(--surface-3)",
+			borderRadius: "var(--radius-md)"
+		} }), /* @__PURE__ */ D("div", { style: {
+			height: 64,
+			background: "var(--surface-3)",
+			borderRadius: "var(--radius-md)"
+		} })]
+	});
+	else if (j.length === 0) $ = /* @__PURE__ */ O(E, { children: [ne, /* @__PURE__ */ D("div", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-3)",
+			padding: 12
+		},
+		children: i("record.timeline.empty", "No activity yet.")
+	})] });
+	else {
+		let a = (i, a) => {
+			let o = F(s, i) || String(a);
+			return /* @__PURE__ */ D(R, {
+				row: i,
+				rowId: o,
+				childEntity: s,
+				entityCode: e.entity,
+				parentEntity: t,
+				parentId: n,
+				timeline: h,
+				editableFields: X,
+				refs: u,
+				isEditing: J === o,
+				onStartEdit: () => Y(o),
+				onCancelEdit: () => Y(null),
+				onSaved: () => Y(null),
+				schema: r,
+				optimistic: I(i)
+			}, o);
+		}, o = h?.time_field, c;
+		if (o) {
+			let e = [];
+			j.forEach((t, n) => {
+				let r = t[o], a = B(r), s = e[e.length - 1];
+				!s || s.key !== a ? e.push({
+					key: a,
+					label: V(i, r),
+					rows: [{
+						row: t,
+						idx: n
+					}]
+				}) : s.rows.push({
+					row: t,
+					idx: n
+				});
+			}), c = e.map((e) => /* @__PURE__ */ O("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ D(H, {
+					label: e.label,
+					count: e.rows.length
+				}), e.rows.map(({ row: e, idx: t }) => a(e, t))]
+			}, `day-${e.key}`));
+		} else c = j.map((e, t) => a(e, t));
+		$ = /* @__PURE__ */ O(E, { children: [
+			ne,
+			Q,
+			c
+		] });
+	}
+	return w ? /* @__PURE__ */ O("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			height: "100%",
+			borderLeft: "1px solid var(--border)",
+			background: "var(--surface-2)",
+			color: "var(--text)"
+		},
+		children: [
+			/* @__PURE__ */ D("div", {
+				style: {
+					padding: "10px 16px",
+					borderBottom: "1px solid var(--divider)",
+					background: "var(--surface)"
+				},
+				children: /* @__PURE__ */ D("h3", {
+					style: {
+						margin: 0,
+						fontSize: 12.5,
+						fontWeight: 600
+					},
+					children: Z
+				})
+			}),
+			/* @__PURE__ */ D("div", {
+				ref: N,
+				onScroll: q,
+				style: {
+					flex: 1,
+					overflowY: "auto",
+					padding: 12,
+					display: "flex",
+					flexDirection: "column",
+					gap: 8
+				},
+				children: $
+			}),
+			/* @__PURE__ */ D(_, {
+				config: e,
+				parentEntity: t,
+				parentId: n,
+				schema: r
+			})
+		]
+	}) : /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		},
+		children: $
+	}), /* @__PURE__ */ D(_, {
+		config: e,
+		parentEntity: t,
+		parentId: n,
+		schema: r
+	})] });
+}
+function R({ row: t, rowId: c, childEntity: d, entityCode: g, parentEntity: _, parentId: y, timeline: b, editableFields: x, refs: S, isEditing: E, onStartEdit: k, onCancelEdit: A, onSaved: j, schema: M, optimistic: N = !1 }) {
+	let P = l(), F = l("errors"), I = T(), [L, R] = C({}), B = v(() => {
+		I.invalidateQueries({ queryKey: [
+			te,
+			_,
+			y,
+			g
+		] });
+	}, [
+		I,
+		_,
+		y,
+		g
+	]), V = w({
+		mutationFn: (e) => {
+			let n = t.$row_version, r = typeof n == "string" && n !== "" ? {
+				...e,
+				$row_version: n
+			} : e;
+			return f(g, c, r);
+		},
+		onSuccess: () => {
+			B(), m.success(P("record.timeline.updated", "Updated")), j();
+		},
+		onError: (e) => m.error(p(F, e))
+	}), H = w({
+		mutationFn: () => u(g, c),
+		onSuccess: () => {
+			B(), m.success(P("record.timeline.deleted", "Deleted"));
+		},
+		onError: (e) => m.error(p(F, e))
+	}), W = v(() => {
+		let e = {};
+		for (let n of x) e[n] = t[n] ?? "";
+		R(e), k();
+	}, [
+		t,
+		x,
+		k
+	]), G = v((e, t) => {
+		R((n) => ({
+			...n,
+			[e]: t
+		}));
+	}, []), K = b?.time_field, q = b?.type_field, J = b?.summary_field, Y = b?.content_field, X = b?.author_field, Z = b?.direction_field, Q = b?.intent_field;
+	return E ? /* @__PURE__ */ O("div", {
+		style: {
+			borderRadius: "var(--radius-lg)",
+			border: "1px solid var(--accent)",
+			background: "var(--surface)",
+			padding: 12,
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		},
+		children: [x.map((e) => {
+			let t = d.fields.get(e);
+			return t ? /* @__PURE__ */ O("div", { children: [/* @__PURE__ */ D("label", {
+				style: {
+					fontSize: 11,
+					color: "var(--text-3)",
+					marginBottom: 4,
+					display: "block"
+				},
+				children: n(P, t, e, M.entities)
+			}), h({
+				field: t,
+				fieldName: e,
+				value: L[e] ?? "",
+				mode: "edit",
+				onChange: (t) => G(e, t),
+				record: L,
+				t: P
+			})] }, e) : null;
+		}), /* @__PURE__ */ O("div", {
+			style: {
+				display: "flex",
+				alignItems: "center",
+				gap: 6,
+				paddingTop: 4
+			},
+			children: [/* @__PURE__ */ D(a, {
+				kind: "primary",
+				size: "xs",
+				icon: V.isPending ? /* @__PURE__ */ D(ee, { size: 12 }) : /* @__PURE__ */ D(i.check, { size: 12 }),
+				onClick: () => V.mutate(L),
+				disabled: V.isPending,
+				children: V.isPending ? P("dialog.saving", "Saving…") : P("dialog.save", "Save")
+			}), /* @__PURE__ */ D(a, {
+				size: "xs",
+				icon: /* @__PURE__ */ D(i.x, { size: 12 }),
+				onClick: () => {
+					R({}), A();
+				},
+				disabled: V.isPending,
+				children: P("dialog.cancel", "Cancel")
+			})]
+		})]
+	}) : /* @__PURE__ */ O("div", {
+		className: "group",
+		"data-optimistic": N || void 0,
+		style: {
+			borderRadius: "var(--radius-lg)",
+			border: "1px solid var(--border)",
+			background: "var(--surface)",
+			padding: 12,
+			transition: "border-color .12s",
+			opacity: N ? .6 : 1
+		},
+		onMouseEnter: (e) => e.currentTarget.style.borderColor = "var(--border-strong)",
+		onMouseLeave: (e) => e.currentTarget.style.borderColor = "var(--border)",
+		children: [
+			/* @__PURE__ */ O("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 6,
+					flexWrap: "wrap",
+					fontSize: 11.5,
+					color: "var(--text-3)"
+				},
+				children: [
+					K && t[K] != null && d.fields.get(K) && /* @__PURE__ */ D("span", {
+						style: { fontWeight: 500 },
+						children: h({
+							field: d.fields.get(K),
+							fieldName: K,
+							value: t[K],
+							mode: "display",
+							record: t,
+							refs: S,
+							t: P
+						})
+					}),
+					q && t[q] != null && d.fields.get(q) && /* @__PURE__ */ D(s, {
+						tone: "slate",
+						size: "xs",
+						children: h({
+							field: d.fields.get(q),
+							fieldName: q,
+							value: t[q],
+							mode: "display",
+							record: t,
+							refs: S,
+							t: P
+						})
+					}),
+					Z && t[Z] != null && d.fields.get(Z) && /* @__PURE__ */ D(U, {
+						value: t[Z],
+						field: d.fields.get(Z)
+					}),
+					Q && t[Q] != null && d.fields.get(Q) && /* @__PURE__ */ D(s, {
+						tone: "slate",
+						size: "xs",
+						children: h({
+							field: d.fields.get(Q),
+							fieldName: Q,
+							value: t[Q],
+							mode: "display",
+							record: t,
+							refs: S,
+							t: P
+						})
+					}),
+					X && t[X] != null && d.fields.get(X) && /* @__PURE__ */ D("span", { children: r(P("record.timeline.by_author", "by {author}"), { author: h({
+						field: d.fields.get(X),
+						fieldName: X,
+						value: t[X],
+						mode: "display",
+						record: t,
+						refs: S,
+						t: P
+					}) }) }),
+					!N && /* @__PURE__ */ O("div", {
+						style: {
+							marginLeft: "auto",
+							display: "flex",
+							alignItems: "center",
+							gap: 2
+						},
+						children: [/* @__PURE__ */ D(o, {
+							size: 22,
+							icon: /* @__PURE__ */ D(i.edit, { size: 11 }),
+							onClick: W,
+							title: P("record.action.edit", "Edit")
+						}), /* @__PURE__ */ D(o, {
+							size: 22,
+							icon: /* @__PURE__ */ D(i.trash, { size: 11 }),
+							onClick: () => H.mutate(),
+							title: P("record.action.delete", "Delete")
+						})]
+					})
+				]
+			}),
+			J && t[J] != null && d.fields.get(J) && /* @__PURE__ */ D("div", {
+				style: {
+					fontSize: 12.5,
+					fontWeight: 500,
+					marginTop: 6
+				},
+				children: h({
+					field: d.fields.get(J),
+					fieldName: J,
+					value: t[J],
+					mode: "display",
+					record: t,
+					refs: S,
+					t: P
+				})
+			}),
+			Y && t[Y] != null && Y !== J && d.fields.get(Y) && /* @__PURE__ */ D(z, {
+				rendered: h({
+					field: d.fields.get(Y),
+					fieldName: Y,
+					value: t[Y],
+					mode: "display",
+					record: t,
+					refs: S,
+					t: P
+				}),
+				text: e(t[Y])
+			})
+		]
+	});
+}
+function z({ rendered: e, text: t }) {
+	let n = l(), r = {
+		fontSize: 12.5,
+		fontWeight: 400,
+		marginTop: 6
+	};
+	if (!P(t)) return /* @__PURE__ */ D("div", {
+		style: r,
+		children: e
+	});
+	let i = t.length > M, a = i ? t.slice(0, M) : t;
+	return /* @__PURE__ */ D("div", {
+		style: {
+			...r,
+			display: "-webkit-box",
+			WebkitBoxOrient: "vertical",
+			WebkitLineClamp: j,
+			overflow: "hidden",
+			whiteSpace: "pre-wrap",
+			overflowWrap: "anywhere"
+		},
+		children: /* @__PURE__ */ D(c, {
+			width: 380,
+			content: /* @__PURE__ */ O("div", {
+				style: {
+					fontSize: 12.5,
+					whiteSpace: "pre-wrap",
+					overflowWrap: "anywhere"
+				},
+				children: [a, i && /* @__PURE__ */ D("div", {
+					style: {
+						marginTop: 8,
+						fontSize: 11,
+						color: "var(--text-3)"
+					},
+					children: n("record.timeline.truncated", "Truncated for display - open the record for the full text.")
+				})]
+			}),
+			children: e
+		})
+	});
+}
+function B(t) {
+	if (t == null) return "";
+	let n = new Date(e(t));
+	return Number.isNaN(n.getTime()) ? "" : `${n.getFullYear()}-${n.getMonth()}-${n.getDate()}`;
+}
+function V(t, n) {
+	if (n == null) return "—";
+	let r = new Date(e(n));
+	if (Number.isNaN(r.getTime())) return "—";
+	let i = /* @__PURE__ */ new Date(), a = /* @__PURE__ */ new Date();
+	a.setDate(i.getDate() - 1);
+	let o = (e, t) => e.toDateString() === t.toDateString();
+	return o(r, i) ? t("record.timeline.today", "Today") : o(r, a) ? t("record.timeline.yesterday", "Yesterday") : r.toLocaleDateString(t.language, {
+		weekday: "short",
+		month: "short",
+		day: "numeric"
+	});
+}
+function H({ label: e, count: t }) {
+	return /* @__PURE__ */ O("div", {
+		style: {
+			position: "sticky",
+			top: -4,
+			zIndex: 1,
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			padding: "4px 2px",
+			background: "linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 65%, transparent 100%)"
+		},
+		children: [
+			/* @__PURE__ */ D("span", {
+				style: {
+					fontSize: 11,
+					fontWeight: 600,
+					color: "var(--text-3)"
+				},
+				children: e
+			}),
+			/* @__PURE__ */ D("span", { style: {
+				flex: 1,
+				height: 1,
+				background: "var(--divider)"
+			} }),
+			/* @__PURE__ */ D("span", {
+				className: "num",
+				style: {
+					fontSize: 10.5,
+					color: "var(--text-4)"
+				},
+				children: t
+			})
+		]
+	});
+}
+function U({ value: e, field: t }) {
+	let n = l(), r = W(e, t);
+	return r === null ? null : /* @__PURE__ */ O("span", {
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			gap: 3,
+			padding: "1px 6px 1px 4px",
+			borderRadius: 999,
+			fontSize: 10.5,
+			fontWeight: 600,
+			background: r ? "var(--accent-soft)" : "var(--info-soft)",
+			color: r ? "var(--accent)" : "var(--info)"
+		},
+		children: [D(r ? i.arrowUp : i.arrowDown, { size: 10 }), r ? n("record.timeline.outbound", "Out") : n("record.timeline.inbound", "In")]
+	});
+}
+function W(e, t) {
+	if (t.type === "bool") return e === !0;
+	if (typeof e == "string") {
+		let t = e.toLowerCase();
+		if (t === "outbound" || t === "out") return !0;
+		if (t === "inbound" || t === "in") return !1;
+	}
+	return null;
+}
+//#endregion
+export { L as ChildrenTimeline };

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

@@ -0,0 +1,40 @@
+import { useText as e } from "../../hooks/useText.js";
+import { renderSchemaField as t } from "../file-widgets/host.js";
+import { AuditMetaStrip as n } from "../chrome/AuditMetaStrip.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/detail-layout/DetailAuditStrip.tsx
+function i({ screen: i, entity: a, entityCode: o, record: s, refs: c, schema: l }) {
+	let u = e(), d = i.audit;
+	if (d?.enabled === !1) return null;
+	let f = (e) => {
+		if (!e || !a.fields.get(e)) return;
+		let n = s[e];
+		if (n != null && n !== "") return t({
+			entity: a,
+			entityCode: o,
+			fieldName: e,
+			record: s,
+			mode: "display",
+			refs: c,
+			entities: l.entities,
+			screens: l.screens,
+			surface: "list",
+			t: u
+		});
+	}, p = d?.lines && d.lines.length > 0 ? d.lines.map((e) => ({
+		label: u(e.label),
+		at: f(e.at),
+		by: f(e.by)
+	})) : [{
+		label: u("record.audit.created", "Created"),
+		at: f("created_at"),
+		by: f("created_by")
+	}, {
+		label: u("record.audit.updated", "Updated"),
+		at: f("updated_at"),
+		by: f("updated_by")
+	}];
+	return /* @__PURE__ */ r(n, { lines: p });
+}
+//#endregion
+export { i as DetailAuditStrip };

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

@@ -0,0 +1,54 @@
+import { Pill as e } from "../primitives/Pill.js";
+import { useText as t } from "../../hooks/useText.js";
+import { CopyButton as n } from "../shared/CopyButton.js";
+import { renderSchemaField as r, resolveSchemaFieldLabel as i } from "../file-widgets/host.js";
+import { copyableValue as a } from "./FieldRow.js";
+import { HighlightsStrip as o } from "../chrome/HighlightsStrip.js";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/detail-layout/DetailHighlights.tsx
+function u({ screen: u, entity: d, entityCode: f, record: p, refs: m, objectStatuses: h, schema: g }) {
+	let _ = t(), v = u.highlights;
+	if (!v || v.length === 0) return null;
+	let y = [];
+	for (let t of v) {
+		let o = d.status_groups?.[t];
+		if (o) {
+			let n = h?.find((e) => e.group_code === t), r = n ? o.statuses.find((e) => e.code === n.status_code) : void 0;
+			y.push({
+				label: _(o.name),
+				value: r ? /* @__PURE__ */ c(e, {
+					tone: r.color ?? "slate",
+					size: "xs",
+					children: _(r.name)
+				}) : /* @__PURE__ */ c("span", {
+					style: { color: "var(--text-4)" },
+					children: "—"
+				})
+			});
+		} else if (d.fields.get(t) || d.files?.get(t)) {
+			let e = r({
+				entity: d,
+				entityCode: f,
+				fieldName: t,
+				record: p,
+				mode: "display",
+				refs: m,
+				entities: g.entities,
+				screens: g.screens,
+				surface: "list",
+				t: _
+			}), o = a(d.fields.get(t), p[t]);
+			y.push({
+				label: i(_, d, t, g.entities),
+				value: o ? /* @__PURE__ */ l(s, { children: [e, /* @__PURE__ */ c(n, {
+					value: o,
+					size: "sm",
+					title: _("record.field.copy_value", "Copy value")
+				})] }) : e
+			});
+		}
+	}
+	return y.length === 0 ? null : /* @__PURE__ */ c(o, { items: y });
+}
+//#endregion
+export { u as DetailHighlights };