@cosmicdrift/kumiko-renderer 0.377.0 → 0.379.0

package/dist/web/lib/file-upload-form-data.d.ts

@@ -3,5 +3,7 @@ export type FileUploadFormDataInput = {
     readonly entityType?: string | undefined;
     readonly entityId?: string | undefined;
     readonly fieldName?: string | undefined;
+    /** Screen QN of an actionForm: the upload is pending for that form's field, not for an entity. */
+    readonly actionForm?: string | undefined;
 };
 export declare function buildFileUploadFormData(input: FileUploadFormDataInput): FormData;

package/dist/web/lib/file-upload-form-data.js

@@ -7,5 +7,7 @@ export function buildFileUploadFormData(input) {
         formData.append("entityId", input.entityId);
     if (input.fieldName !== undefined)
         formData.append("fieldName", input.fieldName);
+    if (input.actionForm !== undefined)
+        formData.append("actionForm", input.actionForm);
     return formData;
 }

package/dist/web/lib/upload-error-key.d.ts

@@ -0,0 +1,7 @@
+/** A dropzone refused a file because the field already holds `maxCount` files. */
+export declare class FileCountLimitError extends Error {
+}
+/** i18n key for a failed upload. The server's error string starts with a stable code before
+ *  the first ":"; the text after it is English and never shown, an unknown code gets the
+ *  generic key. */
+export declare function uploadErrorKey(cause: unknown): string;

package/dist/web/lib/upload-error-key.js

@@ -0,0 +1,23 @@
+import { FileUploadFailedError } from "./upload-file-ref.js";
+/** A dropzone refused a file because the field already holds `maxCount` files. */
+export class FileCountLimitError extends Error {
+}
+const SERVER_CODE_KEYS = {
+    file_too_large: "kumiko.widget.upload.too-large",
+    request_too_large: "kumiko.widget.upload.too-large",
+    invalid_file_type: "kumiko.widget.upload.invalid-type",
+    mime_mismatch: "kumiko.widget.upload.invalid-type",
+    content_mismatch: "kumiko.widget.upload.invalid-type",
+};
+/** i18n key for a failed upload. The server's error string starts with a stable code before
+ *  the first ":"; the text after it is English and never shown, an unknown code gets the
+ *  generic key. */
+export function uploadErrorKey(cause) {
+    if (cause instanceof FileCountLimitError)
+        return "kumiko.widget.upload.max-count";
+    if (cause instanceof FileUploadFailedError && cause.fromServer) {
+        const code = cause.message.split(":")[0]?.trim() ?? "";
+        return SERVER_CODE_KEYS[code] ?? "kumiko.widget.upload.error";
+    }
+    return "kumiko.widget.upload.error";
+}

package/dist/web/lib/upload-file-ref.d.ts

@@ -1,5 +1,5 @@
 import { type FileUploadFormDataInput } from "./file-upload-form-data.ts";
-export type FileRefTarget = Pick<FileUploadFormDataInput, "entityType" | "entityId" | "fieldName">;
+export type FileRefTarget = Pick<FileUploadFormDataInput, "entityType" | "entityId" | "fieldName" | "actionForm">;
 /** Carries the server's own `error` message when the upload endpoint sent one. */
 export declare class FileUploadFailedError extends Error {
     readonly fromServer: boolean;

package/dist/web/primitives/embedded-list-input.js

@@ -21,6 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // state into a `draftsByCellId` map here that survives the layout swap.
 import { ArrowDown, ArrowUp, Copy, Plus, Trash2 } from "lucide-react";
 import { Fragment, useEffect, useRef, useState, } from "react";
+import { fieldIssueText } from "../../field-issue-text.js";
 import { applyFormatSpec } from "../../headless/index.js";
 import { useLocale, useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";
@@ -113,8 +114,8 @@ export function computeScrollAffordance(scrollLeft, scrollWidth, clientWidth) {
     };
 }
 function formatTotalValue(total, columns, currency, locale) {
-    const column = columns.find((c) => c.field === total.field);
-    if (column?.type === "money")
+    const isMoney = total.money ?? columns.find((c) => c.field === total.field)?.type === "money";
+    if (isMoney)
         return formatMoney(total.value, currency, locale);
     return total.value.toLocaleString(locale);
 }
@@ -131,7 +132,7 @@ function IssueMessages({ issues, testId, constrainWidth, }) {
     const t = useTranslation();
     if (issues === undefined || issues.length === 0)
         return null;
-    return (_jsx("div", { role: "alert", "data-testid": testId, className: cn("text-xs text-destructive", constrainWidth === true && "max-w-[16rem] whitespace-normal break-words"), children: issues.map((issue) => (_jsx("div", { children: t(issue.i18nKey, issue.params) }, `${issue.path}:${issue.code}`))) }));
+    return (_jsx("div", { role: "alert", "data-testid": testId, className: cn("text-xs text-destructive", constrainWidth === true && "max-w-[16rem] whitespace-normal break-words"), children: issues.map((issue) => (_jsx("div", { children: fieldIssueText(t, issue) }, `${issue.path}:${issue.code}`))) }));
 }
 function readOnlyCellText(column, value, currency, locale) {
     if (value === null || value === undefined || value === "")
@@ -335,7 +336,7 @@ export function EmbeddedListInput({ id, columns, rows, totals, currency, disable
     };
     const testIdFor = (suffix) => testId !== undefined ? `${testId}-${suffix}` : undefined;
     if (rows.length === 0) {
-        return (_jsxs("div", { ref: containerRef, "data-testid": testId !== undefined ? `${testId}-empty` : "embedded-list-empty", className: "flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-10 text-center text-sm text-muted-foreground", children: [_jsx("span", { children: emptyLabel }), showControls && (_jsxs(UiButton, { type: "button", variant: "outline", size: "sm", onClick: onAddRow, "data-testid": testId !== undefined ? `${testId}-empty-add` : "embedded-list-empty-add", children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), emptyCtaLabel] }))] }));
+        return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { ref: containerRef, "data-testid": testId !== undefined ? `${testId}-empty` : "embedded-list-empty", className: "flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-10 text-center text-sm text-muted-foreground", children: [_jsx("span", { children: emptyLabel }), showControls && (_jsxs(UiButton, { type: "button", variant: "outline", size: "sm", onClick: onAddRow, "data-testid": testId !== undefined ? `${testId}-empty-add` : "embedded-list-empty-add", children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), emptyCtaLabel] }))] }), _jsx(IssueMessages, { issues: listIssues, testId: testIdFor("list-issues") })] }));
     }
     const hasTotals = totals !== undefined && totals.length > 0;
     return (_jsxs("div", { ref: containerRef, "data-testid": testId, className: "min-w-0", children: [!isMobile && (_jsxs("div", { "data-testid": testIdFor("desktop"), className: "hidden min-w-0 md:block", children: [_jsxs("div", { className: "min-w-0 overflow-hidden rounded-lg border bg-card", children: [_jsxs("div", { className: "relative min-w-0", children: [_jsx("div", { ref: setScrollContainerEl, "data-testid": testIdFor("desktop-scroll"), className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: _jsxs(Table, { className: "w-full table-fixed", style: { minWidth: `${tableMinWidthRem(columns, showControls)}rem` }, children: [_jsxs("colgroup", { children: [columns.map((column) => (_jsx("col", { style: columnWidthStyle(column.type) }, column.field))), showControls && _jsx("col", { style: { width: `${ACTIONS_COLUMN_REM}rem` } })] }), _jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [columns.map((column) => (_jsx(TableHead, { title: column.label, className: cn("truncate", columnAlignClass(column.type)), children: column.label }, column.field))), showControls && (_jsx(TableHead, { className: cn("sticky right-0 z-10 whitespace-nowrap bg-muted px-1 text-right", isHorizontallyScrollable &&

package/dist/web/primitives/file-thumbnail.d.ts

@@ -8,6 +8,11 @@ export declare function FileThumbnail({ fileId, variant, className, testId, }: {
     readonly className?: string;
     readonly testId?: string;
 }): ReactNode;
+type FileMeta = {
+    readonly fileName: string;
+    readonly mimeType: string | undefined;
+};
+export declare function useFileMeta(fileId: string): FileMeta | null;
 export declare function FileNameLink({ fileId, fallbackLabel, className, }: {
     readonly fileId: string;
     readonly fallbackLabel: string;
@@ -23,3 +28,4 @@ export declare function FileDisplayCell({ value, display, fallbackLabel, compact
     readonly fallbackLabel: string;
     readonly compact?: boolean;
 }): ReactNode;
+export {};

package/dist/web/primitives/file-thumbnail.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isUuid } from "@cosmicdrift/kumiko-types/identifiers";
 import { ImageIcon } from "lucide-react";
 import { useEffect, useState } from "react";
+import { fileIdsOf } from "../../file-ids-of.js";
 import { cn } from "../lib/cn.js";
 // Stored values are untrusted: only UUIDs reach a request, and path segments are
 // encoded so an id like "../x" or "a?b" cannot redirect the request.
@@ -33,42 +34,41 @@ function ThumbnailChain({ fileId, variant, className, testId, }) {
 export function FileThumbnail({ fileId, variant, className = "h-24 w-32", testId, }) {
     return (_jsx(ThumbnailChain, { fileId: fileId, variant: variant, className: className, testId: testId }, `${fileId}:${variant ?? ""}`));
 }
-function isFileMeta(value) {
-    return (typeof value === "object" &&
-        value !== null &&
-        "fileName" in value &&
-        typeof value.fileName === "string");
+function parseFileMeta(value) {
+    if (typeof value !== "object" || value === null || !("fileName" in value))
+        return null;
+    if (typeof value.fileName !== "string")
+        return null;
+    const mimeType = "mimeType" in value && typeof value.mimeType === "string" ? value.mimeType : undefined;
+    return { fileName: value.fileName, mimeType };
 }
-export function FileNameLink({ fileId, fallbackLabel, className, }) {
-    const [fileName, setFileName] = useState(null);
+export function useFileMeta(fileId) {
+    const [meta, setMeta] = useState(null);
     const validId = isUuid(fileId);
     useEffect(() => {
         let cancelled = false;
-        setFileName(null);
+        setMeta(null);
         if (!validId)
             return;
         fetch(`${fileOriginalUrl(fileId)}/meta`)
             .then((res) => (res.ok ? res.json() : null))
-            .then((meta) => {
-            if (!cancelled && isFileMeta(meta))
-                setFileName(meta.fileName);
+            .then((json) => {
+            if (!cancelled)
+                setMeta(parseFileMeta(json));
         })
             .catch(() => { });
         return () => {
             cancelled = true;
         };
     }, [fileId, validId]);
-    if (!validId)
+    return meta;
+}
+export function FileNameLink({ fileId, fallbackLabel, className, }) {
+    const fileName = useFileMeta(fileId)?.fileName ?? null;
+    if (!isUuid(fileId))
         return _jsx("span", { className: cn("text-sm", className), children: fallbackLabel });
     return (_jsx("a", { href: fileOriginalUrl(fileId), target: "_blank", rel: "noreferrer", className: cn("text-sm underline underline-offset-2", className), children: fileName ?? fallbackLabel }));
 }
-function fileIdsOf(value) {
-    if (typeof value === "string")
-        return value === "" ? [] : [value];
-    if (!Array.isArray(value))
-        return [];
-    return value.filter((entry) => typeof entry === "string" && entry !== "");
-}
 // Height-bound, width follows the aspect ratio within a clamp, so a portrait and
 // a landscape photo both read as a preview without stretching the column.
 const TABLE_THUMBNAIL_CLASS = "h-16 min-w-16 max-w-24 object-cover";

package/dist/web/primitives/file-upload.d.ts

@@ -7,6 +7,7 @@ export type FileUploadInputProps = {
     readonly accept?: readonly string[];
     readonly disabled?: boolean;
     readonly entityType?: string;
+    readonly uploadActionForm?: string;
     readonly entityId?: string;
     readonly fieldName?: string;
     readonly imageVariant?: string;
@@ -18,4 +19,4 @@ export type FileUploadInputProps = {
     readonly pickLabel?: string;
     readonly testId?: string;
 };
-export declare function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }: FileUploadInputProps): ReactNode;
+export declare function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, uploadActionForm, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }: FileUploadInputProps): ReactNode;

package/dist/web/primitives/file-upload.js

@@ -9,12 +9,13 @@ import { useRef, useState } from "react";
 import { useTranslation } from "../../index.js";
 import { toAcceptAttr } from "../lib/accept-attr.js";
 import { resizeImageBeforeUpload } from "../lib/resize-image.js";
-import { FileUploadFailedError, uploadFileRef } from "../lib/upload-file-ref.js";
+import { uploadErrorKey } from "../lib/upload-error-key.js";
+import { uploadFileRef } from "../lib/upload-file-ref.js";
 import { Button as UiButton } from "../ui/button.js";
 import { FileNameLink, FileThumbnail } from "./file-thumbnail.js";
 // React's input typings have no `webkitdirectory`; spreading keeps it typed-cast-free.
 const DIRECTORY_INPUT_ATTRS = { webkitdirectory: "", multiple: true };
-export function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }) {
+export function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, uploadActionForm, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }) {
     const t = useTranslation();
     const inputRef = useRef(null);
     const [uploading, setUploading] = useState(false);
@@ -33,12 +34,15 @@ export function FileUploadInput({ kind, id, value, onChange, accept, disabled, e
         setError(null);
         try {
             const uploadFile = await resizeImageBeforeUpload(file);
-            onChange(await uploadFileRef(uploadFile, { entityType, entityId, fieldName }));
+            onChange(await uploadFileRef(uploadFile, {
+                entityType,
+                entityId,
+                fieldName,
+                actionForm: uploadActionForm,
+            }));
         }
-        catch (error) {
-            setError(error instanceof FileUploadFailedError && error.fromServer
-                ? error.message
-                : t("kumiko.field.file-upload.failed"));
+        catch (cause) {
+            setError(t(uploadErrorKey(cause)));
         }
         finally {
             setUploading(false);

package/dist/web/primitives/file-value-list.d.ts

@@ -0,0 +1,3 @@
+import { type ReactNode } from "react";
+import { type FileValueListProps } from "../../index.ts";
+export declare function FileValueList({ fileIds, testId }: FileValueListProps): ReactNode;

package/dist/web/primitives/file-value-list.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isUuid } from "@cosmicdrift/kumiko-types/identifiers";
+import { useState } from "react";
+import { useTranslation } from "../../index.js";
+import { Button } from "../ui/button.js";
+import { PdfPreview } from "../widgets/pdf-preview.js";
+import { fileOriginalUrl, useFileMeta } from "./file-thumbnail.js";
+const PDF_MIME_TYPE = "application/pdf";
+function FileValueRow({ fileId, testId, }) {
+    const t = useTranslation();
+    const meta = useFileMeta(fileId);
+    const [previewOpen, setPreviewOpen] = useState(false);
+    if (!isUuid(fileId))
+        return _jsx("span", { className: "text-sm", children: fileId });
+    const downloadUrl = fileOriginalUrl(fileId);
+    return (_jsxs("li", { className: "flex flex-col gap-2", "data-testid": testId, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("span", { className: "text-sm", children: meta?.fileName ?? fileId.slice(0, 8) }), _jsx("a", { href: downloadUrl, download: meta?.fileName ?? "", className: "text-primary text-sm underline underline-offset-2", ...(testId !== undefined && { "data-testid": `${testId}-download` }), children: t("kumiko.field.file-list.download") }), meta?.mimeType === PDF_MIME_TYPE && (_jsx(Button, { type: "button", variant: "link", size: "sm", "aria-expanded": previewOpen, onClick: () => setPreviewOpen((open) => !open), ...(testId !== undefined && { "data-testid": `${testId}-preview-toggle` }), children: t(previewOpen ? "kumiko.field.file-list.hidePreview" : "kumiko.field.file-list.preview") }))] }), previewOpen && (_jsx(PdfPreview, { source: { url: downloadUrl }, testId: `file-preview-${fileId}` }))] }));
+}
+export function FileValueList({ fileIds, testId }) {
+    if (fileIds.length === 0)
+        return null;
+    return (_jsx("ul", { className: "m-0 flex list-none flex-col gap-3 p-0", "data-testid": testId, children: fileIds.map((fileId) => (_jsx(FileValueRow, { fileId: fileId, ...(testId !== undefined && { testId: `${testId}-${fileId}` }) }, fileId))) }));
+}

package/dist/web/primitives/files-dropzone.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export type FilesDropzoneInputProps = {
+    readonly id: string;
+    readonly value: readonly string[];
+    readonly onChange: (fileIds: readonly string[]) => void;
+    readonly accept?: readonly string[];
+    readonly maxSize?: string;
+    readonly maxCount?: number;
+    readonly disabled?: boolean;
+    readonly entityType?: string;
+    readonly uploadActionForm?: string;
+    readonly entityId?: string;
+    readonly fieldName?: string;
+    readonly testId?: string;
+};
+export declare function FilesDropzoneInput({ id, value, onChange, accept, maxSize, maxCount, disabled, entityType, uploadActionForm, entityId, fieldName, testId, }: FilesDropzoneInputProps): ReactNode;

package/dist/web/primitives/files-dropzone.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Drop zone for a `files` / `images` field with `display: "dropzone"`: one status row per picked
+// file, the field value is the array of FileRef ids of the files that uploaded. Failed files stay
+// out of the value; removing a row removes its id.
+import { useEffect, useRef } from "react";
+import { useTranslation } from "../../index.js";
+import { FileCountLimitError, uploadErrorKey } from "../lib/upload-error-key.js";
+import { uploadFileRef } from "../lib/upload-file-ref.js";
+import { UploadZone } from "../widgets/upload-zone.js";
+export function FilesDropzoneInput({ id, value, onChange, accept, maxSize, maxCount, disabled, entityType, uploadActionForm, entityId, fieldName, testId, }) {
+    const t = useTranslation();
+    // Uploads of one batch finish independently; building each next value from the render's
+    // `value` would drop the ids of the others. Re-synced whenever the owner changes the value.
+    const latestIds = useRef(value);
+    const uploadsRunning = useRef(0);
+    useEffect(() => {
+        latestIds.current = value;
+    }, [value]);
+    const target = {
+        entityType,
+        entityId,
+        fieldName,
+        actionForm: uploadActionForm,
+    };
+    async function uploadOne(file) {
+        if (maxCount !== undefined && latestIds.current.length + uploadsRunning.current >= maxCount) {
+            throw new FileCountLimitError();
+        }
+        uploadsRunning.current += 1;
+        try {
+            const fileId = await uploadFileRef(file, target);
+            latestIds.current = [...latestIds.current, fileId];
+            onChange(latestIds.current);
+            return fileId;
+        }
+        finally {
+            uploadsRunning.current -= 1;
+        }
+    }
+    function removeOne(fileId) {
+        latestIds.current = latestIds.current.filter((existing) => existing !== fileId);
+        onChange(latestIds.current);
+    }
+    const limits = [
+        accept !== undefined && accept.length > 0 ? accept.join(", ").toUpperCase() : undefined,
+        maxSize !== undefined ? t("kumiko.field.dropzone.limit-size", { size: maxSize }) : undefined,
+        maxCount !== undefined
+            ? t("kumiko.field.dropzone.limit-count", { count: maxCount })
+            : undefined,
+    ].filter((part) => part !== undefined);
+    return (_jsx(UploadZone, { testId: testId ?? `${id}-dropzone`, title: t("kumiko.field.dropzone.title"), ...(limits.length > 0 && { hint: limits.join(" · ") }), ...(accept !== undefined && { accept }), ...(disabled !== undefined && { disabled }), doneValues: value, onUpload: uploadOne, onRemove: removeOne, describeError: (cause) => t(uploadErrorKey(cause), { count: maxCount }) }));
+}