innoboxrr-react-form-elements 3.3.0 → 3.4.0

package/README.md

@@ -1,12 +1,15 @@
 # innoboxrr-react-form-elements
 
-Gemelo React de [`innoboxrr-form-elements`](../form-elements). Los mismos 29
-componentes, con los mismos nombres.
+Gemelo React de [`innoboxrr-form-elements`](../form-elements). Los mismos 37
+componentes, con los mismos nombres: los controles de formulario y las piezas de
+escritorio (`DialogComponent`, `DrawerComponent`, `MenuComponent`,
+`CommandPaletteComponent`, `ToastRegionComponent`, `ConfirmHostComponent` y
+`SkeletonComponent`).
 
 Los nombres coinciden a propósito: `larapack-generator` emite el mismo
 `form_component` del `laraimport.json` para Vue y para React, así que un nombre
-distinto rompería esa simetría. Hay un test (`tests/parity.test.jsx`) que falla
-si un paquete exporta algo que el otro no.
+distinto rompería esa simetría. Hay un test de paridad en cada repositorio que
+falla si un paquete exporta algo que el otro no.
 
 ## Instalación
 
@@ -62,6 +65,36 @@ Todos los controles funcionan también **sin** `value`: se gobiernan solos. Eso
 permite montarlos en una prueba o en un formulario no controlado sin escribir
 estado alrededor.
 
+## Piezas de escritorio
+
+Sobre `<dialog>`, el atributo `popover` y Floating UI, con el mismo
+comportamiento que la rama Vue. Lo que cambia es la forma de pasar las cosas:
+
+| Vue | React |
+|---|---|
+| `v-model:open` | `open` + `onOpenChange(abierto)` |
+| slot `footer` / `header` con `{ close }` | prop `footer` / `header`: un nodo o una función `({ close }) => …` |
+| slot `trigger` de `MenuComponent` | `renderTrigger({ toggle, open, loading, triggerProps })` |
+| `@select` | `onSelect(item)` |
+| `:save` de `ClickToEditComponent` | `onSave(valor)` |
+
+```jsx
+import { DrawerComponent, ToastRegionComponent, ConfirmHostComponent } from 'innoboxrr-react-form-elements'
+import { notifySuccess } from 'innoboxrr-form-core'
+
+<DrawerComponent open={abierto} onOpenChange={setAbierto} title="Nuevo producto"
+    footer={({ close }) => <button type="button" onClick={close}>Cancelar</button>}>
+    <CreateForm onSubmit={(producto) => { notifySuccess('Producto creado'); setAbierto(false) }} />
+</DrawerComponent>
+
+// una vez, en la raíz
+<ToastRegionComponent />
+<ConfirmHostComponent />
+```
+
+React no escribe el atributo `autofocus` en el DOM, así que lo que tiene que
+recibir el foco al abrir un diálogo se marca con `data-autofocus`.
+
 ## Las librerías de debajo
 
 Cada componente envuelve el equivalente React de la librería que envuelve su

package/index.js

@@ -18,7 +18,11 @@ export { default as ClickToEditComponent } from './src/ClickToEditComponent.jsx'
 export { default as CodeInputComponent } from './src/CodeInputComponent.jsx'
 export { default as CodeMirrorComponent } from './src/CodeMirrorComponent.jsx'
 export { default as ColorPickerInputComponent } from './src/ColorPickerInputComponent.jsx'
+export { default as CommandPaletteComponent } from './src/CommandPaletteComponent.jsx'
+export { default as ConfirmHostComponent } from './src/ConfirmHostComponent.jsx'
 export { default as CountrySelectInputComponent } from './src/CountrySelectInputComponent.jsx'
+export { default as DialogComponent } from './src/DialogComponent.jsx'
+export { default as DrawerComponent } from './src/DrawerComponent.jsx'
 export { default as DynamicGroupInputComponent } from './src/DynamicGroupInputComponent.jsx'
 export { default as EditorInputComponent } from './src/EditorInputComponent.jsx'
 export { default as FileDropInputComponent } from './src/FileDropInputComponent.jsx'
@@ -26,6 +30,7 @@ export { default as IconComponent } from './src/IconComponent.jsx'
 export { default as FileInputComponent } from './src/FileInputComponent.jsx'
 export { default as FqsInputComponent } from './src/FqsInputComponent.jsx'
 export { default as InputErrorComponent } from './src/InputErrorComponent.jsx'
+export { default as MenuComponent } from './src/MenuComponent.jsx'
 export { default as ModelSearchInputComponent } from './src/ModelSearchInputComponent.jsx'
 export { default as MultiCheckboxInputComponent } from './src/MultiCheckboxInputComponent.jsx'
 export { default as PolymorphicInputComponent } from './src/PolymorphicInputComponent.jsx'
@@ -34,6 +39,7 @@ export { default as SelectInputComponent } from './src/SelectInputComponent.jsx'
 export { default as SelectSearchInputComponent } from './src/SelectSearchInputComponent.jsx'
 export { default as SimpleFileInputComponent } from './src/SimpleFileInputComponent.jsx'
 export { default as SingleCheckboxInputComponent } from './src/SingleCheckboxInputComponent.jsx'
+export { default as SkeletonComponent } from './src/SkeletonComponent.jsx'
 export { default as StarsInputComponent } from './src/StarsInputComponent.jsx'
 export { default as SwitchComponent } from './src/SwitchComponent.jsx'
 export { default as TagsInputComponent } from './src/TagsInputComponent.jsx'
@@ -41,3 +47,4 @@ export { default as TextEditorMonoStyleInputComponent } from './src/TextEditorMo
 export { default as TextInputComponent } from './src/TextInputComponent.jsx'
 export { default as TextareaInputComponent } from './src/TextareaInputComponent.jsx'
 export { default as TimezoneSelectInputComponent } from './src/TimezoneSelectInputComponent.jsx'
+export { default as ToastRegionComponent } from './src/ToastRegionComponent.jsx'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "innoboxrr-react-form-elements",
-  "version": "3.3.0",
-  "description": "Gemelo React de innoboxrr-form-elements: los mismos componentes, los mismos nombres y el mismo contrato.",
+  "version": "3.4.0",
+  "description": "Gemelo React de innoboxrr-form-elements: los mismos componentes, los mismos nombres y el mismo contrato, con diálogos, drawers, menús, avisos y paleta de comandos.",
   "type": "module",
   "main": "index.js",
   "exports": {
@@ -48,11 +48,12 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@floating-ui/dom": "^1.8.0",
     "@iconify/react": "^6.0.0",
     "@tinymce/tinymce-react": "^6.3.0",
     "@uiw/react-codemirror": "^4.25.11",
     "@yaireo/tagify": "^4.38.0",
-    "innoboxrr-form-core": "^2.3.0",
+    "innoboxrr-form-core": "^2.5.0",
     "innoboxrr-maskjs": "^2.0.0",
     "react-colorful": "^5.8.1",
     "react-phone-number-input": "^3.4.18",

package/src/ClickToEditComponent.jsx

@@ -1,65 +1,140 @@
 import { useEffect, useRef, useState } from 'react'
+import useTheme from './internal/useTheme.js'
 
 /**
- * Gemelo de ClickToEditComponent.vue: texto que se convierte en input al
- * hacer clic. `onInput` recibe el valor confirmado.
+ * Gemelo de ClickToEditComponent.vue: un valor que se edita donde está.
+ *
+ *     <ClickToEditComponent value={producto.title} onSave={(title) => updateModel(producto.id, { title })} />
+ *
+ * Enter o salir del campo confirman; Escape cancela. Un valor sin cambios no
+ * llama a nada.
+ *
+ * Con `onSave`, la confirmación espera a que termine: mientras guarda el campo
+ * no se puede tocar, y si falla se queda abierto con el error. `onInput` sigue
+ * recibiendo el valor confirmado, y `customClass` sigue reemplazando la clase
+ * del campo.
  */
-export default function ClickToEditComponent({ value = '', onInput, customClass = 'fe-input' }) {
+export default function ClickToEditComponent({
+    value = '',
+    type = 'text',
+    placeholder = '—',
+    label = 'Editar',
+    onSave = null,
+    onInput,
+    customClass = undefined,
+}) {
+    const theme = useTheme()
     const [editing, setEditing] = useState(false)
-    const [draft, setDraft] = useState(value)
+    const [saving, setSaving] = useState(false)
+    const [error, setError] = useState(null)
+    const [draft, setDraft] = useState('')
+    const [shown, setShown] = useState(value)
     const input = useRef(null)
 
+    // Enter confirma y quita el campo, y quitarlo puede disparar blur: el
+    // estado de React aún no se ha actualizado en ese momento, así que la
+    // guarda va en una ref.
+    const status = useRef({ editing: false, saving: false })
+
     useEffect(() => {
-        setDraft(value)
+        setShown(value)
     }, [value])
 
     useEffect(() => {
-        if (editing) {
+        if (editing && ! saving) {
             input.current?.focus()
         }
-    }, [editing])
+    }, [editing, saving, error])
+
+    const setEditingState = (next) => {
+        status.current.editing = next
+        setEditing(next)
+    }
 
-    const confirm = () => {
-        setEditing(false)
-        onInput?.(draft)
+    const start = () => {
+        setDraft(shown ?? '')
+        setError(null)
+        setEditingState(true)
     }
 
     const cancel = () => {
-        setDraft(value)
-        setEditing(false)
+        setEditingState(false)
+        setError(null)
     }
 
-    if (! editing) {
-        return (
-            <span
-                role="button"
-                tabIndex={0}
-                onClick={() => setEditing(true)}
-                onKeyDown={(event) => {
-                    if (event.key === 'Enter' || event.key === ' ') {
-                        setEditing(true)
-                    }
-                }}>
-                {value}
-            </span>
-        )
+    const confirm = async () => {
+        if (! status.current.editing || status.current.saving) {
+            return
+        }
+
+        const next = draft
+
+        if (String(next) === String(shown ?? '')) {
+            setEditingState(false)
+
+            return
+        }
+
+        if (onSave) {
+            status.current.saving = true
+            setSaving(true)
+            setError(null)
+
+            try {
+                await onSave(next)
+            } catch (failure) {
+                status.current.saving = false
+                setSaving(false)
+                setError(failure?.message || 'No se pudo guardar')
+
+                return
+            }
+
+            status.current.saving = false
+            setSaving(false)
+        }
+
+        setShown(next)
+        setEditingState(false)
+        onInput?.(next)
     }
 
+    const empty = shown === '' || shown === null || shown === undefined
+    const text = empty ? placeholder : shown
+
     return (
-        <input
-            ref={input}
-            className={customClass}
-            value={draft}
-            onChange={(event) => setDraft(event.target.value)}
-            onBlur={confirm}
-            onKeyDown={(event) => {
-                if (event.key === 'Enter') {
-                    confirm()
-                }
-
-                if (event.key === 'Escape') {
-                    cancel()
-                }
-            }} />
+        <span className="fe-inline">
+
+            {editing ? (
+                <input
+                    ref={input}
+                    type={type}
+                    className={customClass ?? theme.input}
+                    aria-label={label}
+                    aria-invalid={error ? 'true' : undefined}
+                    disabled={saving}
+                    value={draft}
+                    onChange={(event) => setDraft(event.target.value)}
+                    onBlur={confirm}
+                    onKeyDown={(event) => {
+                        if (event.key === 'Enter') {
+                            event.preventDefault()
+                            confirm()
+                        }
+
+                        if (event.key === 'Escape') {
+                            event.preventDefault()
+                            cancel()
+                        }
+                    }} />
+            ) : (
+                <button type="button" className={theme.editable} aria-label={`${label}: ${text}`} onClick={start}>
+                    {text}
+                </button>
+            )}
+
+            {error ? <span className={theme.error} role="alert">{error}</span> : null}
+
+        </span>
     )
 }

package/src/CommandPaletteComponent.jsx

@@ -0,0 +1,182 @@
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+import IconComponent from './IconComponent.jsx'
+import useNativeDialog from './internal/useNativeDialog.js'
+import useTheme, { joinClasses } from './internal/useTheme.js'
+
+const normalize = (value) => String(value ?? '')
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+    .toLowerCase()
+
+/**
+ * Gemelo de CommandPaletteComponent.vue: buscar y ejecutar cualquier cosa sin
+ * tocar el ratón.
+ *
+ *     <CommandPaletteComponent open={abierta} onOpenChange={setAbierta} items={[
+ *         { id: 'products', label: 'Productos', group: 'Ir a', icon: 'box', action: () => navigate(…) },
+ *     ]} onSelect={…} />
+ *
+ * Ctrl+K o Cmd+K la abren y la cierran; `hotkey` cambia la tecla y `null` quita
+ * el atajo. El filtro no distingue mayúsculas ni acentos.
+ */
+export default function CommandPaletteComponent({
+    open = false,
+    items = [],
+    placeholder = 'Buscar…',
+    emptyText = 'Sin resultados',
+    label = 'Paleta de comandos',
+    hotkey = 'k',
+    onOpenChange,
+    onSelect,
+}) {
+    const theme = useTheme()
+    const listId = useId()
+    const input = useRef(null)
+    const [query, setQuery] = useState('')
+    const [active, setActive] = useState(0)
+
+    const latest = useRef({ open, hotkey, onOpenChange })
+
+    latest.current = { open, hotkey, onOpenChange }
+
+    const requestClose = () => onOpenChange?.(false)
+
+    const { ref, onClick } = useNativeDialog({ open, dismissible: true, onRequestClose: requestClose })
+
+    const filtered = useMemo(() => {
+        const needle = normalize(query).trim()
+
+        if (needle === '') {
+            return items
+        }
+
+        return items.filter((item) => normalize([item.label, item.group, ...(item.keywords ?? [])].join(' ')).includes(needle))
+    }, [items, query])
+
+    const sections = useMemo(() => {
+        const groups = new Map()
+
+        filtered.forEach((item, index) => {
+            const key = item.group ?? null
+
+            if (! groups.has(key)) {
+                groups.set(key, [])
+            }
+
+            groups.get(key).push({ item, index })
+        })
+
+        return [...groups].map(([group, entries]) => ({ group, entries }))
+    }, [filtered])
+
+    useEffect(() => {
+        if (open) {
+            setQuery('')
+            setActive(0)
+            input.current?.focus()
+        }
+    }, [open])
+
+    useEffect(() => {
+        const onHotkey = (event) => {
+            const { hotkey: key, open: isOpen, onOpenChange: change } = latest.current
+
+            if (key && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === key.toLowerCase()) {
+                event.preventDefault()
+                change?.(! isOpen)
+            }
+        }
+
+        window.addEventListener('keydown', onHotkey)
+
+        return () => window.removeEventListener('keydown', onHotkey)
+    }, [])
+
+    const optionId = (index) => `${listId}-${index}`
+
+    const choose = (item) => {
+        if (! item) {
+            return
+        }
+
+        requestClose()
+        onSelect?.(item)
+        item.action?.(item)
+    }
+
+    const onKeyDown = (event) => {
+        const total = filtered.length
+
+        if (event.key === 'ArrowDown' && total > 0) {
+            event.preventDefault()
+            setActive((current) => (current + 1) % total)
+        }
+
+        if (event.key === 'ArrowUp' && total > 0) {
+            event.preventDefault()
+            setActive((current) => (current - 1 + total) % total)
+        }
+
+        if (event.key === 'Enter') {
+            event.preventDefault()
+            choose(filtered[active])
+        }
+    }
+
+    return (
+        <dialog
+            ref={ref}
+            className={joinClasses(theme.dialog, theme.command)}
+            aria-label={label}
+            onClick={onClick}>
+
+            {open ? (
+                <>
+                    <input
+                        ref={input}
+                        type="text"
+                        className={theme.commandInput}
+                        placeholder={placeholder}
+                        value={query}
+                        role="combobox"
+                        aria-autocomplete="list"
+                        aria-expanded="true"
+                        aria-controls={listId}
+                        aria-activedescendant={filtered.length > 0 ? optionId(active) : undefined}
+                        onChange={(event) => {
+                            setQuery(event.target.value)
+                            setActive(0)
+                        }}
+                        onKeyDown={onKeyDown} />
+
+                    {filtered.length > 0 ? (
+                        <ul id={listId} className={theme.commandList} role="listbox" aria-label={label}>
+                            {sections.map((section) => [
+                                section.group
+                                    ? <li key={`group-${section.group}`} role="presentation" className={theme.commandGroup}>{section.group}</li>
+                                    : null,
+                                ...section.entries.map((entry) => (
+                                    <li
+                                        key={entry.item.id ?? entry.index}
+                                        id={optionId(entry.index)}
+                                        role="option"
+                                        aria-selected={entry.index === active ? 'true' : 'false'}
+                                        className={theme.commandItem}
+                                        onClick={() => choose(entry.item)}
+                                        onMouseMove={() => setActive(entry.index)}>
+                                        {entry.item.icon ? <IconComponent name={entry.item.icon} size={16} /> : null}
+                                        <span>{entry.item.label}</span>
+                                        {entry.item.shortcut ? <kbd className={theme.kbd}>{entry.item.shortcut}</kbd> : null}
+                                    </li>
+                                )),
+                            ])}
+                        </ul>
+                    ) : (
+                        <p className={theme.commandEmpty}>{emptyText}</p>
+                    )}
+                </>
+            ) : null}
+
+        </dialog>
+    )
+}

package/src/ConfirmHostComponent.jsx

@@ -0,0 +1,50 @@
+import { useSyncExternalStore } from 'react'
+import { getConfirmation, onConfirmationChange, resolveConfirmation } from 'innoboxrr-form-core'
+import DialogShell from './internal/DialogShell.jsx'
+import useTheme from './internal/useTheme.js'
+
+/**
+ * Gemelo de ConfirmHostComponent.vue: donde se pregunta lo que pide
+ * `confirmAction()`. Se monta una vez, en la raíz de la aplicación.
+ *
+ * Cerrar con Escape o con un clic fuera cuenta como cancelar, y el foco empieza
+ * en cancelar: un Enter por inercia no debe borrar nada.
+ */
+export default function ConfirmHostComponent({ closeLabel = 'Cerrar' }) {
+    const confirmation = useSyncExternalStore(onConfirmationChange, getConfirmation, getConfirmation)
+    const theme = useTheme()
+
+    return (
+        <DialogShell
+            kind="dialog"
+            size="sm"
+            open={confirmation !== null}
+            title={confirmation?.title ?? null}
+            closeLabel={closeLabel}
+            onOpenChange={(value) => {
+                if (! value) {
+                    resolveConfirmation(false)
+                }
+            }}
+            footer={(
+                <>
+                    <button
+                        type="button"
+                        className={theme.buttonSecondary}
+                        data-autofocus=""
+                        onClick={() => resolveConfirmation(false)}>
+                        {confirmation?.cancelLabel}
+                    </button>
+
+                    <button
+                        type="button"
+                        className={confirmation?.variant === 'danger' ? theme.buttonDanger : theme.button}
+                        onClick={() => resolveConfirmation(true)}>
+                        {confirmation?.confirmLabel}
+                    </button>
+                </>
+            )}>
+            <p>{confirmation?.message}</p>
+        </DialogShell>
+    )
+}

package/src/DialogComponent.jsx

@@ -0,0 +1,43 @@
+import DialogShell from './internal/DialogShell.jsx'
+
+/**
+ * Gemelo de DialogComponent.vue: un diálogo modal sobre <dialog>.
+ *
+ *     <DialogComponent open={abierto} onOpenChange={setAbierto} title="Borrar producto"
+ *         footer={({ close }) => <button onClick={close}>Cancelar</button>}>
+ *         ¿Seguro?
+ *     </DialogComponent>
+ *
+ * `dismissible={false}` impide cerrarlo con Escape, con un clic fuera y quita
+ * la X.
+ */
+export default function DialogComponent({
+    open = false,
+    title = null,
+    label = null,
+    size = 'md',
+    dismissible = true,
+    closeLabel = 'Cerrar',
+    onOpenChange,
+    onClose,
+    header = null,
+    footer = null,
+    children,
+}) {
+    return (
+        <DialogShell
+            kind="dialog"
+            open={open}
+            title={title}
+            label={label}
+            size={size}
+            dismissible={dismissible}
+            closeLabel={closeLabel}
+            onOpenChange={onOpenChange}
+            onClose={onClose}
+            header={header}
+            footer={footer}>
+            {children}
+        </DialogShell>
+    )
+}

package/src/DrawerComponent.jsx

@@ -0,0 +1,42 @@
+import DialogShell from './internal/DialogShell.jsx'
+
+/**
+ * Gemelo de DrawerComponent.vue: un panel lateral modal sobre <dialog>, para
+ * crear o editar sin salir de la tabla.
+ *
+ *     <DrawerComponent open={abierto} onOpenChange={setAbierto} title="Nuevo producto">
+ *         <CreateForm onSubmit={…} />
+ *     </DrawerComponent>
+ *
+ * `side="start"` lo pega a la izquierda.
+ */
+export default function DrawerComponent({
+    open = false,
+    title = null,
+    label = null,
+    side = 'end',
+    dismissible = true,
+    closeLabel = 'Cerrar',
+    onOpenChange,
+    onClose,
+    header = null,
+    footer = null,
+    children,
+}) {
+    return (
+        <DialogShell
+            kind="drawer"
+            open={open}
+            title={title}
+            label={label}
+            side={side}
+            dismissible={dismissible}
+            closeLabel={closeLabel}
+            onOpenChange={onOpenChange}
+            onClose={onClose}
+            header={header}
+            footer={footer}>
+            {children}
+        </DialogShell>
+    )
+}

package/src/MenuComponent.jsx

@@ -0,0 +1,252 @@
+import { useEffect, useId, useRef, useState } from 'react'
+import { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom'
+import IconComponent from './IconComponent.jsx'
+import useTheme, { joinClasses } from './internal/useTheme.js'
+
+const supportsPopover = typeof HTMLElement !== 'undefined'
+    && typeof HTMLElement.prototype.showPopover === 'function'
+
+/**
+ * Gemelo de MenuComponent.vue: un menú desplegable sobre el atributo popover y
+ * Floating UI.
+ *
+ *     <MenuComponent items={[
+ *         { id: 'edit', label: 'Editar', icon: 'edit', action: editar },
+ *         { separator: true },
+ *         { id: 'delete', label: 'Eliminar', danger: true, disabled: ! puede, disabledReason: 'Sin permiso' },
+ *     ]} onSelect={…} />
+ *
+ * `beforeOpen` se espera antes de abrir, para los permisos de una fila.
+ * `renderTrigger({ toggle, open, loading, triggerProps })` sustituye al botón,
+ * como el slot `trigger` de Vue.
+ */
+export default function MenuComponent({
+    items = [],
+    label = 'Acciones',
+    icon = 'more',
+    placement = 'bottom-end',
+    beforeOpen = null,
+    onSelect,
+    onOpen,
+    onClose,
+    renderTrigger = null,
+}) {
+    const theme = useTheme()
+    const menuId = useId()
+    const menu = useRef(null)
+    const trigger = useRef(null)
+    const reference = useRef(null)
+    const [open, setOpen] = useState(false)
+    const [loading, setLoading] = useState(false)
+
+    const latest = useRef({ onOpen, onClose, placement })
+
+    latest.current = { onOpen, onClose, placement }
+
+    const enabledItems = () => [...(menu.current?.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])') ?? [])]
+
+    const focusItem = (index) => {
+        const list = enabledItems()
+
+        if (list.length > 0) {
+            list[(index + list.length) % list.length].focus()
+        }
+    }
+
+    const opened = () => {
+        setOpen(true)
+        latest.current.onOpen?.()
+    }
+
+    const closed = () => {
+        const hadFocus = menu.current?.contains(document.activeElement) || document.activeElement === document.body
+
+        setOpen(false)
+        latest.current.onClose?.()
+
+        if (hadFocus) {
+            reference.current?.focus?.()
+        }
+    }
+
+    useEffect(() => {
+        const element = menu.current
+
+        if (! element) {
+            return undefined
+        }
+
+        const onToggle = (event) => (event.newState === 'open' ? opened() : closed())
+
+        element.addEventListener('toggle', onToggle)
+
+        return () => element.removeEventListener('toggle', onToggle)
+    }, [])
+
+    // Colocar y enfocar una vez que el menú abierto ya está pintado.
+    useEffect(() => {
+        const element = menu.current
+
+        if (! open || ! element) {
+            return undefined
+        }
+
+        let stop = null
+
+        if (reference.current) {
+            const update = () => computePosition(reference.current, element, {
+                placement: latest.current.placement,
+                strategy: 'fixed',
+                middleware: [offset(4), flip(), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(element.style, { left: `${x}px`, top: `${y}px` })
+            })
+
+            try {
+                stop = autoUpdate(reference.current, element, update)
+            } catch {
+                update()
+            }
+        }
+
+        focusItem(0)
+
+        return () => stop?.()
+    }, [open])
+
+    const show = () => {
+        if (supportsPopover) {
+            menu.current?.showPopover()
+        } else {
+            opened()
+        }
+    }
+
+    const hide = () => {
+        if (supportsPopover) {
+            try {
+                menu.current?.hidePopover()
+            } catch {
+                // Ya estaba cerrado.
+            }
+        } else {
+            closed()
+        }
+    }
+
+    const toggle = async (event) => {
+        if (open) {
+            hide()
+
+            return
+        }
+
+        reference.current = event?.currentTarget ?? trigger.current
+
+        if (beforeOpen) {
+            setLoading(true)
+
+            try {
+                await beforeOpen()
+            } finally {
+                setLoading(false)
+            }
+        }
+
+        show()
+    }
+
+    const choose = (item) => {
+        if (item.disabled) {
+            return
+        }
+
+        hide()
+        onSelect?.(item)
+        item.action?.(item)
+    }
+
+    const onKeyDown = (event) => {
+        const list = enabledItems()
+        const current = list.indexOf(document.activeElement)
+
+        const moves = {
+            ArrowDown: current + 1,
+            ArrowUp: current - 1,
+            Home: 0,
+            End: list.length - 1,
+        }
+
+        if (event.key in moves) {
+            event.preventDefault()
+            focusItem(moves[event.key])
+        }
+
+        if (event.key === 'Escape' && ! supportsPopover) {
+            hide()
+        }
+    }
+
+    const triggerProps = {
+        'aria-haspopup': 'menu',
+        'aria-expanded': open ? 'true' : 'false',
+        'aria-controls': menuId,
+        'aria-label': label,
+    }
+
+    return (
+        <span className="fe-inline">
+
+            {renderTrigger ? renderTrigger({ toggle, open, loading, triggerProps }) : (
+                <button
+                    ref={trigger}
+                    type="button"
+                    className={theme.iconButton}
+                    disabled={loading}
+                    {...triggerProps}
+                    onClick={toggle}>
+                    <IconComponent name={icon} size={16} />
+                </button>
+            )}
+
+            <div
+                id={menuId}
+                ref={menu}
+                popover="auto"
+                className={theme.menu}
+                hidden={! supportsPopover && ! open ? true : undefined}
+                onKeyDown={onKeyDown}>
+
+                <ul className={theme.menuList} role="menu" aria-label={label}>
+                    {items.map((item, index) => {
+                        if (item.separator) {
+                            return <li key={item.id ?? `separator-${index}`} role="separator" className={theme.menuSeparator} />
+                        }
+
+                        if (item.group) {
+                            return <li key={item.id ?? `group-${index}`} role="presentation" className={theme.menuLabel}>{item.group}</li>
+                        }
+
+                        return (
+                            <li key={item.id ?? index} role="none">
+                                <button
+                                    type="button"
+                                    role="menuitem"
+                                    className={joinClasses(theme.menuItem, item.danger && theme.menuItemDanger)}
+                                    aria-disabled={item.disabled ? 'true' : undefined}
+                                    data-tooltip={item.disabled && item.disabledReason ? item.disabledReason : undefined}
+                                    onClick={() => choose(item)}>
+                                    {item.icon ? <IconComponent name={item.icon} size={14} /> : null}
+                                    <span>{item.label}</span>
+                                    {item.shortcut ? <kbd className={theme.kbd}>{item.shortcut}</kbd> : null}
+                                </button>
+                            </li>
+                        )
+                    })}
+                </ul>
+
+            </div>
+
+        </span>
+    )
+}

package/src/SkeletonComponent.jsx

@@ -0,0 +1,36 @@
+import useTheme, { joinClasses } from './internal/useTheme.js'
+
+const TOKENS = { text: 'skeletonText', circle: 'skeletonCircle', block: 'skeletonBlock' }
+
+const size = (value) => (typeof value === 'number' ? `${value}px` : value)
+
+/**
+ * Gemelo de SkeletonComponent.vue: la forma de lo que va a llegar, mientras
+ * llega.
+ *
+ *     <SkeletonComponent lines={3} />
+ *     <SkeletonComponent shape="circle" width="3rem" />
+ */
+export default function SkeletonComponent({ shape = 'text', lines = 1, width = null, height = null }) {
+    const theme = useTheme()
+
+    const count = shape === 'text' ? Math.max(1, lines) : 1
+
+    return (
+        <div aria-hidden="true" data-shape={shape}>
+            {Array.from({ length: count }, (_, index) => {
+                const last = shape === 'text' && count > 1 && index === count - 1
+
+                return (
+                    <span
+                        key={index}
+                        className={joinClasses(theme.skeleton, theme[TOKENS[shape] ?? 'skeletonText'])}
+                        style={{
+                            width: last ? '60%' : (size(width) ?? undefined),
+                            height: size(height) ?? undefined,
+                        }} />
+                )
+            })}
+        </div>
+    )
+}

package/src/ToastRegionComponent.jsx

@@ -0,0 +1,102 @@
+import { useEffect, useRef, useSyncExternalStore } from 'react'
+import { dismiss, getToasts, onToastsChange } from 'innoboxrr-form-core'
+import IconComponent from './IconComponent.jsx'
+import useTheme, { joinClasses } from './internal/useTheme.js'
+
+const supportsPopover = typeof HTMLElement !== 'undefined'
+    && typeof HTMLElement.prototype.showPopover === 'function'
+
+const isShown = (element) => {
+    try {
+        return element.matches(':popover-open')
+    } catch {
+        return false
+    }
+}
+
+/**
+ * Gemelo de ToastRegionComponent.vue: donde aparecen los avisos de `notify()`.
+ * Se monta una vez, en la raíz de la aplicación.
+ *
+ * Va en la capa superior con popover="manual", para no quedar debajo de un
+ * drawer abierto con showModal().
+ */
+export default function ToastRegionComponent({ label = 'Avisos', closeLabel = 'Cerrar' }) {
+    const toasts = useSyncExternalStore(onToastsChange, getToasts, getToasts)
+    const theme = useTheme()
+    const region = useRef(null)
+    const previous = useRef(0)
+
+    useEffect(() => {
+        const element = region.current
+        const count = toasts.length
+        const before = previous.current
+
+        previous.current = count
+
+        if (! element || ! supportsPopover) {
+            return
+        }
+
+        if (count === 0) {
+            if (isShown(element)) {
+                element.hidePopover()
+            }
+
+            return
+        }
+
+        // Un diálogo abierto después que la región queda por encima; volver a
+        // mostrarla la sube. Solo entonces, porque reinicia la animación.
+        const modalOpen = document.querySelector('dialog[open]') !== null
+
+        if (isShown(element) && count > before && modalOpen) {
+            element.hidePopover()
+        }
+
+        if (! isShown(element)) {
+            element.showPopover()
+        }
+    }, [toasts])
+
+    const variants = {
+        success: theme.toastSuccess,
+        danger: theme.toastDanger,
+        warning: theme.toastWarning,
+    }
+
+    return (
+        <div
+            ref={region}
+            className={theme.toastRegion}
+            popover="manual"
+            role="region"
+            aria-label={label}
+            hidden={! supportsPopover && toasts.length === 0 ? true : undefined}>
+
+            {toasts.map((toast) => (
+                <div
+                    key={toast.id}
+                    className={joinClasses(theme.toast, variants[toast.variant])}
+                    role={toast.variant === 'danger' ? 'alert' : 'status'}
+                    data-variant={toast.variant}>
+
+                    <div>
+                        {toast.title ? <strong className={theme.toastTitle}>{toast.title}</strong> : null}
+                        <span>{toast.message}</span>
+                    </div>
+
+                    <button
+                        type="button"
+                        className={joinClasses(theme.iconButton, theme.toastClose)}
+                        aria-label={closeLabel}
+                        onClick={() => dismiss(toast.id)}>
+                        <IconComponent name="close" size={14} />
+                    </button>
+
+                </div>
+            ))}
+
+        </div>
+    )
+}

package/src/internal/DialogShell.jsx

@@ -0,0 +1,80 @@
+import { useId } from 'react'
+import IconComponent from '../IconComponent.jsx'
+import useNativeDialog from './useNativeDialog.js'
+import useTheme, { joinClasses } from './useTheme.js'
+
+/**
+ * Gemelo de internal/DialogShell.vue: lo común a DialogComponent y
+ * DrawerComponent.
+ *
+ * `header` y `footer` son nodos, o funciones que reciben `{ close }`, igual que
+ * los slots con ámbito de Vue.
+ */
+export default function DialogShell({
+    kind = 'dialog',
+    open = false,
+    title = null,
+    label = null,
+    size = 'md',
+    side = 'end',
+    dismissible = true,
+    closeLabel = 'Cerrar',
+    onOpenChange,
+    onClose,
+    header = null,
+    footer = null,
+    children,
+}) {
+    const theme = useTheme()
+    const titleId = useId()
+
+    const part = kind === 'drawer' ? 'drawer' : 'dialog'
+
+    const modifier = kind === 'drawer'
+        ? (side === 'start' ? 'drawerStart' : null)
+        : ({ sm: 'dialogSmall', lg: 'dialogLarge' }[size] ?? null)
+
+    const requestClose = () => {
+        onOpenChange?.(false)
+        onClose?.()
+    }
+
+    const { ref, onClick } = useNativeDialog({ open, dismissible, onRequestClose: requestClose })
+
+    const render = (slot) => (typeof slot === 'function' ? slot({ close: requestClose }) : slot)
+
+    return (
+        <dialog
+            ref={ref}
+            className={joinClasses(theme[part], modifier && theme[modifier])}
+            aria-labelledby={title ? titleId : undefined}
+            aria-label={title ? undefined : (label ?? undefined)}
+            onClick={onClick}>
+
+            {/* El contenido existe solo mientras está abierto: un formulario
+                vuelve limpio cada vez. */}
+            {open ? (
+                <>
+                    {(title || header || dismissible) ? (
+                        <header className={theme[`${part}Header`]}>
+                            {header
+                                ? render(header)
+                                : (title ? <h2 id={titleId} className={theme[`${part}Title`]}>{title}</h2> : null)}
+
+                            {dismissible ? (
+                                <button type="button" className={theme.iconButton} aria-label={closeLabel} onClick={requestClose}>
+                                    <IconComponent name="close" size={16} />
+                                </button>
+                            ) : null}
+                        </header>
+                    ) : null}
+
+                    <div className={theme[`${part}Body`]}>{render(children)}</div>
+
+                    {footer ? <footer className={theme[`${part}Footer`]}>{render(footer)}</footer> : null}
+                </>
+            ) : null}
+
+        </dialog>
+    )
+}

package/src/internal/useNativeDialog.js

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef } from 'react'
+
+/**
+ * Gemelo de composables/useNativeDialog.js de la rama Vue: abre y cierra un
+ * <dialog> desde un booleano.
+ *
+ * El elemento del navegador pone la capa superior, el fondo inerte, el foco
+ * atrapado, Escape y la devolución del foco; pero guarda su propio estado. Aquí
+ * manda el booleano: Escape, un clic fuera o un cierre nativo solo piden cerrar.
+ *
+ * React no escribe el atributo `autofocus` en el DOM —lo resuelve él, antes de
+ * que el diálogo se abra—, así que el elemento que tiene que recibir el foco se
+ * marca con `data-autofocus` y se enfoca después de abrir.
+ *
+ * @param {{ open: boolean, dismissible: boolean, onRequestClose: () => void }} options
+ */
+export default function useNativeDialog({ open, dismissible, onRequestClose }) {
+    const ref = useRef(null)
+    const latest = useRef({ open, dismissible, onRequestClose })
+
+    latest.current = { open, dismissible, onRequestClose }
+
+    useEffect(() => {
+        const element = ref.current
+
+        if (! element) {
+            return
+        }
+
+        const isOpen = element.hasAttribute('open')
+
+        if (open && ! isOpen) {
+            typeof element.showModal === 'function' ? element.showModal() : element.setAttribute('open', '')
+
+            element.querySelector('[data-autofocus]')?.focus()
+        }
+
+        if (! open && isOpen) {
+            typeof element.close === 'function' ? element.close() : element.removeAttribute('open')
+        }
+    }, [open])
+
+    useEffect(() => {
+        const element = ref.current
+
+        if (! element) {
+            return undefined
+        }
+
+        const onCancel = (event) => {
+            event.preventDefault()
+
+            if (latest.current.dismissible) {
+                latest.current.onRequestClose?.()
+            }
+        }
+
+        const onClose = () => {
+            if (latest.current.open) {
+                latest.current.onRequestClose?.()
+            }
+        }
+
+        element.addEventListener('cancel', onCancel)
+        element.addEventListener('close', onClose)
+
+        return () => {
+            element.removeEventListener('cancel', onCancel)
+            element.removeEventListener('close', onClose)
+        }
+    }, [])
+
+    /**
+     * Un clic en el fondo llega con el propio <dialog> como destino y fuera de
+     * su caja.
+     */
+    const onClick = useCallback((event) => {
+        const element = ref.current
+
+        if (! element || event.target !== element || ! latest.current.dismissible) {
+            return
+        }
+
+        const box = element.getBoundingClientRect()
+
+        const inside = event.clientX >= box.left
+            && event.clientX <= box.right
+            && event.clientY >= box.top
+            && event.clientY <= box.bottom
+
+        if (! inside) {
+            latest.current.onRequestClose?.()
+        }
+    }, [])
+
+    return { ref, onClick }
+}

package/src/internal/useTheme.js

@@ -0,0 +1,21 @@
+import { useSyncExternalStore } from 'react'
+import { getTheme, onThemeChange } from 'innoboxrr-form-core'
+
+/**
+ * El tema completo, para los componentes que leen varios tokens a la vez.
+ *
+ * Va por `useSyncExternalStore` porque el tema es estado de módulo: un
+ * `setTheme` en caliente tiene que repintar lo ya montado.
+ *
+ * @returns {Record<string, string>}
+ */
+export default function useTheme() {
+    return useSyncExternalStore(onThemeChange, () => getTheme(), () => getTheme())
+}
+
+/**
+ * Une clases descartando las vacías.
+ *
+ * @param {...(string|null|undefined|false)} classes
+ */
+export const joinClasses = (...classes) => classes.filter(Boolean).join(' ')