@asteby/metacore-runtime-react 49.5.0 → 49.6.0

package/dist/record-picker.js

@@ -0,0 +1,372 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// RecordPicker — THE "pick a related record" control of the runtime.
+//
+// Before it, every surface carried its own picker: the declarative
+// DynamicSelectField, the hand-written EntitySelect, the business
+// Customer/Product/Vehicle pickers, the DocumentEditor's product cell, the
+// legacy `search` field of the generic modal and the multi-select of `ref`
+// arrays — each with its own search loop, list markup, keyboard handling and
+// create button. They are now thin configurations of this one primitive:
+//
+//   - data: caller-owned `items` (options resolver, static list, a search the
+//     caller drives) or a `search(q, signal)` fetcher run here with debounce,
+//     cancellation and a min-chars gate; loading / empty / error states;
+//   - selection: single or `multiple` (chips with remove);
+//   - create / edit: "+" joined to the trigger when empty, pencil when a value
+//     is selected, "Crear …" at the foot of the list prefilled with the search
+//     (record-picker-actions.tsx);
+//   - rich options by props/slots: lead (avatar / initials / thumbnail),
+//     subtitle (SKU, RFC…), trailing (price / stock), or a full `renderItem`;
+//   - presentation: `trigger="button"` (select-like, search inside the list)
+//     or `trigger="input"` (type in the field itself; `freeText` keeps the text
+//     as the value, e.g. a free invoice line), `variant="field" | "cell"`;
+//   - the list is ALWAYS portaled (never clipped by a table / modal overflow),
+//     collision-aware (flips when there is no room) and stacked above dialogs;
+//   - keyboard: ↑/↓/Home/End move, Enter picks, Esc closes (without closing the
+//     dialog around it), Tab closes and moves on; ARIA combobox + listbox with
+//     aria-activedescendant (focus never leaves the text box).
+//
+// Built only on @asteby/metacore-ui primitives (Popover, Button, Input, Badge),
+// so it themes (light / dark) with the host.
+import { useCallback, useEffect, useId, useRef, useState, } from 'react';
+import { Check, ChevronsUpDown, Loader2, Plus, Search, X } from 'lucide-react';
+import { Badge, Button, Input, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, } from '@asteby/metacore-ui/primitives';
+import { JOINED_TRIGGER_CLASS, RecordPickerAction, hasRecordPickerAction } from './record-picker-actions';
+import { useDebouncedValue } from './use-debounced-value';
+/**
+ * z-index of the portaled list. Dialogs/sheets sit at 50; the list must stay
+ * above the modal it was opened from regardless of portal order.
+ */
+export const RECORD_PICKER_Z_INDEX = 60;
+const cx = (...parts) => parts.filter(Boolean).join(' ');
+/** Debounced async search with cancellation. `search` must be stable (useCallback). */
+export function useRecordSearch(query, search, opts = {}) {
+    const { minChars = 2, delay = 250, enabled = true } = opts;
+    const trimmed = query.trim();
+    const q = useDebouncedValue(trimmed, delay);
+    const [results, setResults] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(false);
+    // The query the current results answer. Until it matches what was typed
+    // (debounce running, or the request not answered yet) the search is
+    // `pending` — so a list never flashes "no results" before searching.
+    const [doneFor, setDoneFor] = useState(null);
+    useEffect(() => {
+        if (!enabled || q.length < minChars) {
+            setResults((r) => (r.length ? [] : r));
+            setLoading(false);
+            setError(false);
+            setDoneFor(null);
+            return;
+        }
+        const ctrl = new AbortController();
+        setLoading(true);
+        setError(false);
+        search(q, ctrl.signal)
+            .then((rows) => {
+            if (!ctrl.signal.aborted)
+                setResults(rows);
+        })
+            .catch(() => {
+            if (!ctrl.signal.aborted) {
+                setResults([]);
+                setError(true);
+            }
+        })
+            .finally(() => {
+            if (!ctrl.signal.aborted) {
+                setLoading(false);
+                setDoneFor(q);
+            }
+        });
+        return () => ctrl.abort();
+    }, [q, search, minChars, enabled]);
+    return { results, loading, error, pending: enabled && trimmed.length >= minChars && doneFor !== trimmed };
+}
+const NO_SEARCH = () => Promise.resolve([]);
+/**
+ * Stable identity for a caller's search function: always calls the latest one,
+ * so an inline (non-memoized) fetcher doesn't re-trigger the search on every
+ * render.
+ */
+export function useLatestSearch(fn) {
+    const ref = useRef(fn);
+    ref.current = fn;
+    return useCallback((...args) => ref.current(...args), []);
+}
+const TABBABLE = 'a[href],button:not([disabled]),input:not([disabled]):not([type="hidden"]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+/** Focus the tabbable after `from` (skipping portaled popper content). */
+function focusNextAfter(from) {
+    if (!from || typeof document === 'undefined')
+        return;
+    const all = Array.from(document.querySelectorAll(TABBABLE)).filter((el) => el.tabIndex >= 0 && !el.closest('[data-radix-popper-content-wrapper]'));
+    const i = all.indexOf(from);
+    (all[i + 1] ?? from).focus();
+}
+function asKeys(value, multiple) {
+    if (multiple)
+        return Array.isArray(value) ? value.map(String) : [];
+    if (value == null || value === '' || Array.isArray(value))
+        return [];
+    return [String(value)];
+}
+export function RecordPicker(props) {
+    const { getKey, getLabel, items, search, debounceMs = 250, multiple = false, value, selected, onSelect, onClear, onRemove, renderItem, renderLead, getDescription, renderTrailing, renderValue, isItemDisabled, placeholder = 'Seleccionar…', searchPlaceholder = 'Buscar…', emptyText = 'Sin resultados', loadingText = 'Buscando…', errorText = 'No se pudo buscar. Inténtalo de nuevo.', minCharsText, clearLabel = 'Quitar selección', listLabel, entityLabel = '', onCreate, onEdit, createLabel, editLabel, createFooter = 'always', createFooterLabel, hideJoinedAction = false, trigger = 'button', variant = 'field', freeText = false, icon: Icon, id, ariaLabel, disabled = false, readOnly = false, invalid = false, slot, anchorSlot, contentSlot = 'record-picker-content', className, triggerClassName, triggerProps, inputRef, minListWidth = '14rem', after, below, beforeList, onInputKeyDown, onUnhandledKeyDown, } = props;
+    const isInput = trigger === 'input';
+    const minChars = props.minChars ?? (isInput ? 2 : 0);
+    const showCheck = props.showCheck ?? !isInput;
+    const closeOnSelect = props.closeOnSelect ?? !multiple;
+    const listId = useId();
+    const triggerRef = useRef(null);
+    const anchorRef = useRef(null);
+    const tabbingRef = useRef(false);
+    // open / query: controlled when the caller passes them.
+    const [openState, setOpenState] = useState(false);
+    const open = props.open ?? openState;
+    const { onOpenChange, onQueryChange } = props;
+    const controlledOpen = props.open !== undefined;
+    const setOpen = useCallback((o) => {
+        if (!controlledOpen)
+            setOpenState(o);
+        onOpenChange?.(o);
+    }, [controlledOpen, onOpenChange]);
+    const [queryState, setQueryState] = useState('');
+    const query = props.query ?? queryState;
+    const controlledQuery = props.query !== undefined;
+    const setQuery = useCallback((q) => {
+        if (!controlledQuery)
+            setQueryState(q);
+        onQueryChange?.(q);
+    }, [controlledQuery, onQueryChange]);
+    const trimmed = query.trim();
+    const belowMin = trimmed.length < minChars;
+    const listOpen = !disabled && !readOnly && open && (!isInput || !belowMin);
+    const internal = useRecordSearch(query, (search ?? NO_SEARCH), {
+        minChars,
+        delay: debounceMs,
+        enabled: !!search && !items && open && !disabled && !readOnly,
+    });
+    const rows = items ?? internal.results;
+    const loading = props.loading ?? (internal.loading || internal.pending);
+    const error = props.error ?? internal.error;
+    const keys = asKeys(value, multiple);
+    const hasValue = keys.length > 0;
+    const isSelected = (item) => keys.includes(getKey(item));
+    const single = !multiple ? (selected ?? null) : null;
+    const selectedList = multiple && Array.isArray(selected) ? selected : [];
+    const showFooter = !!onCreate &&
+        !loading &&
+        createFooter !== 'never' &&
+        (createFooter === 'always' || (rows.length === 0 && !belowMin && !error));
+    const count = rows.length + (showFooter ? 1 : 0);
+    // Highlight: the selected row when (re)opening, else the first. Keyed on the
+    // row ids (not the array identity) so a caller recomputing `items` on every
+    // render doesn't reset the keyboard position.
+    const [active, setActive] = useState(0);
+    const rowSig = rows.map(getKey).join('\u0001');
+    useEffect(() => {
+        const i = rows.findIndex((r) => keys.includes(getKey(r)));
+        setActive(i >= 0 ? i : 0);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rowSig, trimmed, listOpen]);
+    useEffect(() => {
+        if (!listOpen || typeof document === 'undefined')
+            return;
+        const el = document.getElementById(`${listId}-o${active}`);
+        el?.scrollIntoView?.({ block: 'nearest' });
+    }, [active, listOpen, listId]);
+    const enabledAt = (i) => i === rows.length ? showFooter : !!rows[i] && !isItemDisabled?.(rows[i]);
+    const step = (from, dir) => {
+        for (let i = from + dir; i >= 0 && i < count; i += dir)
+            if (enabledAt(i))
+                return i;
+        return from;
+    };
+    const close = () => setOpen(false);
+    const runCreate = () => {
+        const q = trimmed;
+        close();
+        if (!freeText)
+            setQuery('');
+        onCreate?.(q);
+    };
+    const choose = (i) => {
+        if (i === rows.length && showFooter)
+            return runCreate();
+        const item = rows[i];
+        if (!item || isItemDisabled?.(item))
+            return;
+        onSelect(item);
+        if (closeOnSelect)
+            close();
+        if (!freeText && !multiple)
+            setQuery('');
+    };
+    const onKeyDown = (e) => {
+        if (onInputKeyDown) {
+            // Only a preventDefault() from the caller takes over (Radix may
+            // already have prevented Esc at the document level).
+            const before = e.defaultPrevented;
+            onInputKeyDown(e);
+            if (!before && e.defaultPrevented)
+                return;
+        }
+        if (listOpen && count > 0) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                setActive((a) => step(Math.min(a, count - 1), 1));
+                return;
+            }
+            if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                setActive((a) => step(Math.min(a, count), -1));
+                return;
+            }
+            if (!isInput && (e.key === 'Home' || e.key === 'End')) {
+                e.preventDefault();
+                setActive(e.key === 'Home' ? step(-1, 1) : step(count, -1));
+                return;
+            }
+            if (e.key === 'Enter' && enabledAt(active)) {
+                e.preventDefault();
+                choose(active);
+                return;
+            }
+        }
+        if (isInput) {
+            if (listOpen && e.key === 'Escape') {
+                // Close the list, not the dialog around it.
+                e.preventDefault();
+                e.stopPropagation();
+                close();
+                return;
+            }
+            if (!listOpen && !freeText && e.key === 'ArrowDown' && !belowMin) {
+                e.preventDefault();
+                setOpen(true);
+                return;
+            }
+            if (e.key === 'Tab')
+                close();
+        }
+        else if (e.key === 'Tab' && !e.shiftKey) {
+            // Close and move on to the next field (not to the end of <body>,
+            // where the portaled list lives).
+            e.preventDefault();
+            tabbingRef.current = true;
+            close();
+            return;
+        }
+        onUnhandledKeyDown?.(e);
+    };
+    const activeId = listOpen && count > 0 && enabledAt(active) ? `${listId}-o${active}` : undefined;
+    // ---- the list (shared by both trigger modes) --------------------------
+    const status = (() => {
+        if (loading && rows.length === 0) {
+            return (_jsxs("div", { role: "status", className: "flex items-center justify-center gap-2 py-6 text-sm text-muted-foreground", "data-slot": "picker-loading", children: [_jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": true }), loadingText] }));
+        }
+        if (loading)
+            return null;
+        if (error) {
+            return (_jsx("p", { role: "alert", className: "px-2 py-4 text-center text-sm text-destructive", "data-slot": "picker-error", children: errorText }));
+        }
+        if (rows.length > 0)
+            return null;
+        if (belowMin && minChars > 0) {
+            return (_jsxs("div", { className: "flex flex-col items-center gap-1 py-6 text-muted-foreground", "data-slot": "picker-min-chars", children: [_jsx(Search, { className: "size-5", "aria-hidden": true }), _jsx("span", { className: "text-xs", children: minCharsText ?? `Escribe al menos ${minChars} caracteres` })] }));
+        }
+        return (_jsx("div", { className: "px-2 py-6 text-center text-sm text-muted-foreground", "data-slot": "picker-empty", children: emptyText }));
+    })();
+    const optionClass = (on, dis) => cx('relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden', on && 'bg-accent text-accent-foreground', dis && 'pointer-events-none opacity-50');
+    const list = (_jsxs("div", { className: "max-h-72 overflow-y-auto overflow-x-hidden overscroll-contain", "data-slot": "record-picker-list", children: [beforeList, status, _jsxs("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? ariaLabel ?? entityLabel ?? undefined, "aria-multiselectable": multiple || undefined, className: cx('p-1', count === 0 && 'hidden'), children: [rows.map((item, i) => {
+                        const sel = isSelected(item);
+                        const dis = !!isItemDisabled?.(item);
+                        const on = i === active;
+                        const desc = getDescription?.(item);
+                        return (_jsx("li", { id: `${listId}-o${i}`, role: "option", "aria-selected": multiple ? sel : on, "aria-disabled": dis || undefined, "data-active": on || undefined, "data-selected": sel || undefined, "data-slot": "record-picker-option", className: optionClass(on, dis), onMouseDown: (e) => e.preventDefault(), onMouseMove: () => {
+                                if (!on && !dis)
+                                    setActive(i);
+                            }, onClick: () => choose(i), children: renderItem ? (renderItem(item, { active: on, selected: sel, disabled: dis })) : (_jsxs(_Fragment, { children: [showCheck ? (_jsx(Check, { className: cx('size-4 shrink-0', sel ? 'opacity-100' : 'opacity-0'), "aria-hidden": true })) : null, renderLead?.(item, 'option'), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate", children: getLabel(item) }), desc != null && desc !== '' ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: desc })) : null] }), renderTrailing ? (_jsx("span", { className: "ml-auto flex shrink-0 items-center gap-2", children: renderTrailing(item, 'option') })) : null] })) }, getKey(item)));
+                    }), showFooter ? (_jsxs(_Fragment, { children: [rows.length > 0 ? _jsx("li", { role: "presentation", className: "-mx-1 my-1 h-px bg-border" }) : null, _jsxs("li", { id: `${listId}-o${rows.length}`, role: "option", "aria-selected": active === rows.length, "data-active": active === rows.length || undefined, "data-slot": "picker-create", className: cx(optionClass(active === rows.length, false), 'text-primary'), onMouseDown: (e) => e.preventDefault(), onMouseMove: () => setActive(rows.length), onClick: runCreate, children: [_jsx(Plus, { className: "size-4 shrink-0", "aria-hidden": true }), _jsxs("span", { className: "truncate", children: [createFooterLabel ? createFooterLabel(trimmed) : `Crear ${entityLabel}`.trim(), !createFooterLabel && trimmed ? _jsxs("span", { className: "text-muted-foreground", children: [" \u00AB", trimmed, "\u00BB"] }) : null] })] })] })) : null] })] }));
+    const contentStyle = {
+        width: `max(var(--radix-popover-trigger-width), ${minListWidth})`,
+        maxWidth: 'calc(100vw - 1rem)',
+        zIndex: RECORD_PICKER_Z_INDEX,
+    };
+    const joined = !hideJoinedAction && !readOnly && hasRecordPickerAction(hasValue, onCreate, onEdit);
+    const action = joined ? (_jsx(RecordPickerAction, { hasValue: hasValue, label: entityLabel, onCreate: onCreate ? () => runCreate() : undefined, onEdit: onEdit, createLabel: createLabel, editLabel: editLabel, disabled: disabled, variant: variant })) : null;
+    const defaultValueNode = (item) => item ? (_jsxs(_Fragment, { children: [renderLead?.(item, 'value'), _jsx("span", { className: "min-w-0 flex-1 truncate", children: getLabel(item) }), renderTrailing?.(item, 'value')] })) : (_jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: placeholder }));
+    const valueNode = renderValue ? renderValue(single) : defaultValueNode(single);
+    const wrap = (row) => below ? (_jsxs("div", { className: cx('w-full min-w-0 space-y-1.5', className), "data-slot": slot, children: [row, below] })) : (row);
+    const rowClass = cx('flex w-full min-w-0 items-center gap-1.5', !below && className);
+    const rowSlot = below ? undefined : slot;
+    // ---- read-only --------------------------------------------------------
+    if (readOnly) {
+        return (_jsx(Button, { type: "button", variant: "outline", role: "combobox", id: id, disabled: true, "aria-readonly": "true", "aria-label": ariaLabel, className: cx('w-full min-w-0 cursor-default justify-start font-normal opacity-100', triggerClassName), ...triggerProps, children: _jsx("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: valueNode }) }));
+    }
+    // ---- input trigger ----------------------------------------------------
+    if (isInput) {
+        const showValue = !freeText && !multiple && hasValue && !!(single || renderValue);
+        const inputCls = cx(variant === 'cell' ? 'h-8 pl-8' : 'pl-8', joined && JOINED_TRIGGER_CLASS, triggerClassName);
+        return wrap(_jsxs("div", { className: rowClass, "data-slot": rowSlot, children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-stretch", children: [_jsxs(Popover, { open: listOpen, onOpenChange: (o) => !o && close(), children: [_jsx(PopoverAnchor, { asChild: true, children: _jsx("div", { ref: anchorRef, className: "relative w-full min-w-0", "data-slot": anchorSlot, children: showValue ? (_jsxs("div", { className: cx('flex min-h-9 w-full min-w-0 items-center gap-2 rounded-md border bg-background px-3 py-1.5 text-sm dark:bg-input/30', joined && 'rounded-r-none', invalid && 'border-destructive'), "data-slot": "record-picker-value", children: [Icon ? _jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }) : null, _jsx("div", { className: "min-w-0 flex-1", children: valueNode }), onClear && !disabled ? (_jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "size-7 shrink-0", onClick: onClear, "aria-label": clearLabel, children: _jsx(X, { className: "size-4" }) })) : null] })) : (_jsxs(_Fragment, { children: [_jsx(Search, { className: cx('pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground', variant === 'cell' ? 'size-3.5' : 'size-4'), "aria-hidden": true }), _jsx(Input, { ref: inputRef, id: id, value: query, disabled: disabled, role: "combobox", "aria-autocomplete": "list", "aria-expanded": listOpen, "aria-controls": listOpen ? listId : undefined, "aria-activedescendant": activeId, "aria-label": ariaLabel, "aria-invalid": invalid || undefined, autoComplete: "off", spellCheck: false, placeholder: placeholder, className: inputCls, onChange: (e) => {
+                                                        setQuery(e.target.value);
+                                                        setOpen(true);
+                                                    }, onBlur: () => close(), onKeyDown: onKeyDown, ...triggerProps })] })) }) }), _jsx(PopoverContent, { align: "start", sideOffset: 4, collisionPadding: 8, className: "p-0", "data-slot": contentSlot, 
+                                    // Focus stays in the text box: keep typing while the list shows.
+                                    onOpenAutoFocus: (e) => e.preventDefault(), 
+                                    // Esc is handled by the text box (closes the list and
+                                    // stops there, so the dialog around it stays open).
+                                    onEscapeKeyDown: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), 
+                                    // Clicking the list (scrollbar included) must not blur the box.
+                                    onMouseDown: (e) => e.preventDefault(), onInteractOutside: (e) => {
+                                        if (anchorRef.current?.contains(e.target))
+                                            e.preventDefault();
+                                    }, style: contentStyle, children: list })] }), action] }), after] }));
+    }
+    // ---- button trigger ---------------------------------------------------
+    const onTriggerKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (multiple && (e.key === 'Enter' || e.key === ' '))) {
+            e.preventDefault();
+            setOpen(true);
+            return;
+        }
+        // Type-to-search: a printable key on the closed trigger opens the list
+        // with that character already in the search box.
+        if (!open && e.key.length === 1 && e.key !== ' ' && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            e.preventDefault();
+            setQuery(e.key);
+            setOpen(true);
+        }
+    };
+    const clearable = !!onClear && hasValue && !disabled && !multiple;
+    const cellCls = 'h-8 border-transparent bg-transparent px-2 shadow-none hover:border-input hover:bg-transparent dark:bg-transparent dark:hover:bg-transparent';
+    const comboboxAria = {
+        role: 'combobox',
+        'aria-expanded': listOpen,
+        'aria-haspopup': 'listbox',
+        'aria-controls': listOpen ? listId : undefined,
+        'aria-invalid': invalid || undefined,
+        'aria-label': ariaLabel,
+        id,
+    };
+    const triggerEl = multiple ? (_jsxs("div", { ...comboboxAria, ref: (el) => {
+            triggerRef.current = el;
+        }, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, onKeyDown: onTriggerKeyDown, className: cx('flex min-h-9 w-full min-w-0 cursor-pointer items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 dark:bg-input/30', variant === 'cell' && 'min-h-8 border-transparent shadow-none', invalid && 'border-destructive ring-1 ring-destructive/30', disabled && 'pointer-events-none opacity-50', joined && JOINED_TRIGGER_CLASS, triggerClassName), "data-empty": !hasValue, ...triggerProps, children: [_jsx("span", { className: "flex min-w-0 flex-1 flex-wrap items-center gap-1", children: selectedList.length > 0 ? (selectedList.map((item) => (_jsxs(Badge, { variant: "secondary", className: "max-w-full gap-1 pr-1 font-normal", "data-slot": "record-picker-chip", children: [_jsx("span", { className: "truncate", children: getLabel(item) }), onRemove && !disabled ? (_jsx("button", { type: "button", "aria-label": `Quitar ${getLabel(item)}`, className: "rounded-full p-0.5 text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", onPointerDown: (e) => e.stopPropagation(), onClick: (e) => {
+                                e.stopPropagation();
+                                onRemove(item);
+                            }, onKeyDown: (e) => e.stopPropagation(), children: _jsx(X, { className: "size-3" }) })) : null] }, getKey(item))))) : (_jsx("span", { className: "truncate text-muted-foreground", children: placeholder })) }), _jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": true })] })) : (_jsxs(Button, { ...comboboxAria, ref: (el) => {
+            triggerRef.current = el;
+        }, type: "button", variant: "outline", disabled: disabled, onKeyDown: onTriggerKeyDown, className: cx('w-full min-w-0 flex-1 justify-between gap-2 font-normal', variant === 'cell' && cellCls, clearable && 'pr-14', joined && JOINED_TRIGGER_CLASS, invalid && 'border-destructive ring-1 ring-destructive/30', triggerClassName), "data-empty": !hasValue, ...triggerProps, children: [Icon ? _jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": true }) : null, _jsx("span", { className: "flex min-w-0 flex-1 items-center gap-2 text-left", children: valueNode }), _jsx(ChevronsUpDown, { className: "size-4 shrink-0 opacity-50", "aria-hidden": true })] }));
+    return wrap(_jsxs("div", { className: rowClass, "data-slot": rowSlot, children: [_jsxs("div", { className: "flex min-w-0 flex-1 items-center", children: [_jsxs("div", { className: "relative flex min-w-0 flex-1 items-center", children: [_jsxs(Popover, { open: listOpen, onOpenChange: (o) => (disabled ? undefined : setOpen(o)), children: [_jsx(PopoverTrigger, { asChild: true, children: triggerEl }), _jsxs(PopoverContent, { align: "start", sideOffset: 4, collisionPadding: 8, className: "p-0", "data-slot": contentSlot, style: contentStyle, onCloseAutoFocus: (e) => {
+                                            if (!tabbingRef.current)
+                                                return;
+                                            tabbingRef.current = false;
+                                            e.preventDefault();
+                                            focusNextAfter(triggerRef.current);
+                                        }, children: [_jsxs("div", { className: "flex h-10 items-center gap-2 border-b px-3", "data-slot": "record-picker-search", children: [_jsx(Search, { className: "size-4 shrink-0 opacity-50", "aria-hidden": true }), _jsx("input", { role: "combobox", "aria-expanded": listOpen, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": activeId, "aria-label": searchPlaceholder, autoComplete: "off", spellCheck: false, placeholder: searchPlaceholder, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: onKeyDown, className: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground" })] }), list] })] }), clearable ? (_jsx("button", { type: "button", "aria-label": clearLabel, title: clearLabel, onClick: (e) => {
+                                    e.stopPropagation();
+                                    onClear?.();
+                                }, className: "absolute right-8 top-1/2 z-10 -translate-y-1/2 rounded-sm p-0.5 text-muted-foreground outline-none hover:bg-accent hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring", "data-slot": "record-picker-clear", children: _jsx(X, { className: "size-3.5" }) })) : null] }), action] }), after] }));
+}

package/package.json

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

package/src/__tests__/business-pickers.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 // #1025 VehiclePicker, #1026 RelateDocuments, #1027 PrintSendDialog.
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 
 vi.mock('react-i18next', () => ({
     useTranslation: () => ({ t: (k: string, o?: any) => o?.defaultValue ?? k, i18n: { language: 'es' } }),
@@ -49,7 +49,9 @@ describe('VehiclePicker', () => {
         fireEvent.change(screen.getByPlaceholderText('Placa o VIN'), { target: { value: 'ABC' } })
         const opt = await screen.findByRole('option')
         expect(search.mock.calls[0][0]).toBe('ABC')
-        fireEvent.click(opt.querySelector('button')!)
+        // La opción misma es el elemento interactivo (RecordPicker: role=option
+        // sin <button> anidado, como pide ARIA para listbox).
+        fireEvent.click(opt)
         expect(onChange).toHaveBeenCalledWith(veh)
     })
 
@@ -102,7 +104,8 @@ describe('RelateDocuments', () => {
         const { rerender } = render(<RelateDocuments value={value} onChange={onChange} relationTypes={types} search={search} />)
         fireEvent.change(screen.getByPlaceholderText('Buscar por folio o UUID'), { target: { value: 'A-' } })
         const list = await screen.findByRole('listbox')
-        fireEvent.click(list.querySelectorAll('button')[0])
+        // RecordPicker: se elige la opción (role=option), no un <button> interno.
+        fireEvent.click((await within(list).findAllByRole('option'))[0]!)
         expect(onChange).toHaveBeenLastCalledWith([
             expect.objectContaining({ related_document_id: 'd1', relation_type: '01', uuid: 'UUID-1', folio: 'A-1' }),
         ])

package/src/__tests__/document-editor-inline-selects.test.tsx

@@ -95,7 +95,8 @@ describe('DocumentLinesGrid — select de producto en la celda', () => {
         expect(cell.closest('tr')!.getAttribute('data-line-key')).toBe(free.key)
         fireEvent.change(cell, { target: { value: '205' } })
         const option = await waitFor(() => screen.getByRole('option', { name: /Llanta 205/ }), { timeout: 2000 })
-        fireEvent.click(within(option).getByRole('button'))
+        // La opción (role=option) es el elemento interactivo del RecordPicker.
+        fireEvent.click(option)
         expect(state()).toHaveLength(1)
         expect(state()[0]).toMatchObject({ key: free.key, product_id: 'p1', unit_price: 1500, sku: 'LL-205' })
     })

package/src/__tests__/document-form-dialog.test.tsx

@@ -169,7 +169,8 @@ describe('DocumentFormDialog: buscador de catálogo por defecto', () => {
         fireEvent.change(document.querySelectorAll('input')[0], { target: { value: 'ACME' } })
         fireEvent.click(screen.getByRole('button', { name: 'Siguiente' }))
         fireEvent.change(await screen.findByLabelText('Buscar producto'), { target: { value: query } })
-        fireEvent.click(await waitFor(() => screen.getByRole('button', { name }), { timeout: 2000 }))
+        // RecordPicker: la opción del producto es role="option" clicable (sin <button> anidado).
+        fireEvent.click(await waitFor(() => screen.getByRole('option', { name }), { timeout: 2000 }))
     }
 
     it('sin searchProducts del host busca en el catálogo y el renglón entra con precio, cantidad 1, unidad, SKU e IVA de la org', async () => {
@@ -234,9 +235,9 @@ describe('DocumentFormDialog: IVA de la org con el buscador del host', () => {
         fireEvent.click(screen.getByRole('button', { name: 'Siguiente' }))
         const search = await screen.findByLabelText('Buscar producto')
         fireEvent.change(search, { target: { value: 'host' } })
-        fireEvent.click(await waitFor(() => screen.getByRole('button', { name: /Llanta host/ }), { timeout: 2000 }))
+        fireEvent.click(await waitFor(() => screen.getByRole('option', { name: /Llanta host/ }), { timeout: 2000 }))
         fireEvent.change(await screen.findByLabelText('Buscar producto'), { target: { value: 'fron' } })
-        fireEvent.click(await waitFor(() => screen.getByRole('button', { name: /Frontera host/ }), { timeout: 2000 }))
+        fireEvent.click(await waitFor(() => screen.getByRole('option', { name: /Frontera host/ }), { timeout: 2000 }))
         fireEvent.click(screen.getByRole('button', { name: 'Crear' }))
         await waitFor(() => expect(post).toHaveBeenCalled())
         const body = post.mock.calls[0][1] as any

package/src/__tests__/document-lines-grid.test.tsx

@@ -49,7 +49,8 @@ describe('DocumentLinesGrid', () => {
         const search = vi.fn(async () => [tire])
         render(<Harness search={search} priceSource="cost" />)
         fireEvent.change(screen.getByLabelText('Buscar producto'), { target: { value: 'llan' } })
-        const option = await waitFor(() => screen.getByRole('button', { name: /Llanta X/ }), { timeout: 2000 })
+        // RecordPicker: la opción del producto es role="option" clicable (sin <button> anidado).
+        const option = await waitFor(() => screen.getByRole('option', { name: /Llanta X/ }), { timeout: 2000 })
         fireEvent.click(option)
         expect(state()[0]).toMatchObject({ description: 'Llanta X', sku: 'LX', quantity: 1, unit_price: 800, catalog_price: 800 })
         expect(screen.getByText(/Catálogo/)).toBeTruthy()