@declarion/react 0.57.0 → 0.59.2

package/dist-lib/DetailAuditStrip-9eJM2Fml.js

@@ -0,0 +1,288 @@
+import { s as e } from "./DynamicIcon-DW5krHuX.js";
+import { In as t, Ln as n, on as r } from "./useCurrentScreen-BL5NZFCw.js";
+import { h as i } from "./RefreshControl-Bhoib0ZA.js";
+import { t as a } from "./useText-BFDCTUSo.js";
+import { A as o } from "./field-classification-C28XE-_P.js";
+import { p as s } from "./action-dispatch-DY0c8U81.js";
+import { useCallback as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/primitives/RecordIdBadge.tsx
+var p = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i, m = 1200;
+function h({ value: t }) {
+	let n = a(), [r, i] = l(!1), o = p.test(t) ? `${t.slice(0, 8)}…` : t, s = c(async () => {
+		try {
+			await navigator.clipboard.writeText(t), i(!0), window.setTimeout(() => i(!1), m);
+		} catch {}
+	}, [t]);
+	return /* @__PURE__ */ f("button", {
+		type: "button",
+		onClick: s,
+		title: r ? n("control.copied", "Copied") : n("control.copy_value", "Copy {value}", { value: t }),
+		className: "mono inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] text-text-4 hover:bg-surface-2 hover:text-text-3 transition-colors shrink-0 border border-transparent hover:border-border",
+		children: [/* @__PURE__ */ d("span", { children: o }), r ? /* @__PURE__ */ d(e.check, { size: 10 }) : /* @__PURE__ */ d(e.copy, {
+			size: 10,
+			style: { opacity: .6 }
+		})]
+	});
+}
+//#endregion
+//#region src/components/chrome/PageShell.tsx
+function g({ header: e, children: t, scrollRef: n }) {
+	let i = r(), a = i.isPhone ? o(12) : {
+		paddingLeft: "24px",
+		paddingRight: "24px"
+	};
+	return /* @__PURE__ */ f("div", {
+		style: {
+			height: "100%",
+			display: "flex",
+			flexDirection: "column",
+			overflow: "hidden",
+			background: "var(--background)"
+		},
+		children: [/* @__PURE__ */ d("div", {
+			"data-testid": "page-shell-header",
+			style: {
+				flexShrink: 0,
+				paddingTop: i.isPhone ? 14 : 24,
+				paddingBottom: 8,
+				...a
+			},
+			children: e
+		}), /* @__PURE__ */ d("div", {
+			ref: n,
+			style: {
+				flex: 1,
+				minHeight: 0,
+				overflowY: "auto",
+				paddingTop: 4,
+				paddingBottom: "calc(24px + var(--safe-area-bottom))",
+				...a,
+				display: "flex",
+				flexDirection: "column",
+				gap: 16,
+				minWidth: 0,
+				WebkitOverflowScrolling: "touch"
+			},
+			children: t
+		})]
+	});
+}
+var _ = {
+	display: "flex",
+	alignItems: "center",
+	gap: 6,
+	flexGrow: 1,
+	flexShrink: 1,
+	flexBasis: "auto",
+	marginLeft: "auto",
+	minWidth: 180,
+	flexWrap: "wrap",
+	justifyContent: "flex-end"
+}, v = 160;
+function y({ icon: r, title: o, recordId: s, description: c, highlights: l, mode: p, dirty: m = !1, showBack: g = !1, onBack: y, right: b, identityControls: x, showTitle: S = !0 }) {
+	let C = a();
+	return /* @__PURE__ */ f("div", {
+		style: {
+			display: "flex",
+			alignItems: "flex-start",
+			gap: 10,
+			flexWrap: "wrap",
+			minWidth: 0
+		},
+		children: [
+			S && g && /* @__PURE__ */ d("div", {
+				style: {
+					paddingTop: 4,
+					flexShrink: 0
+				},
+				children: /* @__PURE__ */ d(n, {
+					size: 26,
+					icon: /* @__PURE__ */ d(e.back, { size: 14 }),
+					title: C("shell.back", "Back"),
+					onClick: y
+				})
+			}),
+			S && r && /* @__PURE__ */ d("div", {
+				style: {
+					flexShrink: 0,
+					paddingTop: 2
+				},
+				children: /* @__PURE__ */ d("span", {
+					style: {
+						width: 32,
+						height: 32,
+						borderRadius: 8,
+						background: "var(--accent-soft)",
+						color: "var(--accent)",
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center"
+					},
+					children: r
+				})
+			}),
+			S && /* @__PURE__ */ f(u, { children: [
+				/* @__PURE__ */ d("h1", {
+					style: {
+						margin: 0,
+						fontSize: "var(--page-title-size, var(--page-title-size-detail))",
+						fontWeight: 600,
+						letterSpacing: 0,
+						lineHeight: "var(--page-title-line-height, var(--page-title-line-height-detail))",
+						color: "var(--text)",
+						minWidth: v,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+						overflowWrap: "anywhere",
+						maxWidth: "100%",
+						flexGrow: 0,
+						flexShrink: 1,
+						flexBasis: "auto"
+					},
+					children: o
+				}),
+				s && /* @__PURE__ */ d(h, { value: s }),
+				c && /* @__PURE__ */ d(i, {
+					label: c,
+					"data-testid": "detail-description-info"
+				}),
+				x,
+				p === "edit" && m && /* @__PURE__ */ f("span", {
+					style: {
+						display: "inline-flex",
+						alignItems: "center",
+						gap: 5,
+						fontSize: 11,
+						color: "var(--warn)"
+					},
+					children: [/* @__PURE__ */ d("span", { style: {
+						width: 6,
+						height: 6,
+						borderRadius: 999,
+						background: "var(--warn)"
+					} }), C("shell.record.unsaved", "Unsaved")]
+				}),
+				p === "create" && /* @__PURE__ */ d(t, {
+					tone: "violet",
+					size: "xs",
+					dot: !0,
+					children: C("shell.record.new", "New record")
+				})
+			] }),
+			b && /* @__PURE__ */ d("div", {
+				role: "toolbar",
+				"aria-label": C("shell.record.page_actions", "Page actions"),
+				style: _,
+				children: b
+			}),
+			l && p === "display" && /* @__PURE__ */ d("div", {
+				style: {
+					flexBasis: "100%",
+					minWidth: 0
+				},
+				children: l
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/chrome/AuditMetaStrip.tsx
+function b(e) {
+	return e.by != null || e.at != null;
+}
+function x({ lines: e }) {
+	let t = e.filter(b);
+	return t.length === 0 ? null : /* @__PURE__ */ d("div", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: "8px 24px",
+			padding: "10px 14px",
+			background: "var(--surface-2)",
+			border: "1px solid var(--border)",
+			borderRadius: 8,
+			fontSize: 11.5,
+			color: "var(--text-3)"
+		},
+		children: t.map((e, t) => /* @__PURE__ */ d(S, { line: e }, t))
+	});
+}
+function S({ line: e }) {
+	return /* @__PURE__ */ f("div", {
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			minWidth: 0
+		},
+		children: [/* @__PURE__ */ d("span", {
+			style: {
+				fontSize: 11,
+				fontWeight: 600,
+				color: "var(--text-4)",
+				flexShrink: 0
+			},
+			children: e.label
+		}), /* @__PURE__ */ f("span", {
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: 6,
+				minWidth: 0
+			},
+			children: [
+				e.by != null && /* @__PURE__ */ d("span", {
+					style: { color: "var(--text-2)" },
+					children: e.by
+				}),
+				e.by != null && e.at != null && /* @__PURE__ */ d("span", {
+					style: { color: "var(--text-4)" },
+					children: "·"
+				}),
+				e.at != null && /* @__PURE__ */ d("span", {
+					className: "num",
+					children: e.at
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/components/detail-layout/DetailAuditStrip.tsx
+function C({ screen: e, entity: t, entityCode: n, record: r, refs: i, schema: o }) {
+	let c = a(), l = e.audit;
+	if (l?.enabled === !1) return null;
+	let u = (e) => {
+		if (!e || !t.fields.get(e)) return;
+		let a = r[e];
+		if (a != null && a !== "") return s({
+			entity: t,
+			entityCode: n,
+			fieldName: e,
+			record: r,
+			mode: "display",
+			refs: i,
+			entities: o.entities,
+			screens: o.screens,
+			surface: "list",
+			t: c
+		});
+	}, f = l?.lines && l.lines.length > 0 ? l.lines.map((e) => ({
+		label: c(e.label),
+		at: u(e.at),
+		by: u(e.by)
+	})) : [{
+		label: c("record.audit.created", "Created"),
+		at: u("created_at"),
+		by: u("created_by")
+	}, {
+		label: c("record.audit.updated", "Updated"),
+		at: u("updated_at"),
+		by: u("updated_by")
+	}];
+	return /* @__PURE__ */ d(x, { lines: f });
+}
+//#endregion
+export { h as a, g as i, y as n, _ as r, C as t };

package/dist-lib/{DraggableChildrenTable-BV5sb8Uo.js → DraggableChildrenTable-4RZC351U.js}

@@ -1,5 +1,6 @@
 import { s as e } from "./DynamicIcon-DW5krHuX.js";
-import { $n as t, Br as n, Vr as r, et as i, mr as a, tt as o } from "./useCurrentScreen-CzwzQpoW.js";
+import { Ln as t, Rn as n, _n as r, jn as i, rt as a } from "./useCurrentScreen-BL5NZFCw.js";
+import { t as o } from "./useText-BFDCTUSo.js";
 import { n as s, r as c, t as l } from "./dataTableStyles-vwD1mVOP.js";
 import { useCallback as u, useMemo as d, useRef as f } from "react";
 import { jsx as p, jsxs as m } from "react/jsx-runtime";
@@ -7,68 +8,68 @@ import { DndContext as h, PointerSensor as g, closestCenter as _, useSensor as v
 import { SortableContext as b, useSortable as x, verticalListSortingStrategy as S } from "@dnd-kit/sortable";
 import { CSS as C } from "@dnd-kit/utilities";
 //#region src/components/detail-layout/DraggableChildrenTable.tsx
-function w({ config: n, childEntity: i, schema: a, rows: o, onChange: l, validationErrors: x, refs: C }) {
-	let w = f(null), E = n.position_field, D = n.columns, O = y(v(g, { activationConstraint: { distance: 5 } })), k = new Set(Array.isArray(n.foreign_key) ? n.foreign_key : [n.foreign_key]), A = D.filter((e) => {
-		if (k.has(e) || e === E) return !1;
+function w({ config: t, childEntity: i, schema: a, rows: l, onChange: x, validationErrors: C, refs: w }) {
+	let E = o(), D = f(null), O = t.position_field, k = t.columns, A = y(v(g, { activationConstraint: { distance: 5 } })), j = new Set(Array.isArray(t.foreign_key) ? t.foreign_key : [t.foreign_key]), M = k.filter((e) => {
+		if (j.has(e) || e === O) return !1;
 		let t = i.fields.get(e);
 		return !(!t || t.auto || t.primary || t.source);
-	}), j = new Set(D.filter((e) => {
-		if (e === E) return !0;
+	}), N = new Set(k.filter((e) => {
+		if (e === O) return !0;
 		let t = i.fields.get(e);
 		return t && (t.auto || t.primary || t.source);
-	})), M = D.filter((e) => e !== E), N = d(() => o.filter((e) => !e._deleted).map((e) => e._key), [o]), P = u((e, t, n) => {
-		l(o.map((r) => r._key === e ? {
+	})), P = k.filter((e) => e !== O), F = d(() => l.filter((e) => !e._deleted).map((e) => e._key), [l]), I = u((e, t, n) => {
+		x(l.map((r) => r._key === e ? {
 			...r,
 			[t]: n,
 			_dirty: !0
 		} : r));
-	}, [o, l]), F = u(() => {
-		let e = o.filter((e) => !e._deleted).reduce((e, t) => {
-			let n = typeof t[E] == "number" ? t[E] : -1;
+	}, [l, x]), L = u(() => {
+		let e = l.filter((e) => !e._deleted).reduce((e, t) => {
+			let n = typeof t[O] == "number" ? t[O] : -1;
 			return Math.max(e, n);
-		}, -1), t = {
+		}, -1), n = {
 			_key: crypto.randomUUID(),
 			_dirty: !0,
-			[E]: e + 1
-		}, r = n.quick_add?.defaults ?? {};
-		for (let e of A) {
-			let n = i.fields.get(e);
-			n && (r[e] === void 0 ? n.default === void 0 ? n.type === "bool" && (t[e] = !1) : t[e] = n.default : t[e] = r[e]);
+			[O]: e + 1
+		}, r = t.quick_add?.defaults ?? {};
+		for (let e of M) {
+			let t = i.fields.get(e);
+			t && (r[e] === void 0 ? t.default === void 0 ? t.type === "bool" && (n[e] = !1) : n[e] = t.default : n[e] = r[e]);
 		}
-		l([...o, t]);
+		x([...l, n]);
 	}, [
-		o,
 		l,
-		A,
+		x,
+		M,
 		i,
-		n.quick_add?.defaults,
-		E
-	]), I = u((e) => {
-		l(o.map((t) => t._key === e ? {
+		t.quick_add?.defaults,
+		O
+	]), R = u((e) => {
+		x(l.map((t) => t._key === e ? {
 			...t,
 			_deleted: !0
 		} : t));
-	}, [o, l]), L = u((e) => {
-		l(o.map((t) => t._key === e ? {
+	}, [l, x]), z = u((e) => {
+		x(l.map((t) => t._key === e ? {
 			...t,
 			_deleted: !1
 		} : t));
-	}, [o, l]), R = u((e) => {
+	}, [l, x]), B = u((e) => {
 		let { active: t, over: n } = e;
 		if (!n || t.id === n.id) return;
-		let r = o.filter((e) => !e._deleted), i = o.filter((e) => e._deleted), a = r.findIndex((e) => e._key === String(t.id)), s = r.findIndex((e) => e._key === String(n.id));
-		if (a === -1 || s === -1) return;
-		let c = [...r], [u] = c.splice(a, 1);
-		c.splice(s, 0, u), l([...c.map((e, t) => ({
+		let r = l.filter((e) => !e._deleted), i = l.filter((e) => e._deleted), a = r.findIndex((e) => e._key === String(t.id)), o = r.findIndex((e) => e._key === String(n.id));
+		if (a === -1 || o === -1) return;
+		let s = [...r], [c] = s.splice(a, 1);
+		s.splice(o, 0, c), x([...s.map((e, t) => ({
 			...e,
-			[E]: t,
-			_dirty: e[E] !== t || e._dirty
+			[O]: t,
+			_dirty: e[O] !== t || e._dirty
 		})), ...i]);
 	}, [
-		o,
 		l,
-		E
-	]), z = u((e) => {
+		x,
+		O
+	]), V = u((e) => {
 		let t = e.target, n = t.closest("td");
 		if (!n) return;
 		let r = n.closest("tr");
@@ -92,7 +93,7 @@ function w({ config: n, childEntity: i, schema: a, rows: o, onChange: l, validat
 			if (o < t.length - 1) {
 				let e = t[o + 1].cells[a]?.querySelector("input, select, textarea, [tabindex]");
 				e && e.focus();
-			} else F(), requestAnimationFrame(() => {
+			} else L(), requestAnimationFrame(() => {
 				let e = i.querySelectorAll("tr"), t = e[e.length - 1];
 				if (t) {
 					let e = t.querySelector("input, select, textarea, [tabindex]");
@@ -100,66 +101,66 @@ function w({ config: n, childEntity: i, schema: a, rows: o, onChange: l, validat
 				}
 			});
 		} else e.key === "Escape" && t.blur?.();
-	}, [F]), B = s;
+	}, [L]), H = s;
 	return /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("div", {
 		style: { overflowX: "auto" },
 		children: /* @__PURE__ */ p(h, {
-			sensors: O,
+			sensors: A,
 			collisionDetection: _,
-			onDragEnd: R,
+			onDragEnd: B,
 			children: /* @__PURE__ */ m("table", {
-				ref: w,
+				ref: D,
 				style: c,
-				onKeyDown: z,
+				onKeyDown: V,
 				children: [/* @__PURE__ */ p("thead", { children: /* @__PURE__ */ m("tr", { children: [
 					/* @__PURE__ */ p("th", { style: {
-						...B,
+						...H,
 						width: 32,
 						padding: "0 4px"
 					} }),
-					M.map((e) => {
-						let n = i.fields.get(e);
+					P.map((e) => {
+						let t = i.fields.get(e);
 						return /* @__PURE__ */ p("th", {
-							style: B,
-							children: n ? t(n, e, a.entities) : e
+							style: H,
+							children: t ? r(E, t, e, a.entities) : e
 						}, e);
 					}),
 					/* @__PURE__ */ p("th", { style: {
-						...B,
+						...H,
 						width: 40
 					} })
 				] }) }), /* @__PURE__ */ p(b, {
-					items: N,
+					items: F,
 					strategy: S,
-					children: /* @__PURE__ */ p("tbody", { children: o.map((e) => /* @__PURE__ */ p(T, {
+					children: /* @__PURE__ */ p("tbody", { children: l.map((e) => /* @__PURE__ */ p(T, {
 						row: e,
-						columns: M,
-						editableColumns: A,
-						displayOnlyColumns: j,
+						columns: P,
+						editableColumns: M,
+						displayOnlyColumns: N,
 						childEntity: i,
-						validationErrors: x,
-						refs: C,
-						onCellChange: P,
-						onDelete: I,
-						onUndoDelete: L
+						validationErrors: C,
+						refs: w,
+						onCellChange: I,
+						onDelete: R,
+						onUndoDelete: z
 					}, e._key)) })
 				})]
 			})
 		})
 	}), /* @__PURE__ */ p("div", {
 		style: { marginTop: 8 },
-		children: /* @__PURE__ */ p(r, {
+		children: /* @__PURE__ */ p(n, {
 			kind: "ghost",
 			size: "xs",
 			icon: /* @__PURE__ */ p(e.plus, { size: 12 }),
-			onClick: F,
-			children: "Add row"
+			onClick: L,
+			children: E("record.row.add", "Add row")
 		})
 	})] });
 }
-function T({ row: t, columns: r, editableColumns: s, displayOnlyColumns: c, childEntity: u, validationErrors: d, refs: f, onCellChange: h, onDelete: g, onUndoDelete: _ }) {
-	let v = i(), y = !!t._deleted, b = d?.[t._key], { attributes: S, listeners: w, setNodeRef: T, transform: E, transition: D, isDragging: O } = x({
-		id: t._key,
+function T({ row: n, columns: r, editableColumns: s, displayOnlyColumns: c, childEntity: u, validationErrors: d, refs: f, onCellChange: h, onDelete: g, onUndoDelete: _ }) {
+	let v = o(), y = !!n._deleted, b = d?.[n._key], { attributes: S, listeners: w, setNodeRef: T, transform: E, transition: D, isDragging: O } = x({
+		id: n._key,
 		disabled: y
 	}), k = {
 		transform: C.Translate.toString(E),
@@ -201,21 +202,21 @@ function T({ row: t, columns: r, editableColumns: s, displayOnlyColumns: c, chil
 				})
 			}),
 			r.map((e) => {
-				let n = u.fields.get(e), r = b?.includes(e), i = c.has(e), l = s.includes(e);
-				return y || i || !l ? /* @__PURE__ */ p("td", {
+				let t = u.fields.get(e), r = b?.includes(e), o = c.has(e), l = s.includes(e);
+				return y || o || !l ? /* @__PURE__ */ p("td", {
 					style: {
 						...A,
 						textDecoration: y ? "line-through" : "none"
 					},
-					children: n ? o({
-						field: n,
+					children: t ? a({
+						field: t,
 						fieldName: e,
-						value: t[e],
+						value: n[e],
 						mode: "display",
-						record: t,
+						record: n,
 						refs: f,
-						locale: v
-					}) : a(t[e])
+						t: v
+					}) : i(n[e])
 				}, e) : /* @__PURE__ */ p("td", {
 					style: {
 						...j,
@@ -223,17 +224,17 @@ function T({ row: t, columns: r, editableColumns: s, displayOnlyColumns: c, chil
 						outlineOffset: -1,
 						borderRadius: r ? 4 : 0
 					},
-					title: r ? `${e} is required` : void 0,
-					children: n ? o({
-						field: n,
+					title: r ? v("record.row.field_required", "{field} is required", { field: e }) : void 0,
+					children: t ? a({
+						field: t,
 						fieldName: e,
-						value: t[e],
+						value: n[e],
 						mode: "edit",
-						onChange: (n) => h(t._key, e, n),
-						record: t,
+						onChange: (t) => h(n._key, e, t),
+						record: n,
 						refs: f,
-						locale: v
-					}) : a(t[e])
+						t: v
+					}) : i(n[e])
 				}, e);
 			}),
 			/* @__PURE__ */ p("td", {
@@ -242,16 +243,16 @@ function T({ row: t, columns: r, editableColumns: s, displayOnlyColumns: c, chil
 					borderBottom: "1px solid var(--divider)",
 					verticalAlign: "middle"
 				},
-				children: y ? /* @__PURE__ */ p(n, {
+				children: y ? /* @__PURE__ */ p(t, {
 					size: 24,
 					icon: /* @__PURE__ */ p(e.refresh, { size: 12 }),
-					onClick: () => _(t._key),
-					title: "Undo delete"
-				}) : /* @__PURE__ */ p(n, {
+					onClick: () => _(n._key),
+					title: v("record.row.undo_delete", "Undo delete")
+				}) : /* @__PURE__ */ p(t, {
 					size: 24,
 					icon: /* @__PURE__ */ p(e.trash, { size: 12 }),
-					onClick: () => g(t._key),
-					title: "Delete row"
+					onClick: () => g(n._key),
+					title: v("record.row.delete", "Delete row")
 				})
 			})
 		]