@asteby/metacore-runtime-react 13.8.2 → 13.8.5

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @asteby/metacore-runtime-react
 
+## 13.8.5
+
+### Patch Changes
+
+- acb5dcc: fix: every basic `select` field fills its column (`w-full`). shadcn's SelectTrigger defaults to `w-fit`, so enum/option selects shrank to their content instead of aligning with text inputs and FK comboboxes. Covers the declarative action modal (`ActionModalDispatcher`), the record dialog, and line-item rows — the actual renderers behind a model's `placement:create` modal.
+
+## 13.8.4
+
+### Patch Changes
+
+- 7465943: fix(dynamic-form): basic `select` fields fill their column (`w-full`). shadcn's SelectTrigger defaults to `w-fit`, so enum/option selects shrank to their content instead of lining up with text inputs and FK comboboxes. Applies to both the plain `select` renderer and `RefSelect`.
+
+## 13.8.3
+
+### Patch Changes
+
+- dc3d079: fix(dynamic-select): constrain the combobox+"+" row to its grid cell. The wrapper lacked `w-full min-w-0`, so in a 2-column form the row sized to its content (the long empty-state placeholder) and overflowed the column, pushing the inline-create "+" off-screen — it only fit once a short value was selected. Add `w-full min-w-0`.
+- 177415d: fix(dynamic-select): repair JSX syntax broken in #332 — the wrapper-row comment was a sibling of the root element inside `return (`, which is invalid and failed the release build (TS1005). Moved it to a `//` comment above `return`. The `w-full min-w-0` grid-cell constraint (the actual `+`-overlap fix) is unchanged.
+
 ## 13.8.2
 
 ### Patch Changes

package/dist/action-modal-dispatcher.js

@@ -165,7 +165,7 @@ function renderField(field, value, onChange) {
         case 'textarea':
             return _jsx(Textarea, { id: field.key, value: value || '', onChange: (e) => onChange(e.target.value), placeholder: field.placeholder });
         case 'select':
-            return (_jsxs(Select, { value: value || '', onValueChange: onChange, children: [_jsx(SelectTrigger, { 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, 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, { id: field.key, checked: !!value, onCheckedChange: onChange });
         case 'number':

package/dist/dialogs/dynamic-record.js

@@ -270,7 +270,7 @@ function EditField({ field, value, onChange }) {
         return _jsx(SearchField, { field: { ...field, type: 'search' }, value: value, onChange: onChange });
     }
     if (field.type === 'select' && field.options?.length) {
-        return (_jsxs(Select, { value: String(value ?? ''), onValueChange: onChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Seleccionar..." }) }), _jsx(SelectContent, { children: field.options.map(opt => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }));
+        return (_jsxs(Select, { value: String(value ?? ''), onValueChange: onChange, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: "Seleccionar..." }) }), _jsx(SelectContent, { children: field.options.map(opt => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value))) })] }));
     }
     if (field.type === 'color') {
         return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { type: "color", value: value || '#6366f1', onChange: (e) => onChange(e.target.value), className: "h-9 w-14 cursor-pointer rounded-md border p-1" }), _jsx(Input, { value: value || '', onChange: (e) => onChange(e.target.value), placeholder: "#6366f1", className: "flex-1 h-9" })] }));

package/dist/dynamic-form.js

@@ -116,7 +116,7 @@ function FieldRenderer({ field, value, onChange }) {
         case 'color':
             return _jsx(Input, { id: field.key, type: "color", value: value || '#000000', onChange: (e) => onChange(e.target.value) });
         case 'select':
-            return (_jsxs(Select, { value: value || '', onValueChange: onChange, children: [_jsx(SelectTrigger, { 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, 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, { id: field.key, checked: !!value, onCheckedChange: onChange });
         case 'number':
@@ -133,5 +133,5 @@ function RefSelect({ field, value, onChange }) {
         fieldKey: 'id',
         ref: field.ref,
     });
-    return (_jsxs(Select, { value: value || '', onValueChange: onChange, disabled: loading, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: loading ? 'Cargando…' : (field.placeholder || 'Seleccionar...') }) }), _jsx(SelectContent, { children: options.map((opt) => (_jsx(SelectItem, { value: String(opt.id), children: opt.label }, String(opt.id)))) })] }));
+    return (_jsxs(Select, { value: value || '', onValueChange: onChange, disabled: loading, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: loading ? 'Cargando…' : (field.placeholder || 'Seleccionar...') }) }), _jsx(SelectContent, { children: options.map((opt) => (_jsx(SelectItem, { value: String(opt.id), children: opt.label }, String(opt.id)))) })] }));
 }

package/dist/dynamic-line-items.js

@@ -97,7 +97,7 @@ function CellRenderer({ field, value, onChange, disabled }) {
         case 'color':
             return (_jsx(Input, { type: "color", value: value || '#000000', onChange: (e) => onChange(e.target.value), disabled: disabled }));
         case 'select':
-            return (_jsxs(Select, { value: value || '', onValueChange: onChange, disabled: disabled, children: [_jsx(SelectTrigger, { 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: 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))) })] }));
         case 'switch':
             return _jsx(Switch, { checked: !!value, onCheckedChange: onChange, disabled: disabled });
         case 'number':
@@ -114,5 +114,5 @@ function RefCell({ field, value, onChange, disabled }) {
         fieldKey: 'id',
         ref: field.ref,
     });
-    return (_jsxs(Select, { value: value || '', onValueChange: onChange, disabled: disabled || loading, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: loading ? 'Cargando…' : field.placeholder || 'Seleccionar...' }) }), _jsx(SelectContent, { children: options.map((opt) => (_jsx(SelectItem, { value: String(opt.id), children: opt.label }, String(opt.id)))) })] }));
+    return (_jsxs(Select, { value: value || '', onValueChange: onChange, disabled: disabled || loading, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: loading ? 'Cargando…' : field.placeholder || 'Seleccionar...' }) }), _jsx(SelectContent, { children: options.map((opt) => (_jsx(SelectItem, { value: String(opt.id), children: opt.label }, String(opt.id)))) })] }));
 }

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":"AAsCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAW7C,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAgJrF;AAED,eAAe,kBAAkB,CAAA"}
+{"version":3,"file":"dynamic-select-field.d.ts","sourceRoot":"","sources":["../src/dynamic-select-field.tsx"],"names":[],"mappings":"AAsCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAW7C,MAAM,WAAW,uBAAuB;IACpC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAoJrF;AAED,eAAe,kBAAkB,CAAA"}

package/dist/dynamic-select-field.js

@@ -84,7 +84,11 @@ export function DynamicSelectField({ field, value, onChange }) {
             },
         }));
     };
-    return (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, className: "min-w-0 flex-1 justify-between font-normal", "data-empty": !value, children: [_jsx("span", { className: 'min-w-0 flex-1 truncate text-left ' + (selectedLabel ? '' : 'text-muted-foreground'), children: selectedLabel || field.placeholder || 'Buscar…' }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0", align: "start", 
+    // 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
+    // "+" off-screen — it only "fit" once a short value was selected.
+    return (_jsxs("div", { className: "flex w-full min-w-0 items-center gap-1.5", children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", role: "combobox", "aria-expanded": open, id: field.key, className: "min-w-0 flex-1 justify-between font-normal", "data-empty": !value, children: [_jsx("span", { className: 'min-w-0 flex-1 truncate text-left ' + (selectedLabel ? '' : 'text-muted-foreground'), children: selectedLabel || field.placeholder || 'Buscar…' }), _jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })] }) }), _jsx(PopoverContent, { className: "p-0", align: "start", 
                         // Match the trigger width without an arbitrary Tailwind class
                         // (those don't always survive a consuming app's Tailwind scan).
                         style: { width: 'var(--radix-popover-trigger-width)' }, children: _jsxs(Command, { shouldFilter: false, children: [_jsx(CommandInput, { placeholder: field.placeholder || 'Buscar…', value: search, onValueChange: setSearch }), _jsxs(CommandList, { children: [loading && (_jsxs("div", { className: "text-muted-foreground flex items-center justify-center gap-2 py-6 text-sm", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), "Buscando\u2026"] })), !loading && options.length === 0 && (_jsx(CommandEmpty, { children: debounced ? 'Sin resultados' : 'Escribí para buscar…' })), !loading && options.length > 0 && (_jsx(CommandGroup, { className: "max-h-64 overflow-auto", children: options.map((opt) => {

package/package.json

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

package/src/action-modal-dispatcher.tsx

@@ -334,7 +334,7 @@ function renderField(
         case 'select':
             return (
                 <Select value={value || ''} onValueChange={onChange}>
-                    <SelectTrigger><SelectValue placeholder={field.placeholder || 'Seleccionar...'} /></SelectTrigger>
+                    <SelectTrigger className="w-full"><SelectValue placeholder={field.placeholder || 'Seleccionar...'} /></SelectTrigger>
                     <SelectContent>
                         {field.options?.map((opt) => <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>)}
                     </SelectContent>

package/src/dialogs/dynamic-record.tsx

@@ -581,7 +581,7 @@ function EditField({ field, value, onChange }: {
     if (field.type === 'select' && field.options?.length) {
         return (
             <Select value={String(value ?? '')} onValueChange={onChange}>
-                <SelectTrigger>
+                <SelectTrigger className="w-full">
                     <SelectValue placeholder="Seleccionar..." />
                 </SelectTrigger>
                 <SelectContent>

package/src/dynamic-form.tsx

@@ -195,7 +195,7 @@ function FieldRenderer({ field, value, onChange }: FieldRendererProps) {
         case 'select':
             return (
                 <Select value={value || ''} onValueChange={onChange}>
-                    <SelectTrigger><SelectValue placeholder={field.placeholder || 'Seleccionar...'} /></SelectTrigger>
+                    <SelectTrigger className="w-full"><SelectValue placeholder={field.placeholder || 'Seleccionar...'} /></SelectTrigger>
                     <SelectContent>
                         {field.options?.map((opt) => <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>)}
                     </SelectContent>
@@ -220,7 +220,7 @@ function RefSelect({ field, value, onChange }: FieldRendererProps) {
     })
     return (
         <Select value={value || ''} onValueChange={onChange} disabled={loading}>
-            <SelectTrigger>
+            <SelectTrigger className="w-full">
                 <SelectValue placeholder={loading ? 'Cargando…' : (field.placeholder || 'Seleccionar...')} />
             </SelectTrigger>
             <SelectContent>

package/src/dynamic-line-items.tsx

@@ -274,7 +274,7 @@ function CellRenderer({ field, value, onChange, disabled }: CellRendererProps) {
         case 'select':
             return (
                 <Select value={value || ''} onValueChange={onChange} disabled={disabled}>
-                    <SelectTrigger>
+                    <SelectTrigger className="w-full">
                         <SelectValue placeholder={field.placeholder || 'Seleccionar...'} />
                     </SelectTrigger>
                     <SelectContent>
@@ -328,7 +328,7 @@ function RefCell({ field, value, onChange, disabled }: CellRendererProps) {
     })
     return (
         <Select value={value || ''} onValueChange={onChange} disabled={disabled || loading}>
-            <SelectTrigger>
+            <SelectTrigger className="w-full">
                 <SelectValue placeholder={loading ? 'Cargando…' : field.placeholder || 'Seleccionar...'} />
             </SelectTrigger>
             <SelectContent>

package/src/dynamic-select-field.tsx

@@ -110,8 +110,12 @@ export function DynamicSelectField({ field, value, onChange }: DynamicSelectFiel
         )
     }
 
+    // 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
+    // "+" off-screen — it only "fit" once a short value was selected.
     return (
-        <div className="flex items-center gap-1.5">
+        <div className="flex w-full min-w-0 items-center gap-1.5">
             <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
                 <Button