@cosmicdrift/kumiko-renderer 0.398.0 → 0.400.0

package/dist/web/layout/use-in-app-inbox.js

@@ -0,0 +1,61 @@
+import { IN_APP_NOTIFICATION_DELIVERED_EVENT, IN_APP_NOTIFICATION_QUERIES, IN_APP_NOTIFICATION_WRITES, } from "@cosmicdrift/kumiko-types/in-app-notification-types";
+import { useCallback, useEffect, useState } from "react";
+import { useDispatcher } from "../../context/dispatcher-context.js";
+import { useMutation } from "../../hooks/use-mutation.js";
+import { useQuery } from "../../hooks/use-query.js";
+import { useLiveEvents } from "../../sse/live-events.js";
+export const IN_APP_INBOX_PAGE_SIZE = 20;
+/** Headless state of the notification bell: the unread count always, the list only while `open`.
+ *  The delivered signal refetches both; no polling. */
+export function useInAppInbox(open) {
+    const dispatcher = useDispatcher();
+    const subscribe = useLiveEvents();
+    const count = useQuery(IN_APP_NOTIFICATION_QUERIES.unreadCount, {});
+    const firstPage = useQuery(IN_APP_NOTIFICATION_QUERIES.inbox, { limit: IN_APP_INBOX_PAGE_SIZE }, { enabled: open });
+    const [olderRows, setOlderRows] = useState([]);
+    const [olderCursor, setOlderCursor] = useState(undefined);
+    const markReadWrite = useMutation(IN_APP_NOTIFICATION_WRITES.markRead);
+    const markAllReadWrite = useMutation(IN_APP_NOTIFICATION_WRITES.markAllRead);
+    const refetchCount = count.refetch;
+    const refetchFirstPage = firstPage.refetch;
+    const refetchAll = useCallback(async () => {
+        setOlderRows([]);
+        setOlderCursor(undefined);
+        await Promise.all([refetchCount(), open ? refetchFirstPage() : Promise.resolve()]);
+    }, [refetchCount, refetchFirstPage, open]);
+    useEffect(() => subscribe(IN_APP_NOTIFICATION_DELIVERED_EVENT, () => void refetchAll()), [subscribe, refetchAll]);
+    const firstRows = firstPage.data?.rows ?? [];
+    const nextCursor = olderCursor === undefined ? (firstPage.data?.nextCursor ?? null) : olderCursor;
+    const loadMore = useCallback(async () => {
+        // skip: no older page left
+        if (nextCursor === null)
+            return;
+        const result = await dispatcher.query(IN_APP_NOTIFICATION_QUERIES.inbox, {
+            limit: IN_APP_INBOX_PAGE_SIZE,
+            cursor: nextCursor,
+        });
+        // skip: keep the loaded rows, the next click retries
+        if (!result.isSuccess)
+            return;
+        setOlderRows((previous) => [...previous, ...result.data.rows]);
+        setOlderCursor(result.data.nextCursor);
+    }, [dispatcher, nextCursor]);
+    const markRead = useCallback(async (id) => {
+        await markReadWrite.mutate({ id });
+        await refetchAll();
+    }, [markReadWrite.mutate, refetchAll]);
+    const markAllRead = useCallback(async () => {
+        await markAllReadWrite.mutate({});
+        await refetchAll();
+    }, [markAllReadWrite.mutate, refetchAll]);
+    return {
+        unreadCount: count.data?.count ?? 0,
+        rows: [...firstRows, ...olderRows],
+        hasMore: nextCursor !== null,
+        loading: firstPage.loading,
+        failed: firstPage.error !== null,
+        loadMore,
+        markRead,
+        markAllRead,
+    };
+}

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

@@ -3,6 +3,8 @@ export type FileUploadFormDataInput = {
     readonly entityType?: string | undefined;
     readonly entityId?: string | undefined;
     readonly fieldName?: string | undefined;
+    /** File sub-field of the embedded `fieldName`. */
+    readonly subField?: string | undefined;
     /** Screen QN of an actionForm: the upload is pending for that form's field, not for an entity. */
     readonly actionForm?: string | undefined;
 };

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

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

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" | "actionForm">;
+export type FileRefTarget = Pick<FileUploadFormDataInput, "entityType" | "entityId" | "fieldName" | "subField" | "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/data-table-cell.d.ts

@@ -1,6 +1,7 @@
 import type { SelectOptionTone } from "@cosmicdrift/kumiko-framework/ui-types";
 import { type ReactNode } from "react";
 import type { CellLink, CellLinkItem, ListColumnFileDisplay, ListRowViewModel, RuntimeCellLink, RuntimeCellLinkItems } from "../../headless/index.ts";
+import { type PrimitivesRegistry } from "../../index.ts";
 import "../react-css-custom-properties.ts";
 export declare function isEmptyCellValue(value: unknown): boolean;
 export declare function isUnlabeledFalse(type: string, value: unknown, renderer: unknown): boolean;
@@ -22,6 +23,7 @@ export declare function isComponentRendererRef(renderer: unknown): {
 } | undefined;
 export declare function defaultCellRender(value: unknown, type: string, optionLabels?: Readonly<Record<string, string>>, locale?: string, columnKey?: string, grouping?: boolean): string;
 export declare function cellTitle(value: unknown): string | undefined;
+export declare function selectPill(value: unknown, optionLabels: Readonly<Record<string, string>> | undefined, optionTones: Readonly<Partial<Record<string, SelectOptionTone>>> | undefined, locale: string | undefined, RegisteredStatusBadge: PrimitivesRegistry["StatusBadge"]): ReactNode;
 type DataTableCellProps = {
     readonly value: unknown;
     readonly row: Readonly<Record<string, unknown>>;

package/dist/web/primitives/data-table-cell.js

@@ -201,7 +201,7 @@ export function cellTitle(value) {
         return String(value);
     return undefined;
 }
-function selectPill(value, optionLabels, optionTones, locale, RegisteredStatusBadge) {
+export function selectPill(value, optionLabels, optionTones, locale, RegisteredStatusBadge) {
     const label = defaultCellRender(value, "select", optionLabels, locale);
     const declaredTone = typeof value === "string" && optionTones && Object.hasOwn(optionTones, value)
         ? optionTones[value]

package/dist/web/primitives/embedded-file-cell.d.ts

@@ -0,0 +1,11 @@
+import { type ReactNode } from "react";
+import type { EmbeddedListColumn, EmbeddedListInputProps } from "../../index.ts";
+export declare function EmbeddedFileCell({ cellId, label, column, value, readOnly, uploadTarget, onChange, }: {
+    readonly cellId: string;
+    readonly label: string;
+    readonly column: EmbeddedListColumn;
+    readonly value: unknown;
+    readonly readOnly: boolean;
+    readonly uploadTarget: EmbeddedListInputProps["uploadTarget"];
+    readonly onChange: (value: unknown) => void;
+}): ReactNode;

package/dist/web/primitives/embedded-file-cell.js

@@ -0,0 +1,50 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// File/image cell of an embedded list row: thumbs plus an add tile. The value is a fileRef id
+// array; uploads carry the list's field name and the cell's `subField` so the server can
+// resolve the sub-field's accept/maxSize and attach the ref to the right slot.
+import { Loader2, Plus, X } from "lucide-react";
+import { useRef, useState } from "react";
+import { fileIdsOf } from "../../file-ids-of.js";
+import { useSessionEndedSignal, useTranslation } from "../../index.js";
+import { toAcceptAttr } from "../lib/accept-attr.js";
+import { cn } from "../lib/cn.js";
+import { resizeImageBeforeUpload } from "../lib/resize-image.js";
+import { uploadErrorKey } from "../lib/upload-error-key.js";
+import { isSessionEndedUploadError, uploadFileRef } from "../lib/upload-file-ref.js";
+import { FileNameLink, FileThumbnail } from "./file-thumbnail.js";
+export function EmbeddedFileCell({ cellId, label, column, value, readOnly, uploadTarget, onChange, }) {
+    const t = useTranslation();
+    const sessionEnded = useSessionEndedSignal();
+    const inputRef = useRef(null);
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState(null);
+    const ids = fileIdsOf(value);
+    const isImage = column.type === "images";
+    const canAdd = !readOnly &&
+        uploadTarget !== undefined &&
+        (column.maxCount === undefined || ids.length < column.maxCount);
+    const acceptAttr = toAcceptAttr(column.accept);
+    async function onPick(e) {
+        const file = e.target.files?.[0];
+        if (file === undefined || uploadTarget === undefined)
+            return;
+        setUploading(true);
+        setError(null);
+        try {
+            const uploadFile = await resizeImageBeforeUpload(file);
+            const id = await uploadFileRef(uploadFile, { ...uploadTarget, subField: column.field });
+            onChange([...ids, id]);
+        }
+        catch (cause) {
+            if (isSessionEndedUploadError(cause))
+                sessionEnded?.notify();
+            setError(t(uploadErrorKey(cause)));
+        }
+        finally {
+            setUploading(false);
+            if (inputRef.current)
+                inputRef.current.value = "";
+        }
+    }
+    return (_jsxs("div", { "data-cell-id": cellId, className: "flex min-w-0 flex-wrap items-center gap-2", children: [ids.map((fileId) => (_jsxs("div", { className: "relative", children: [isImage ? (_jsx(FileThumbnail, { fileId: fileId, className: "size-16" })) : (_jsx(FileNameLink, { fileId: fileId, fallbackLabel: t("kumiko.field.file-upload.attached") })), !readOnly && (_jsx("button", { type: "button", "aria-label": t("kumiko.field.file-upload.remove"), className: "absolute -right-2 -top-2 flex size-6 items-center justify-center rounded-full border bg-card text-muted-foreground", onClick: () => onChange(ids.filter((id) => id !== fileId)), children: _jsx(X, { className: "size-3", "aria-hidden": "true" }) }))] }, fileId))), canAdd && (_jsxs(_Fragment, { children: [_jsx("input", { ref: inputRef, type: "file", className: "hidden", ...(acceptAttr !== undefined && { accept: acceptAttr }), ...(column.capture !== undefined && { capture: column.capture }), onChange: (e) => void onPick(e) }), _jsx("button", { type: "button", "aria-label": `${label}: ${t("kumiko.field.file-upload.upload")}`, disabled: uploading, className: cn("flex size-16 items-center justify-center rounded-md border border-dashed text-muted-foreground"), onClick: () => inputRef.current?.click(), children: uploading ? (_jsx(Loader2, { className: "size-5 animate-spin", "aria-hidden": "true" })) : (_jsx(Plus, { className: "size-5", "aria-hidden": "true" })) })] })), error !== null && _jsx("span", { className: "w-full text-xs text-destructive", children: error })] }));
+}

package/dist/web/primitives/embedded-list-cards.d.ts

@@ -0,0 +1,38 @@
+import type { ClipboardEvent, KeyboardEvent, ReactNode } from "react";
+import type { FieldIssue } from "../../headless/index.ts";
+import type { EmbeddedListColumn, EmbeddedListInputProps } from "../../index.ts";
+export type EmbeddedListCardsProps = {
+    readonly columns: readonly EmbeddedListColumn[];
+    readonly rows: EmbeddedListInputProps["rows"];
+    readonly titleColumn: EmbeddedListColumn | undefined;
+    readonly lastEditableIndex: number;
+    readonly rowIssues: EmbeddedListInputProps["rowIssues"];
+    readonly cellIssues: EmbeddedListInputProps["cellIssues"];
+    readonly listIssues: readonly FieldIssue[] | undefined;
+    readonly totalsNode: ReactNode;
+    readonly disabled: boolean;
+    readonly showControls: boolean;
+    readonly addDisabled: boolean;
+    readonly minItems: number | undefined;
+    readonly maxItems: number | undefined;
+    readonly currency: string;
+    readonly locale: string;
+    readonly uploadTarget: EmbeddedListInputProps["uploadTarget"];
+    readonly onCellChange: EmbeddedListInputProps["onCellChange"];
+    readonly onAddRow: () => void;
+    readonly onRemoveRow: (rowIndex: number) => void;
+    readonly onDuplicateRow: (rowIndex: number) => void;
+    readonly onMoveRow: (fromIndex: number, toIndex: number) => void;
+    readonly handlePaste: (rowIndex: number, columnIndex: number) => (event: ClipboardEvent<HTMLElement>) => void;
+    readonly handleLastCellKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    readonly pasteEnabled: boolean;
+    readonly cellId: (rowIndex: number, field: string) => string;
+    readonly cellLabel: (column: EmbeddedListColumn, rowIndex: number) => string;
+    readonly testId: string | undefined;
+    readonly addLabel: string;
+    readonly duplicateLabel: string;
+    readonly moveUpLabel: string;
+    readonly moveDownLabel: string;
+    readonly removeLabel: string;
+};
+export declare function EmbeddedListCards(props: EmbeddedListCardsProps): ReactNode;

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Mobile card layout for EmbeddedListInput. One card per row: the title, then
+// one block per visible column. Columns marked hiddenInCard are skipped, and a
+// column with cardAttachedTo sits unlabeled next to its anchor control.
+import { Plus } from "lucide-react";
+import { useTranslation } from "../../index.js";
+import { Button as UiButton } from "../ui/button.js";
+import { IssueMessages, isDerivedCell, RowActions, readOnlyCellText, renderCellControl, } from "./embedded-list-cell.js";
+import { formatLocaleNumber } from "./locale-number.js";
+function CardLimitsHint({ limits, row, locale, testId, }) {
+    const t = useTranslation();
+    const rawMin = row[limits.min];
+    const rawMax = row[limits.max];
+    const min = typeof rawMin === "number" ? formatLocaleNumber(rawMin, locale, { grouping: true }) : undefined;
+    const max = typeof rawMax === "number" ? formatLocaleNumber(rawMax, locale, { grouping: true }) : undefined;
+    let text;
+    if (min !== undefined && max !== undefined) {
+        text = t("kumiko.field.embedded-list.limit-range", { min, max });
+    }
+    else if (min !== undefined) {
+        text = t("kumiko.field.embedded-list.limit-min", { min });
+    }
+    else if (max !== undefined) {
+        text = t("kumiko.field.embedded-list.limit-max", { max });
+    }
+    if (text === undefined)
+        return null;
+    return (_jsx("div", { "data-testid": testId, className: "text-xs text-muted-foreground", children: text }));
+}
+export function EmbeddedListCards(props) {
+    const { columns, rows, titleColumn, lastEditableIndex, rowIssues, cellIssues, listIssues, totalsNode, disabled, showControls, addDisabled, minItems, maxItems, currency, locale, uploadTarget, onCellChange, onAddRow, onRemoveRow, onDuplicateRow, onMoveRow, handlePaste, handleLastCellKeyDown, pasteEnabled, cellId, cellLabel, testId, addLabel, duplicateLabel, moveUpLabel, moveDownLabel, removeLabel, } = props;
+    const testIdFor = (suffix) => testId !== undefined ? `${testId}-${suffix}` : undefined;
+    return (_jsxs("div", { "data-testid": testIdFor("mobile"), className: "md:hidden flex flex-col gap-3", children: [rows.map((row, rowIndex) => {
+                const isLastRow = rowIndex === rows.length - 1;
+                const rowIssuesForRow = rowIssues?.[rowIndex];
+                const isVisible = (column) => column !== titleColumn &&
+                    column.hiddenInCard !== true &&
+                    column.isHiddenInRow?.(row) !== true;
+                const renderControl = (column) => renderCellControl({
+                    cellId: cellId(rowIndex, column.field),
+                    label: cellLabel(column, rowIndex),
+                    column,
+                    value: row[column.field],
+                    disabled,
+                    onChange: (value) => onCellChange(rowIndex, column.field, value),
+                    currency,
+                    locale,
+                    derived: isDerivedCell(column, row),
+                    touch: true,
+                    uploadTarget,
+                });
+                const renderIssues = (column) => (_jsx(IssueMessages, { issues: cellIssues?.[`${rowIndex}.${column.field}`], testId: testIdFor(`cell-${rowIndex}-${column.field}-errors`) }));
+                const anchorHasAttachment = (anchor) => columns.find((other) => other.cardAttachedTo === anchor.field &&
+                    other.hiddenInCard !== true &&
+                    other.field !== anchor.field);
+                return (_jsxs("div", { "data-testid": testIdFor(`row-${rowIndex}`), className: "flex flex-col gap-3 rounded-lg border bg-card p-4", children: [titleColumn !== undefined && (_jsxs("div", { "data-testid": testIdFor(`row-${rowIndex}-title`), className: "font-medium", children: [rowIndex + 1, " ", readOnlyCellText(titleColumn, row[titleColumn.field], currency, locale)] })), columns.map((column, columnIndex) => {
+                            if (!isVisible(column))
+                                return null;
+                            const anchor = column.cardAttachedTo !== undefined
+                                ? columns.find((other) => other.field === column.cardAttachedTo)
+                                : undefined;
+                            if (anchor !== undefined && isVisible(anchor))
+                                return null;
+                            const attached = anchorHasAttachment(column);
+                            const isLastCell = isLastRow && columnIndex === lastEditableIndex;
+                            const showLabel = column.cardAttachedTo === undefined;
+                            const control = (_jsxs("div", { className: attached !== undefined ? "min-w-0 flex-1" : undefined, children: [renderControl(column), column.cardLimits !== undefined && (_jsx(CardLimitsHint, { limits: column.cardLimits, row: row, locale: locale, testId: testIdFor(`cell-${rowIndex}-${column.field}-limits`) }))] }));
+                            return (_jsxs("div", { className: "flex flex-col gap-1", onPaste: pasteEnabled ? handlePaste(rowIndex, columnIndex) : undefined, onKeyDown: isLastCell ? handleLastCellKeyDown : undefined, children: [showLabel && (_jsxs("span", { className: "text-xs font-medium text-muted-foreground", children: [column.label, column.isRequiredInRow?.(row) === true && " *"] })), attached !== undefined ? (_jsxs("div", { className: "flex items-start gap-3", children: [control, _jsx("div", { className: "shrink-0", children: renderControl(attached) })] })) : (control), renderIssues(column), attached !== undefined && renderIssues(attached)] }, column.field));
+                        }), rowIssuesForRow !== undefined && rowIssuesForRow.length > 0 && (_jsx(IssueMessages, { issues: rowIssuesForRow, testId: testIdFor(`row-${rowIndex}-issues`) })), showControls && (_jsx("div", { className: "flex items-center justify-end gap-1 border-t pt-3", children: _jsx(RowActions, { rowIndex: rowIndex, rowsLength: rows.length, minItems: minItems, maxItems: maxItems, onDuplicateRow: onDuplicateRow, onMoveRow: onMoveRow, onRemoveRow: onRemoveRow, duplicateLabel: duplicateLabel, moveUpLabel: moveUpLabel, moveDownLabel: moveDownLabel, removeLabel: removeLabel, testIdPrefix: testIdFor(`row-${rowIndex}`), buttonSizeClass: "size-10" }) }))] }, rowIndex));
+            }), showControls && (_jsxs(UiButton, { type: "button", variant: "outline", onClick: onAddRow, disabled: addDisabled, "data-testid": testIdFor("add"), children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), addLabel] })), totalsNode, _jsx(IssueMessages, { issues: listIssues, testId: testIdFor("list-issues") })] }));
+}

package/dist/web/primitives/embedded-list-cell.d.ts

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { type FieldIssue } from "../../headless/index.ts";
+import type { EmbeddedListCellType, EmbeddedListColumn, EmbeddedListInputProps } from "../../index.ts";
+export declare function columnAlignClass(type: EmbeddedListCellType): string;
+export declare function IssueMessages({ issues, testId, constrainWidth, }: {
+    readonly issues: readonly FieldIssue[] | undefined;
+    readonly testId?: string;
+    readonly constrainWidth?: boolean;
+}): ReactNode;
+export declare function readOnlyCellText(column: EmbeddedListColumn, value: unknown, currency: string, locale: string): string;
+export declare function isDerivedCell(column: EmbeddedListColumn, row: Readonly<Record<string, unknown>>): boolean;
+export declare function renderCellControl({ cellId, column, label, value, disabled, onChange, currency, locale, derived, touch, uploadTarget, }: {
+    readonly derived: boolean;
+    readonly touch: boolean;
+    readonly uploadTarget: EmbeddedListInputProps["uploadTarget"];
+    readonly cellId: string;
+    readonly label: string;
+    readonly column: EmbeddedListColumn;
+    readonly value: unknown;
+    readonly disabled: boolean;
+    readonly onChange: (value: unknown) => void;
+    readonly currency: string;
+    readonly locale: string;
+}): ReactNode;
+type RowActionsProps = {
+    readonly rowIndex: number;
+    readonly rowsLength: number;
+    readonly minItems: number | undefined;
+    readonly maxItems: number | undefined;
+    readonly onDuplicateRow: (rowIndex: number) => void;
+    readonly onMoveRow: (fromIndex: number, toIndex: number) => void;
+    readonly onRemoveRow: (rowIndex: number) => void;
+    readonly duplicateLabel: string;
+    readonly moveUpLabel: string;
+    readonly moveDownLabel: string;
+    readonly removeLabel: string;
+    readonly testIdPrefix: string | undefined;
+    readonly buttonSizeClass?: string;
+};
+export declare function RowActions({ rowIndex, rowsLength, minItems, maxItems, onDuplicateRow, onMoveRow, onRemoveRow, duplicateLabel, moveUpLabel, moveDownLabel, removeLabel, testIdPrefix, buttonSizeClass, }: RowActionsProps): ReactNode;
+export {};

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

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDown, ArrowUp, Copy, Trash2 } from "lucide-react";
+import { fieldIssueText } from "../../field-issue-text.js";
+import { fileIdsOf } from "../../file-ids-of.js";
+import { applyFormatSpec } from "../../headless/index.js";
+import { useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { Button as UiButton } from "../ui/button.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Input as UiInput } from "../ui/input.js";
+import { ComboboxInput } from "./combobox.js";
+import { selectPill } from "./data-table-cell.js";
+import { DateInput } from "./date-input.js";
+import { EmbeddedFileCell } from "./embedded-file-cell.js";
+import { formatLocaleNumber } from "./locale-number.js";
+import { formatMoney, MoneyInput } from "./money-input.js";
+import { NumberInput } from "./number-input.js";
+import { SegmentedControl } from "./segmented-select.js";
+import { TimestampInput } from "./timestamp-input.js";
+export function columnAlignClass(type) {
+    switch (type) {
+        case "money":
+        case "number":
+        case "decimal":
+            return "text-right";
+        case "boolean":
+            return "text-center";
+        case "date":
+        case "timestamp":
+        case "text":
+        case "select":
+        case "reference":
+        case "images":
+        case "files":
+            return "text-left";
+        default: {
+            const exhaustiveCheck = type;
+            return exhaustiveCheck;
+        }
+    }
+}
+export 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: fieldIssueText(t, issue) }, `${issue.path}:${issue.code}`))) }));
+}
+export function readOnlyCellText(column, value, currency, locale) {
+    if (value === null || value === undefined || value === "")
+        return "";
+    switch (column.type) {
+        case "boolean":
+            return value === true ? "✓" : "";
+        case "date":
+        case "timestamp":
+            return applyFormatSpec({ format: column.type, locale }, value);
+        case "number":
+        case "decimal":
+            return typeof value === "number"
+                ? formatLocaleNumber(value, locale, { grouping: true })
+                : String(value);
+        case "money":
+            return typeof value === "number" ? formatMoney(value, currency, locale) : String(value);
+        case "select":
+            return typeof value === "string" ? (column.optionLabels?.[value] ?? value) : String(value);
+        case "reference":
+            return typeof value === "string"
+                ? (column.referenceOptions?.find((o) => o.value === value)?.label ?? value)
+                : String(value);
+        case "text":
+            return String(value);
+        case "images":
+        case "files":
+            return String(fileIdsOf(value).length);
+        default: {
+            const exhaustiveCheck = column.type;
+            return exhaustiveCheck;
+        }
+    }
+}
+export function isDerivedCell(column, row) {
+    return column.isDerivedInRow?.(row) ?? column.derived;
+}
+export function renderCellControl({ cellId, column, label, value, disabled, onChange, currency, locale, derived, touch, uploadTarget, }) {
+    if (column.readOnly === true && !derived) {
+        return (_jsx("div", { "data-cell-id": cellId, "data-readonly-cell": "", className: cn("min-w-0 whitespace-normal break-words py-1.5 text-sm", columnAlignClass(column.type)), children: readOnlyCellText(column, value, currency, locale) }));
+    }
+    const isDisabled = disabled || derived;
+    const controlHeight = touch ? "h-11" : undefined;
+    switch (column.type) {
+        case "text":
+            return (_jsx(UiInput, { "data-cell-id": cellId, type: "text", "aria-label": label, className: cn("min-w-0", controlHeight), disabled: isDisabled, value: typeof value === "string" ? value : "", onChange: (e) => onChange(e.target.value) }));
+        case "number":
+        case "decimal":
+            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(NumberInput, { id: cellId, name: cellId, ariaLabel: label, locale: locale, value: typeof value === "number" ? value : "", onChange: (v) => onChange(v), disabled: isDisabled, className: cn("text-right", controlHeight) }) }));
+        case "boolean":
+            return (_jsx("div", { className: "flex justify-center", children: _jsx(Checkbox, { "data-cell-id": cellId, "aria-label": label, disabled: isDisabled, checked: value === true, onCheckedChange: (checked) => onChange(checked === true) }) }));
+        case "date":
+            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(DateInput, { id: cellId, name: cellId, ariaLabel: label, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), disabled: isDisabled }) }));
+        case "timestamp":
+            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(TimestampInput, { id: cellId, name: cellId, ariaLabel: label, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), disabled: isDisabled }) }));
+        case "money":
+            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(MoneyInput, { id: cellId, name: cellId, ariaLabel: label, value: typeof value === "number" ? value : "", onChange: (v) => onChange(v), currency: currency, disabled: isDisabled }) }));
+        case "images":
+        case "files":
+            return (_jsx(EmbeddedFileCell, { cellId: cellId, label: label, column: column, value: value, readOnly: isDisabled, uploadTarget: uploadTarget, onChange: onChange }));
+        case "select": {
+            if (derived) {
+                return (_jsx("div", { "data-cell-id": cellId, className: "min-w-0 py-1.5", children: selectPill(value, column.optionLabels, column.optionTones, locale, undefined) }));
+            }
+            const options = (column.options ?? []).map((opt) => ({
+                value: opt,
+                label: column.optionLabels?.[opt] ?? opt,
+            }));
+            if (column.display === "radio" && options.length > 0) {
+                return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(SegmentedControl, { id: cellId, name: cellId, labelProps: { "aria-label": label }, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), options: options, disabled: isDisabled, ...(column.optionTones !== undefined && { tones: column.optionTones }), ...(touch && { size: "touch" }) }) }));
+            }
+            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(ComboboxInput, { id: cellId, name: cellId, ariaLabel: label, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), options: options, disabled: isDisabled }) }));
+        }
+        case "reference":
+            return (_jsx("div", { "data-cell-id": cellId, className: "w-full min-w-0", children: _jsx(ComboboxInput, { id: cellId, name: cellId, ariaLabel: label, value: typeof value === "string" ? value : "", onChange: (v) => onChange(v), options: column.referenceOptions ?? [], disabled: isDisabled, loading: column.referenceLoading }) }));
+        default: {
+            const exhaustiveCheck = column.type;
+            return exhaustiveCheck;
+        }
+    }
+}
+export function RowActions({ rowIndex, rowsLength, minItems, maxItems, onDuplicateRow, onMoveRow, onRemoveRow, duplicateLabel, moveUpLabel, moveDownLabel, removeLabel, testIdPrefix, buttonSizeClass = "size-7", }) {
+    const duplicateDisabled = maxItems !== undefined && rowsLength >= maxItems;
+    const removeDisabled = rowsLength <= (minItems ?? 0);
+    return (_jsxs("div", { className: "inline-flex items-center", children: [_jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: buttonSizeClass, "aria-label": duplicateLabel, disabled: duplicateDisabled, onClick: () => onDuplicateRow(rowIndex), "data-testid": testIdPrefix !== undefined ? `${testIdPrefix}-duplicate` : undefined, children: _jsx(Copy, { className: "size-4", "aria-hidden": "true" }) }), _jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: buttonSizeClass, "aria-label": moveUpLabel, disabled: rowIndex === 0, onClick: () => onMoveRow(rowIndex, rowIndex - 1), "data-testid": testIdPrefix !== undefined ? `${testIdPrefix}-move-up` : undefined, children: _jsx(ArrowUp, { className: "size-4", "aria-hidden": "true" }) }), _jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: buttonSizeClass, "aria-label": moveDownLabel, disabled: rowIndex === rowsLength - 1, onClick: () => onMoveRow(rowIndex, rowIndex + 1), "data-testid": testIdPrefix !== undefined ? `${testIdPrefix}-move-down` : undefined, children: _jsx(ArrowDown, { className: "size-4", "aria-hidden": "true" }) }), _jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: buttonSizeClass, "aria-label": removeLabel, disabled: removeDisabled, onClick: () => onRemoveRow(rowIndex), "data-testid": testIdPrefix !== undefined ? `${testIdPrefix}-remove` : undefined, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] }));
+}

package/dist/web/primitives/embedded-list-input.d.ts

@@ -5,5 +5,5 @@ type ScrollAffordance = {
     readonly canScrollRight: boolean;
 };
 export declare function computeScrollAffordance(scrollLeft: number, scrollWidth: number, clientWidth: number): ScrollAffordance;
-export declare function EmbeddedListInput({ id, columns, rows, totals, currency, disabled, fixedRows, minItems, maxItems, listIssues, rowIssues, cellIssues, onCellChange, onAddRow, onRemoveRow, onDuplicateRow, onMoveRow, onPasteCells, addLabel, actionsLabel, removeLabel, duplicateLabel, moveUpLabel, moveDownLabel, emptyLabel, emptyCtaLabel, testId, }: EmbeddedListInputProps): ReactNode;
+export declare function EmbeddedListInput({ id, columns, rows, totals, currency, disabled, fixedRows, minItems, maxItems, listIssues, rowIssues, cellIssues, onCellChange, onAddRow, onRemoveRow, onDuplicateRow, onMoveRow, onPasteCells, addLabel, actionsLabel, removeLabel, duplicateLabel, moveUpLabel, moveDownLabel, emptyLabel, emptyCtaLabel, testId, uploadTarget, }: EmbeddedListInputProps): ReactNode;
 export {};