@declarion/react 0.57.0 → 0.59.2

package/dist-lib/Grid-CQabaBLx.js

@@ -0,0 +1,405 @@
+import { dt as e, ft as t, ht as n, lt as r, mt as i, pt as a, st as o, ut as s } from "./useCurrentScreen-BL5NZFCw.js";
+import { t as c, u as l } from "./useText-BFDCTUSo.js";
+import { c as u, i as d, l as f, m as p, t as m } from "./value-By1-WJ8J.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 { CSS as k } from "@dnd-kit/utilities";
+//#region src/components/file-widgets/Grid.tsx
+function A(e, t) {
+	return u(e, t);
+}
+function j(e) {
+	let { field: u, fieldName: d, value: f, onChange: p, mode: b, disabled: O } = e, k = m(f), [A, j] = y([]), [M, N] = y(/* @__PURE__ */ new Set()), [P, F] = y(null), { register: I, unregister: L, isDraft: R } = o(), z = c(), B = c("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 (o) => {
+		let c = n(o, u.accepts, u.max_size_bytes), l = `tile-${Math.random().toString(36).slice(2)}-${Date.now()}`, f = new AbortController();
+		if (c) {
+			j((e) => [...e, {
+				localId: l,
+				filename: o.name,
+				progress: null,
+				error: t(z, B, c),
+				abort: () => {}
+			}]);
+			return;
+		}
+		j((e) => [...e, {
+			localId: l,
+			filename: o.name,
+			progress: {
+				loaded: 0,
+				total: o.size,
+				pct: 0
+			},
+			error: null,
+			abort: () => f.abort()
+		}]);
+		try {
+			let t = await i({
+				file: o,
+				entityCode: e.entityCode,
+				fieldCode: d,
+				signal: f.signal,
+				onProgress: (e) => j((t) => t.map((t) => t.localId === l ? {
+					...t,
+					progress: e
+				} : t))
+			});
+			if (V.current.delete(l)) {
+				s(t.id).catch(() => {}), L(t.id);
+				return;
+			}
+			I(t.id, () => s(t.id));
+			let n = {
+				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
+			}, r = [...U.current, n];
+			U.current = r, p?.(r), j((e) => e.filter((e) => e.localId !== l));
+		} catch (e) {
+			if (e instanceof r && e.code === "ABORTED") {
+				j((e) => e.filter((e) => e.localId !== l));
+				return;
+			}
+			let t = a(z, B, e);
+			j((e) => e.map((e) => e.localId === l ? {
+				...e,
+				error: t,
+				progress: null,
+				abort: () => {}
+			} : e));
+		}
+	}, [
+		B,
+		z,
+		u.accepts,
+		u.max_size_bytes,
+		d,
+		p,
+		e.entityCode,
+		I,
+		L
+	]), K = h((e) => {
+		Array.from(e).forEach((e) => void G(e));
+	}, [G]), q = v(null), J = h(() => {
+		O || q.current?.click();
+	}, [O]), le = h((e) => {
+		O || (e.preventDefault(), e.dataTransfer.dropEffect = "copy");
+	}, [O]), ue = h((e) => {
+		if (O) return;
+		e.preventDefault();
+		let t = e.dataTransfer.files;
+		t && t.length > 0 && K(t);
+	}, [O, K]), de = h((e) => {
+		let t = e.target.files;
+		e.target.value = "", t && t.length > 0 && K(t);
+	}, [K]), fe = h((e) => {
+		R(e) && (s(e).catch(() => {}), L(e));
+		let t = k.filter((t) => t.id !== e);
+		p?.(t), N((t) => {
+			let n = new Set(t);
+			return n.delete(e), n;
+		});
+	}, [
+		R,
+		k,
+		p,
+		L
+	]), pe = h(() => {
+		M.size !== 0 && (Array.from(M).forEach((e) => {
+			R(e) && (s(e).catch(() => {}), L(e));
+		}), p?.(k.filter((e) => !M.has(e.id))), N(/* @__PURE__ */ new Set()));
+	}, [
+		R,
+		k,
+		M,
+		p,
+		L
+	]), me = h((e) => {
+		let { active: t, over: n } = e;
+		if (!n || t.id === n.id) return;
+		let r = k.findIndex((e) => e.id === t.id), i = k.findIndex((e) => e.id === n.id);
+		r < 0 || i < 0 || p?.(E(k, r, i));
+	}, [k, p]), he = h((e) => {
+		N((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		});
+	}, []), Y = P == null ? null : k[P], X = h(() => {
+		F((e) => e == null ? e : Math.min(k.length - 1, e + 1));
+	}, [k.length]), Z = h(() => {
+		F((e) => e == null ? e : Math.max(0, e - 1));
+	}, []), Q = h(() => F(null), []);
+	g(() => {
+		if (P == null) return;
+		let e = (e) => {
+			e.key === "Escape" ? Q() : e.key === "ArrowRight" ? X() : e.key === "ArrowLeft" && Z();
+		};
+		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
+	}, [
+		P,
+		Q,
+		X,
+		Z
+	]);
+	let ge = h((e) => {
+		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}`,
+		className: "flex flex-col gap-2",
+		children: [
+			!$ && M.size > 0 && /* @__PURE__ */ S("div", {
+				className: "flex items-center gap-2 rounded-md border border-border bg-surface-2 p-2 text-sm",
+				role: "toolbar",
+				"aria-label": z("file.grid.bulk_actions", "Bulk actions"),
+				children: [
+					/* @__PURE__ */ x("span", {
+						className: "text-foreground",
+						children: l(z, "file.grid.selected", M.size, {
+							one: "{count} selected",
+							other: "{count} selected"
+						})
+					}),
+					/* @__PURE__ */ x("button", {
+						type: "button",
+						className: "rounded-sm border border-border bg-card px-2 py-1 text-xs text-destructive hover:bg-surface-2",
+						onClick: pe,
+						"data-testid": "bulk-delete",
+						children: z("file.delete", "Delete")
+					}),
+					/* @__PURE__ */ x("button", {
+						type: "button",
+						className: "rounded-sm border border-border bg-card px-2 py-1 text-xs text-foreground hover:bg-surface-2",
+						onClick: () => N(/* @__PURE__ */ new Set()),
+						children: z("file.grid.clear_selection", "Clear")
+					})
+				]
+			}),
+			/* @__PURE__ */ x(C, {
+				sensors: W,
+				collisionDetection: T,
+				onDragEnd: me,
+				children: /* @__PURE__ */ x(ne, {
+					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,
+						tabIndex: $ || O ? -1 : 0,
+						onDragOver: le,
+						onDrop: ue,
+						onKeyDown: ge,
+						"data-testid": "grid-container",
+						children: [
+							k.map((e, t) => /* @__PURE__ */ x(re, {
+								file: e,
+								selected: M.has(e.id),
+								disabled: O || $,
+								reorderable: se && !$,
+								preferredThumbnail: ce,
+								onSelect: () => he(e.id),
+								onRemove: () => fe(e.id),
+								onPreview: () => F(t)
+							}, e.id)),
+							A.map((e) => /* @__PURE__ */ x(ie, {
+								tile: e,
+								onCancel: () => {
+									e.abort(), V.current.add(e.localId), j((t) => t.filter((t) => t.localId !== e.localId));
+								},
+								onDismiss: () => j((t) => t.filter((t) => t.localId !== e.localId))
+							}, e.localId)),
+							k.length === 0 && A.length === 0 && /* @__PURE__ */ x("div", {
+								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")
+							})
+						]
+					})
+				})
+			}),
+			!$ && /* @__PURE__ */ x("input", {
+				ref: q,
+				type: "file",
+				accept: oe,
+				multiple: !0,
+				onChange: de,
+				style: { display: "none" },
+				"data-testid": `file-input-${d}`
+			}),
+			Y && /* @__PURE__ */ x(ae, {
+				file: Y,
+				hasPrev: P > 0,
+				hasNext: P < k.length - 1,
+				onPrev: Z,
+				onNext: X,
+				onClose: Q
+			})
+		]
+	});
+}
+function re({ file: e, selected: t, disabled: n, reorderable: r, preferredThumbnail: i, onSelect: a, onRemove: o, onPreview: s }) {
+	let { attributes: l, listeners: u, setNodeRef: p, transform: m, transition: h, isDragging: g } = O({
+		id: e.id,
+		disabled: !r
+	}), _ = c(), v = {
+		transform: k.Transform.toString(m),
+		transition: h,
+		opacity: g ? .5 : 1
+	}, y = d(e.id, f(e, i), A(e, i));
+	return /* @__PURE__ */ S("div", {
+		ref: p,
+		style: v,
+		className: `group relative aspect-square overflow-hidden rounded-md border ${t ? "border-accent" : "border-border"} bg-surface-2`,
+		"data-testid": `grid-tile-${e.id}`,
+		"data-selected": t || void 0,
+		children: [y ? /* @__PURE__ */ x("img", {
+			src: y,
+			alt: e.filename,
+			className: "h-full w-full cursor-pointer object-cover",
+			loading: "lazy",
+			onClick: s
+		}) : /* @__PURE__ */ x("div", {
+			className: "flex h-full w-full cursor-pointer items-center justify-center bg-surface-3 text-xs text-muted-foreground",
+			onClick: s,
+			children: e.filename
+		}), !n && /* @__PURE__ */ S(b, { children: [
+			/* @__PURE__ */ x("input", {
+				type: "checkbox",
+				className: "absolute left-1 top-1 h-4 w-4 cursor-pointer",
+				checked: t,
+				onChange: a,
+				"aria-label": _("file.grid.select", "Select {filename}", { filename: e.filename }),
+				"data-testid": `select-${e.id}`,
+				onClick: (e) => e.stopPropagation()
+			}),
+			r && /* @__PURE__ */ x("button", {
+				type: "button",
+				className: "absolute right-1 top-1 cursor-grab rounded-sm border border-border bg-card px-1 text-xs",
+				"aria-label": _("file.grid.reorder", "Drag to reorder {filename}", { filename: e.filename }),
+				"data-testid": `drag-${e.id}`,
+				...l,
+				...u,
+				children: "⋮⋮"
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "absolute inset-x-0 bottom-0 flex items-center justify-end gap-1 bg-black/50 p-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
+				children: [/* @__PURE__ */ x("button", {
+					type: "button",
+					className: "rounded-sm border border-border bg-card px-2 py-0.5 text-xs",
+					onClick: s,
+					children: _("file.view", "View")
+				}), /* @__PURE__ */ x("button", {
+					type: "button",
+					className: "rounded-sm border border-border bg-card px-2 py-0.5 text-xs text-destructive",
+					onClick: o,
+					"data-testid": `remove-${e.id}`,
+					children: _("file.delete", "Delete")
+				})]
+			})
+		] })]
+	});
+}
+function ie({ tile: e, onCancel: t, onDismiss: n }) {
+	let r = c();
+	return /* @__PURE__ */ S("div", {
+		className: `relative flex aspect-square flex-col items-center justify-center rounded-md border ${e.error ? "border-destructive" : "border-border"} bg-surface-2 p-2 text-center text-xs`,
+		"data-testid": `pending-tile-${e.localId}`,
+		children: [
+			/* @__PURE__ */ x("span", {
+				className: "truncate",
+				title: e.filename,
+				children: e.filename
+			}),
+			e.progress && !e.error && /* @__PURE__ */ S("span", {
+				className: "mt-1 text-muted-foreground",
+				role: "progressbar",
+				"aria-valuenow": e.progress.pct,
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				children: [e.progress.pct, "%"]
+			}),
+			e.error && /* @__PURE__ */ x("div", {
+				role: "alert",
+				className: "mt-1 text-destructive",
+				children: /* @__PURE__ */ x(p, { failure: e.error })
+			}),
+			/* @__PURE__ */ x("button", {
+				type: "button",
+				className: "mt-1 rounded-sm border border-border bg-card px-2 py-0.5",
+				onClick: e.error ? n : t,
+				children: e.error ? r("file.upload.dismiss", "Dismiss") : r("file.upload.cancel", "Cancel")
+			})
+		]
+	});
+}
+function ae({ file: t, hasPrev: n, hasNext: r, onPrev: i, onNext: a, onClose: o }) {
+	let s = c(), l = d(t.id, "preview", t.presigned_url ?? t.url ?? A(t));
+	return /* @__PURE__ */ S("div", {
+		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80",
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": t.filename,
+		"data-testid": "lightbox",
+		onClick: o,
+		children: [
+			/* @__PURE__ */ x("button", {
+				type: "button",
+				className: "absolute right-4 top-4 rounded-sm border border-border bg-card px-3 py-1 text-foreground",
+				onClick: (e) => {
+					e.stopPropagation(), o();
+				},
+				"data-testid": "lightbox-close",
+				children: s("file.lightbox.close", "Close")
+			}),
+			n && /* @__PURE__ */ x("button", {
+				type: "button",
+				className: "absolute left-4 rounded-sm border border-border bg-card px-3 py-2 text-foreground",
+				onClick: (e) => {
+					e.stopPropagation(), i();
+				},
+				"data-testid": "lightbox-prev",
+				children: "‹"
+			}),
+			r && /* @__PURE__ */ x("button", {
+				type: "button",
+				className: "absolute right-4 bottom-4 rounded-sm border border-border bg-card px-3 py-2 text-foreground",
+				onClick: (e) => {
+					e.stopPropagation(), a();
+				},
+				"data-testid": "lightbox-next",
+				children: "›"
+			}),
+			l ? /* @__PURE__ */ x("img", {
+				src: l,
+				alt: t.filename,
+				className: "max-h-[90vh] max-w-[90vw] object-contain",
+				onClick: (e) => e.stopPropagation()
+			}) : /* @__PURE__ */ S("div", {
+				className: "rounded-md bg-card p-4 text-foreground",
+				children: [
+					t.filename,
+					" (",
+					e(t.size_bytes),
+					")"
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { j as Grid };