@asteby/metacore-runtime-react 13.7.0 → 13.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @asteby/metacore-runtime-react
 
+## 13.8.1
+
+### Patch Changes
+
+- efac939: fix(dynamic-select): the inline-create "+" no longer overlaps the combobox. The trigger used `w-full` which, in the flex row beside the "+", forced 100% width and overlapped the button in narrow (2-column) modal grids. Use `flex-1 min-w-0` so it grows to fill the space left for the "+".
+
+## 13.8.0
+
+### Minor Changes
+
+- ab80937: feat(dynamic-select): inline "+" to create the referenced record. A dynamic_select with a `ref` now shows a "+" button that opens the referenced model's OWN create modal (via a decoupled `metacore:create-record` window event the host handles) and auto-selects the newly created record. Lets users add a missing Category/Brand/etc. without leaving the form.
+
 ## 13.7.0
 
 ### Minor Changes

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,2CA0GrF;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,2CAgJrF;AAED,eAAe,kBAAkB,CAAA"}

package/dist/dynamic-select-field.js

@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // case — start empty and never hit this.
 import { useEffect, useState } from 'react';
 import { Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Popover, PopoverContent, PopoverTrigger, } from '@asteby/metacore-ui/primitives';
-import { Check, ChevronsUpDown, Loader2 } from 'lucide-react';
+import { Check, ChevronsUpDown, Loader2, Plus } from 'lucide-react';
 import { useOptionsResolver } from './use-options-resolver';
 function useDebounced(value, ms) {
     const [debounced, setDebounced] = useState(value);
@@ -63,12 +63,33 @@ export function DynamicSelectField({ field, value, onChange }) {
         setOpen(false);
         setSearch('');
     };
-    return (_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: "w-full justify-between font-normal", "data-empty": !value, children: [_jsx("span", { className: 'truncate ' + (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) => {
-                                        const isSel = String(opt.id) === String(value);
-                                        return (_jsxs(CommandItem, { value: String(opt.id), onSelect: () => handlePick(opt), children: [_jsx(Check, { className: 'mr-2 size-4 ' + (isSel ? 'opacity-100' : 'opacity-0') }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: opt.label }), opt.description && (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: opt.description }))] })] }, String(opt.id)));
-                                    }) }))] })] }) })] }));
+    // Inline-create: the "+" opens the REFERENCED model's own create modal (the
+    // real one the host renders for that model — full fields, not a duplicate),
+    // via a decoupled window event the host listens for. On success the host
+    // hands back the new record and we select it immediately. No host import →
+    // no circular dependency; works for ANY dynamic_select with a `ref`.
+    const openCreate = () => {
+        if (!field.ref || typeof window === 'undefined')
+            return;
+        window.dispatchEvent(new CustomEvent('metacore:create-record', {
+            detail: {
+                model: field.ref,
+                onCreated: (rec) => {
+                    if (rec && rec.id != null) {
+                        const id = String(rec.id);
+                        const label = String(rec.name ?? rec.label ?? rec.title ?? rec.id);
+                        handlePick({ id, value: id, label, name: label });
+                    }
+                },
+            },
+        }));
+    };
+    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: 'truncate ' + (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) => {
+                                                const isSel = String(opt.id) === String(value);
+                                                return (_jsxs(CommandItem, { value: String(opt.id), onSelect: () => handlePick(opt), children: [_jsx(Check, { className: 'mr-2 size-4 ' + (isSel ? 'opacity-100' : 'opacity-0') }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate", children: opt.label }), opt.description && (_jsx("span", { className: "text-muted-foreground truncate text-xs", children: opt.description }))] })] }, String(opt.id)));
+                                            }) }))] })] }) })] }), field.ref && (_jsx(Button, { type: "button", variant: "outline", size: "icon", className: "size-9 shrink-0", onClick: openCreate, title: `Crear ${field.label ?? field.ref}`, "aria-label": `Crear ${field.label ?? field.ref}`, children: _jsx(Plus, { className: "size-4" }) }))] }));
 }
 export default DynamicSelectField;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "13.7.0",
+  "version": "13.8.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -61,8 +61,8 @@
     "typescript": "^6.0.0",
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
-    "@asteby/metacore-sdk": "3.1.0",
-    "@asteby/metacore-ui": "2.1.1"
+    "@asteby/metacore-ui": "2.1.1",
+    "@asteby/metacore-sdk": "3.1.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dynamic-select-field.tsx

@@ -34,7 +34,7 @@ import {
     PopoverContent,
     PopoverTrigger,
 } from '@asteby/metacore-ui/primitives'
-import { Check, ChevronsUpDown, Loader2 } from 'lucide-react'
+import { Check, ChevronsUpDown, Loader2, Plus } from 'lucide-react'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
 import type { ActionFieldDef } from './types'
 
@@ -87,8 +87,32 @@ export function DynamicSelectField({ field, value, onChange }: DynamicSelectFiel
         setSearch('')
     }
 
+    // Inline-create: the "+" opens the REFERENCED model's own create modal (the
+    // real one the host renders for that model — full fields, not a duplicate),
+    // via a decoupled window event the host listens for. On success the host
+    // hands back the new record and we select it immediately. No host import →
+    // no circular dependency; works for ANY dynamic_select with a `ref`.
+    const openCreate = () => {
+        if (!field.ref || typeof window === 'undefined') return
+        window.dispatchEvent(
+            new CustomEvent('metacore:create-record', {
+                detail: {
+                    model: field.ref,
+                    onCreated: (rec: any) => {
+                        if (rec && rec.id != null) {
+                            const id = String(rec.id)
+                            const label = String(rec.name ?? rec.label ?? rec.title ?? rec.id)
+                            handlePick({ id, value: id, label, name: label })
+                        }
+                    },
+                },
+            }),
+        )
+    }
+
     return (
-        <Popover open={open} onOpenChange={setOpen}>
+        <div className="flex items-center gap-1.5">
+            <Popover open={open} onOpenChange={setOpen}>
             <PopoverTrigger asChild>
                 <Button
                     type="button"
@@ -96,7 +120,7 @@ export function DynamicSelectField({ field, value, onChange }: DynamicSelectFiel
                     role="combobox"
                     aria-expanded={open}
                     id={field.key}
-                    className="w-full justify-between font-normal"
+                    className="min-w-0 flex-1 justify-between font-normal"
                     data-empty={!value}
                 >
                     <span className={'truncate ' + (selectedLabel ? '' : 'text-muted-foreground')}>
@@ -157,7 +181,21 @@ export function DynamicSelectField({ field, value, onChange }: DynamicSelectFiel
                     </CommandList>
                 </Command>
             </PopoverContent>
-        </Popover>
+            </Popover>
+            {field.ref && (
+                <Button
+                    type="button"
+                    variant="outline"
+                    size="icon"
+                    className="size-9 shrink-0"
+                    onClick={openCreate}
+                    title={`Crear ${field.label ?? field.ref}`}
+                    aria-label={`Crear ${field.label ?? field.ref}`}
+                >
+                    <Plus className="size-4" />
+                </Button>
+            )}
+        </div>
     )
 }