innoboxrr-react-form-elements 3.3.0 → 3.5.0

package/src/DynamicGroupInputComponent.jsx

@@ -21,6 +21,7 @@ import SelectInputComponent from './SelectInputComponent.jsx'
 import TextInputComponent from './TextInputComponent.jsx'
 import TextareaInputComponent from './TextareaInputComponent.jsx'
 import useControlled from './internal/useControlled.js'
+import useTheme, { joinClasses } from './internal/useTheme.js'
 
 const COMPONENTS = {
     text: TextInputComponent,
@@ -38,15 +39,20 @@ const COMPONENTS = {
  * por su cuenta y trae ordenación **por teclado**, que ni SortableJS ni la API
  * nativa de arrastre dan. Aquí no es un detalle: un formulario que solo se
  * puede reordenar con el ratón no es accesible.
+ *
+ * El aspecto sale del tema, con el mismo marcado que la rama Vue: cada grupo es
+ * una superficie con su barra. Antes eran clases de Tailwind y colores escritos
+ * para el modo oscuro que el paquete no declara.
  */
 function SortableGroup({ id, children }) {
+    const theme = useTheme()
     const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id })
 
     return (
         <div
             ref={setNodeRef}
             style={{ transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1 }}
-            className="border rounded-lg bg-white dark:bg-slate-800 shadow-sm relative dark:border-slate-600">
+            className={theme.surface}>
             {children({ attributes, listeners })}
         </div>
     )
@@ -61,6 +67,7 @@ export default function DynamicGroupInputComponent({
     removeButtonLabel = 'Eliminar',
     itemLabel = 'Item',
 }) {
+    const theme = useTheme()
     const [current, set] = useControlled(value, onChange, [])
     const nextKey = useRef(0)
 
@@ -113,67 +120,66 @@ export default function DynamicGroupInputComponent({
     return (
         <div>
             {label ? (
-                <label className="block mb-4 ml-2 text-sm font-medium text-slate-900 dark:text-slate-100">
+                <label className={theme.label}>
                     {label}
                 </label>
             ) : null}
 
             <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
                 <SortableContext items={keyed.map((group) => group.__key)} strategy={verticalListSortingStrategy}>
-                    <div className="space-y-2 rounded-lg">
+                    <div className={theme.group}>
                         {keyed.map((group, index) => (
                             <SortableGroup key={group.__key} id={group.__key}>
                                 {({ attributes, listeners }) => (
                                     <>
-                                        <div className="flex justify-between items-center px-4 py-3 border-b bg-slate-50 dark:bg-slate-700 dark:border-slate-600 rounded-t-lg">
-                                            <div className="flex items-center gap-2">
-                                                <button
-                                                    type="button"
-                                                    aria-label={`Mover ${itemLabel} ${index + 1}`}
-                                                    className="cursor-move drag-handle text-slate-400"
-                                                    {...attributes}
-                                                    {...listeners}>
-                                                    <IconComponent name="drag" />
-                                                </button>
-                                                <h4 className="text-md font-semibold text-slate-800 dark:text-slate-100">
-                                                    {itemLabel} #{index + 1}
-                                                </h4>
-                                            </div>
-
-                                            <div className="flex items-center space-x-4 text-slate-400">
-                                                <button
-                                                    type="button"
-                                                    aria-label={`Duplicar ${itemLabel} ${index + 1}`}
-                                                    className="hover:text-blue-500 transition mr-2"
-                                                    onClick={() => set([
-                                                        ...keyed.slice(0, index + 1),
-                                                        { ...group, __key: `grupo-${nextKey.current++}` },
-                                                        ...keyed.slice(index + 1),
-                                                    ])}>
-                                                    <IconComponent name="copy" />
-                                                </button>
-
-                                                <button
-                                                    type="button"
-                                                    aria-label={`${removeButtonLabel} ${index + 1}`}
-                                                    className="text-red-800 dark:text-red-400 text-sm"
-                                                    onClick={() => set(keyed.filter((_, position) => position !== index))}>
-                                                    <IconComponent name="delete" />
-                                                </button>
-
-                                                <button
-                                                    type="button"
-                                                    aria-label={`Expandir ${itemLabel} ${index + 1}`}
-                                                    aria-expanded={! group._collapsed}
-                                                    className="hover:text-slate-600 dark:hover:text-slate-300 transition"
-                                                    onClick={() => updateAt(index, '_collapsed', ! group._collapsed)}>
-                                                    <IconComponent name={group._collapsed ? 'up' : 'down'} />
-                                                </button>
-                                            </div>
+                                        <div className={theme.toolbar}>
+                                            <button
+                                                type="button"
+                                                aria-label={`Mover ${itemLabel} ${index + 1}`}
+                                                className={joinClasses(theme.iconButton, theme.dragHandle, 'drag-handle')}
+                                                {...attributes}
+                                                {...listeners}>
+                                                <IconComponent name="drag" />
+                                            </button>
+
+                                            <h4 className={theme.groupTitle}>
+                                                {itemLabel} #{index + 1}
+                                            </h4>
+
+                                            <span className={theme.toolbarSpacer} />
+
+                                            <button
+                                                type="button"
+                                                aria-label={`Duplicar ${itemLabel} ${index + 1}`}
+                                                className={theme.iconButton}
+                                                onClick={() => set([
+                                                    ...keyed.slice(0, index + 1),
+                                                    { ...group, __key: `grupo-${nextKey.current++}` },
+                                                    ...keyed.slice(index + 1),
+                                                ])}>
+                                                <IconComponent name="copy" />
+                                            </button>
+
+                                            <button
+                                                type="button"
+                                                aria-label={`${removeButtonLabel} ${index + 1}`}
+                                                className={joinClasses(theme.iconButton, theme.iconButtonDanger)}
+                                                onClick={() => set(keyed.filter((_, position) => position !== index))}>
+                                                <IconComponent name="delete" />
+                                            </button>
+
+                                            <button
+                                                type="button"
+                                                aria-label={`Expandir ${itemLabel} ${index + 1}`}
+                                                aria-expanded={! group._collapsed}
+                                                className={theme.iconButton}
+                                                onClick={() => updateAt(index, '_collapsed', ! group._collapsed)}>
+                                                <IconComponent name={group._collapsed ? 'up' : 'down'} />
+                                            </button>
                                         </div>
 
                                         {! group._collapsed ? (
-                                            <div className="p-4">
+                                            <div className="fe-card-body">
                                                 {inputsConfig.map((field) => {
                                                     const Component = COMPONENTS[field.type] ?? TextInputComponent
 
@@ -208,7 +214,7 @@ export default function DynamicGroupInputComponent({
 
             <button
                 type="button"
-                className="fe-button fe-mt"
+                className={joinClasses(theme.button, 'fe-mt')}
                 onClick={() => set([...keyed, emptyGroup()])}>
                 {addButtonLabel}
             </button>

package/src/FileDropInputComponent.jsx

@@ -1,8 +1,14 @@
 import { useRef, useState } from 'react'
+import IconComponent from './IconComponent.jsx'
+import useTheme from './internal/useTheme.js'
 
 /**
  * Gemelo de FileDropInputComponent.vue. `onFilesChange` recibe un array de
  * File, venga de arrastrar o del diálogo.
+ *
+ * `fe-file-drop` no lo definía ninguna hoja, así que la zona salía sin borde ni
+ * resalte. Ahora sale del tema, con el mismo icono y el mismo texto secundario
+ * que la rama Vue.
  */
 export default function FileDropInputComponent({
     multiple = false,
@@ -11,18 +17,20 @@ export default function FileDropInputComponent({
     subText = 'o haz clic para seleccionar los archivos.',
     onFilesChange,
 }) {
+    const theme = useTheme()
     const input = useRef(null)
     const [dragging, setDragging] = useState(false)
 
     return (
         <div
-            className="fe-file-drop"
+            className={theme.fileDrop}
             data-dragging={dragging}
             role="button"
             tabIndex={0}
             onClick={() => input.current?.click()}
             onKeyDown={(event) => {
                 if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault()
                     input.current?.click()
                 }
             }}
@@ -36,8 +44,10 @@ export default function FileDropInputComponent({
                 setDragging(false)
                 onFilesChange?.(Array.from(event.dataTransfer.files))
             }}>
+            <IconComponent name="media" size={32} />
+
             <p>{mainText}</p>
-            <p>{subText}</p>
+            <p className={theme.fileDropHint}>{subText}</p>
 
             <input
                 ref={input}

package/src/FileInputComponent.jsx

@@ -167,14 +167,14 @@ export default function FileInputComponent({
             </ul>
 
             {errors.length ? (
-                <ul className="fe-list text-red-600">
+                <ul className="fe-list fe-error">
                     {errors.map((entry, index) => (
                         <li key={`${entry.name}-error-${index}`}>{entry.name}: {entry.errors?.join(', ')}</li>
                     ))}
                 </ul>
             ) : null}
 
-            {overTotal ? <p className="text-red-600">El tamaño total supera el máximo permitido.</p> : null}
+            {overTotal ? <p className="fe-error">El tamaño total supera el máximo permitido.</p> : null}
 
             {! autoUpload && files.length ? (
                 <button type="button" className="fe-button" disabled={uploading || overTotal} onClick={upload}>

package/src/FqsInputComponent.jsx

@@ -34,7 +34,7 @@ export default function FqsInputComponent({
 
     return (
         <div>
-            <h4>{text.title}</h4>
+            <h4 className="fe-group-title fe-mb-sm">{text.title}</h4>
 
             {items.map((item, index) => (
                 <div key={index} className="fe-card fe-card-sm fe-card-body fe-mb">

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/RadioInputComponent.jsx

@@ -17,10 +17,11 @@ export default function RadioInputComponent({
 }) {
     const [current, set] = useControlled(value, onChange, '')
     const radioClass = useThemeClass('radio', customClass)
+    const labelClass = useThemeClass('label')
 
     return (
         <div className="fe-mb">
-            <label className="ml-2 text-sm font-medium text-gray-900 dark:text-white">
+            <label className={labelClass}>
                 <input
                     className={radioClass}
                     type="radio"

package/src/SingleCheckboxInputComponent.jsx

@@ -1,3 +1,5 @@
+import useThemeClass from './internal/useThemeClass.js'
+
 /**
  * Gemelo de SingleCheckboxInputComponent.vue.
  *
@@ -13,10 +15,11 @@ export default function SingleCheckboxInputComponent({
     ...rest
 }) {
     const htmlId = `${id}_${label}`
+    const labelClass = useThemeClass('label')
 
     return (
         <div className="fe-mb">
-            <label htmlFor={htmlId} className="ml-2 text-sm font-medium text-gray-900 dark:text-white">
+            <label htmlFor={htmlId} className={labelClass}>
                 <input
                     id={htmlId}
                     className="fe-checkbox"

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>
+    )
+}