@cosmicdrift/kumiko-renderer 0.333.0 → 0.335.0

package/dist/components/query-options-select.js

@@ -1,14 +1,50 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { isOptionsQueryFieldRef } from "@cosmicdrift/kumiko-types/fields";
+import { useEffect, useRef } from "react";
 import { useQuery } from "../hooks/use-query.js";
 import { usePrimitives } from "../primitives.js";
+function isPayloadScalar(value) {
+    return ((typeof value === "string" && value !== "") ||
+        typeof value === "number" ||
+        typeof value === "boolean");
+}
+// An empty sibling value drops its key, so "nothing chosen yet" reaches the query
+// handler as an absent property, not as "" / null.
+export function resolveOptionsQueryPayload(payload, row) {
+    const resolved = {};
+    for (const [name, entry] of Object.entries(payload)) {
+        const value = isOptionsQueryFieldRef(entry) ? row[entry.field] : entry;
+        if (isPayloadScalar(value))
+            resolved[name] = value;
+    }
+    return resolved;
+}
 // Select whose options come from a query (SelectFieldDef.optionsQuery), so it
 // has to be a mounted component for useQuery. useQuery re-fetches on the
 // serialized payload, hence no payload memoization here.
-export function QueryOptionsSelect({ field, query, payload, id, hasError, onChange, }) {
+export function QueryOptionsSelect({ field, query, payload, row, id, hasError, onChange, }) {
     const { Input } = usePrimitives();
-    const { data, loading } = useQuery(query, payload);
+    const resolvedPayload = resolveOptionsQueryPayload(payload, row);
+    const payloadKey = JSON.stringify(resolvedPayload);
+    const { data, loading } = useQuery(query, resolvedPayload);
     const current = typeof field.value === "string" ? field.value : "";
     const rows = data?.rows ?? [];
+    // useQuery keeps the previous data while a changed payload reloads, and a
+    // superseded response is aborted — so a fresh `data` object always belongs to
+    // the payload of the render it arrives in. The first load never clears (a stored
+    // value missing there stays visible); only a load after a payload change does.
+    const settledPayloadKey = useRef(null);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: runs once per loaded result, not on every keystroke
+    useEffect(() => {
+        if (data === null)
+            return;
+        const previousKey = settledPayloadKey.current;
+        settledPayloadKey.current = payloadKey;
+        const payloadChanged = previousKey !== null && previousKey !== payloadKey;
+        if (payloadChanged && current !== "" && !data.rows.some((row) => row.value === current)) {
+            onChange("");
+        }
+    }, [data]);
     // A stored value missing from the result (still loading, or dropped from the
     // catalog) must stay visible instead of silently turning into "nothing selected".
     const options = current !== "" && !rows.some((row) => row.value === current)
@@ -19,3 +55,10 @@ export function QueryOptionsSelect({ field, query, payload, id, hasError, onChan
     const display = field.display === "radio" || field.display === "dropdown" ? field.display : "dropdown";
     return (_jsx(Input, { kind: "select", id: id, name: field.field, disabled: field.readOnly || loading, required: field.required, hasError: hasError, value: current, onChange: (v) => onChange(v), options: options, display: display }));
 }
+// Badge text for a stored value of an optionsQuery select: the row's label once
+// loaded, the raw value while loading or when the value is not in the result.
+export function QueryOptionLabel({ query, payload, value, }) {
+    const { data } = useQuery(query, payload);
+    const label = data?.rows.find((row) => row.value === value)?.label;
+    return label ?? String(value);
+}

package/dist/components/reference-create-dialog.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { buildInitialValues } from "../app/kumiko-screen.js";
+import { buildInitialValues, tenantCurrencyMoneyFieldNames, useMoneyCurrencyOverrides, } from "../app/kumiko-screen.js";
 import { toKebab } from "../app/qn.js";
 import { useTranslation } from "../i18n.js";
 import { usePrimitives } from "../primitives.js";
@@ -31,9 +31,14 @@ export function extractCreatedId(data) {
     return extractIdField(data, "id");
 }
 export function ReferenceCreateDialog({ open, onClose, onCreated, featureName, screen, entity, }) {
-    const { Modal } = usePrimitives();
+    const { Banner, Modal } = usePrimitives();
     const t = useTranslation();
-    const initial = useMemo(() => buildInitialValues(entity.fields, entity.defaultCurrency ?? "EUR"), [entity.fields, entity.defaultCurrency]);
+    const entityDefaultCurrency = entity.defaultCurrency ?? "EUR";
+    const tenantCurrencyFieldNames = useMemo(() => (open ? tenantCurrencyMoneyFieldNames(entity.fields) : []), [open, entity.fields]);
+    // Same tenant-currency resolution as the entityEdit create screen (fw#2933),
+    // so a `currency: { kind: "tenant" }` field seeds identically via this dialog.
+    const { overrides: moneyCurrencyOverrides, loading: currencyLoading } = useMoneyCurrencyOverrides(entity.fields, tenantCurrencyFieldNames, entityDefaultCurrency);
+    const initial = useMemo(() => buildInitialValues(entity.fields, entityDefaultCurrency, moneyCurrencyOverrides), [entity.fields, entityDefaultCurrency, moneyCurrencyOverrides]);
     const writeCommand = entityWriteCommand(featureName, screen.entity);
     const handleSubmitted = (result) => {
         if (result.validationBlocked || !result.isSuccess)
@@ -42,5 +47,5 @@ export function ReferenceCreateDialog({ open, onClose, onCreated, featureName, s
     };
     if (!open)
         return null;
-    return (_jsx(Modal, { open: open, onOpenChange: (next) => !next && onClose(), title: t("kumiko.actions.create"), children: _jsx(RenderEdit, { screen: screen, entity: entity, featureName: featureName, initial: initial, writeCommand: writeCommand, onSubmit: handleSubmitted, onCancel: onClose, ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }) }) }));
+    return (_jsx(Modal, { open: open, onOpenChange: (next) => !next && onClose(), title: t("kumiko.actions.create"), children: currencyLoading ? (_jsx(Banner, { padded: true, variant: "loading", testId: "reference-create-dialog-loading", children: "Loading\u2026" })) : (_jsx(RenderEdit, { screen: screen, entity: entity, featureName: featureName, initial: initial, writeCommand: writeCommand, onSubmit: handleSubmitted, onCancel: onClose, ...(screen.submitLabel !== undefined && { submitLabel: screen.submitLabel }) })) }));
 }

package/dist/components/related-list-section.js

@@ -12,7 +12,7 @@ import { dispatcherErrorText } from "../app/write-failed-error.js";
 import { useOptionalDispatcher } from "../context/dispatcher-context.js";
 import { useUserRoles } from "../context/user-roles-context.js";
 import { useQuery } from "../hooks/use-query.js";
-import { useLocale, useTranslation } from "../i18n.js";
+import { useOptionalLocale, useTranslation } from "../i18n.js";
 import { PageHeaderSlotAvailableProvider } from "../page-header-slot.js";
 import { usePrimitives, } from "../primitives.js";
 import { sortByAccessor } from "../sort-by-accessor.js";
@@ -84,10 +84,10 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
     const [emptyStateActionError, setEmptyStateActionError] = useState(null);
     const t = useTranslation();
     const effectiveTranslate = translate ?? t;
-    const locale = useLocale().locale();
+    const locale = useOptionalLocale();
     const rowGrouping = useMemo(() => section.groupBy === undefined
         ? undefined
-        : buildRowGrouping(section.groupBy, effectiveTranslate, locale), [section.groupBy, effectiveTranslate, locale]);
+        : buildRowGrouping(section.groupBy, effectiveTranslate, locale ?? "en"), [section.groupBy, effectiveTranslate, locale]);
     const rowTone = useMemo(() => buildRowTone(section.rowTone), [section.rowTone]);
     const nav = useNav();
     const host = useReturnHost();
@@ -175,12 +175,14 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
             const field = normalizeListColumn(col).field;
             accessors[field] = (row) => {
                 const value = row[field];
-                return typeof value === "number" ? value : String(value ?? "");
+                if (value === null || value === undefined)
+                    return null;
+                return typeof value === "number" ? value : String(value);
             };
         }
         return accessors;
     }, [section.columns]);
-    const sortedRows = useMemo(() => sortByAccessor(rowsQuery.data?.rows ?? [], sort, sortAccessors), [rowsQuery.data, sort, sortAccessors]);
+    const sortedRows = useMemo(() => sortByAccessor(rowsQuery.data?.rows ?? [], sort, sortAccessors, locale), [rowsQuery.data, sort, sortAccessors, locale]);
     const rowClick = section.rowClick;
     // A row-body click target comes from EITHER the legacy `rowClick` field OR
     // a `rowActions` entry marked rowClick:true — the boot-validator rejects
@@ -306,11 +308,7 @@ export function RelatedListSection({ section, parentId, record, featureName, tra
                         filterValues: filters,
                         onFilterChange,
                         onFilterReset,
-                    }), ...(onRowClick !== undefined && { onRowClick }), ...(rowActions !== undefined && { rowActions }), ...(section.rowActionMode !== undefined && { rowActionMode: section.rowActionMode }), ...(rowGrouping !== undefined && { rowGrouping }), ...(rowTone !== undefined && { rowTone }), ...(toolbarActionButtons !== undefined && { toolbarActions: toolbarActionButtons }), ...(emptyStateContent !== undefined && { emptyState: emptyStateContent }), ...(hideTitle === true && {
-                        scrollBody: true,
-                        screenPadding: false,
-                        chromeless: true,
-                    }), ...(embedded === true && { screenPadding: false, chromeless: true }) }) })] }));
+                    }), ...(onRowClick !== undefined && { onRowClick }), ...(rowActions !== undefined && { rowActions }), ...(section.rowActionMode !== undefined && { rowActionMode: section.rowActionMode }), ...(rowGrouping !== undefined && { rowGrouping }), ...(rowTone !== undefined && { rowTone }), ...(toolbarActionButtons !== undefined && { toolbarActions: toolbarActionButtons }), ...(emptyStateContent !== undefined && { emptyState: emptyStateContent }), screenPadding: false, ...(hideTitle === true && { scrollBody: true, chromeless: true }), ...(embedded === true && { chromeless: true }) }) })] }));
     // hideTitle (tabs mode) → the caller (render-edit.tsx) already wraps this
     // component's own return value in the same Card frame every other tab
     // kind gets — no card here, or the two would nest. `scrollBody` caps the

package/dist/components/render-edit-action-button.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import type { usePrimitives } from "../primitives.js";
 import type { RenderEditAction } from "./render-edit-types.js";
-export declare function needsActionConfirm(action: RenderEditAction): boolean;
+export declare function needsActionConfirm(action: Pick<RenderEditAction, "confirm" | "confirmRequired" | "style">): boolean;
 export declare function RenderEditActionConfirmDialog({ action, open, onOpenChange, onConfirm, Dialog, }: {
     readonly action: RenderEditAction;
     readonly open: boolean;

package/dist/components/render-edit-action-button.js

@@ -32,7 +32,11 @@ export function RenderEditActionButton({ action, iconOnly = false, hideIcon = fa
     };
     const variant = action.style ?? "secondary";
     const showIconOnly = iconOnly && action.icon !== undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: variant, loading: busy, ...(action.icon !== undefined && (!hideIcon || showIconOnly) && { icon: action.icon }), ...(showIconOnly && { size: "icon", ariaLabel: action.label }), onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: variant, loading: busy, ...(action.icon !== undefined && (!hideIcon || showIconOnly) && { icon: action.icon }), ...(showIconOnly && {
+                    size: "icon",
+                    ariaLabel: action.label,
+                    title: action.label,
+                }), onClick: () => {
                     if (needsActionConfirm(action)) {
                         setConfirmOpen(true);
                     }

package/dist/components/render-edit-logic.d.ts

@@ -1,6 +1,7 @@
-import type { EditSectionViewModel, SubmitResult } from "@cosmicdrift/kumiko-headless";
+import type { EditFieldViewModel, EditSectionViewModel, SubmitResult } from "@cosmicdrift/kumiko-headless";
 export declare function hasEditableSection(sections: readonly EditSectionViewModel[]): boolean;
 export declare function resolveExtensionEntityId(entityIdProp: string | null | undefined, vmId: string | null): string | null;
 export declare function shouldNotifyCaller(result: SubmitResult<unknown>, extensionsPersisted: boolean): boolean;
 export declare function hasIssueWithoutRenderedField(issuePaths: readonly string[], sections: readonly EditSectionViewModel[]): boolean;
+export declare function hasIssueWithoutVisibleField(issuePaths: readonly string[], fields: readonly EditFieldViewModel[]): boolean;
 export declare function filterEditSections(sections: readonly EditSectionViewModel[], fieldsFilter: readonly string[] | undefined): readonly EditSectionViewModel[];

package/dist/components/render-edit-logic.js

@@ -30,13 +30,16 @@ export function shouldNotifyCaller(result, extensionsPersisted) {
 // Matched on the first path segment (embedded-list rows are dotted, e.g. `tasks.2.title`).
 // No issues at all counts as unmatched, so the caller keeps the banner.
 export function hasIssueWithoutRenderedField(issuePaths, sections) {
+    const renderedFields = sections
+        .filter((s) => s.kind === "fields" && (s.visible || s.fields.length === 0))
+        .flatMap((s) => (s.kind === "fields" ? s.fields : []));
+    return hasIssueWithoutVisibleField(issuePaths, renderedFields);
+}
+export function hasIssueWithoutVisibleField(issuePaths, fields) {
     if (issuePaths.length === 0)
         return true;
-    const renderedFields = new Set(sections
-        .filter((s) => s.kind === "fields" && (s.visible || s.fields.length === 0))
-        .flatMap((s) => (s.kind === "fields" ? s.fields.filter((f) => f.visible) : []))
-        .map((f) => f.field));
-    return issuePaths.some((path) => !renderedFields.has(path.split(".")[0] ?? path));
+    const visibleFields = new Set(fields.filter((f) => f.visible).map((f) => f.field));
+    return issuePaths.some((path) => !visibleFields.has(path.split(".")[0] ?? path));
 }
 // Extension, relatedList and writeForm sections skip the `fields` filter
 // (writeForm's fields belong to its own independent form, not the host's);

package/dist/components/render-edit-types.d.ts

@@ -4,6 +4,10 @@ import type { ReactNode } from "react";
 import type * as z from "zod";
 export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
     readonly screen: EntityEditScreenDefinition;
+    /** Screen id used for the `screen:<id>.title`/`.subtitle` lookups and as the
+     *  title fallback, when `screen.id` is synthetic (e.g. a secretMint confirm
+     *  form keeps its own id for the draft key). Defaults to `screen.id`. */
+    readonly i18nScreenId?: string;
     readonly entity: EntityDefinition;
     readonly featureName: string;
     readonly initial: TValues;
@@ -88,12 +92,24 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
     /** Per-field extra content below the input (e.g. ConfigCascadeView).
      *  Called with the field name, returns a ReactNode or undefined. */
     readonly fieldAppendix?: (fieldName: string) => ReactNode | undefined;
+    /** Placement of every `fieldAppendix` relative to its control. Default
+     *  above-control; below-control keeps the inputs of neighbouring fields
+     *  on one line when an appendix expands. */
+    readonly fieldAppendixPlacement?: "above-control" | "below-control";
+    /** Per-field help text rendered under the label (translated by the caller). */
+    readonly fieldDescription?: (fieldName: string) => ReactNode | undefined;
+    /** Marks fields whose value is set at this level; drawn by `settings-list` rows. */
+    readonly fieldAccent?: (fieldName: string) => boolean;
+    /** Edit-mode "changed" markers also for screens without an entity id
+     *  (configEdit loads its values from a query, not a record). */
+    readonly markChangedFields?: boolean;
     /** Controlled mode (issue #1887): fires on every values-snapshot change
      *  (typing, `patch(...)` from outside) with the current values. `changes`
      *  is the delta against the initial values — same semantics as
      *  `payloadMode: "changes"` — so a caller never overwrites unseen fields.
      *  `valid` is a pure dry-run parse against `schema` (not a
-     *  `controller.validate()` call), so it does not paint field errors into
+     *  `controller.validate()` call) that ignores issues on hidden fields and
+     *  outside the `fields` scope, like submit() does, so it does not paint field errors into
      *  the UI and can diverge from the currently rendered `snapshot.errors` —
      *  always `true` without `schema`. A caller that patches a fresh object
      *  reference on every call must not do so unconditionally: `setValues` is
@@ -164,6 +180,19 @@ export type RenderEditProps<TValues extends FormValues, TCtx = unknown> = {
      *  screens with `fillHeight !== false`; dialogs and other embedded hosts
      *  omit it and keep document-flow height. */
     readonly fillScreenHeight?: boolean;
+    /** Rendered first inside the form, above the sections, in the same column and
+     *  rhythm — for content that belongs to the form but is no field (e.g. the
+     *  secret a confirm step refers to). */
+    readonly leadContent?: ReactNode;
+    /** Show the unsaved-changes footer (count, Discard, "Save changes") even
+     *  without an entity id or a screen-height form — for hosts that edit an
+     *  existing server-side record through `customSubmit` (configEdit, also when
+     *  embedded as a dashboard panel). */
+    readonly dirtyFooter?: boolean;
+    /** Validate the edited field right after each change instead of only on
+     *  submit, so a bounds violation shows at the field while the Save button
+     *  looks enabled. Set where Save never blocks on a pre-check (configEdit). */
+    readonly validateOnChange?: boolean;
     /** Extra content rendered above the card, sharing its left padding and
      *  width — for a host with its own header region (title/metrics/tabs)
      *  that would otherwise render as unpadded siblings before RenderEdit.