@cosmicdrift/kumiko-renderer 0.399.0 → 0.400.0

package/dist/primitives.d.ts

@@ -4,8 +4,10 @@ import { type ComponentType, type FormEvent, type KeyboardEvent, type ReactNode,
 import type { DataTableBulk } from "./data-table-bulk-types.ts";
 import type { DataTableDateRangeFacet, DataTableFacet } from "./data-table-facet-types.ts";
 import type { DataTableTableBlock } from "./data-table-view-types.ts";
+import type { EmbeddedListInputProps } from "./embedded-list-types.ts";
 import type { FieldIssue, ListColumnViewModel, ListRowViewModel, RuntimeRenderer } from "./headless/index.ts";
 import type { MetricBandProps, MetricProps } from "./metric-types.ts";
+export type { EmbeddedListCellType, EmbeddedListColumn, EmbeddedListInputProps, EmbeddedListTotal, } from "./embedded-list-types.ts";
 export type { RuntimeRenderer };
 /** Escape hatch for `data-*` test hooks (e.g. an E2E selector) that don't
  *  warrant a dedicated typed prop. Web merges these onto the rendered
@@ -460,6 +462,8 @@ export type InputProps = {
      *  decides; the web impl keeps its short-option-set heuristic. Custom
      *  impls may ignore it — it is a request, not a contract. */
     readonly display?: "radio" | "dropdown";
+    /** Tone per option value; the selected segment of a radio presentation takes its colors. */
+    readonly optionTones?: Readonly<Partial<Record<string, SelectOptionTone>>>;
 } | ({
     readonly kind: "combobox";
     readonly id: string;
@@ -797,94 +801,6 @@ export type DataTableProps = {
     readonly renderExpandedRow?: (row: ListRowViewModel) => ReactNode;
 } & DataTableTableBlock;
 export type DataTableTableBlockProps = Pick<DataTableProps, keyof DataTableTableBlock>;
-/** Cell type for one column of an embedded-list field. Mirrors
- *  EmbeddedListCellViewModel["type"] from `@cosmicdrift/kumiko-renderer/headless`. */
-export type EmbeddedListCellType = "text" | "number" | "boolean" | "date" | "money" | "decimal" | "select" | "reference" | "timestamp";
-/** One column of an embedded-list table (one entry per key of the source
- *  EmbeddedFieldDef's `schema`). */
-export type EmbeddedListColumn = {
-    readonly field: string;
-    readonly label: string;
-    readonly type: EmbeddedListCellType;
-    readonly required: boolean;
-    /** Read-only, value supplied by the caller (already computed from
-     *  sibling cells) — not directly user-editable. */
-    readonly derived: boolean;
-    /** Shown but not editable by the user; unlike `derived` it is not computed. */
-    readonly readOnly?: boolean;
-    /** Only for `type: "select"`. */
-    readonly options?: readonly string[];
-    readonly optionLabels?: Readonly<Record<string, string>>;
-    /** Only for `type: "select"`; `"radio"` renders segmented buttons, the
-     *  default is a dropdown. */
-    readonly display?: "radio" | "dropdown";
-    /** Only for `type: "reference"` — pre-fetched by the caller, ONE query
-     *  per column shared across every row (not one query per cell). */
-    readonly referenceOptions?: readonly {
-        readonly value: string;
-        readonly label: string;
-    }[];
-    readonly referenceLoading?: boolean;
-};
-/** One entry of an embedded-list totals row (e.g. an invoice's total
- *  amount, summed across all rows by the caller). */
-export type EmbeddedListTotal = {
-    readonly field: string;
-    readonly label: string;
-    readonly value: number;
-    /** Set for labelled multi-column totals, which have no single column to
-     *  read the money type from. */
-    readonly money?: boolean;
-};
-/** Row-array + totals table for a `createEmbeddedListField` (invoice-
- *  positions-style) field — structurally too different from `Input`'s
- *  value/onChange union to fit there, so it's its own primitive, same as
- *  `DataTable`. Controlled: the caller (the eventual form-field wrapper)
- *  computes rows/derived values/issue groups and wires every callback;
- *  this primitive only renders and reports interaction. */
-export type EmbeddedListInputProps = {
-    readonly id: string;
-    readonly columns: readonly EmbeddedListColumn[];
-    readonly rows: readonly Readonly<Record<string, unknown>>[];
-    readonly totals?: readonly EmbeddedListTotal[];
-    /** Currency for money cells and the totals row — one value for the whole
-     *  list (currency lives on the head aggregate, not the row). Web impl
-     *  falls back to "EUR" when absent. */
-    readonly currency?: string;
-    /** Whole-list read-only (e.g. a released invoice) — hides row-mutation
-     *  affordances and disables every cell. */
-    readonly disabled?: boolean;
-    /** Rows are fixed: no add, remove, duplicate or move; cells stay editable. */
-    readonly fixedRows?: boolean;
-    readonly minItems?: number;
-    readonly maxItems?: number;
-    /** Shown under the whole list (e.g. under the totals row). */
-    readonly listIssues?: readonly FieldIssue[];
-    /** Keyed by row index. */
-    readonly rowIssues?: Readonly<Record<number, readonly FieldIssue[]>>;
-    /** Keyed `${rowIndex}.${field}`. */
-    readonly cellIssues?: Readonly<Record<string, readonly FieldIssue[]>>;
-    readonly onCellChange: (rowIndex: number, field: string, value: unknown) => void;
-    readonly onAddRow: () => void;
-    readonly onRemoveRow: (rowIndex: number) => void;
-    readonly onDuplicateRow: (rowIndex: number) => void;
-    readonly onMoveRow: (fromIndex: number, toIndex: number) => void;
-    /** Tab/newline-delimited clipboard paste starting at (rowIndex,
-     *  columnIndex) — parsed to a 2D string grid by the Web impl (paste
-     *  events are a browser-only concept); undefined caller = no paste
-     *  handling wired up. */
-    readonly onPasteCells?: (rowIndex: number, columnIndex: number, grid: readonly (readonly string[])[]) => void;
-    readonly addLabel: string;
-    /** Accessible name of the (otherwise headerless) row-actions column. */
-    readonly actionsLabel: string;
-    readonly removeLabel: string;
-    readonly duplicateLabel: string;
-    readonly moveUpLabel: string;
-    readonly moveDownLabel: string;
-    readonly emptyLabel: string;
-    readonly emptyCtaLabel: string;
-    readonly testId?: string;
-};
 export type { FormWidth };
 /** One entry of a form's "on this page" navigation: `id` matches the
  *  `SectionProps.id` of the section it scrolls to. */

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 {};