@declarion/react 0.65.1 → 0.66.1

package/dist-lib/components/fields/StructureField.js

@@ -0,0 +1,221 @@
+import { useSchema as e } from "../../hooks/useSchema.js";
+import { Icon as t } from "../primitives/Icons.js";
+import { Btn as n } from "../primitives/Btn.js";
+import { IconBtn as r } from "../primitives/IconBtn.js";
+import { useText as i } from "../../hooks/useText.js";
+import { FieldLabel as a } from "../primitives/Fields.js";
+import { JsonField as o } from "./JsonField.js";
+import { renderField as s } from "./index.js";
+import { useId as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/fields/StructureField.tsx
+function d(t) {
+	let { field: n, value: r, mode: i, onChange: a, fieldId: s, labelId: c, nested: u } = t, { data: d } = e(), m = n.structure ? d?.structures?.[n.structure] : void 0;
+	return m ? n.array ? /* @__PURE__ */ l(p, {
+		structDef: m,
+		value: r,
+		mode: i,
+		onChange: a,
+		fieldId: s,
+		labelId: c,
+		nested: u
+	}) : /* @__PURE__ */ l(f, {
+		structDef: m,
+		value: r,
+		mode: i,
+		onChange: a,
+		fieldId: s,
+		labelId: c,
+		nested: u
+	}) : /* @__PURE__ */ l(o, { ...t });
+}
+function f({ structDef: e, value: t, mode: n, onChange: r, fieldId: o, labelId: f, nested: p = !1 }) {
+	let m = i(), h = c(), g = o ?? h, _ = typeof t == "object" && t && !Array.isArray(t) ? t : {}, v = e.fields.names(), y = {
+		display: "flex",
+		flexDirection: "column",
+		gap: n === "display" ? 8 : 12,
+		border: "1px solid var(--border)",
+		borderRadius: "var(--radius-md)",
+		padding: 12,
+		background: "var(--surface-2)"
+	};
+	if (n === "display") return v.some((e) => _[e] != null && _[e] !== "") ? /* @__PURE__ */ l("div", {
+		style: p ? {
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		} : y,
+		children: v.map((t) => {
+			let n = e.fields.get(t);
+			if (!n) return null;
+			let r = _[t];
+			return r == null ? null : /* @__PURE__ */ u("div", {
+				style: {
+					display: "flex",
+					flexWrap: "wrap",
+					alignItems: "baseline",
+					gap: 8
+				},
+				children: [/* @__PURE__ */ l("span", {
+					style: {
+						fontSize: 11.5,
+						fontWeight: 500,
+						color: "var(--text-3)",
+						minWidth: 100,
+						flexShrink: 0
+					},
+					title: m(n.display?.description) || void 0,
+					children: n.display ? m(n.display.name) : t
+				}), /* @__PURE__ */ l("div", {
+					style: {
+						minWidth: 0,
+						flex: "1 1 14rem"
+					},
+					children: n.type === "structure" && n.structure ? /* @__PURE__ */ l(d, {
+						field: n,
+						fieldName: t,
+						value: r,
+						mode: "display",
+						t: m,
+						nested: !0
+					}) : s({
+						field: n,
+						fieldName: t,
+						value: r,
+						mode: "display",
+						t: m
+					})
+				})]
+			}, t);
+		})
+	}) : /* @__PURE__ */ l("span", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-4)"
+		},
+		children: "—"
+	});
+	let b = (e) => (t) => {
+		r?.({
+			..._,
+			[e]: t
+		});
+	};
+	return /* @__PURE__ */ l("div", {
+		style: y,
+		id: o,
+		role: "group",
+		"aria-labelledby": f,
+		children: v.map((t) => {
+			let n = e.fields.get(t);
+			if (!n) return null;
+			let r = n.type === "structure" && !!n.structure, i = `${g}-${t}`, o = `${i}-label`;
+			return /* @__PURE__ */ u("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 2
+				},
+				children: [/* @__PURE__ */ l(a, {
+					required: n.required,
+					id: o,
+					htmlFor: r ? void 0 : i,
+					children: n.display ? m(n.display.name) : t
+				}), r ? /* @__PURE__ */ l(d, {
+					field: n,
+					t: m,
+					fieldName: t,
+					value: _[t],
+					mode: "edit",
+					onChange: b(t),
+					fieldId: i,
+					labelId: o
+				}) : s({
+					field: n,
+					fieldName: t,
+					value: _[t],
+					mode: "edit",
+					onChange: b(t),
+					fieldId: i,
+					labelId: o,
+					t: m
+				})]
+			}, t);
+		})
+	});
+}
+function p({ structDef: e, value: a, mode: o, onChange: s, fieldId: d, labelId: p, nested: m = !1 }) {
+	let h = i(), g = c(), _ = d ?? g, v = Array.isArray(a) ? a : [];
+	if (o === "display") return v.length === 0 ? /* @__PURE__ */ l("span", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-4)"
+		},
+		children: "—"
+	}) : /* @__PURE__ */ l("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		},
+		children: v.map((t, n) => /* @__PURE__ */ l("div", {
+			style: m && n > 0 ? {
+				borderTop: "1px solid var(--border)",
+				paddingTop: 8
+			} : void 0,
+			children: /* @__PURE__ */ l(f, {
+				structDef: e,
+				value: t,
+				mode: "display",
+				nested: m
+			})
+		}, n))
+	});
+	let y = (e) => (t) => {
+		let n = [...v];
+		n[e] = t, s?.(n);
+	}, b = () => {
+		s?.([...v, {}]);
+	}, x = (e) => () => {
+		let t = v.filter((t, n) => n !== e);
+		s?.(t);
+	};
+	return /* @__PURE__ */ u("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 8
+		},
+		id: d,
+		role: "group",
+		"aria-labelledby": p,
+		children: [v.map((n, i) => /* @__PURE__ */ u("div", {
+			style: { position: "relative" },
+			children: [/* @__PURE__ */ l(f, {
+				structDef: e,
+				value: n,
+				mode: "edit",
+				onChange: y(i),
+				fieldId: `${_}-${i}`
+			}), /* @__PURE__ */ l("div", {
+				style: {
+					position: "absolute",
+					top: 6,
+					right: 6
+				},
+				children: /* @__PURE__ */ l(r, {
+					size: 24,
+					icon: /* @__PURE__ */ l(t.trash, { size: 12 }),
+					onClick: x(i),
+					title: h("field.structure.remove", "Remove")
+				})
+			})]
+		}, i)), /* @__PURE__ */ l("div", { children: /* @__PURE__ */ l(n, {
+			icon: /* @__PURE__ */ l(t.plus, { size: 13 }),
+			onClick: b,
+			children: h("field.array.add", "Add")
+		}) })]
+	});
+}
+//#endregion
+export { d as StructureField };

package/dist-lib/components/fields/TextField.js

@@ -0,0 +1,76 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { TextArea as t, TextInput as n } from "../primitives/Fields.js";
+import { CopyButton as r } from "../shared/CopyButton.js";
+import { Markdown as i } from "../shared/Markdown.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/fields/TextField.tsx
+function s({ field: s, fieldName: c, value: l, mode: u, onChange: d, fill: f, compact: p, fieldId: m }) {
+	let h = s.display?.widget;
+	if (u === "display") {
+		let t = e(l);
+		if (!t) return /* @__PURE__ */ a("span", {
+			style: {
+				fontSize: 12.5,
+				color: "var(--text-4)"
+			},
+			children: "—"
+		});
+		let n = h === "markdown" ? /* @__PURE__ */ a(i, { content: t }) : h === "code" ? /* @__PURE__ */ a("pre", {
+			className: "mono",
+			style: {
+				fontSize: 12,
+				background: "var(--surface-2)",
+				color: "var(--text)",
+				borderRadius: "var(--radius-md)",
+				border: "1px solid var(--border)",
+				padding: 14,
+				overflowX: "auto",
+				maxHeight: 600,
+				overflowY: "auto",
+				whiteSpace: "pre"
+			},
+			children: t
+		}) : /* @__PURE__ */ a("p", {
+			style: {
+				fontSize: 12.5,
+				whiteSpace: "pre-wrap",
+				wordBreak: "break-word",
+				margin: 0
+			},
+			children: t
+		});
+		return s.copyable ? /* @__PURE__ */ o("div", {
+			style: { position: "relative" },
+			children: [n, /* @__PURE__ */ a("div", {
+				style: {
+					position: "absolute",
+					top: 0,
+					right: 0
+				},
+				children: /* @__PURE__ */ a(r, {
+					value: t,
+					size: "sm"
+				})
+			})]
+		}) : n;
+	}
+	if (p) return /* @__PURE__ */ a(n, {
+		id: m,
+		name: c,
+		"aria-required": s.required || void 0,
+		value: e(l),
+		onChange: (e) => d?.(e)
+	});
+	let g = h === "markdown" || h === "code" ? 10 : 4;
+	return /* @__PURE__ */ a(t, {
+		id: m,
+		name: c,
+		ariaRequired: s.required,
+		value: e(l),
+		onChange: (e) => d?.(e),
+		rows: g,
+		fill: f
+	});
+}
+//#endregion
+export { s as TextField };

package/dist-lib/components/fields/TimestampField.js

@@ -0,0 +1,110 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { civilDateAsLocal as t, formatInOffsetZone as n, formatWireDateTime as r } from "../../lib/timestamp.js";
+import { specialValueMarker as i, specialValueMarkerCode as a } from "../../types/schema.js";
+import { Btn as o } from "../primitives/Btn.js";
+import { TextInput as s } from "../primitives/Fields.js";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/fields/TimestampField.tsx
+var d = {
+	year: "numeric",
+	month: "short",
+	day: "numeric"
+}, f = {
+	...d,
+	hour: "2-digit",
+	minute: "2-digit"
+};
+function p(e, n) {
+	let r = t(e);
+	return r ? new Intl.DateTimeFormat(n, d).format(r) : e;
+}
+function m(e, t, r) {
+	return t ? p(e, r) : n(e, f, r);
+}
+function h(e, t, n) {
+	if (t) return p(e, n);
+	let r = new Date(e);
+	return isNaN(r.getTime()) ? e : new Intl.DateTimeFormat(n, f).format(r);
+}
+function g(e) {
+	if (e.endsWith("Z")) return "UTC";
+	let t = e.match(/([+-]\d{2}:\d{2})$/);
+	if (!t) return null;
+	let n = t[1].charAt(0), r = parseInt(t[1].substring(1, 3), 10), i = parseInt(t[1].substring(4, 6), 10);
+	return r === 0 && i === 0 ? "UTC" : `UTC${n}${r}${i > 0 ? `:${String(i).padStart(2, "0")}` : ""}`;
+}
+function _(e) {
+	let t = e.match(/([+-]\d{2}:\d{2})$/), n = e.endsWith("Z"), r = new Date(e);
+	if (isNaN(r.getTime())) return "";
+	if (n) return `${r.getUTCFullYear()}-${String(r.getUTCMonth() + 1).padStart(2, "0")}-${String(r.getUTCDate()).padStart(2, "0")}T${String(r.getUTCHours()).padStart(2, "0")}:${String(r.getUTCMinutes()).padStart(2, "0")}`;
+	if (t) {
+		let e = t[1].charAt(0) === "+" ? 1 : -1, n = parseInt(t[1].substring(1, 3), 10), i = parseInt(t[1].substring(4, 6), 10), a = e * (n * 60 + i) * 60 * 1e3, o = new Date(r.getTime() + a);
+		return `${o.getUTCFullYear()}-${String(o.getUTCMonth() + 1).padStart(2, "0")}-${String(o.getUTCDate()).padStart(2, "0")}T${String(o.getUTCHours()).padStart(2, "0")}:${String(o.getUTCMinutes()).padStart(2, "0")}`;
+	}
+	return e.slice(0, 16);
+}
+function v(e) {
+	let t = new Date(e);
+	return isNaN(t.getTime()) ? "" : `${t.getFullYear()}-${String(t.getMonth() + 1).padStart(2, "0")}-${String(t.getDate()).padStart(2, "0")}T${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`;
+}
+function y({ field: n, fieldName: d, value: f, mode: p, onChange: y, fieldId: b, t: x }) {
+	let S = n.type === "date", C = !!n.timezone, w = a(f), T = n.special_values ?? [];
+	if (p === "display") {
+		if (!f) return /* @__PURE__ */ l("span", {
+			style: {
+				fontSize: 12.5,
+				color: "var(--text-4)"
+			},
+			children: "—"
+		});
+		let t = e(f), n = C ? m(t, S, x.language) : h(t, S, x.language), r = C && !S ? g(t) : null;
+		return /* @__PURE__ */ u("span", {
+			style: { fontSize: 12.5 },
+			children: [n, r && /* @__PURE__ */ l("span", {
+				style: {
+					marginLeft: 4,
+					color: "var(--text-3)"
+				},
+				children: r
+			})]
+		});
+	}
+	let E = f && w === null ? e(f) : "", D = E ? S ? t(E) ? E : "" : C ? _(E) : v(E) : "";
+	return /* @__PURE__ */ u(c, { children: [T.length > 0 && /* @__PURE__ */ l("div", {
+		role: "group",
+		"aria-label": d,
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: 6,
+			marginBottom: 6
+		},
+		children: T.map((e) => /* @__PURE__ */ l(o, {
+			size: "xs",
+			active: w === e.code,
+			"aria-pressed": w === e.code,
+			onClick: () => y?.(w === e.code ? null : i(e.code)),
+			children: x(e.label) || e.code
+		}, e.code))
+	}), /* @__PURE__ */ l(s, {
+		id: b,
+		name: d,
+		"aria-required": n.required || void 0,
+		type: S ? "date" : "datetime-local",
+		value: D,
+		onChange: (e) => {
+			if (!e) {
+				y?.(null);
+				return;
+			}
+			if (C || S) {
+				y?.(e);
+				return;
+			}
+			let t = new Date(e);
+			isNaN(t.getTime()) ? y?.(e) : y?.(r(t));
+		}
+	})] });
+}
+//#endregion
+export { y as TimestampField };

package/dist-lib/components/fields/UrlField.js

@@ -0,0 +1,18 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { TextInput as t } from "../primitives/Fields.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/fields/UrlField.tsx
+var r = "https://";
+function i({ field: i, fieldName: a, value: o, onChange: s, fieldId: c }) {
+	return /* @__PURE__ */ n(t, {
+		id: c,
+		name: a,
+		"aria-required": i.required || void 0,
+		type: "url",
+		value: e(o),
+		onChange: (e) => s?.(e),
+		placeholder: r
+	});
+}
+//#endregion
+export { i as UrlField };

package/dist-lib/components/fields/cells/factories/badge.js

@@ -0,0 +1,42 @@
+import { coerceDisplayString as e } from "../../../../lib/display-value.js";
+import { Pill as t } from "../../../primitives/Pill.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/fields/cells/factories/badge.tsx
+var r = /* @__PURE__ */ new Set([
+	"indigo",
+	"emerald",
+	"amber",
+	"rose",
+	"sky",
+	"violet",
+	"slate",
+	"teal"
+]);
+function i(e) {
+	return e && r.has(e) ? e : "slate";
+}
+var a = (r) => {
+	let { field: a, t: o } = r, s = /* @__PURE__ */ new Map();
+	if (a.values) for (let e of a.values) s.set(e.code, {
+		tone: i(e.color),
+		label: o(e.name) || e.code
+	});
+	if (a.display?.value_map) for (let [e, t] of Object.entries(a.display.value_map)) {
+		let n = s.get(e), r = t.color ? i(t.color) : n?.tone ?? "slate", a = (t.label ? o(t.label) : "") || n?.label || e;
+		s.set(e, {
+			tone: r,
+			label: a
+		});
+	}
+	return (r) => {
+		if (r == null || r === "") return "—";
+		let i = e(r), a = s.get(i);
+		return /* @__PURE__ */ n(t, {
+			tone: a?.tone ?? "slate",
+			size: "xs",
+			children: a?.label ?? i
+		});
+	};
+};
+//#endregion
+export { a as badgeFactory };

package/dist-lib/components/fields/cells/factories/boolPill.js

@@ -0,0 +1,17 @@
+import { Pill as e } from "../../../primitives/Pill.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/fields/cells/factories/boolPill.tsx
+var n = (n) => {
+	let { field: r, t: i } = n, a = r.display?.bool_labels, o = a ? i(a.true) : i("field.bool.yes", "Yes"), s = a ? i(a.false) : i("field.bool.no", "No");
+	return (n) => {
+		if (n == null) return "—";
+		let r = !!n;
+		return /* @__PURE__ */ t(e, {
+			tone: r ? "emerald" : "slate",
+			size: "xs",
+			children: r ? o : s
+		});
+	};
+};
+//#endregion
+export { n as boolPillFactory };

package/dist-lib/components/fields/cells/factories/code.js

@@ -0,0 +1,11 @@
+import { coerceDisplayString as e } from "../../../../lib/display-value.js";
+import { EMPTY_CELL as t } from "./emptyCell.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/fields/cells/factories/code.tsx
+var r = { fontSize: 12.5 }, i = () => (i) => i == null || i === "" ? t : /* @__PURE__ */ n("code", {
+	className: "mono",
+	style: r,
+	children: e(i)
+});
+//#endregion
+export { i as codeFactory };

package/dist-lib/components/fields/cells/factories/date.js

@@ -0,0 +1,30 @@
+import { coerceDisplayString as e } from "../../../../lib/display-value.js";
+import { EMPTY_CELL as t } from "./emptyCell.js";
+//#region src/components/fields/cells/factories/date.ts
+var n = () => (t) => {
+	if (t == null || t === "") return "—";
+	let n = typeof t == "string" ? t : e(t), r = /^(\d{4})-(\d{2})-(\d{2})$/.exec(n);
+	if (!r) return n;
+	let [, i, a, o] = r;
+	return `${o}-${a}-${i}`;
+}, r = ({ t: n }) => {
+	let r = new Intl.DateTimeFormat(n.language, {
+		hour: "numeric",
+		minute: "2-digit",
+		timeZone: "UTC"
+	}), i = new Intl.DateTimeFormat(n.language, {
+		hour: "numeric",
+		minute: "2-digit",
+		second: "2-digit",
+		timeZone: "UTC"
+	});
+	return (n) => {
+		if (n == null || n === "") return t;
+		let a = typeof n == "string" ? n : e(n), o = /^(\d{2}):(\d{2})(?::(\d{2}))?/.exec(a);
+		if (!o) return a;
+		let [, s, c, l = "00"] = o, u = new Date(Date.UTC(2e3, 0, 1, Number(s), Number(c), Number(l)));
+		return (l === "00" ? r : i).format(u);
+	};
+};
+//#endregion
+export { n as dateFactory, r as timeFactory };

package/dist-lib/components/fields/cells/factories/email.js

@@ -0,0 +1,26 @@
+import { coerceDisplayString as e } from "../../../../lib/display-value.js";
+import { EMPTY_CELL as t } from "./emptyCell.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/fields/cells/factories/email.tsx
+var r = {
+	display: "inline-block",
+	maxWidth: "100%",
+	verticalAlign: "top",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	fontSize: 12.5,
+	color: "var(--accent-text)",
+	textDecoration: "none"
+}, i = () => (i) => {
+	let a = i == null ? "" : e(i);
+	return a ? /* @__PURE__ */ n("a", {
+		href: `mailto:${a}`,
+		title: a,
+		className: "mono",
+		style: r,
+		children: a
+	}) : t;
+};
+//#endregion
+export { i as emailFactory };

package/dist-lib/components/fields/cells/factories/emptyCell.js

@@ -0,0 +1,10 @@
+import { jsx as e } from "react/jsx-runtime";
+var t = /* @__PURE__ */ e("span", {
+	style: {
+		fontSize: 12.5,
+		color: "var(--text-4)"
+	},
+	children: "—"
+});
+//#endregion
+export { t as EMPTY_CELL };

package/dist-lib/components/fields/cells/factories/fileReference.js

@@ -0,0 +1,17 @@
+import { FileReferenceField as e } from "../../FileReferenceField.js";
+import { EMPTY_CELL as t } from "./emptyCell.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/fields/cells/factories/fileReference.tsx
+var r = (r) => (i, a) => typeof i != "string" || i === "" ? t : /* @__PURE__ */ n(e, {
+	field: r.field,
+	value: i,
+	entity: r.entity,
+	entityCode: r.entityCode,
+	record: a,
+	fieldName: r.fieldName,
+	surface: r.surface,
+	t: r.t,
+	mode: "display"
+});
+//#endregion
+export { r as fileReferenceFactory };