@asteby/metacore-runtime-react 18.26.0 → 18.28.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 18.28.0
+
+### Minor Changes
+
+- d3b7060: feat(line-items): a PrefillSpec can `lock` item-field columns — locked dynamic_select cells render as a resolved, read-only NAME (eager option fetch, never the raw id) instead of an editable picker. Used for receive-goods/partial-reception lines whose product is dictated by the source document; the create flow (no prefill) stays fully editable.
+
+## 18.27.0
+
+### Minor Changes
+
+- b71dcc0: feat(action-modal): line-items fields can prefill their rows from the acted-on record. A field whose `default` is a `PrefillSpec` (`{$prefillFromRecord, map, remaining}`) seeds one row per record array entry, copying mapped keys and computing a remaining quantity (`of - minus`), dropping fully-satisfied rows. Enables receive-goods/partial-reception modals (e.g. inventory transfers) to open pre-loaded with the pending lines instead of empty. Decoupled: the SDK only projects a record array into the field's item_fields.
+
 ## 18.26.0
 
 ### Minor Changes

package/dist/action-modal-dispatcher.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AA+CA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AAEhD,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCAiDlB"}
+{"version":3,"file":"action-modal-dispatcher.d.ts","sourceRoot":"","sources":["../src/action-modal-dispatcher.tsx"],"names":[],"mappings":"AA+CA,OAAO,EACH,KAAK,cAAc,EACnB,KAAK,gBAAgB,EAExB,MAAM,sBAAsB,CAAA;AAE7B,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,CAAA;AA0FhD,wBAAgB,qBAAqB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,QAAQ,EACR,SAAS,GACZ,EAAE,gBAAgB,sCAiDlB"}

package/dist/action-modal-dispatcher.js

@@ -21,6 +21,65 @@ import { UploadField } from './upload-field';
 import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn } from './dynamic-form-schema';
 // Canonical registry lives in @asteby/metacore-sdk
 import { getActionComponent, } from '@asteby/metacore-sdk';
+function isPrefillSpec(v) {
+    return (typeof v === 'object' &&
+        v !== null &&
+        typeof v.$prefillFromRecord === 'string');
+}
+// lineItemsDefault reads the field's declared default tolerating BOTH the
+// camelCase `defaultValue` the host serves and the snake/legacy `default` the
+// raw manifest carries (the kernel maps action-field `default` through without
+// renaming it to `defaultValue`).
+function lineItemsDefault(field) {
+    const f = field;
+    return f.defaultValue ?? f.default;
+}
+function toNum(v) {
+    const n = typeof v === 'number' ? v : parseFloat(String(v ?? ''));
+    return Number.isFinite(n) ? n : 0;
+}
+// applyPrefillLock marks the item-field columns named in a line-items field's
+// PrefillSpec.lock as read-only, so the prefilled cells (e.g. the product of a
+// receive line) render as a resolved, non-editable name. Returns the field
+// untouched when there is no prefill spec or no lock list (the create flow,
+// which carries no prefill, stays fully editable). The readonly flag is set on
+// BOTH itemFields aliases the renderers tolerate.
+function applyPrefillLock(field) {
+    const spec = lineItemsDefault(field);
+    if (!isPrefillSpec(spec) || !spec.lock || spec.lock.length === 0)
+        return field;
+    const lock = new Set(spec.lock);
+    const f = field;
+    const items = f.itemFields ?? f.item_fields;
+    if (!Array.isArray(items))
+        return field;
+    const patched = items.map((c) => (c && c.key && lock.has(c.key) ? { ...c, readonly: true } : c));
+    return { ...field, itemFields: patched, item_fields: patched };
+}
+// buildPrefillRows projects record[spec.$prefillFromRecord] into modal rows.
+function buildPrefillRows(spec, record) {
+    const src = record?.[spec.$prefillFromRecord];
+    if (!Array.isArray(src))
+        return [];
+    const rows = [];
+    for (const item of src) {
+        if (!item || typeof item !== 'object')
+            continue;
+        const row = {};
+        if (spec.map) {
+            for (const [target, from] of Object.entries(spec.map))
+                row[target] = item[from];
+        }
+        if (spec.remaining) {
+            const remaining = toNum(item[spec.remaining.of]) - (spec.remaining.minus ? toNum(item[spec.remaining.minus]) : 0);
+            if (remaining <= 0)
+                continue; // line already fully satisfied → omit
+            row[spec.remaining.target] = remaining;
+        }
+        rows.push(row);
+    }
+    return rows;
+}
 export function ActionModalDispatcher({ open, onOpenChange, action, model, record, endpoint, onSuccess, }) {
     const CustomComponent = useMemo(() => getActionComponent(model, action.key), [model, action.key]);
     if (CustomComponent) {
@@ -83,14 +142,19 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
             const defaults = {};
             for (const field of action.fields) {
                 if (isLineItemsField(field)) {
-                    defaults[field.key] = field.defaultValue ?? [];
+                    const dv = lineItemsDefault(field);
+                    defaults[field.key] = isPrefillSpec(dv)
+                        ? buildPrefillRows(dv, record)
+                        : Array.isArray(dv)
+                            ? dv
+                            : [];
                     continue;
                 }
                 defaults[field.key] = field.defaultValue ?? (field.type === 'boolean' ? false : '');
             }
             setFormData(defaults);
         }
-    }, [open, action.fields]);
+    }, [open, action.fields, record]);
     const updateField = (key, value) => setFormData((prev) => ({ ...prev, [key]: value }));
     const execute = async () => {
         if (action.fields) {
@@ -161,7 +225,7 @@ formValues) {
     // Repeatable line-items group → row grid (value is an array of row objects).
     // The header form values flow in so a cell can depend on a header field.
     if (isLineItemsField(field)) {
-        return _jsx(DynamicLineItems, { field: field, value: value, onChange: onChange, formValues: formValues });
+        return _jsx(DynamicLineItems, { field: applyPrefillLock(field), value: value, onChange: onChange, formValues: formValues });
     }
     // Resolve the widget the same way DynamicForm does (explicit widget wins,
     // else inferred from type) so action modals and the standalone form stay in

package/dist/dynamic-line-items.js

@@ -91,7 +91,9 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
     // Async searchable picker per row cell — e.g. the account_id column of a
     // journal entry's debit/credit lines. Same widget as the flat form.
     if (widget === 'dynamic_select') {
-        return _jsx(DynamicSelectField, { field: field, value: value, onChange: onChange, dependsValue: dependsValue });
+        const ro = !!field.readonly ||
+            !!field.read_only;
+        return _jsx(DynamicSelectField, { field: field, value: value, onChange: onChange, dependsValue: dependsValue, readonly: ro });
     }
     if (widget === 'select' && (field.ref || getOptionsConfig(field)?.source)) {
         return (_jsx(RefCell, { field: field, value: value, onChange: onChange, disabled: disabled, formValues: formValues, rowValues: rowValues }));

package/dist/dynamic-select-field.d.ts

@@ -47,7 +47,15 @@ export interface DynamicSelectFieldProps {
     dependsValue?: string;
     /** Overrides the disabled-state hint shown while `dependsValue` is empty. */
     dependsHint?: string;
+    /**
+     * Renders the picker as a locked, non-interactive display of the current
+     * value's resolved label (no popover, no inline-create). Used when the value
+     * is fixed by context — e.g. the product of a receive-goods line is dictated
+     * by the source document, not chosen. Options are fetched eagerly (not just
+     * on open) so the label resolves to the NAME instead of showing the raw id.
+     */
+    readonly?: boolean;
 }
-export declare function DynamicSelectField({ field, value, onChange, seedOption, dependsValue, dependsHint, }: DynamicSelectFieldProps): import("react").JSX.Element;
+export declare function DynamicSelectField({ field, value, onChange, seedOption, dependsValue, dependsHint, readonly, }: DynamicSelectFieldProps): import("react").JSX.Element;
 export default DynamicSelectField;
 //# sourceMappingURL=dynamic-select-field.d.ts.map

package/dist/dynamic-select-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,gDAAgD,CAAA;AAEjF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4BzF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,GAAG,IAAI,CAAA;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCAwBA;AAqBD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,GACd,EAAE,uBAAuB,+BA4MzB;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAuCA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,wBAAwB,CAAA;AAEhF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,gDAAgD,CAAA;AAEjF;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,IAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BA4BzF;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACvB,MAAM,EACN,IAAS,GACZ,EAAE;IACC,MAAM,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC,GAAG,IAAI,CAAA;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;CAChB,sCAwBA;AAqBD,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAC1B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAClC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,UAAU,EACV,YAAY,EACZ,WAAW,EACX,QAAgB,GACnB,EAAE,uBAAuB,+BAsOzB;AAED,eAAe,kBAAkB,CAAA"}

package/dist/dynamic-select-field.js

@@ -85,7 +85,7 @@ function useDebounced(value, ms) {
     }, [value, ms]);
     return debounced;
 }
-export function DynamicSelectField({ field, value, onChange, seedOption, dependsValue, dependsHint, }) {
+export function DynamicSelectField({ field, value, onChange, seedOption, dependsValue, dependsHint, readonly = false, }) {
     const [open, setOpen] = useState(false);
     const [search, setSearch] = useState('');
     const debounced = useDebounced(search, 250);
@@ -120,8 +120,9 @@ export function DynamicSelectField({ field, value, onChange, seedOption, depends
         filterValue: dependsOn ? scope : undefined,
         // Don't fetch until the popover opens (and keep fetching as the query
         // changes while open). A picker blocked by an unset dependency never
-        // fetches.
-        enabled: open && !blockedByDependency,
+        // fetches. A readonly cell fetches eagerly so its value's label resolves
+        // to the name without the user ever opening it.
+        enabled: (open || readonly) && !blockedByDependency,
     });
     // When the depended-on value changes, the previously-picked option no longer
     // belongs to the new scope, so clear the selection (skip the initial mount).
@@ -175,6 +176,13 @@ export function DynamicSelectField({ field, value, onChange, seedOption, depends
             },
         }));
     };
+    // Locked display: the value is fixed by context, so render the resolved
+    // label (name) as a disabled control — no popover, no inline-create. While
+    // the eager fetch is in flight the label falls back to the seed/raw value,
+    // then snaps to the name once options arrive.
+    if (readonly) {
+        return (_jsx(Button, { type: "button", variant: "outline", role: "combobox", id: field.key, disabled: true, "aria-readonly": "true", className: "w-full min-w-0 cursor-default justify-start font-normal opacity-100", children: _jsxs("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: [hasVisual && value ? _jsx(OptionLead, { option: selectedOption, size: 20 }) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground'), children: selectedLabel || (loading ? 'Cargando…' : field.placeholder || '—') })] }) }));
+    }
     // w-full + min-w-0: as a grid cell child, the row must be allowed to shrink
     // to the cell. Without min-w-0 the combobox+button row sizes to its content
     // (the long empty-state placeholder) and overflows the column, pushing the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "18.26.0",
+  "version": "18.28.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/action-modal-dispatcher.tsx

@@ -53,6 +53,94 @@ import {
 
 export type { ActionMetadata, ActionModalProps }
 
+// ---- line-items prefill from the acted-on record ----------------------------
+//
+// A line-items action field can seed its rows from the record being acted on,
+// instead of opening empty. The manifest declares this by setting the field's
+// `default`/`defaultValue` to a PrefillSpec object: the modal reads the record's
+// `$prefillFromRecord` array, copies the mapped keys, and (for a receive-style
+// flow) computes a `remaining` quantity = of - minus, dropping fully-satisfied
+// rows. Decoupled + generic: the SDK knows nothing about transfers, only how to
+// project a record array into the field's item_fields. Example (receive goods):
+//
+//   "default": {
+//     "$prefillFromRecord": "items",
+//     "map": { "product_id": "product_id" },
+//     "remaining": { "target": "qty_received", "of": "quantity", "minus": "received" }
+//   }
+interface PrefillSpec {
+    $prefillFromRecord: string
+    map?: Record<string, string>
+    remaining?: { target: string; of: string; minus?: string }
+    /**
+     * Item-field keys to lock (render read-only) in the prefilled rows — e.g. the
+     * product of a receive-goods line is dictated by the source document, so it
+     * is shown as a resolved name but cannot be changed. Editable in the create
+     * flow (which carries no prefill spec); only the prefilled action locks them.
+     */
+    lock?: string[]
+}
+
+function isPrefillSpec(v: unknown): v is PrefillSpec {
+    return (
+        typeof v === 'object' &&
+        v !== null &&
+        typeof (v as { $prefillFromRecord?: unknown }).$prefillFromRecord === 'string'
+    )
+}
+
+// lineItemsDefault reads the field's declared default tolerating BOTH the
+// camelCase `defaultValue` the host serves and the snake/legacy `default` the
+// raw manifest carries (the kernel maps action-field `default` through without
+// renaming it to `defaultValue`).
+function lineItemsDefault(field: ActionFieldDef): unknown {
+    const f = field as { defaultValue?: unknown; default?: unknown }
+    return f.defaultValue ?? f.default
+}
+
+function toNum(v: unknown): number {
+    const n = typeof v === 'number' ? v : parseFloat(String(v ?? ''))
+    return Number.isFinite(n) ? n : 0
+}
+
+// applyPrefillLock marks the item-field columns named in a line-items field's
+// PrefillSpec.lock as read-only, so the prefilled cells (e.g. the product of a
+// receive line) render as a resolved, non-editable name. Returns the field
+// untouched when there is no prefill spec or no lock list (the create flow,
+// which carries no prefill, stays fully editable). The readonly flag is set on
+// BOTH itemFields aliases the renderers tolerate.
+function applyPrefillLock(field: ActionFieldDef): ActionFieldDef {
+    const spec = lineItemsDefault(field)
+    if (!isPrefillSpec(spec) || !spec.lock || spec.lock.length === 0) return field
+    const lock = new Set(spec.lock)
+    const f = field as ActionFieldDef & { itemFields?: any[]; item_fields?: any[] }
+    const items: any[] | undefined = f.itemFields ?? f.item_fields
+    if (!Array.isArray(items)) return field
+    const patched: any[] = items.map((c) => (c && c.key && lock.has(c.key) ? { ...c, readonly: true } : c))
+    return { ...(field as any), itemFields: patched, item_fields: patched } as ActionFieldDef
+}
+
+// buildPrefillRows projects record[spec.$prefillFromRecord] into modal rows.
+function buildPrefillRows(spec: PrefillSpec, record: any): Array<Record<string, any>> {
+    const src = record?.[spec.$prefillFromRecord]
+    if (!Array.isArray(src)) return []
+    const rows: Array<Record<string, any>> = []
+    for (const item of src) {
+        if (!item || typeof item !== 'object') continue
+        const row: Record<string, any> = {}
+        if (spec.map) {
+            for (const [target, from] of Object.entries(spec.map)) row[target] = item[from]
+        }
+        if (spec.remaining) {
+            const remaining = toNum(item[spec.remaining.of]) - (spec.remaining.minus ? toNum(item[spec.remaining.minus]) : 0)
+            if (remaining <= 0) continue // line already fully satisfied → omit
+            row[spec.remaining.target] = remaining
+        }
+        rows.push(row)
+    }
+    return rows
+}
+
 export function ActionModalDispatcher({
     open,
     onOpenChange,
@@ -188,14 +276,19 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
             const defaults: Record<string, any> = {}
             for (const field of action.fields) {
                 if (isLineItemsField(field)) {
-                    defaults[field.key] = field.defaultValue ?? []
+                    const dv = lineItemsDefault(field)
+                    defaults[field.key] = isPrefillSpec(dv)
+                        ? buildPrefillRows(dv, record)
+                        : Array.isArray(dv)
+                          ? dv
+                          : []
                     continue
                 }
                 defaults[field.key] = field.defaultValue ?? (field.type === 'boolean' ? false : '')
             }
             setFormData(defaults)
         }
-    }, [open, action.fields])
+    }, [open, action.fields, record])
 
     const updateField = (key: string, value: any) => setFormData((prev: Record<string, any>) => ({ ...prev, [key]: value }))
 
@@ -328,7 +421,7 @@ function renderField(
     // Repeatable line-items group → row grid (value is an array of row objects).
     // The header form values flow in so a cell can depend on a header field.
     if (isLineItemsField(field)) {
-        return <DynamicLineItems field={field} value={value} onChange={onChange} formValues={formValues} />
+        return <DynamicLineItems field={applyPrefillLock(field)} value={value} onChange={onChange} formValues={formValues} />
     }
     // Resolve the widget the same way DynamicForm does (explicit widget wins,
     // else inferred from type) so action modals and the standalone form stay in

package/src/dynamic-line-items.tsx

@@ -267,7 +267,9 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
     // Async searchable picker per row cell — e.g. the account_id column of a
     // journal entry's debit/credit lines. Same widget as the flat form.
     if (widget === 'dynamic_select') {
-        return <DynamicSelectField field={field} value={value} onChange={onChange} dependsValue={dependsValue} />
+        const ro = !!(field as { readonly?: boolean; read_only?: boolean }).readonly ||
+            !!(field as { readonly?: boolean; read_only?: boolean }).read_only
+        return <DynamicSelectField field={field} value={value} onChange={onChange} dependsValue={dependsValue} readonly={ro} />
     }
     if (widget === 'select' && (field.ref || getOptionsConfig(field)?.source)) {
         return (

package/src/dynamic-select-field.tsx

@@ -162,6 +162,14 @@ export interface DynamicSelectFieldProps {
     dependsValue?: string
     /** Overrides the disabled-state hint shown while `dependsValue` is empty. */
     dependsHint?: string
+    /**
+     * Renders the picker as a locked, non-interactive display of the current
+     * value's resolved label (no popover, no inline-create). Used when the value
+     * is fixed by context — e.g. the product of a receive-goods line is dictated
+     * by the source document, not chosen. Options are fetched eagerly (not just
+     * on open) so the label resolves to the NAME instead of showing the raw id.
+     */
+    readonly?: boolean
 }
 
 export function DynamicSelectField({
@@ -171,6 +179,7 @@ export function DynamicSelectField({
     seedOption,
     dependsValue,
     dependsHint,
+    readonly = false,
 }: DynamicSelectFieldProps) {
     const [open, setOpen] = useState(false)
     const [search, setSearch] = useState('')
@@ -210,8 +219,9 @@ export function DynamicSelectField({
         filterValue: dependsOn ? scope : undefined,
         // Don't fetch until the popover opens (and keep fetching as the query
         // changes while open). A picker blocked by an unset dependency never
-        // fetches.
-        enabled: open && !blockedByDependency,
+        // fetches. A readonly cell fetches eagerly so its value's label resolves
+        // to the name without the user ever opening it.
+        enabled: (open || readonly) && !blockedByDependency,
     })
 
     // When the depended-on value changes, the previously-picked option no longer
@@ -272,6 +282,31 @@ export function DynamicSelectField({
         )
     }
 
+    // Locked display: the value is fixed by context, so render the resolved
+    // label (name) as a disabled control — no popover, no inline-create. While
+    // the eager fetch is in flight the label falls back to the seed/raw value,
+    // then snaps to the name once options arrive.
+    if (readonly) {
+        return (
+            <Button
+                type="button"
+                variant="outline"
+                role="combobox"
+                id={field.key}
+                disabled
+                aria-readonly="true"
+                className="w-full min-w-0 cursor-default justify-start font-normal opacity-100"
+            >
+                <span className="flex min-w-0 flex-1 items-center gap-2 text-left">
+                    {hasVisual && value ? <OptionLead option={selectedOption} size={20} /> : null}
+                    <span className={'min-w-0 flex-1 truncate ' + (selectedLabel ? '' : 'text-muted-foreground')}>
+                        {selectedLabel || (loading ? 'Cargando…' : field.placeholder || '—')}
+                    </span>
+                </span>
+            </Button>
+        )
+    }
+
     // w-full + min-w-0: as a grid cell child, the row must be allowed to shrink
     // to the cell. Without min-w-0 the combobox+button row sizes to its content
     // (the long empty-state placeholder) and overflows the column, pushing the