innoboxrr-react-form-elements 3.3.0 → 3.5.0

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(' ')