@asteby/metacore-runtime-react 18.28.0 → 18.28.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 18.28.2
+
+### Patch Changes
+
+- 1896101: fix(line-items): non-select cells (number/text/date/switch/select/textarea) now honor a per-field `readonly` flag (set via PrefillSpec.lock), rendering disabled. Lets a receive-goods modal show read-only progress columns (ordered / already-received) alongside the editable qty.
+
+## 18.28.1
+
+### Patch Changes
+
+- f346352: fix(line-items): a locked dynamic_select no longer flashes the raw id while its label is resolving — it shows a loading hint, then the name + thumbnail, instead of String(value).
+
 ## 18.28.0
 
 ### Minor Changes

package/dist/dynamic-line-items.js

@@ -83,6 +83,13 @@ function BalanceBadge({ state, }) {
 // a scalar widget).
 function CellRenderer({ field, value, onChange, disabled, formValues, rowValues }) {
     const widget = resolveWidget(field);
+    // Per-field read-only: a column locked by a PrefillSpec.lock (e.g. the
+    // "ordered" / "already received" progress columns of a receive-goods modal)
+    // renders disabled so it shows context without being editable. Tolerates the
+    // snake_case alias the kernel may serve.
+    const ro = !!field.readonly ||
+        !!field.read_only;
+    const off = disabled || ro;
     // Cascade scope for a cell with `dependsOn`: resolved from this row first
     // (a sibling cell) then the header form (e.g. `source_warehouse_id`).
     const dependsValue = getDependsOn(field)
@@ -91,8 +98,6 @@ 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') {
-        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)) {
@@ -101,19 +106,19 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
     switch (widget) {
         case 'textarea':
         case 'richtext':
-            return (_jsx(Textarea, { value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder, disabled: disabled, rows: 2 }));
+            return (_jsx(Textarea, { value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder, disabled: off, rows: 2 }));
         case 'color':
-            return (_jsx(Input, { type: "color", value: value || '#000000', onChange: (e) => onChange(e.target.value), disabled: disabled }));
+            return (_jsx(Input, { type: "color", value: value || '#000000', onChange: (e) => onChange(e.target.value), disabled: off }));
         case 'select':
-            return (_jsxs(Select, { value: value || '', onValueChange: onChange, disabled: disabled, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: field.placeholder || 'Seleccionar...' }) }), _jsx(SelectContent, { children: field.options?.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }));
+            return (_jsxs(Select, { value: value || '', onValueChange: onChange, disabled: off, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: field.placeholder || 'Seleccionar...' }) }), _jsx(SelectContent, { children: field.options?.map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }));
         case 'switch':
-            return _jsx(Switch, { checked: !!value, onCheckedChange: onChange, disabled: disabled });
+            return _jsx(Switch, { checked: !!value, onCheckedChange: onChange, disabled: off });
         case 'number':
-            return (_jsx(Input, { type: "number", value: value ?? '', onChange: (e) => onChange(e.target.valueAsNumber || ''), placeholder: field.placeholder, disabled: disabled }));
+            return (_jsx(Input, { type: "number", value: value ?? '', onChange: (e) => onChange(e.target.valueAsNumber || ''), placeholder: field.placeholder, disabled: off }));
         case 'date':
-            return (_jsx(Input, { type: "date", value: value || '', onChange: (e) => onChange(e.target.value), disabled: disabled }));
+            return (_jsx(Input, { type: "date", value: value || '', onChange: (e) => onChange(e.target.value), disabled: off }));
         default:
-            return (_jsx(Input, { type: field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text', value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder, disabled: disabled }));
+            return (_jsx(Input, { type: field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text', value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder, disabled: off }));
     }
 }
 function RefCell({ field, value, onChange, disabled, formValues, rowValues }) {

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;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"}
+{"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,+BAwOzB;AAED,eAAe,kBAAkB,CAAA"}

package/dist/dynamic-select-field.js

@@ -181,7 +181,7 @@ export function DynamicSelectField({ field, value, onChange, seedOption, depends
     // 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 || '—') })] }) }));
+        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: [selectedOption ? _jsx(OptionLead, { option: selectedOption, size: 20 }) : null, _jsx("span", { className: 'min-w-0 flex-1 truncate ' + (selectedOption ? '' : 'text-muted-foreground'), children: selectedOption?.label ?? (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

package/package.json

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

package/src/dynamic-line-items.tsx

@@ -259,6 +259,13 @@ interface CellRendererProps {
 // a scalar widget).
 function CellRenderer({ field, value, onChange, disabled, formValues, rowValues }: CellRendererProps) {
     const widget = resolveWidget(field)
+    // Per-field read-only: a column locked by a PrefillSpec.lock (e.g. the
+    // "ordered" / "already received" progress columns of a receive-goods modal)
+    // renders disabled so it shows context without being editable. Tolerates the
+    // snake_case alias the kernel may serve.
+    const ro = !!(field as { readonly?: boolean; read_only?: boolean }).readonly ||
+        !!(field as { readonly?: boolean; read_only?: boolean }).read_only
+    const off = disabled || ro
     // Cascade scope for a cell with `dependsOn`: resolved from this row first
     // (a sibling cell) then the header form (e.g. `source_warehouse_id`).
     const dependsValue = getDependsOn(field)
@@ -267,8 +274,6 @@ 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') {
-        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)) {
@@ -291,7 +296,7 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     value={value || ''}
                     onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => onChange(e.target.value)}
                     placeholder={field.placeholder}
-                    disabled={disabled}
+                    disabled={off}
                     rows={2}
                 />
             )
@@ -301,12 +306,12 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     type="color"
                     value={value || '#000000'}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
-                    disabled={disabled}
+                    disabled={off}
                 />
             )
         case 'select':
             return (
-                <Select value={value || ''} onValueChange={onChange} disabled={disabled}>
+                <Select value={value || ''} onValueChange={onChange} disabled={off}>
                     <SelectTrigger className="w-full">
                         <SelectValue placeholder={field.placeholder || 'Seleccionar...'} />
                     </SelectTrigger>
@@ -320,7 +325,7 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                 </Select>
             )
         case 'switch':
-            return <Switch checked={!!value} onCheckedChange={onChange} disabled={disabled} />
+            return <Switch checked={!!value} onCheckedChange={onChange} disabled={off} />
         case 'number':
             return (
                 <Input
@@ -328,7 +333,7 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     value={value ?? ''}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.valueAsNumber || '')}
                     placeholder={field.placeholder}
-                    disabled={disabled}
+                    disabled={off}
                 />
             )
         case 'date':
@@ -337,7 +342,7 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     type="date"
                     value={value || ''}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
-                    disabled={disabled}
+                    disabled={off}
                 />
             )
         default:
@@ -347,7 +352,7 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     value={value || ''}
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value)}
                     placeholder={field.placeholder}
-                    disabled={disabled}
+                    disabled={off}
                 />
             )
     }

package/src/dynamic-select-field.tsx

@@ -298,9 +298,11 @@ export function DynamicSelectField({
                 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 || '—')}
+                    {selectedOption ? <OptionLead option={selectedOption} size={20} /> : null}
+                    <span className={'min-w-0 flex-1 truncate ' + (selectedOption ? '' : 'text-muted-foreground')}>
+                        {/* Never flash the raw id: until the eager fetch resolves the
+                            option, show a loading hint instead of String(value). */}
+                        {selectedOption?.label ?? (loading ? 'Cargando…' : field.placeholder || '—')}
                     </span>
                 </span>
             </Button>