@asteby/metacore-runtime-react 28.3.2 → 28.3.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @asteby/metacore-runtime-react
 
+## 28.3.4
+
+### Patch Changes
+
+- 85ba41b: El popover del selector de íconos ya no se corta dentro de modales altos: su
+  alto se limita al espacio disponible que mide Radix (min 24rem / available
+  height) con layout flex (buscador fijo + lista que scrollea), abriendo hacia
+  abajo.
+
+## 28.3.3
+
+### Patch Changes
+
+- 99c476a: El selector de íconos es ahora un combobox: un botón que muestra el ícono y
+  nombre elegido y abre un popover al click (no la grilla siempre abierta), con
+  buscador, cada opción con su glifo y su nombre, y carga incremental al hacer
+  scroll (el catálogo lucide son ~1500 íconos).
+
 ## 28.3.2
 
 ### Patch Changes

package/dist/icon-picker-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-picker-field.d.ts","sourceRoot":"","sources":["../src/icon-picker-field.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AAOD,sFAAsF;AACtF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAE3D;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BAiG/E"}
+{"version":3,"file":"icon-picker-field.d.ts","sourceRoot":"","sources":["../src/icon-picker-field.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,MAAM,WAAW,oBAAoB;IACjC,KAAK,EAAE,cAAc,CAAA;IACrB,KAAK,EAAE,GAAG,CAAA;IACV,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAC7B;AAQD,sFAAsF;AACtF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAE3D;AAED,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,oBAAoB,+BAsJ/E"}

package/dist/icon-picker-field.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // IconPickerField — the `icon` widget renderer for DynamicForm. Two modes:
 //
 //   - "Ícono" (default): search box + grid of lucide glyphs filtered by name.
@@ -14,11 +14,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // means image, anything else means icon.
 import { useMemo, useState } from 'react';
 import { icons } from 'lucide-react';
-import { Button, Input } from '@asteby/metacore-ui/primitives';
+import { ChevronsUpDown } from 'lucide-react';
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, } from '@asteby/metacore-ui/primitives';
 import { DynamicIcon, resolveLucideIconName } from './dynamic-icon';
 import { UploadField } from './upload-field';
-/** Max glyphs shown in the grid at once — keeps the DOM light while searching. */
-const MAX_RESULTS = 48;
+/** Icons rendered per "page" — grows as the user scrolls to the bottom. Keeps
+ * the DOM light: the lucide catalog is ~1500 glyphs, so we never mount them all. */
+const PAGE = 60;
 const ALL_ICON_NAMES = Object.keys(icons);
 /** True when a stored value looks like an image url/path rather than an icon name. */
 export function looksLikeImageValue(value) {
@@ -26,18 +28,49 @@ export function looksLikeImageValue(value) {
 }
 export function IconPickerField({ field, value, onChange }) {
     const [mode, setMode] = useState(() => looksLikeImageValue(value) ? 'image' : 'icon');
+    const [open, setOpen] = useState(false);
     const [query, setQuery] = useState('');
+    const [limit, setLimit] = useState(PAGE);
     const selected = mode === 'icon' ? resolveLucideIconName(value) : null;
-    const results = useMemo(() => {
+    // Full match list (names only) — filtered by query, not yet capped.
+    const matches = useMemo(() => {
         const q = query.trim().toLowerCase().replace(/[\s_-]/g, '');
-        const names = q
+        return q
             ? ALL_ICON_NAMES.filter((n) => n.toLowerCase().includes(q))
             : ALL_ICON_NAMES;
-        // Keep the current selection visible even when it doesn't match the query.
-        if (selected && !names.slice(0, MAX_RESULTS).includes(selected)) {
-            return [selected, ...names.filter((n) => n !== selected)].slice(0, MAX_RESULTS);
-        }
-        return names.slice(0, MAX_RESULTS);
-    }, [query, selected]);
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex gap-1", role: "tablist", "aria-label": "Tipo de \u00EDcono", children: [_jsx(Button, { type: "button", role: "tab", "aria-selected": mode === 'icon', variant: mode === 'icon' ? 'secondary' : 'ghost', size: "sm", onClick: () => setMode('icon'), children: "\u00CDcono" }), _jsx(Button, { type: "button", role: "tab", "aria-selected": mode === 'image', variant: mode === 'image' ? 'secondary' : 'ghost', size: "sm", onClick: () => setMode('image'), children: "Imagen" })] }), mode === 'image' ? (_jsx(UploadField, { field: field, value: value, onChange: onChange })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Input, { id: field.key, value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Buscar \u00EDcono...", "aria-label": "Buscar \u00EDcono" }), selected && (_jsx("div", { "data-testid": "icon-picker-preview", className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-muted", title: selected, children: _jsx(DynamicIcon, { name: selected, className: "h-6 w-6" }) }))] }), _jsxs("div", { className: "grid max-h-56 grid-cols-8 gap-1 overflow-y-auto rounded-md border p-2", role: "listbox", "aria-label": "\u00CDconos", children: [results.map((name) => (_jsx("button", { type: "button", role: "option", "aria-selected": name === selected, "aria-label": name, title: name, onClick: () => onChange(name), className: `flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent ${name === selected ? 'bg-accent ring-1 ring-primary' : ''}`, children: _jsx(DynamicIcon, { name: name, className: "h-4 w-4" }) }, name))), results.length === 0 && (_jsx("span", { className: "col-span-8 py-4 text-center text-sm text-muted-foreground", children: "Sin resultados" }))] })] }))] }));
+    }, [query]);
+    // Visible slice — grows on scroll (see onScroll below).
+    const visible = matches.slice(0, limit);
+    const pick = (name) => {
+        onChange(name);
+        setOpen(false);
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex gap-1", role: "tablist", "aria-label": "Tipo de \u00EDcono", children: [_jsx(Button, { type: "button", role: "tab", "aria-selected": mode === 'icon', variant: mode === 'icon' ? 'secondary' : 'ghost', size: "sm", onClick: () => setMode('icon'), children: "\u00CDcono" }), _jsx(Button, { type: "button", role: "tab", "aria-selected": mode === 'image', variant: mode === 'image' ? 'secondary' : 'ghost', size: "sm", onClick: () => setMode('image'), children: "Imagen" })] }), mode === 'image' ? (_jsx(UploadField, { field: field, value: value, onChange: onChange })) : (_jsxs(Popover, { open: open, onOpenChange: (o) => {
+                    setOpen(o);
+                    if (o) {
+                        // Fresh open: reset the search + paging.
+                        setQuery('');
+                        setLimit(PAGE);
+                    }
+                }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: field.key, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, className: "w-full justify-between font-normal", children: [_jsx("span", { className: "flex min-w-0 items-center gap-2", children: selected ? (_jsxs(_Fragment, { children: [_jsx(DynamicIcon, { name: selected, className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: selected })] })) : (_jsx("span", { className: "text-muted-foreground", children: "Selecciona un \u00EDcono\u2026" })) }), _jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })] }) }), _jsxs(PopoverContent
+                    // Cap the panel to the space Radix measured between the
+                    // trigger and the viewport edge so it can NEVER overflow
+                    // off-screen (the old fixed max-h clipped inside tall
+                    // modals). Prefer opening downward; flip only if needed.
+                    , { 
+                        // Cap the panel to the space Radix measured between the
+                        // trigger and the viewport edge so it can NEVER overflow
+                        // off-screen (the old fixed max-h clipped inside tall
+                        // modals). Prefer opening downward; flip only if needed.
+                        className: "flex max-h-[min(24rem,var(--radix-popover-content-available-height))] w-[--radix-popover-trigger-width] flex-col overflow-hidden p-0", align: "start", side: "bottom", sideOffset: 4, children: [_jsx("div", { className: "shrink-0 p-2", children: _jsx(Input, { autoFocus: true, value: query, onChange: (e) => {
+                                        setQuery(e.target.value);
+                                        setLimit(PAGE);
+                                    }, placeholder: "Buscar \u00EDcono...", "aria-label": "Buscar \u00EDcono" }) }), _jsxs("div", { className: "min-h-0 flex-1 overflow-y-auto", role: "listbox", "aria-label": "\u00CDconos", onScroll: (e) => {
+                                    const el = e.currentTarget;
+                                    // Near the bottom → reveal the next page.
+                                    if (el.scrollTop + el.clientHeight >= el.scrollHeight - 24 &&
+                                        limit < matches.length) {
+                                        setLimit((n) => n + PAGE);
+                                    }
+                                }, children: [visible.map((name) => (_jsxs("button", { type: "button", role: "option", "aria-selected": name === selected, "aria-label": name, onClick: () => pick(name), className: `flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-sm hover:bg-accent ${name === selected ? 'bg-accent' : ''}`, children: [_jsx(DynamicIcon, { name: name, className: "h-4 w-4 shrink-0" }), _jsx("span", { className: "truncate", children: name })] }, name))), visible.length === 0 && (_jsx("div", { className: "py-6 text-center text-sm text-muted-foreground", children: "Sin resultados" }))] })] })] }))] }));
 }

package/package.json

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

package/src/__tests__/icon-picker-field.test.tsx

@@ -20,26 +20,31 @@ afterEach(cleanup)
 const field: ActionFieldDef = { key: 'icon', label: 'Ícono', type: 'text', widget: 'icon' }
 
 describe('IconPickerField', () => {
-    it('busca "credit", muestra CreditCard y al click emite onChange con el nombre', () => {
+    // The icon mode is a combobox: the list lives in a popover that opens on
+    // click. Open it, then search, then pick.
+    const openPopover = () =>
+        fireEvent.click(screen.getByRole('combobox'))
+
+    it('abre el popover, busca "credit" y al click emite onChange con el nombre', () => {
         const onChange = vi.fn()
         render(<IconPickerField field={field} value="" onChange={onChange} />)
+        openPopover()
         fireEvent.change(screen.getByLabelText('Buscar ícono'), { target: { value: 'credit' } })
         const option = screen.getByRole('option', { name: 'CreditCard' })
         fireEvent.click(option)
         expect(onChange).toHaveBeenCalledWith('CreditCard')
     })
 
-    it('resalta el seleccionado y muestra el preview grande', () => {
+    it('el trigger muestra el ícono y nombre seleccionado', () => {
         render(<IconPickerField field={field} value="CreditCard" onChange={() => {}} />)
-        expect(screen.getByTestId('icon-picker-preview')).toBeTruthy()
-        expect(
-            screen.getByRole('option', { name: 'CreditCard' }).getAttribute('aria-selected'),
-        ).toBe('true')
+        // The combobox trigger shows the selected name even before opening.
+        expect(screen.getByRole('combobox').textContent).toContain('CreditCard')
     })
 
-    it('limita el grid a 48 resultados', () => {
+    it('pagina: arranca con a lo sumo 60 opciones visibles', () => {
         render(<IconPickerField field={field} value="" onChange={() => {}} />)
-        expect(screen.getAllByRole('option').length).toBeLessThanOrEqual(48)
+        openPopover()
+        expect(screen.getAllByRole('option').length).toBeLessThanOrEqual(60)
     })
 
     it('modo imagen delega a UploadField con los mismos props', () => {

package/src/icon-picker-field.tsx

@@ -13,7 +13,14 @@
 // means image, anything else means icon.
 import { useMemo, useState } from 'react'
 import { icons } from 'lucide-react'
-import { Button, Input } from '@asteby/metacore-ui/primitives'
+import { ChevronsUpDown } from 'lucide-react'
+import {
+    Button,
+    Input,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from '@asteby/metacore-ui/primitives'
 import { DynamicIcon, resolveLucideIconName } from './dynamic-icon'
 import { UploadField } from './upload-field'
 import type { ActionFieldDef } from './types'
@@ -24,8 +31,9 @@ export interface IconPickerFieldProps {
     onChange: (v: any) => void
 }
 
-/** Max glyphs shown in the grid at once — keeps the DOM light while searching. */
-const MAX_RESULTS = 48
+/** Icons rendered per "page" — grows as the user scrolls to the bottom. Keeps
+ * the DOM light: the lucide catalog is ~1500 glyphs, so we never mount them all. */
+const PAGE = 60
 
 const ALL_ICON_NAMES = Object.keys(icons)
 
@@ -38,21 +46,27 @@ export function IconPickerField({ field, value, onChange }: IconPickerFieldProps
     const [mode, setMode] = useState<'icon' | 'image'>(() =>
         looksLikeImageValue(value) ? 'image' : 'icon',
     )
+    const [open, setOpen] = useState(false)
     const [query, setQuery] = useState('')
+    const [limit, setLimit] = useState(PAGE)
 
     const selected = mode === 'icon' ? resolveLucideIconName(value) : null
 
-    const results = useMemo(() => {
+    // Full match list (names only) — filtered by query, not yet capped.
+    const matches = useMemo(() => {
         const q = query.trim().toLowerCase().replace(/[\s_-]/g, '')
-        const names = q
+        return q
             ? ALL_ICON_NAMES.filter((n) => n.toLowerCase().includes(q))
             : ALL_ICON_NAMES
-        // Keep the current selection visible even when it doesn't match the query.
-        if (selected && !names.slice(0, MAX_RESULTS).includes(selected)) {
-            return [selected, ...names.filter((n) => n !== selected)].slice(0, MAX_RESULTS)
-        }
-        return names.slice(0, MAX_RESULTS)
-    }, [query, selected])
+    }, [query])
+
+    // Visible slice — grows on scroll (see onScroll below).
+    const visible = matches.slice(0, limit)
+
+    const pick = (name: string) => {
+        onChange(name)
+        setOpen(false)
+    }
 
     return (
         <div className="flex flex-col gap-2">
@@ -81,53 +95,100 @@ export function IconPickerField({ field, value, onChange }: IconPickerFieldProps
             {mode === 'image' ? (
                 <UploadField field={field} value={value} onChange={onChange} />
             ) : (
-                <div className="flex flex-col gap-2">
-                    <div className="flex items-center gap-3">
-                        <Input
+                <Popover
+                    open={open}
+                    onOpenChange={(o: boolean) => {
+                        setOpen(o)
+                        if (o) {
+                            // Fresh open: reset the search + paging.
+                            setQuery('')
+                            setLimit(PAGE)
+                        }
+                    }}
+                >
+                    <PopoverTrigger asChild>
+                        <Button
                             id={field.key}
-                            value={query}
-                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
-                            placeholder="Buscar ícono..."
-                            aria-label="Buscar ícono"
-                        />
-                        {selected && (
-                            <div
-                                data-testid="icon-picker-preview"
-                                className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-muted"
-                                title={selected}
-                            >
-                                <DynamicIcon name={selected} className="h-6 w-6" />
-                            </div>
-                        )}
-                    </div>
-                    <div
-                        className="grid max-h-56 grid-cols-8 gap-1 overflow-y-auto rounded-md border p-2"
-                        role="listbox"
-                        aria-label="Íconos"
-                    >
-                        {results.map((name) => (
-                            <button
-                                key={name}
-                                type="button"
-                                role="option"
-                                aria-selected={name === selected}
-                                aria-label={name}
-                                title={name}
-                                onClick={() => onChange(name)}
-                                className={`flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent ${
-                                    name === selected ? 'bg-accent ring-1 ring-primary' : ''
-                                }`}
-                            >
-                                <DynamicIcon name={name} className="h-4 w-4" />
-                            </button>
-                        ))}
-                        {results.length === 0 && (
-                            <span className="col-span-8 py-4 text-center text-sm text-muted-foreground">
-                                Sin resultados
+                            type="button"
+                            variant="outline"
+                            role="combobox"
+                            aria-expanded={open}
+                            className="w-full justify-between font-normal"
+                        >
+                            <span className="flex min-w-0 items-center gap-2">
+                                {selected ? (
+                                    <>
+                                        <DynamicIcon name={selected} className="h-4 w-4 shrink-0" />
+                                        <span className="truncate">{selected}</span>
+                                    </>
+                                ) : (
+                                    <span className="text-muted-foreground">Selecciona un ícono…</span>
+                                )}
                             </span>
-                        )}
-                    </div>
-                </div>
+                            <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
+                        </Button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                        // Cap the panel to the space Radix measured between the
+                        // trigger and the viewport edge so it can NEVER overflow
+                        // off-screen (the old fixed max-h clipped inside tall
+                        // modals). Prefer opening downward; flip only if needed.
+                        className="flex max-h-[min(24rem,var(--radix-popover-content-available-height))] w-[--radix-popover-trigger-width] flex-col overflow-hidden p-0"
+                        align="start"
+                        side="bottom"
+                        sideOffset={4}
+                    >
+                        <div className="shrink-0 p-2">
+                            <Input
+                                autoFocus
+                                value={query}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                    setQuery(e.target.value)
+                                    setLimit(PAGE)
+                                }}
+                                placeholder="Buscar ícono..."
+                                aria-label="Buscar ícono"
+                            />
+                        </div>
+                        <div
+                            className="min-h-0 flex-1 overflow-y-auto"
+                            role="listbox"
+                            aria-label="Íconos"
+                            onScroll={(e: React.UIEvent<HTMLDivElement>) => {
+                                const el = e.currentTarget
+                                // Near the bottom → reveal the next page.
+                                if (
+                                    el.scrollTop + el.clientHeight >= el.scrollHeight - 24 &&
+                                    limit < matches.length
+                                ) {
+                                    setLimit((n) => n + PAGE)
+                                }
+                            }}
+                        >
+                            {visible.map((name) => (
+                                <button
+                                    key={name}
+                                    type="button"
+                                    role="option"
+                                    aria-selected={name === selected}
+                                    aria-label={name}
+                                    onClick={() => pick(name)}
+                                    className={`flex w-full items-center gap-2.5 px-3 py-1.5 text-left text-sm hover:bg-accent ${
+                                        name === selected ? 'bg-accent' : ''
+                                    }`}
+                                >
+                                    <DynamicIcon name={name} className="h-4 w-4 shrink-0" />
+                                    <span className="truncate">{name}</span>
+                                </button>
+                            ))}
+                            {visible.length === 0 && (
+                                <div className="py-6 text-center text-sm text-muted-foreground">
+                                    Sin resultados
+                                </div>
+                            )}
+                        </div>
+                    </PopoverContent>
+                </Popover>
             )}
         </div>
     )