@declarion/react 0.87.0 → 0.89.0

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

@@ -1,13 +1,14 @@
 import { propertyToField as e } from "../../types/schema.js";
 import { useText as t } from "../../hooks/useText.js";
-import { ClassifiedFieldLocked as n } from "../primitives/ClassifiedFieldLocked.js";
-import { classificationTier as r, fieldAccessInfo as i } from "../../lib/field-classification.js";
-import { renderField as a } from "../fields/index.js";
-import { FieldRow as o, FieldsGrid as s, SPAN_FIELD_TYPES as c } from "./FieldRow.js";
-import { useCallback as l, useEffect as u, useRef as d } from "react";
-import { jsx as f } from "react/jsx-runtime";
+import { SectionCard as n } from "../primitives/SectionCard.js";
+import { ClassifiedFieldLocked as r } from "../primitives/ClassifiedFieldLocked.js";
+import { classificationTier as i, fieldAccessInfo as a } from "../../lib/field-classification.js";
+import { renderField as o } from "../fields/index.js";
+import { FieldRow as s, FieldsGrid as c, SPAN_FIELD_TYPES as l } from "./FieldRow.js";
+import { useCallback as u, useEffect as d, useRef as f } from "react";
+import { jsx as p } from "react/jsx-runtime";
 //#region src/components/detail-layout/PropertiesBlock.tsx
-var p = /* @__PURE__ */ new Set([
+var m = /* @__PURE__ */ new Set([
 	"string",
 	"text",
 	"int",
@@ -15,52 +16,57 @@ var p = /* @__PURE__ */ new Set([
 	"decimal",
 	"email",
 	"url"
-]), m = 500;
-function h({ node: t, ctx: n }) {
-	let { entity: r, objectProperties: i, onSetProperty: a, isNew: o, mode: c, refs: l } = n, u = r.properties ?? {};
-	if (o) return null;
-	let d = t.properties === !0 || t.properties, p = d === !0 ? Object.entries(u).sort(([e], [t]) => e.localeCompare(t)) : d.filter((e) => u[e] != null).map((e) => [e, u[e]]);
-	return p.length === 0 ? null : /* @__PURE__ */ f(s, {
+]), h = 500;
+function g({ node: r, ctx: i }) {
+	let { entity: a, objectProperties: o, onSetProperty: s, isNew: l, mode: u, refs: d } = i, f = t(), m = a.properties ?? {};
+	if (l) return null;
+	let h = r.properties === !0 || r.properties, g = h === !0 ? Object.entries(m).sort(([e], [t]) => e.localeCompare(t)) : h.filter((e) => m[e] != null).map((e) => [e, m[e]]);
+	if (g.length === 0) return null;
+	let v = /* @__PURE__ */ p(c, {
 		columns: 2,
-		children: p.map(([t, o]) => {
-			let s = i?.find((e) => e.property_code === t), u = e(o), d = o.readonly || !a ? "display" : c;
-			return /* @__PURE__ */ f(g, {
+		children: g.map(([t, n]) => {
+			let r = o?.find((e) => e.property_code === t), c = e(n), l = n.readonly || !s ? "display" : u;
+			return /* @__PURE__ */ p(_, {
 				propCode: t,
-				prop: o,
-				field: u,
-				value: s?.value,
-				mode: d,
-				onSetProperty: a,
-				refs: l,
-				entity: r,
-				schema: n.schema
+				prop: n,
+				field: c,
+				value: r?.value,
+				mode: l,
+				onSetProperty: s,
+				refs: d,
+				entity: a,
+				schema: i.schema
 			}, t);
 		})
 	});
+	return i.withinCard ? v : /* @__PURE__ */ p(n, {
+		title: f("record.properties", "Properties"),
+		children: v
+	});
 }
-function g({ propCode: e, prop: s, field: h, value: g, mode: _, onSetProperty: v, refs: y, entity: b, schema: x }) {
-	let S = t(), C = d(null);
-	u(() => () => {
+function _({ propCode: e, prop: n, field: c, value: g, mode: _, onSetProperty: v, refs: y, entity: b, schema: x }) {
+	let S = t(), C = f(null);
+	d(() => () => {
 		C.current && clearTimeout(C.current);
 	}, []);
-	let w = l((t) => {
-		v && (p.has(s.type) ? (C.current && clearTimeout(C.current), C.current = setTimeout(() => v(e, t), m)) : v(e, t));
+	let w = u((t) => {
+		v && (m.has(n.type) ? (C.current && clearTimeout(C.current), C.current = setTimeout(() => v(e, t), h)) : v(e, t));
 	}, [
 		e,
-		s.type,
+		n.type,
 		v
-	]), T = i(b, e), E = T?.read === "denied", D = T?.write === "denied", O = _ === "display" ? E : D || E, k = _ === "edit" && D ? "display" : _;
-	return /* @__PURE__ */ f(o, {
-		label: S(s.display?.name ?? s.name),
+	]), T = a(b, e), E = T?.read === "denied", D = T?.write === "denied", O = _ === "display" ? E : D || E, k = _ === "edit" && D ? "display" : _;
+	return /* @__PURE__ */ p(s, {
+		label: S(n.display?.name ?? n.name),
 		mode: k,
-		span: c.has(s.type),
-		children: O ? /* @__PURE__ */ f(n, {
+		span: l.has(n.type),
+		children: O ? /* @__PURE__ */ p(r, {
 			tier: T.classification,
-			tierDef: r(x, b, e),
+			tierDef: i(x, b, e),
 			requiredPermission: T?.required_permission,
 			variant: k === "edit" ? "input" : "value"
-		}) : a({
-			field: h,
+		}) : o({
+			field: c,
 			fieldName: e,
 			value: g,
 			mode: k,
@@ -71,4 +77,4 @@ function g({ propCode: e, prop: s, field: h, value: g, mode: _, onSetProperty: v
 	});
 }
 //#endregion
-export { h as PropertiesBlock };
+export { g as PropertiesBlock };

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

@@ -1,16 +1,16 @@
 import { fieldDisplayName as e } from "../../types/schema.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 { useResponsiveMode as i } from "../../hooks/useResponsiveMode.js";
-import { failureTitle as a } from "../../lib/failure.js";
+import { failureTitle as t } from "../../lib/failure.js";
+import { Icon as n } from "../primitives/Icons.js";
+import { Btn as r } from "../primitives/Btn.js";
+import { useText as i } from "../../hooks/useText.js";
+import { useResponsiveMode as a } from "../../hooks/useResponsiveMode.js";
 import { renderField as o } from "../fields/index.js";
 import { useQuickAdd as s } from "./useQuickAdd.js";
 import { useId as c } from "react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/detail-layout/QuickAddForm.tsx
 function d({ config: d, parentEntity: f, parentId: p, schema: m }) {
-	let h = r(), g = r("errors"), { values: _, quickAdd: v, childEntity: y, isPending: b, error: x, isReady: S, handleSubmit: C, handleFieldChange: w } = s(d, f, p, m), T = i(), E = c();
+	let h = i(), g = i("errors"), { values: _, quickAdd: v, childEntity: y, isPending: b, error: x, isReady: S, handleSubmit: C, handleFieldChange: w } = s(d, f, p, m), T = a(), E = c();
 	return !v || v.fields.length === 0 || !y ? null : /* @__PURE__ */ u("form", {
 		onSubmit: C,
 		style: {
@@ -56,11 +56,11 @@ function d({ config: d, parentEntity: f, parentId: p, schema: m }) {
 					})]
 				}, t);
 			}),
-			/* @__PURE__ */ l(n, {
+			/* @__PURE__ */ l(r, {
 				type: "submit",
 				kind: "primary",
 				size: T.isPhone ? "md" : "sm",
-				icon: /* @__PURE__ */ l(t.plus, { size: 12 }),
+				icon: /* @__PURE__ */ l(n.plus, { size: 12 }),
 				disabled: b || !S,
 				style: T.isPhone ? { alignSelf: "flex-end" } : void 0,
 				children: h("record.related.add", "Add")
@@ -72,7 +72,7 @@ function d({ config: d, parentEntity: f, parentId: p, schema: m }) {
 					alignSelf: "flex-end",
 					marginBottom: 4
 				},
-				children: a(g, x)
+				children: t(g, x)
 			})
 		]
 	});

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

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