@declarion/react 0.66.0 → 0.80.0

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

@@ -2,82 +2,86 @@ import { Icon as e } from "../primitives/Icons.js";
 import { Btn as t } from "../primitives/Btn.js";
 import { Chip as n } from "../primitives/Chip.js";
 import { TextInput as r } from "../primitives/Fields.js";
-import { useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { isNumberDraft as i } from "../../lib/number-text.js";
+import { useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/fields/IntArrayField.tsx
-function s(e) {
+function c(e) {
 	return Array.isArray(e) ? e.filter((e) => e != null).map(Number).filter((e) => !isNaN(e)) : [];
 }
-function c({ field: c, fieldName: l, value: u, mode: d, onChange: f, fieldId: p, t: m }) {
-	let h = s(u), [g, _] = i("");
-	if (d === "display") return h.length === 0 ? /* @__PURE__ */ a("span", {
+function l({ field: l, fieldName: u, value: d, mode: f, onChange: p, fieldId: m, t: h }) {
+	let g = c(d), [_, v] = a("");
+	if (f === "display") return g.length === 0 ? /* @__PURE__ */ o("span", {
 		style: {
 			fontSize: 12.5,
 			color: "var(--text-4)"
 		},
 		children: "—"
-	}) : /* @__PURE__ */ a("div", {
+	}) : /* @__PURE__ */ o("div", {
 		style: {
 			display: "flex",
 			flexWrap: "wrap",
 			gap: 4
 		},
-		children: h.map((e, t) => /* @__PURE__ */ a(n, {
+		children: g.map((e, t) => /* @__PURE__ */ o(n, {
 			tone: "slate",
 			children: e
 		}, t))
 	});
-	let v = () => {
-		let e = g.trim();
+	let y = () => {
+		let e = _.trim();
 		if (!e) return;
 		let t = Number(e);
-		!isNaN(t) && Number.isInteger(t) && (f?.([...h, t]), _(""));
-	}, y = (e) => {
-		f?.(h.filter((t, n) => n !== e));
+		!isNaN(t) && Number.isInteger(t) && (p?.([...g, t]), v(""));
+	}, b = (e) => {
+		p?.(g.filter((t, n) => n !== e));
 	};
-	return /* @__PURE__ */ o("div", {
+	return /* @__PURE__ */ s("div", {
 		style: {
 			display: "flex",
 			flexDirection: "column",
 			gap: 6
 		},
-		children: [h.length > 0 && /* @__PURE__ */ a("div", {
+		children: [g.length > 0 && /* @__PURE__ */ o("div", {
 			style: {
 				display: "flex",
 				flexWrap: "wrap",
 				gap: 4
 			},
-			children: h.map((e, t) => /* @__PURE__ */ a(n, {
+			children: g.map((e, t) => /* @__PURE__ */ o(n, {
 				tone: "slate",
-				onRemove: () => y(t),
+				onRemove: () => b(t),
 				children: e
 			}, t))
-		}), /* @__PURE__ */ o("div", {
+		}), /* @__PURE__ */ s("div", {
 			style: {
 				display: "flex",
 				gap: 4
 			},
-			children: [/* @__PURE__ */ a("div", {
+			children: [/* @__PURE__ */ o("div", {
 				style: { flex: 1 },
-				children: /* @__PURE__ */ a(r, {
-					id: p,
-					name: l,
-					"aria-required": c.required || void 0,
-					type: "number",
-					value: g,
-					onChange: _,
+				children: /* @__PURE__ */ o(r, {
+					id: m,
+					name: u,
+					"aria-required": l.required || void 0,
+					type: "text",
+					inputMode: "numeric",
+					value: _,
+					onChange: (e) => {
+						i(e, !0) && v(e);
+					},
 					onKeyDown: (e) => {
-						e.key === "Enter" && (e.preventDefault(), v());
+						e.key === "Enter" && (e.preventDefault(), y());
 					},
-					placeholder: m("field.array.add_number", "Add number…")
+					placeholder: h("field.array.add_number", "Add number…")
 				})
-			}), /* @__PURE__ */ a(t, {
-				icon: /* @__PURE__ */ a(e.plus, { size: 13 }),
-				onClick: v,
-				children: m("field.array.add", "Add")
+			}), /* @__PURE__ */ o(t, {
+				icon: /* @__PURE__ */ o(e.plus, { size: 13 }),
+				onClick: y,
+				children: h("field.array.add", "Add")
 			})]
 		})]
 	});
 }
 //#endregion
-export { c as IntArrayField };
+export { l as IntArrayField };

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

@@ -1,64 +1,37 @@
 import { coerceDisplayString as e } from "../../lib/display-value.js";
 import { TextInput as t } from "../primitives/Fields.js";
-import { formatDecimalText as n } from "../../lib/decimal-text.js";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { isNumberDraft as n, numberTextValue as r } from "../../lib/number-text.js";
+import { useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/fields/NumberField.tsx
-function a({ field: a, fieldName: o, value: s, mode: c, onChange: l, record: u, fieldId: d, t: f }) {
-	let p = a.display?.widget === "money", m = a.type === "decimal" || p, h = u?.$units?.[o], g = !h && a.unit ? a.unit.display || a.unit.storage : void 0, _ = h || (g && !g.startsWith("$") ? g : void 0);
-	if (c === "display") {
-		if (s == null) return /* @__PURE__ */ r("span", {
-			style: {
-				fontSize: 12.5,
-				color: "var(--text-4)"
-			},
-			children: "—"
-		});
-		let e;
-		if (m && typeof s == "string") e = n(s, new Intl.NumberFormat(f.language));
-		else {
-			let t = Number(s);
-			e = isNaN(t) ? null : new Intl.NumberFormat(f.language).format(t);
-		}
-		return e == null ? /* @__PURE__ */ r("span", {
-			style: { fontSize: 12.5 },
-			children: "—"
-		}) : /* @__PURE__ */ i("span", {
-			className: "num",
-			style: {
-				fontSize: 12.5,
-				fontVariantNumeric: "tabular-nums"
-			},
-			children: [e, _ && /* @__PURE__ */ r("span", {
-				style: {
-					color: "var(--text-3)",
-					marginLeft: 4
-				},
-				children: _
-			})]
-		});
-	}
-	return m ? /* @__PURE__ */ r(t, {
-		id: d,
-		name: o,
-		"aria-required": a.required || void 0,
+function o({ field: o, fieldName: l, value: u, onChange: d, fieldId: f }) {
+	let p = o.type === "int", m = u == null ? "" : e(u), [h, g] = i(m), [_, v] = i(m);
+	return m !== _ && (v(m), c(o, r(h), r(m)) || g(m)), /* @__PURE__ */ a(t, {
+		id: f,
+		name: l,
+		"aria-required": o.required || void 0,
 		type: "text",
-		inputMode: "decimal",
-		pattern: "-?\\d*\\.?\\d*",
-		value: s == null ? "" : e(s),
-		onChange: (e) => {
-			e === "" ? l?.(null) : l?.(e);
-		}
-	}) : /* @__PURE__ */ r(t, {
-		id: d,
-		name: o,
-		"aria-required": a.required || void 0,
-		type: "number",
-		step: a.type === "float" ? "0.01" : "1",
-		value: s == null ? "" : e(s),
+		inputMode: p ? "numeric" : "decimal",
+		value: h,
 		onChange: (e) => {
-			e === "" ? l?.(null) : l?.(a.type === "int" ? parseInt(e, 10) : parseFloat(e));
+			if (!n(e, p)) return;
+			g(e);
+			let t = r(e);
+			d?.(t == null ? null : s(o, t));
+		},
+		onBlur: () => {
+			let e = r(h) ?? "";
+			e !== h && g(e);
 		}
 	});
 }
+function s(e, t) {
+	if (e.type === "decimal") return t;
+	let n = Number(t);
+	return e.type === "int" && !Number.isSafeInteger(n) ? t : n;
+}
+function c(e, t, n) {
+	return t == null || n == null || e.type === "decimal" ? t === n : Number(t) === Number(n);
+}
 //#endregion
-export { a as NumberField };
+export { o as NumberField };

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

@@ -218,7 +218,7 @@ function w(e, t) {
 		width: e.width,
 		height: e.height,
 		metadata: e.metadata,
-		url: t
+		url: t ?? e.url
 	};
 }
 //#endregion

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

@@ -1,110 +1,71 @@
 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 { civilDateAsLocal as t, formatWireDateTime as n } from "../../lib/timestamp.js";
+import { specialValueMarker as r, specialValueMarkerCode as i } from "../../types/schema.js";
+import { Btn as a } from "../primitives/Btn.js";
+import { DateInput as o, 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")}`;
+var d = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}/;
+function f(e) {
+	if (!d.test(e)) return "";
+	let t = e.match(/([+-]\d{2}:\d{2})$/), n = new Date(e);
+	if (isNaN(n.getTime())) return "";
+	if (!t && !e.endsWith("Z")) return e.slice(0, 16).replace(" ", "T");
+	let r = 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")}`;
+		let e = t[1].charAt(0) === "+" ? 1 : -1, n = parseInt(t[1].substring(1, 3), 10), i = parseInt(t[1].substring(4, 6), 10);
+		r = e * (n * 60 + i) * 60 * 1e3;
 	}
-	return e.slice(0, 16);
+	return new Date(n.getTime() + r).toISOString().slice(0, 16);
 }
-function v(e) {
+function p(e) {
+	if (!d.test(e)) return "";
 	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")}`;
+	if (isNaN(t.getTime())) return "";
+	let n = (e) => String(e).padStart(2, "0");
+	return `${t.getFullYear()}-${n(t.getMonth() + 1)}-${n(t.getDate())}T${n(t.getHours())}:${n(t.getMinutes())}`;
 }
-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", {
+function m(e) {
+	let t = /^(\d{2}:\d{2})(?::(\d{2}))?/.exec(e);
+	return t ? t[2] && t[2] !== "00" ? `${t[1]}:${t[2]}` : t[1] : "";
+}
+function h({ field: d, fieldName: h, value: g, onChange: _, fieldId: v, t: y }) {
+	let b = !!d.timezone, x = i(g), S = d.special_values ?? [], C = g && x === null ? e(g) : "", w = S.length > 0 && /* @__PURE__ */ l("div", {
 		role: "group",
-		"aria-label": d,
+		"aria-label": h,
 		style: {
 			display: "flex",
 			flexWrap: "wrap",
 			gap: 6,
 			marginBottom: 6
 		},
-		children: T.map((e) => /* @__PURE__ */ l(o, {
+		children: S.map((e) => /* @__PURE__ */ l(a, {
 			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
+			active: x === e.code,
+			"aria-pressed": x === e.code,
+			onClick: () => _?.(x === e.code ? null : r(e.code)),
+			children: y(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));
+	});
+	if (d.type === "time") return /* @__PURE__ */ u(c, { children: [w, /* @__PURE__ */ l(s, {
+		id: v,
+		name: h,
+		"aria-required": d.required || void 0,
+		type: "time",
+		value: C ? m(C) : "",
+		onChange: (e) => _?.(e || null)
+	})] });
+	let T = d.type === "date" ? "date" : "datetime", E = C ? T === "date" ? t(C) ? C : "" : b ? f(C) : p(C) : null;
+	return /* @__PURE__ */ u(c, { children: [w, /* @__PURE__ */ l(o, {
+		kind: T,
+		id: v,
+		name: h,
+		ariaRequired: d.required,
+		value: E,
+		onChange: (e, t) => {
+			e === null ? _?.(t.trim() === "" ? null : t) : _?.(T === "date" || b ? e : n(new Date(e)));
 		}
 	})] });
 }
 //#endregion
-export { y as TimestampField };
+export { h as TimestampField };

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

@@ -1,30 +1,29 @@
 import { coerceDisplayString as e } from "../../../../lib/display-value.js";
-import { EMPTY_CELL as t } from "./emptyCell.js";
+import { formatCivilDateText as t } from "../../../../lib/date-text.js";
+import { EMPTY_CELL as n } 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, {
+var r = () => (n) => {
+	if (n == null || n === "") return "—";
+	let r = typeof n == "string" ? n : e(n);
+	return t(r) ?? r;
+}, i = ({ t }) => {
+	let r = new Intl.DateTimeFormat(t.language, {
 		hour: "numeric",
 		minute: "2-digit",
 		timeZone: "UTC"
-	}), i = new Intl.DateTimeFormat(n.language, {
+	}), i = new Intl.DateTimeFormat(t.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);
+	return (t) => {
+		if (t == null || t === "") return n;
+		let a = typeof t == "string" ? t : e(t), 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 };
+export { r as dateFactory, i as timeFactory };

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

@@ -27,7 +27,7 @@ function r(e) {
 		case "code":
 		case "name":
 		case "symbol": return e;
-		default: return "symbol";
+		default: return "code";
 	}
 }
 function i(e, t, n) {

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

@@ -1,5 +1,5 @@
-import { formatDecimalText as e } from "../../../../lib/decimal-text.js";
-import { EMPTY_CELL as t } from "./emptyCell.js";
+import { EMPTY_CELL as e } from "./emptyCell.js";
+import { formatDecimalText as t } from "../../../../lib/decimal-text.js";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/fields/cells/factories/number.tsx
 var i = {
@@ -15,12 +15,12 @@ var i = {
 		maximumFractionDigits: Math.min(c.scale ?? 2, 6)
 	}), p = c.type === "decimal", m = c.unit ? c.unit.display || c.unit.storage : void 0;
 	return (s, c) => {
-		if (s == null) return t;
+		if (s == null) return e;
 		let u = c.$units?.[l] || (m && !m.startsWith("$") ? m : void 0), h;
 		if (f) {
 			let e = Number(s);
 			h = Number.isFinite(e) ? f.format(e) : null;
-		} else if (p && typeof s == "string") h = e(s, d);
+		} else if (p && typeof s == "string") h = t(s, d);
 		else {
 			let e = typeof s == "number" ? s : Number(s);
 			h = Number.isFinite(e) ? d.format(e) : null;

package/dist-lib/components/file-widgets/DocumentCard.js

@@ -123,7 +123,7 @@ function v(v) {
 	]), $ = C === "display";
 	return !D && O !== "uploading" ? /* @__PURE__ */ g("div", {
 		"data-testid": `file-widget-${b}`,
-		className: "flex items-center gap-3 rounded-md border border-dashed border-border bg-surface p-3",
+		className: $ ? "flex items-center gap-3" : "flex items-center gap-3 rounded-md border border-dashed border-border bg-surface p-3",
 		children: [
 			/* @__PURE__ */ h(_, {}),
 			/* @__PURE__ */ g("div", {