@declarion/react 0.65.1 → 0.66.1

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

@@ -0,0 +1,213 @@
+import { useText as e } from "../../hooks/useText.js";
+import { UploadError as t, discardFile as n, formatBytes as r, uploadCheckFailure as i, uploadFailure as a, uploadFile as o, validateClientSide as s } from "./upload.js";
+import { UploadFailureText as c } from "./UploadFailureText.js";
+import { downloadFileURL as l } from "./helpers.js";
+import { useDraftRegistration as u } from "./draft-scope.js";
+import { useEmbedFileOpener as d } from "./useEmbedFileSrc.js";
+import { fileArrayFromValue as f } from "./value.js";
+import { useCallback as p, useEffect as m, useRef as h, useState as g } from "react";
+import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/file-widgets/FileList.tsx
+function b(e) {
+	return e ? (e.split("/")[1] ?? e).toUpperCase().slice(0, 6) : "";
+}
+function x(x) {
+	let { field: S, fieldName: C, value: w, onChange: T, mode: E, disabled: D } = x, O = f(w), [k, A] = g([]), { register: j, unregister: M, isDraft: N } = u(), P = e(), F = e("errors"), I = h(O);
+	I.current = O;
+	let L = h(null), R = h(/* @__PURE__ */ new Set()), z = h([]);
+	z.current = k;
+	let { open: B } = d();
+	m(() => () => {
+		z.current.forEach((e) => e.abort());
+	}, []);
+	let V = (S.accepts ?? []).join(","), H = E === "display", U = p(async (e) => {
+		let r = s(e, S.accepts, S.max_size_bytes), c = `row-${Math.random().toString(36).slice(2)}-${Date.now()}`, l = new AbortController();
+		if (r) A((t) => [...t, {
+			localId: c,
+			filename: e.name,
+			progress: null,
+			error: i(P, F, r),
+			abort: () => {}
+		}]);
+		else {
+			A((t) => [...t, {
+				localId: c,
+				filename: e.name,
+				progress: {
+					loaded: 0,
+					total: e.size,
+					pct: 0
+				},
+				error: null,
+				abort: () => l.abort()
+			}]);
+			try {
+				let t = await o({
+					file: e,
+					entityCode: x.entityCode,
+					fieldCode: C,
+					signal: l.signal,
+					onProgress: (e) => A((t) => t.map((t) => t.localId === c ? {
+						...t,
+						progress: e
+					} : t))
+				});
+				if (R.current.delete(c)) {
+					n(t.id).catch(() => {}), M(t.id);
+					return;
+				}
+				j(t.id, () => n(t.id));
+				let r = {
+					id: t.id,
+					filename: t.filename,
+					content_type: t.content_type,
+					size_bytes: t.size_bytes,
+					sha256: t.sha256,
+					width: t.width,
+					height: t.height,
+					url: t.url,
+					metadata: t.metadata
+				}, i = [...I.current, r];
+				I.current = i, T?.(i), A((e) => e.filter((e) => e.localId !== c));
+			} catch (e) {
+				if (e instanceof t && e.code === "ABORTED") {
+					A((e) => e.filter((e) => e.localId !== c));
+					return;
+				}
+				let n = a(P, F, e);
+				A((e) => e.map((e) => e.localId === c ? {
+					...e,
+					error: n,
+					progress: null,
+					abort: () => {}
+				} : e));
+			}
+		}
+	}, [
+		F,
+		P,
+		S.accepts,
+		S.max_size_bytes,
+		C,
+		T,
+		x.entityCode,
+		j,
+		M
+	]), W = p((e) => {
+		Array.from(e).forEach((e) => void U(e));
+	}, [U]), G = p(() => {
+		D || L.current?.click();
+	}, [D]), K = p((e) => {
+		let t = e.target.files;
+		e.target.value = "", t && t.length > 0 && W(t);
+	}, [W]), q = p((e) => {
+		N(e) && (n(e).catch(() => {}), M(e)), T?.(O.filter((t) => t.id !== e));
+	}, [
+		N,
+		O,
+		T,
+		M
+	]), J = p((e) => {
+		B(e.id, "download", l(e));
+	}, [B]);
+	return /* @__PURE__ */ y("div", {
+		"data-testid": `file-widget-${C}`,
+		className: "flex flex-col gap-2",
+		children: [/* @__PURE__ */ y("ul", {
+			className: "flex flex-col divide-y divide-divider rounded-md border border-border bg-surface",
+			children: [
+				O.length === 0 && k.length === 0 && /* @__PURE__ */ v("li", {
+					className: "px-3 py-4 text-center text-sm text-muted-foreground",
+					children: P(S.display?.placeholder) || P("file.list.empty", "No files")
+				}),
+				O.map((e) => /* @__PURE__ */ y("li", {
+					className: "flex items-center gap-3 px-3 py-2",
+					"data-testid": `row-${e.id}`,
+					children: [
+						/* @__PURE__ */ v("span", {
+							className: "flex-none rounded-sm border border-border bg-surface-3 px-1.5 py-0.5 text-[10px] text-muted-foreground",
+							children: b(e.content_type)
+						}),
+						/* @__PURE__ */ v("button", {
+							type: "button",
+							onClick: () => J(e),
+							className: "min-w-0 flex-1 truncate text-left text-sm text-foreground hover:underline",
+							title: e.filename,
+							children: e.filename
+						}),
+						/* @__PURE__ */ v("span", {
+							className: "flex-none text-xs text-muted-foreground",
+							children: r(e.size_bytes)
+						}),
+						/* @__PURE__ */ v("button", {
+							type: "button",
+							className: "flex-none rounded-sm border border-border bg-card px-2 py-0.5 text-xs text-foreground hover:bg-surface-2",
+							onClick: () => J(e),
+							"data-testid": `download-${e.id}`,
+							children: P("file.download", "Download")
+						}),
+						!H && /* @__PURE__ */ v("button", {
+							type: "button",
+							className: "flex-none rounded-sm border border-border bg-card px-2 py-0.5 text-xs text-destructive hover:bg-surface-2",
+							onClick: () => q(e.id),
+							disabled: D,
+							"data-testid": `remove-${e.id}`,
+							children: P("file.remove", "Remove")
+						})
+					]
+				}, e.id)),
+				k.map((e) => /* @__PURE__ */ y("li", {
+					className: "flex items-center gap-3 px-3 py-2",
+					"data-testid": `pending-row-${e.localId}`,
+					"aria-busy": !e.error,
+					"aria-invalid": !!e.error || void 0,
+					children: [
+						/* @__PURE__ */ v("span", {
+							className: "flex-none truncate text-sm text-foreground",
+							title: e.filename,
+							children: e.filename
+						}),
+						/* @__PURE__ */ v("span", { className: "flex-1" }),
+						e.error ? /* @__PURE__ */ v("span", {
+							role: "alert",
+							className: "text-xs text-destructive",
+							children: /* @__PURE__ */ v(c, { failure: e.error })
+						}) : /* @__PURE__ */ y("span", {
+							className: "text-xs text-muted-foreground",
+							role: "progressbar",
+							"aria-valuenow": e.progress?.pct ?? 0,
+							"aria-valuemin": 0,
+							"aria-valuemax": 100,
+							children: [e.progress?.pct ?? 0, "%"]
+						}),
+						/* @__PURE__ */ v("button", {
+							type: "button",
+							className: "flex-none rounded-sm border border-border bg-card px-2 py-0.5 text-xs",
+							onClick: () => {
+								e.abort(), R.current.add(e.localId), A((t) => t.filter((t) => t.localId !== e.localId));
+							},
+							children: e.error ? P("file.upload.dismiss", "Dismiss") : P("file.upload.cancel", "Cancel")
+						})
+					]
+				}, e.localId))
+			]
+		}), !H && /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v("button", {
+			type: "button",
+			className: "self-start rounded-sm border border-border bg-card px-2 py-1 text-xs text-foreground hover:bg-surface-2",
+			onClick: G,
+			disabled: D,
+			"data-testid": "add-files",
+			children: P("file.list.add", "Add files")
+		}), /* @__PURE__ */ v("input", {
+			ref: L,
+			type: "file",
+			accept: V || void 0,
+			multiple: !0,
+			onChange: K,
+			style: { display: "none" },
+			"data-testid": `file-input-${C}`
+		})] })]
+	});
+}
+//#endregion
+export { x as FileList };

package/dist-lib/{Grid-XUHm5SDe.js → components/file-widgets/Grid.js}

@@ -1,34 +1,39 @@
-import { Nt as e, wt as t } from "./useCurrentScreen-BZOHBGQZ.js";
-import { C as n, S as r, b as i, g as a, v as o, w as s, x as c, y as l } from "./PropertyGridEditor-XrP6TZ5s.js";
-import { c as u, i as d, l as f, m as p, t as m } from "./value-BuQVYx52.js";
+import { pluralText as e } from "../../lib/language.js";
+import { useText as t } from "../../hooks/useText.js";
+import { UploadError as n, discardFile as r, formatBytes as i, uploadCheckFailure as a, uploadFailure as o, uploadFile as s, validateClientSide as c } from "./upload.js";
+import { UploadFailureText as l } from "./UploadFailureText.js";
+import { preferredListThumbnailURL as u, preferredThumbnailVariant as d } from "./helpers.js";
+import { useDraftRegistration as f } from "./draft-scope.js";
+import { useEmbedFileSrc as p } from "./useEmbedFileSrc.js";
+import { fileArrayFromValue as m } from "./value.js";
 import { useCallback as h, useEffect as g, useMemo as _, useRef as v, useState as y } from "react";
 import { Fragment as b, jsx as x, jsxs as S } from "react/jsx-runtime";
-import { DndContext as C, PointerSensor as w, closestCenter as T, useSensor as ee, useSensors as te } from "@dnd-kit/core";
-import { SortableContext as ne, arrayMove as E, rectSortingStrategy as D, useSortable as O } from "@dnd-kit/sortable";
+import { DndContext as C, PointerSensor as w, closestCenter as ee, useSensor as te, useSensors as ne } from "@dnd-kit/core";
+import { SortableContext as T, arrayMove as E, rectSortingStrategy as D, useSortable as O } from "@dnd-kit/sortable";
 import { CSS as k } from "@dnd-kit/utilities";
 //#region src/components/file-widgets/Grid.tsx
 function A(e, t) {
 	return u(e, t);
 }
 function j(i) {
-	let { field: u, fieldName: d, value: f, onChange: p, mode: b, disabled: O } = i, k = m(f), [A, j] = y([]), [M, N] = y(/* @__PURE__ */ new Set()), [P, F] = y(null), { register: I, unregister: L, isDraft: R } = a(), z = t(), B = t("errors"), V = v(/* @__PURE__ */ new Set()), H = v([]);
+	let { field: l, fieldName: u, value: d, onChange: p, mode: b, disabled: O } = i, k = m(d), [A, j] = y([]), [M, N] = y(/* @__PURE__ */ new Set()), [P, F] = y(null), { register: I, unregister: L, isDraft: R } = f(), z = t(), B = t("errors"), V = v(/* @__PURE__ */ new Set()), H = v([]);
 	H.current = A;
 	let U = v(k);
 	U.current = k, g(() => () => {
 		H.current.forEach((e) => e.abort());
 	}, []);
-	let W = te(ee(w, { activationConstraint: { distance: 5 } })), oe = (u.accepts ?? ["image/*"]).join(","), se = u.display?.reorderable !== !1, ce = u.display?.listable_thumbnail, G = h(async (e) => {
-		let t = s(e, u.accepts, u.max_size_bytes), a = `tile-${Math.random().toString(36).slice(2)}-${Date.now()}`, f = new AbortController();
+	let W = ne(te(w, { activationConstraint: { distance: 5 } })), oe = (l.accepts ?? ["image/*"]).join(","), se = l.display?.reorderable !== !1, ce = l.display?.listable_thumbnail, G = h(async (e) => {
+		let t = c(e, l.accepts, l.max_size_bytes), d = `tile-${Math.random().toString(36).slice(2)}-${Date.now()}`, f = new AbortController();
 		if (t) j((n) => [...n, {
-			localId: a,
+			localId: d,
 			filename: e.name,
 			progress: null,
-			error: c(z, B, t),
+			error: a(z, B, t),
 			abort: () => {}
 		}]);
 		else {
 			j((t) => [...t, {
-				localId: a,
+				localId: d,
 				filename: e.name,
 				progress: {
 					loaded: 0,
@@ -39,22 +44,22 @@ function j(i) {
 				abort: () => f.abort()
 			}]);
 			try {
-				let t = await n({
+				let t = await s({
 					file: e,
 					entityCode: i.entityCode,
-					fieldCode: d,
+					fieldCode: u,
 					signal: f.signal,
-					onProgress: (e) => j((t) => t.map((t) => t.localId === a ? {
+					onProgress: (e) => j((t) => t.map((t) => t.localId === d ? {
 						...t,
 						progress: e
 					} : t))
 				});
-				if (V.current.delete(a)) {
-					l(t.id).catch(() => {}), L(t.id);
+				if (V.current.delete(d)) {
+					r(t.id).catch(() => {}), L(t.id);
 					return;
 				}
-				I(t.id, () => l(t.id));
-				let r = {
+				I(t.id, () => r(t.id));
+				let n = {
 					id: t.id,
 					filename: t.filename,
 					content_type: t.content_type,
@@ -64,15 +69,15 @@ function j(i) {
 					height: t.height,
 					url: t.url,
 					metadata: t.metadata
-				}, o = [...U.current, r];
-				U.current = o, p?.(o), j((e) => e.filter((e) => e.localId !== a));
+				}, a = [...U.current, n];
+				U.current = a, p?.(a), j((e) => e.filter((e) => e.localId !== d));
 			} catch (e) {
-				if (e instanceof o && e.code === "ABORTED") {
-					j((e) => e.filter((e) => e.localId !== a));
+				if (e instanceof n && e.code === "ABORTED") {
+					j((e) => e.filter((e) => e.localId !== d));
 					return;
 				}
-				let t = r(z, B, e);
-				j((e) => e.map((e) => e.localId === a ? {
+				let t = o(z, B, e);
+				j((e) => e.map((e) => e.localId === d ? {
 					...e,
 					error: t,
 					progress: null,
@@ -83,9 +88,9 @@ function j(i) {
 	}, [
 		B,
 		z,
-		u.accepts,
-		u.max_size_bytes,
-		d,
+		l.accepts,
+		l.max_size_bytes,
+		u,
 		p,
 		i.entityCode,
 		I,
@@ -105,7 +110,7 @@ function j(i) {
 		let t = e.target.files;
 		e.target.value = "", t && t.length > 0 && K(t);
 	}, [K]), fe = h((e) => {
-		R(e) && (l(e).catch(() => {}), L(e));
+		R(e) && (r(e).catch(() => {}), L(e));
 		let t = k.filter((t) => t.id !== e);
 		p?.(t), N((t) => {
 			let n = new Set(t);
@@ -118,7 +123,7 @@ function j(i) {
 		L
 	]), pe = h(() => {
 		M.size !== 0 && (Array.from(M).forEach((e) => {
-			R(e) && (l(e).catch(() => {}), L(e));
+			R(e) && (r(e).catch(() => {}), L(e));
 		}), p?.(k.filter((e) => !M.has(e.id))), N(/* @__PURE__ */ new Set()));
 	}, [
 		R,
@@ -157,7 +162,7 @@ function j(i) {
 		O || (e.key === "Enter" || e.key === " ") && e.target === e.currentTarget && (e.preventDefault(), J());
 	}, [O, J]), $ = b === "display", _e = _(() => k.map((e) => e.id), [k]);
 	return /* @__PURE__ */ S("div", {
-		"data-testid": `file-widget-${d}`,
+		"data-testid": `file-widget-${u}`,
 		className: "flex flex-col gap-2",
 		children: [
 			!$ && M.size > 0 && /* @__PURE__ */ S("div", {
@@ -189,15 +194,15 @@ function j(i) {
 			}),
 			/* @__PURE__ */ x(C, {
 				sensors: W,
-				collisionDetection: T,
+				collisionDetection: ee,
 				onDragEnd: me,
-				children: /* @__PURE__ */ x(ne, {
+				children: /* @__PURE__ */ x(T, {
 					items: _e,
 					strategy: D,
 					children: /* @__PURE__ */ S("div", {
 						className: "grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-3 rounded-md border border-dashed border-border bg-surface p-3 outline-none focus-visible:outline-2 focus-visible:outline-accent",
 						role: "grid",
-						"aria-label": d,
+						"aria-label": u,
 						tabIndex: $ || O ? -1 : 0,
 						onDragOver: le,
 						onDrop: ue,
@@ -225,7 +230,7 @@ function j(i) {
 								className: "col-span-full flex h-24 cursor-pointer items-center justify-center text-sm text-muted-foreground",
 								onClick: J,
 								"data-testid": "grid-empty",
-								children: z(u.display?.placeholder) || z("file.grid.empty", "Drop files here or click to browse")
+								children: z(l.display?.placeholder) || z("file.grid.empty", "Drop files here or click to browse")
 							})
 						]
 					})
@@ -238,7 +243,7 @@ function j(i) {
 				multiple: !0,
 				onChange: de,
 				style: { display: "none" },
-				"data-testid": `file-input-${d}`
+				"data-testid": `file-input-${u}`
 			}),
 			Y && /* @__PURE__ */ x(ae, {
 				file: Y,
@@ -252,16 +257,16 @@ function j(i) {
 	});
 }
 function re({ file: e, selected: n, disabled: r, reorderable: i, preferredThumbnail: a, onSelect: o, onRemove: s, onPreview: c }) {
-	let { attributes: l, listeners: u, setNodeRef: p, transform: m, transition: h, isDragging: g } = O({
+	let { attributes: l, listeners: u, setNodeRef: f, transform: m, transition: h, isDragging: g } = O({
 		id: e.id,
 		disabled: !i
 	}), _ = t(), v = {
 		transform: k.Transform.toString(m),
 		transition: h,
 		opacity: g ? .5 : 1
-	}, y = d(e.id, f(e, a), A(e, a));
+	}, y = p(e.id, d(e, a), A(e, a));
 	return /* @__PURE__ */ S("div", {
-		ref: p,
+		ref: f,
 		style: v,
 		className: `group relative aspect-square overflow-hidden rounded-md border ${n ? "border-accent" : "border-border"} bg-surface-2`,
 		"data-testid": `grid-tile-${e.id}`,
@@ -335,7 +340,7 @@ function ie({ tile: e, onCancel: n, onDismiss: r }) {
 			e.error && /* @__PURE__ */ x("div", {
 				role: "alert",
 				className: "mt-1 text-destructive",
-				children: /* @__PURE__ */ x(p, { failure: e.error })
+				children: /* @__PURE__ */ x(l, { failure: e.error })
 			}),
 			/* @__PURE__ */ x("button", {
 				type: "button",
@@ -347,7 +352,7 @@ function ie({ tile: e, onCancel: n, onDismiss: r }) {
 	});
 }
 function ae({ file: e, hasPrev: n, hasNext: r, onPrev: a, onNext: o, onClose: s }) {
-	let c = t(), l = d(e.id, "preview", e.presigned_url ?? e.url ?? A(e));
+	let c = t(), l = p(e.id, "preview", e.presigned_url ?? e.url ?? A(e));
 	return /* @__PURE__ */ S("div", {
 		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80",
 		role: "dialog",

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

@@ -0,0 +1,15 @@
+import { Suspense as e, lazy as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/file-widgets/GridLazy.tsx
+var r = t(() => import("./Grid.js").then((e) => ({ default: e.Grid })));
+function i() {
+	return /* @__PURE__ */ n("div", { className: "h-24 w-full rounded-md bg-muted animate-pulse" });
+}
+function a(t) {
+	return /* @__PURE__ */ n(e, {
+		fallback: /* @__PURE__ */ n(i, {}),
+		children: /* @__PURE__ */ n(r, { ...t })
+	});
+}
+//#endregion
+export { a as GridLazy };