@cosmicdrift/kumiko-renderer 0.328.0 → 0.328.1

package/src/components/embedded-list-field.tsx

@@ -1,354 +0,0 @@
-import type {
-  EditFieldViewModel,
-  EmbeddedListCellViewModel,
-  FieldIssue,
-} from "@cosmicdrift/kumiko-headless";
-import {
-  computeDerivedCellValue,
-  currencyDecimals,
-  groupEmbeddedListIssues,
-  roundDerivedCellValue,
-  sumEmbeddedListColumn,
-} from "@cosmicdrift/kumiko-headless";
-import { type ReactNode, useState } from "react";
-import { REFERENCE_COMBOBOX_LIMIT } from "../hooks/reference-limits";
-import { useQuery } from "../hooks/use-query";
-import { referenceLookupSource } from "../hooks/use-reference-lookup";
-import { useTranslation } from "../i18n";
-import type { EmbeddedListColumn, EmbeddedListTotal } from "../primitives";
-import { usePrimitives } from "../primitives";
-
-export type EmbeddedListFieldProps = {
-  readonly field: EditFieldViewModel;
-  readonly id: string;
-  readonly onChange: (value: unknown) => void;
-  readonly allIssues: Readonly<Record<string, readonly FieldIssue[]>>;
-  readonly featureName: string;
-};
-
-type EmbeddedRow = Readonly<Record<string, unknown>>;
-
-function withRecomputedDerived(
-  row: EmbeddedRow,
-  derived: EditFieldViewModel["embeddedListDerived"],
-  cells: readonly EmbeddedListCellViewModel[],
-): EmbeddedRow {
-  if (derived === undefined) return row;
-  // Read sources from an unchanged snapshot, never from `result` (which this
-  // loop mutates) — mirrors withDerivedCells server-side so chained derived
-  // cells (e.g. net=qty*price, then gross=sum(net,tax)) can't drift between
-  // client preview and server depending on Object.entries(derived) order.
-  const source = { ...row };
-  const result: Record<string, unknown> = { ...row };
-  for (const [derivedField, def] of Object.entries(derived)) {
-    const values = def.from.map((src) => {
-      const v = source[src];
-      return typeof v === "number" ? v : undefined;
-    });
-    const computed = computeDerivedCellValue(def.op, values);
-    const target = cells.find((c) => c.field === derivedField);
-    result[derivedField] =
-      computed !== undefined && target !== undefined
-        ? roundDerivedCellValue(computed, target)
-        : computed;
-  }
-  return result;
-}
-
-// Locale-aware decimal parse for pasted text: strips space/NBSP thousands
-// separators outright, then treats whichever of "," or "." appears LAST in
-// the string as the decimal separator and strips the other one — handles
-// both "1.234,56" (de) and "1,234.56" (en-US) pastes. Returns undefined for
-// anything that still doesn't parse as a finite number.
-function parseLocaleAwareDecimal(raw: string): number | undefined {
-  const stripped = raw.replace(/[\s ]/g, "");
-  if (stripped === "") return undefined;
-  const lastComma = stripped.lastIndexOf(",");
-  const lastDot = stripped.lastIndexOf(".");
-  const decimalIndex = Math.max(lastComma, lastDot);
-  if (decimalIndex === -1) {
-    const n = Number(stripped);
-    return Number.isFinite(n) ? n : undefined;
-  }
-  const integerPart = stripped.slice(0, decimalIndex).replace(/[.,]/g, "");
-  const fractionPart = stripped.slice(decimalIndex + 1);
-  if (!/^\d*$/.test(integerPart) || !/^\d*$/.test(fractionPart)) return undefined;
-  const n = Number(
-    `${integerPart === "" ? "0" : integerPart}.${fractionPart === "" ? "0" : fractionPart}`,
-  );
-  return Number.isFinite(n) ? n : undefined;
-}
-
-function coerceCellValue(column: EmbeddedListColumn, text: string, currency: string): unknown {
-  switch (column.type) {
-    case "text":
-      return text;
-    case "number":
-    case "decimal": {
-      if (text.trim() === "") return undefined;
-      const n = Number(text);
-      return Number.isFinite(n) ? n : undefined;
-    }
-    case "money": {
-      // Money cells are minor-unit integers (cents) in storage — paste
-      // arrives as a major-unit decimal string ("12,99"/"12.99"), so scale
-      // by the currency's decimal places. Must agree with the typed-in path
-      // (renderCellControl's MoneyInput, which scales by the same
-      // currencyDecimals) — a hardcoded ×100 here diverged for zero-/three-
-      // decimal currencies (JPY, BHD, ...), landing a pasted value 100x off
-      // from the same value typed by hand (kumiko-framework#1972).
-      // parseLocaleAwareDecimal handles both "1.234,56" (de) and
-      // "1,234.56" (en-US) thousands/decimal conventions — a naive
-      // `replace(",", ".")` mangled DE-locale pastes with thousands
-      // separators into NaN (kumiko-framework#1838).
-      if (text.trim() === "") return undefined;
-      const n = parseLocaleAwareDecimal(text);
-      return n === undefined ? undefined : Math.round(n * 10 ** currencyDecimals(currency));
-    }
-    case "boolean":
-      return ["true", "1", "yes", "y", "ja"].includes(text.trim().toLowerCase());
-    case "date":
-    case "timestamp":
-      return text.trim();
-    case "select": {
-      const match = (column.options ?? []).find(
-        (opt) => opt === text || column.optionLabels?.[opt] === text,
-      );
-      return match;
-    }
-    case "reference": {
-      const match = (column.referenceOptions ?? []).find(
-        (o) => o.label === text || o.value === text,
-      );
-      return match?.value;
-    }
-    default: {
-      const exhaustiveCheck: never = column.type;
-      return exhaustiveCheck;
-    }
-  }
-}
-
-export function EmbeddedListField({
-  field,
-  id,
-  onChange,
-  allIssues,
-  featureName,
-}: EmbeddedListFieldProps): ReactNode {
-  const { EmbeddedListInput } = usePrimitives();
-  const t = useTranslation();
-  const [pasteWarning, setPasteWarning] = useState<{
-    readonly droppedRows: number;
-    readonly unmatchedCells: number;
-  } | null>(null);
-
-  const cells = field.embeddedListCells ?? [];
-  const rows = Array.isArray(field.value) ? (field.value as readonly EmbeddedRow[]) : [];
-  const derived = field.embeddedListDerived;
-
-  const referenceCells = cells.filter((c) => c.type === "reference");
-  const referenceSources = referenceCells.map((cell) =>
-    cell.refOptionsQuery !== undefined
-      ? { queryQn: cell.refOptionsQuery, labelKey: "label" }
-      : referenceLookupSource(
-          cell.refFeature ?? featureName,
-          cell.refEntity ?? "",
-          cell.refLabelField ?? "id",
-        ),
-  );
-  const referenceQueries = referenceSources.map((source) =>
-    // biome-ignore lint/correctness/useHookAtTopLevel: referenceCells comes from the entity-schema definition — fixed for the screen's lifetime, not a real conditional-hook risk.
-    useQuery<{ rows: ReadonlyArray<Record<string, unknown>> }>(source.queryQn, {
-      limit: REFERENCE_COMBOBOX_LIMIT,
-    }),
-  );
-
-  if (EmbeddedListInput === undefined) return null;
-
-  const columns: EmbeddedListColumn[] = cells.map((cell) => {
-    const isDerived = derived?.[cell.field] !== undefined;
-    if (cell.type === "reference") {
-      const idx = referenceCells.indexOf(cell);
-      const query = referenceQueries[idx];
-      const labelKey = referenceSources[idx]?.labelKey ?? "id";
-      const referenceOptions = (query?.data?.rows ?? []).map((row) => ({
-        value: String(row["id"] ?? ""),
-        label: String(row[labelKey] ?? row["id"] ?? ""),
-      }));
-      return {
-        field: cell.field,
-        label: cell.label,
-        type: cell.type,
-        required: cell.required,
-        derived: isDerived,
-        referenceOptions,
-        referenceLoading: query?.loading ?? false,
-      };
-    }
-    return {
-      field: cell.field,
-      label: cell.label,
-      type: cell.type,
-      required: cell.required,
-      derived: isDerived,
-      ...(cell.options !== undefined && { options: cell.options }),
-      ...(cell.optionLabels !== undefined && { optionLabels: cell.optionLabels }),
-    };
-  });
-
-  const totals: EmbeddedListTotal[] = (field.embeddedListTotals ?? []).map((subFieldName) => {
-    const cell = cells.find((c) => c.field === subFieldName);
-    return {
-      field: subFieldName,
-      label: cell?.label ?? subFieldName,
-      value: sumEmbeddedListColumn(rows, subFieldName),
-    };
-  });
-
-  const { listIssues, rowIssues, cellIssues } = groupEmbeddedListIssues(allIssues, field.field);
-  const combinedListIssues: readonly FieldIssue[] =
-    pasteWarning === null
-      ? listIssues
-      : [
-          ...listIssues,
-          ...(pasteWarning.droppedRows > 0
-            ? [
-                {
-                  path: field.field,
-                  code: "paste-rows-truncated",
-                  i18nKey: "kumiko.field.embedded-list.paste-rows-truncated",
-                  params: { count: pasteWarning.droppedRows },
-                },
-              ]
-            : []),
-          ...(pasteWarning.unmatchedCells > 0
-            ? [
-                {
-                  path: field.field,
-                  code: "paste-cells-unmatched",
-                  i18nKey: "kumiko.field.embedded-list.paste-cells-unmatched",
-                  params: { count: pasteWarning.unmatchedCells },
-                },
-              ]
-            : []),
-        ];
-
-  function replaceRow(rowIndex: number, updater: (row: EmbeddedRow) => EmbeddedRow): void {
-    const nextRows = rows.map((row, i) => (i === rowIndex ? updater(row) : row));
-    onChange(nextRows);
-  }
-
-  function handleCellChange(rowIndex: number, cellField: string, value: unknown): void {
-    replaceRow(rowIndex, (row) =>
-      withRecomputedDerived({ ...row, [cellField]: value }, derived, cells),
-    );
-  }
-
-  function handleAddRow(): void {
-    onChange([...rows, withRecomputedDerived({}, derived, cells)]);
-  }
-
-  function handleRemoveRow(rowIndex: number): void {
-    onChange(rows.filter((_, i) => i !== rowIndex));
-  }
-
-  function handleDuplicateRow(rowIndex: number): void {
-    const source = rows[rowIndex];
-    if (source === undefined) return;
-    const next = [...rows];
-    next.splice(rowIndex + 1, 0, { ...source });
-    onChange(next);
-  }
-
-  function handleMoveRow(fromIndex: number, toIndex: number): void {
-    if (toIndex < 0 || toIndex >= rows.length) return;
-    const next = [...rows];
-    const [moved] = next.splice(fromIndex, 1);
-    if (moved === undefined) return;
-    next.splice(toIndex, 0, moved);
-    onChange(next);
-  }
-
-  function handlePasteCells(
-    rowIndex: number,
-    columnIndex: number,
-    grid: readonly (readonly string[])[],
-  ): void {
-    const maxItems = field.embeddedListMaxItems;
-    const nextRows = [...rows];
-    const touchedIndices = new Set<number>();
-    let droppedRows = 0;
-    let unmatchedCells = 0;
-
-    grid.forEach((gridRow, gridRowOffset) => {
-      const targetRowIndex = rowIndex + gridRowOffset;
-      if (targetRowIndex >= nextRows.length) {
-        if (maxItems !== undefined && nextRows.length >= maxItems) {
-          droppedRows += 1;
-          return;
-        }
-        nextRows.push({});
-      }
-      const targetRow = nextRows[targetRowIndex];
-      if (targetRow === undefined) return;
-      let updatedRow: Record<string, unknown> = { ...targetRow };
-      gridRow.forEach((text, gridColOffset) => {
-        const column = columns[columnIndex + gridColOffset];
-        if (column === undefined) return;
-        const coerced = coerceCellValue(column, text, field.embeddedListCurrency ?? "EUR");
-        // Also covers an unparseable money paste (e.g. mangled thousands
-        // separators) — the cell must stay unchanged instead of silently
-        // clearing to undefined (kumiko-framework#1838).
-        const isUnmatchedOrUnparseable =
-          (column.type === "select" || column.type === "reference" || column.type === "money") &&
-          coerced === undefined &&
-          text.trim() !== "";
-        if (isUnmatchedOrUnparseable) {
-          unmatchedCells += 1;
-          return;
-        }
-        updatedRow = { ...updatedRow, [column.field]: coerced };
-      });
-      nextRows[targetRowIndex] = updatedRow;
-      touchedIndices.add(targetRowIndex);
-    });
-
-    setPasteWarning(droppedRows > 0 || unmatchedCells > 0 ? { droppedRows, unmatchedCells } : null);
-
-    const recomputed = nextRows.map((row, i) =>
-      touchedIndices.has(i) ? withRecomputedDerived(row, derived, cells) : row,
-    );
-    onChange(recomputed);
-  }
-
-  return (
-    <EmbeddedListInput
-      id={id}
-      columns={columns}
-      rows={rows}
-      totals={totals}
-      currency={field.embeddedListCurrency}
-      disabled={field.readOnly}
-      minItems={field.embeddedListMinItems}
-      maxItems={field.embeddedListMaxItems}
-      listIssues={combinedListIssues}
-      rowIssues={rowIssues}
-      cellIssues={cellIssues}
-      onCellChange={handleCellChange}
-      onAddRow={handleAddRow}
-      onRemoveRow={handleRemoveRow}
-      onDuplicateRow={handleDuplicateRow}
-      onMoveRow={handleMoveRow}
-      onPasteCells={handlePasteCells}
-      addLabel={t("kumiko.field.embedded-list.add-row")}
-      removeLabel={t("kumiko.field.embedded-list.remove-row")}
-      duplicateLabel={t("kumiko.field.embedded-list.duplicate-row")}
-      moveUpLabel={t("kumiko.field.embedded-list.move-up")}
-      moveDownLabel={t("kumiko.field.embedded-list.move-down")}
-      emptyLabel={t("kumiko.field.embedded-list.empty")}
-      emptyCtaLabel={t("kumiko.field.embedded-list.empty-cta")}
-      testId={id}
-    />
-  );
-}

package/src/components/grid-cell-for-field.tsx

@@ -1,88 +0,0 @@
-import type { EditFieldViewModel, FieldIssue } from "@cosmicdrift/kumiko-headless";
-import type { ReactNode } from "react";
-import type { FieldCellWidth, usePrimitives } from "../primitives";
-import { RenderField } from "./render-field";
-
-// Extracted out of render-edit.tsx so write-form-section.tsx can reuse it
-// without a circular import between the two components.
-export type GridCellForFieldProps = {
-  readonly field: EditFieldViewModel;
-  readonly columns: number;
-  readonly issues: readonly FieldIssue[] | undefined;
-  readonly onChange: (value: unknown) => void;
-  readonly GridCell: ReturnType<typeof usePrimitives>["GridCell"];
-  /** Tier 2.7e-3: passed through so Reference fields can build the correct
-   *  lookup query QN (`<feature>:query:<refEntity>:list`). */
-  readonly featureName: string;
-  readonly labelAppendix?: ReactNode;
-  readonly fieldAppendix?: ReactNode;
-  /** Full issues-by-path map (FormSnapshot.errors) — passed through for
-   *  embedded-list fields, which bucket row-/cell-level issues themselves. */
-  readonly allIssues: Readonly<Record<string, readonly FieldIssue[]>>;
-  /** Passed through to RenderField unchanged — see RenderEditProps.valueDisplay. */
-  readonly valueDisplay: "form" | "text";
-  /** Passed through to RenderField as `row` — see RenderFieldProps.row. */
-  readonly row: Readonly<Record<string, unknown>>;
-  readonly changed?: boolean;
-  readonly flow?: boolean;
-};
-
-const FIELD_CELL_WIDTH_BY_TYPE: Readonly<Record<string, FieldCellWidth>> = {
-  number: "number",
-  decimal: "number",
-  bigInt: "number",
-  money: "money",
-  date: "date",
-  select: "select",
-  multiSelect: "select",
-  boolean: "auto",
-  longText: "full",
-  embedded: "full",
-  jsonb: "full",
-  file: "full",
-  files: "full",
-  image: "full",
-  images: "full",
-};
-
-function fieldCellWidth(field: EditFieldViewModel): FieldCellWidth {
-  if (field.span !== undefined || (field.type === "text" && field.multiline)) return "full";
-  return FIELD_CELL_WIDTH_BY_TYPE[field.type] ?? "text";
-}
-
-export function GridCellForField({
-  field,
-  columns,
-  issues,
-  onChange,
-  GridCell,
-  featureName,
-  labelAppendix,
-  fieldAppendix,
-  allIssues,
-  valueDisplay,
-  row,
-  changed,
-  flow,
-}: GridCellForFieldProps): ReactNode {
-  // RenderField renders nothing for a hidden field, but the GridCell around it still claims the row.
-  if (!field.visible) return null;
-
-  const effectiveSpan = field.span !== undefined ? Math.min(field.span, columns) : 1;
-  return (
-    <GridCell span={effectiveSpan} {...(flow === true && { width: fieldCellWidth(field) })}>
-      <RenderField
-        field={field}
-        {...(issues !== undefined && { issues })}
-        onChange={onChange}
-        featureName={featureName}
-        {...(labelAppendix !== undefined && { labelAppendix })}
-        {...(fieldAppendix !== undefined && { fieldAppendix })}
-        allIssues={allIssues}
-        valueDisplay={valueDisplay}
-        row={row}
-        {...(changed === true && { changed })}
-      />
-    </GridCell>
-  );
-}

package/src/components/multi-select-checkboxes.tsx

@@ -1,93 +0,0 @@
-import type { EditFieldViewModel } from "@cosmicdrift/kumiko-headless";
-import type { ReactNode } from "react";
-import { useTranslation } from "../i18n";
-import { usePrimitives } from "../primitives";
-
-export type MultiSelectCheckboxOption = {
-  readonly value: string;
-  readonly label: string;
-};
-
-export type MultiSelectCheckboxesProps = {
-  readonly field: EditFieldViewModel;
-  readonly id: string;
-  readonly options: readonly MultiSelectCheckboxOption[];
-  readonly value: readonly string[];
-  readonly onChange: (value: readonly string[]) => void;
-};
-
-// Renders MultiSelectFieldDef's `display: "checkboxes"` mode — every option
-// as a visible checkbox plus a select-all toggle, built purely from the
-// platform-neutral Primitives contract (Grid/GridCell/Field/Input kind
-// "boolean", the same primitive `case "boolean"` uses in render-field.tsx).
-// No renderer-web import here — this file must stay usable from Expo too.
-export function MultiSelectCheckboxes({
-  field,
-  id,
-  options,
-  value,
-  onChange,
-}: MultiSelectCheckboxesProps): ReactNode {
-  const { Grid, GridCell, Field, Input, Button } = usePrimitives();
-  const t = useTranslation();
-  const disabled = field.readOnly;
-  const selected = new Set(value);
-  const allSelected = options.length > 0 && options.every((opt) => selected.has(opt.value));
-
-  // Always emits in `field.options` order (MultiSelectFieldDef's documented
-  // ordering guarantee), never in click/selection order.
-  const emitOrdered = (next: ReadonlySet<string>): void => {
-    onChange(options.filter((opt) => next.has(opt.value)).map((opt) => opt.value));
-  };
-
-  const toggleOption = (optionValue: string, checked: boolean): void => {
-    const next = new Set(selected);
-    if (checked) {
-      next.add(optionValue);
-    } else {
-      next.delete(optionValue);
-    }
-    emitOrdered(next);
-  };
-
-  const toggleAll = (): void => {
-    emitOrdered(allSelected ? new Set() : new Set(options.map((opt) => opt.value)));
-  };
-
-  return (
-    <>
-      <Button
-        type="button"
-        variant="secondary"
-        size="sm"
-        disabled={disabled}
-        onClick={toggleAll}
-        testId={`${id}-select-all`}
-      >
-        {allSelected
-          ? t("kumiko.field.multiSelect.deselect-all")
-          : t("kumiko.field.multiSelect.select-all")}
-      </Button>
-      <Grid
-        columns={field.columns ?? 2}
-        testId={`${id}-checkboxes`}
-        {...(field.maxRows !== undefined && { maxRows: field.maxRows })}
-      >
-        {options.map((opt) => (
-          <GridCell key={opt.value}>
-            <Field id={`${id}-${opt.value}`} label={opt.label} layout="inline">
-              <Input
-                kind="boolean"
-                id={`${id}-${opt.value}`}
-                name={`${id}-${opt.value}`}
-                value={selected.has(opt.value)}
-                onChange={(checked) => toggleOption(opt.value, checked)}
-                disabled={disabled}
-              />
-            </Field>
-          </GridCell>
-        ))}
-      </Grid>
-    </>
-  );
-}

package/src/components/reference-create-dialog.tsx

@@ -1,91 +0,0 @@
-import type {
-  EntityDefinition,
-  EntityEditScreenDefinition,
-} from "@cosmicdrift/kumiko-framework/ui-types";
-import type { FormValues, SubmitResult } from "@cosmicdrift/kumiko-headless";
-import { type ReactNode, useMemo } from "react";
-import { buildInitialValues } from "../app/kumiko-screen";
-import { toKebab } from "../app/qn";
-import { useTranslation } from "../i18n";
-import { usePrimitives } from "../primitives";
-import { RenderEdit } from "./render-edit";
-
-// Hosts a target entity's create-form inside a bare Modal so a reference
-// field can create a missing record without leaving the current form
-// (kumiko-framework#1681) — same create wiring as EntityEditCreateBody
-// (kumiko-screen.tsx), but reports the new id back via a callback instead
-// of navigating to the entity's list screen.
-
-function entityWriteCommand(featureName: string, entity: string): string {
-  return `${toKebab(featureName)}:write:${toKebab(entity)}:create`;
-}
-
-// The create handler's success payload is `{ kind: "save", id, ... }`
-// (see event-store-executor-write.ts) but RenderEdit's onSubmit only
-// types it as `unknown` — narrow defensively instead of casting through it.
-// `field` is author-declared (ActionFormRedirect.idFrom, fw#2670), never
-// user input; the own-property check keeps a prototype key like
-// "constructor" from resolving to anything.
-export function extractIdField(data: unknown, field: string): string | undefined {
-  if (typeof data !== "object" || data === null) return undefined;
-  if (!Object.hasOwn(data, field)) return undefined;
-  const value = (data as Record<string, unknown>)[field];
-  return typeof value === "string" ? value : undefined;
-}
-
-export function extractCreatedId(data: unknown): string | undefined {
-  return extractIdField(data, "id");
-}
-
-export type ReferenceCreateDialogProps = {
-  readonly open: boolean;
-  readonly onClose: () => void;
-  // id is undefined when the record was created but the write-handler's
-  // success payload carried no `id` (custom create-handler variant) — the
-  // record already exists server-side, so this is still a success signal
-  // to the caller, just one it can't auto-select from (#1694).
-  readonly onCreated: (id: string | undefined) => void;
-  readonly featureName: string;
-  readonly screen: EntityEditScreenDefinition;
-  readonly entity: EntityDefinition;
-};
-
-export function ReferenceCreateDialog({
-  open,
-  onClose,
-  onCreated,
-  featureName,
-  screen,
-  entity,
-}: ReferenceCreateDialogProps): ReactNode {
-  const { Modal } = usePrimitives();
-  const t = useTranslation();
-  const initial = useMemo(
-    () => buildInitialValues(entity.fields, entity.defaultCurrency ?? "EUR") as FormValues,
-    [entity.fields, entity.defaultCurrency],
-  );
-  const writeCommand = entityWriteCommand(featureName, screen.entity);
-  const handleSubmitted = (result: SubmitResult<unknown>): void => {
-    if (result.validationBlocked || !result.isSuccess) return;
-    onCreated(extractCreatedId(result.data));
-  };
-  if (!open) return null;
-  return (
-    <Modal
-      open={open}
-      onOpenChange={(next) => !next && onClose()}
-      title={t("kumiko.actions.create")}
-    >
-      <RenderEdit
-        screen={screen}
-        entity={entity}
-        featureName={featureName}
-        initial={initial}
-        writeCommand={writeCommand}
-        onSubmit={handleSubmitted}
-        onCancel={onClose}
-        {...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel })}
-      />
-    </Modal>
-  );
-}