@declarion/react 0.65.0 → 0.66.0

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

@@ -0,0 +1,45 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { resolveRefRecordLabel as t, specialValueMarker as n, specialValueMarkerCode as r } from "../../types/schema.js";
+import { useText as i } from "../../hooks/useText.js";
+import { RefCombobox as a } from "./RefCombobox.js";
+import { useMemo as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/fields/RefField.tsx
+function c({ field: c, value: l, mode: u, onChange: d, refs: f, fieldId: p, labelId: m }) {
+	let h = i(), g = c.ref?.entity, _ = c.display?.ref_display_field || "$display", v = o(() => {
+		if (l == null) return "—";
+		let n = e(l);
+		if (f && g) {
+			let e = f[g]?.[n];
+			if (e) return t(h, e, _, n);
+		}
+		return n;
+	}, [
+		h,
+		l,
+		f,
+		g,
+		_
+	]);
+	if (u === "display") return /* @__PURE__ */ s("span", {
+		style: { fontSize: 12.5 },
+		children: v
+	});
+	let y = r(l);
+	return /* @__PURE__ */ s(a, {
+		ref: c.ref,
+		value: y ?? l,
+		onChange: (e) => {
+			let t = typeof e == "string" && (c.special_values ?? []).some((t) => t.code === e);
+			d?.(t ? n(e) : e);
+		},
+		refs: f,
+		displayFieldOverride: c.display?.ref_display_field,
+		specialValues: c.special_values,
+		id: p,
+		labelId: m,
+		required: c.required
+	});
+}
+//#endregion
+export { c as RefField };

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

@@ -0,0 +1,225 @@
+import { Icon as e } from "../primitives/Icons.js";
+import { Btn as t } from "../primitives/Btn.js";
+import { useText as n } from "../../hooks/useText.js";
+import { Spinner as r } from "../primitives/Spinner.js";
+import { TextInput as i } from "../primitives/Fields.js";
+import { Markdown as a } from "../shared/Markdown.js";
+import { createRichTextValue as o, extractDeclarionFileIds as s, richTextTokenForFile as c, withRichTextFile as l, withoutRichTextFiles as u } from "../../lib/rich-text.js";
+import { discardFile as d, uploadCheckFailure as f, uploadFailure as p, uploadFile as m, validateClientSide as h } from "../file-widgets/upload.js";
+import { useDraftRegistration as g } from "../file-widgets/draft-scope.js";
+import { useMemo as _, useRef as v, useState as y } from "react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+//#region src/components/fields/RichTextField.tsx
+function S(S) {
+	let { field: T, entityCode: E, fieldName: D, value: O, mode: k, onChange: A, record: j, compact: M, fieldId: N, t: P } = S, F = n("errors"), I = v(null), L = v(null), R = v(/* @__PURE__ */ new Map()), z = v(/* @__PURE__ */ new Set()), [B, V] = y(0), [H, U] = y(null), { register: W, unregister: G } = g(), K = j?.$files?.[D], q = _(() => o(O, K), [K, O]), J = q.markdown, Y = T.files?.accepts, X = T.files?.max_size_bytes, Z = (e, t = q.files) => {
+		let n = new Set(s(e)), r = [];
+		for (let e of z.current) n.has(e) || r.push(e);
+		if (r.length > 0) {
+			for (let e of r) {
+				z.current.delete(e), G(e), d(e).catch(() => {});
+				let t = R.current.get(e);
+				t && (URL.revokeObjectURL(t), R.current.delete(e));
+			}
+			A?.(u({
+				markdown: e,
+				files: t
+			}, r));
+		} else A?.({
+			markdown: e,
+			files: t
+		});
+	}, Q = (e, t, n) => {
+		let r = I.current, i = r?.selectionStart ?? e.markdown.length, a = r?.selectionEnd ?? e.markdown.length, o = `${e.markdown.slice(0, i)}${t}${e.markdown.slice(a)}`, s = n ? l(e, n).files : e.files;
+		Z(o, s), requestAnimationFrame(() => {
+			if (!r) return;
+			let e = i + t.length;
+			r.focus(), r.setSelectionRange(e, e);
+		});
+	}, $ = async (e) => {
+		if (!E || !T.files) return;
+		let t = Array.from(e);
+		if (t.length === 0) return;
+		U(null), V((e) => e + t.length);
+		let n = {
+			markdown: J,
+			files: q.files
+		};
+		for (let e of t) {
+			let r = h(e, Y, X);
+			if (r) U(f(P, F, r).message), V((e) => e - 1);
+			else try {
+				let r = await m({
+					file: e,
+					entityCode: E,
+					fieldCode: D
+				}), i = e.type.startsWith("image/") ? URL.createObjectURL(e) : void 0;
+				i && R.current.set(r.id, i);
+				let a = w(r, i);
+				if (W(r.id, () => d(r.id)), z.current.add(r.id), t.length === 1) {
+					let e = C(n.markdown, c(a));
+					Q(n, e, a), n = l({
+						markdown: `${n.markdown}${e}`,
+						files: n.files
+					}, a);
+				} else {
+					let e = C(n.markdown, c(a));
+					n = l({
+						markdown: `${n.markdown}${e}`,
+						files: n.files
+					}, a), Z(n.markdown, n.files);
+				}
+			} catch (e) {
+				U(p(P, F, e).message);
+			} finally {
+				V((e) => e - 1);
+			}
+		}
+	};
+	return k === "display" ? J ? /* @__PURE__ */ b(a, {
+		content: J,
+		files: q.files
+	}) : /* @__PURE__ */ b("span", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-4)"
+		},
+		children: "—"
+	}) : M ? /* @__PURE__ */ b(i, {
+		id: N,
+		name: D,
+		"aria-required": T.required || void 0,
+		value: J,
+		onChange: (e) => Z(e)
+	}) : /* @__PURE__ */ x("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 10
+		},
+		children: [
+			/* @__PURE__ */ x("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 8,
+					flexWrap: "wrap"
+				},
+				children: [
+					/* @__PURE__ */ b(t, {
+						kind: "ghost",
+						size: "xs",
+						icon: b(B > 0 ? r : e.plus, { size: 12 }),
+						onClick: () => L.current?.click(),
+						disabled: !E || !T.files || B > 0,
+						children: B > 0 ? P("field.rich_text.uploading", "Uploading…") : P("field.rich_text.insert_file", "Insert file")
+					}),
+					/* @__PURE__ */ b("span", {
+						style: {
+							fontSize: 11.5,
+							color: "var(--text-3)"
+						},
+						children: P("field.rich_text.hint", "Stores markdown with inline {reference} refs.", { reference: "declarion://file/<id>" })
+					}),
+					!E && /* @__PURE__ */ b("span", {
+						style: {
+							fontSize: 11.5,
+							color: "var(--warn)"
+						},
+						children: P("field.rich_text.needs_entity", "Inline uploads need entity context.")
+					})
+				]
+			}),
+			/* @__PURE__ */ b("input", {
+				ref: L,
+				type: "file",
+				hidden: !0,
+				accept: Y?.join(","),
+				multiple: !0,
+				onChange: (e) => {
+					e.target.files && $(e.target.files), e.target.value = "";
+				}
+			}),
+			/* @__PURE__ */ b("textarea", {
+				ref: I,
+				id: N,
+				name: D,
+				"aria-required": T.required || void 0,
+				value: J,
+				onChange: (e) => Z(e.target.value),
+				onPaste: (e) => {
+					let t = Array.from(e.clipboardData.files ?? []).filter((e) => e.size > 0);
+					t.length !== 0 && (e.preventDefault(), $(t));
+				},
+				onDrop: (e) => {
+					let t = Array.from(e.dataTransfer.files ?? []).filter((e) => e.size > 0);
+					t.length !== 0 && (e.preventDefault(), $(t));
+				},
+				onDragOver: (e) => e.preventDefault(),
+				rows: 12,
+				style: {
+					width: "100%",
+					minHeight: 220,
+					border: "1px solid var(--border)",
+					borderRadius: "var(--radius-md)",
+					padding: "10px 12px",
+					fontSize: "var(--control-font-size)",
+					lineHeight: 1.5,
+					fontFamily: "inherit",
+					resize: "vertical",
+					background: "var(--surface)",
+					color: "var(--text)"
+				}
+			}),
+			H && /* @__PURE__ */ b("div", {
+				style: {
+					fontSize: 12,
+					color: "var(--danger)"
+				},
+				children: H
+			}),
+			/* @__PURE__ */ x("div", {
+				style: {
+					border: "1px solid var(--border)",
+					borderRadius: "var(--radius-md)",
+					padding: 12,
+					background: "var(--surface-2)"
+				},
+				children: [/* @__PURE__ */ b("div", {
+					style: {
+						fontSize: 11.5,
+						color: "var(--text-3)",
+						marginBottom: 8
+					},
+					children: P("field.rich_text.preview", "Preview")
+				}), J ? /* @__PURE__ */ b(a, {
+					content: J,
+					files: q.files
+				}) : /* @__PURE__ */ b("span", {
+					style: {
+						fontSize: 12.5,
+						color: "var(--text-4)"
+					},
+					children: P("field.rich_text.empty", "Empty")
+				})]
+			})
+		]
+	});
+}
+function C(e, t) {
+	return e ? e.endsWith("\n\n") ? t : e.endsWith("\n") ? `\n${t}` : `\n\n${t}` : `${t}\n`;
+}
+function w(e, t) {
+	return {
+		id: e.id,
+		filename: e.filename,
+		content_type: e.content_type,
+		size_bytes: e.size_bytes,
+		sha256: e.sha256,
+		width: e.width,
+		height: e.height,
+		metadata: e.metadata,
+		url: t
+	};
+}
+//#endregion
+export { S as RichTextField };

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

@@ -0,0 +1,34 @@
+import { PasswordInput as e } from "../primitives/Fields.js";
+import { SECRET_SENTINEL as t, holdsSecret as n } from "./secretValue.js";
+import { useState as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/fields/SecretField.tsx
+function a({ field: a, fieldName: o, value: s, mode: c, onChange: l, record: u, fieldId: d, t: f }) {
+	let [p, m] = r(""), h = u !== void 0, g = n(s);
+	return c === "display" ? g ? /* @__PURE__ */ i("span", {
+		className: "mono",
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-3)"
+		},
+		children: f("field.secret.set", "Set")
+	}) : /* @__PURE__ */ i("span", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-4)",
+			fontStyle: "italic"
+		},
+		children: f("field.secret.not_set", "Not set")
+	}) : /* @__PURE__ */ i(e, {
+		id: d,
+		name: o,
+		ariaRequired: a.required,
+		value: p,
+		onChange: (e) => {
+			m(e), h && e === "" ? l?.(g ? t : "") : l?.(e);
+		},
+		placeholder: h ? f("field.secret.keep_existing", "Leave blank to keep existing value") : f("field.secret.placeholder", "Enter value")
+	});
+}
+//#endregion
+export { a as SecretField };

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

@@ -0,0 +1,165 @@
+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";
+//#region src/components/fields/StringArrayField.tsx
+function s(e) {
+	return Array.isArray(e) ? e.filter((e) => e != null).map(String) : [];
+}
+function c({ field: e, fieldName: t, value: n, mode: r, onChange: i, fieldId: o, t: c }) {
+	let d = s(n), f = e.values ?? [];
+	return f.length > 0 ? /* @__PURE__ */ a(l, {
+		values: f,
+		selected: d,
+		mode: r,
+		required: e.required,
+		onChange: i,
+		t: c
+	}) : /* @__PURE__ */ a(u, {
+		items: d,
+		fieldName: t,
+		required: e.required,
+		mode: r,
+		onChange: i,
+		fieldId: o,
+		t: c
+	});
+}
+function l({ values: t, selected: r, mode: i, required: s, onChange: c, t: l }) {
+	let u = new Set(r), d = (e) => {
+		let n = t.find((t) => t.code === e);
+		return n && l(n.name) || e;
+	}, f = r.filter((e) => !t.some((t) => t.code === e));
+	if (i === "display") return r.length === 0 ? /* @__PURE__ */ a("span", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-4)"
+		},
+		children: "—"
+	}) : /* @__PURE__ */ o("div", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: 4
+		},
+		children: [t.filter((e) => u.has(e.code)).map((e) => /* @__PURE__ */ a(n, {
+			tone: "slate",
+			children: l(e.name) || e.code
+		}, e.code)), f.map((e) => /* @__PURE__ */ a(n, {
+			tone: "slate",
+			children: d(e)
+		}, e))]
+	});
+	let p = (e) => {
+		u.has(e) ? c?.(r.filter((t) => t !== e)) : c?.([...r, e]);
+	}, m = (e) => ({
+		display: "inline-flex",
+		alignItems: "center",
+		gap: 4,
+		padding: "3px 10px",
+		borderRadius: 999,
+		fontSize: 12.5,
+		cursor: "pointer",
+		border: e ? "1px solid var(--text-3)" : "1px solid var(--border)",
+		background: e ? "var(--surface-2)" : "transparent",
+		color: e ? "var(--text)" : "var(--text-4)",
+		fontWeight: e ? 600 : 400
+	});
+	return /* @__PURE__ */ o("div", {
+		role: "group",
+		"aria-required": s || void 0,
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: 6
+		},
+		children: [t.map((t) => {
+			let n = u.has(t.code);
+			return /* @__PURE__ */ o("button", {
+				type: "button",
+				"aria-pressed": n,
+				onClick: () => p(t.code),
+				style: m(n),
+				children: [n && /* @__PURE__ */ a(e.check, { size: 12 }), d(t.code)]
+			}, t.code);
+		}), f.map((t) => /* @__PURE__ */ o("button", {
+			type: "button",
+			"aria-pressed": !0,
+			onClick: () => p(t),
+			style: m(!0),
+			children: [/* @__PURE__ */ a(e.check, { size: 12 }), d(t)]
+		}, t))]
+	});
+}
+function u({ items: s, fieldName: c, required: l, mode: u, onChange: d, fieldId: f, t: p }) {
+	let [m, h] = i("");
+	if (u === "display") return s.length === 0 ? /* @__PURE__ */ a("span", {
+		style: {
+			fontSize: 12.5,
+			color: "var(--text-4)"
+		},
+		children: "—"
+	}) : /* @__PURE__ */ a("div", {
+		style: {
+			display: "flex",
+			flexWrap: "wrap",
+			gap: 4
+		},
+		children: s.map((e, t) => /* @__PURE__ */ a(n, {
+			tone: "slate",
+			children: e
+		}, t))
+	});
+	let g = () => {
+		let e = m.trim();
+		e && (d?.([...s, e]), h(""));
+	}, _ = (e) => {
+		d?.(s.filter((t, n) => n !== e));
+	};
+	return /* @__PURE__ */ o("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 6
+		},
+		children: [s.length > 0 && /* @__PURE__ */ a("div", {
+			style: {
+				display: "flex",
+				flexWrap: "wrap",
+				gap: 4
+			},
+			children: s.map((e, t) => /* @__PURE__ */ a(n, {
+				tone: "slate",
+				onRemove: () => _(t),
+				children: e
+			}, t))
+		}), /* @__PURE__ */ o("div", {
+			style: {
+				display: "flex",
+				gap: 4
+			},
+			children: [/* @__PURE__ */ a("div", {
+				style: { flex: 1 },
+				children: /* @__PURE__ */ a(r, {
+					id: f,
+					name: c,
+					"aria-required": l || void 0,
+					value: m,
+					onChange: h,
+					onKeyDown: (e) => {
+						e.key === "Enter" && (e.preventDefault(), g());
+					},
+					placeholder: p("field.array.add_item", "Add item…")
+				})
+			}), /* @__PURE__ */ a(t, {
+				icon: /* @__PURE__ */ a(e.plus, { size: 13 }),
+				onClick: g,
+				children: p("field.array.add", "Add")
+			})]
+		})]
+	});
+}
+//#endregion
+export { c as StringArrayField };

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

@@ -0,0 +1,39 @@
+import { coerceDisplayString as e } from "../../lib/display-value.js";
+import { TextInput as t } from "../primitives/Fields.js";
+import { CopyButton as n } from "../shared/CopyButton.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/fields/StringField.tsx
+function a({ field: a, fieldName: o, value: s, mode: c, onChange: l, fieldId: u }) {
+	if (c === "display") {
+		let t = e(s);
+		return a.copyable && t ? /* @__PURE__ */ i("span", {
+			style: {
+				display: "inline-flex",
+				alignItems: "center",
+				gap: 4
+			},
+			children: [/* @__PURE__ */ r("span", {
+				style: { fontSize: 12.5 },
+				children: t
+			}), /* @__PURE__ */ r(n, {
+				value: t,
+				size: "sm"
+			})]
+		}) : /* @__PURE__ */ r("span", {
+			style: { fontSize: 12.5 },
+			children: t || /* @__PURE__ */ r("span", {
+				style: { color: "var(--text-4)" },
+				children: "—"
+			})
+		});
+	}
+	return /* @__PURE__ */ r(t, {
+		id: u,
+		name: o,
+		"aria-required": a.required || void 0,
+		value: e(s),
+		onChange: (e) => l?.(e)
+	});
+}
+//#endregion
+export { a as StringField };