innoboxrr-react-datatable 2.1.0 → 2.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "innoboxrr-react-datatable",
-  "version": "2.1.0",
+  "version": "2.3.0",
   "description": "Gemelo React de innoboxrr-vue-datatable: el mismo contrato de modelo, la misma tabla.",
   "type": "module",
   "main": "index.js",
@@ -37,11 +37,12 @@
     "node": ">=20"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.8.0",
     "@iconify/react": "^6.0.0",
     "axios": "^1.7.0"
   },
   "peerDependencies": {
-    "innoboxrr-form-core": "^2.1.0",
+    "innoboxrr-form-core": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router-dom": "^7.0.0"

package/src/components/ActionListComponent.jsx

@@ -2,13 +2,12 @@ import DisabledLinkComponent from './DisabledLinkComponent.jsx'
 import IconLinkComponent from './IconLinkComponent.jsx'
 import IconRouteComponent from './IconRouteComponent.jsx'
 
+// Un popover se cierra solo: no hace falta preguntarle nada a nadie.
+// La llamada es opcional porque hidePopover no existe en un navegador anterior
+// a la Popover API —ni en jsdom—, y un menu que no cierra es mejor que una
+// excepcion.
 const closeDropdown = (event) => {
-    const dropdown = event.target.closest('.uk-dropdown')
-
-    // UIkit lo aporta la aplicación anfitriona.
-    if (dropdown) {
-        globalThis.UIkit?.dropdown(dropdown)?.hide(false)
-    }
+    event.target.closest('[popover]')?.hidePopover?.()
 }
 
 /**

package/src/components/DataTableComponent.jsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react'
 import ActionListComponent from './ActionListComponent.jsx'
+import DatatableIcon from './DatatableIcon.jsx'
 import NavDropdownComponent from './NavDropdownComponent.jsx'
 
 const cellValue = (head, row) => (
@@ -96,8 +97,9 @@ export default function DataTableComponent({
                                         type="button"
                                         aria-label={`Acciones del registro ${row.id}`}
                                         className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-2 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
+                                        popoverTarget={`dropdown_${row.id}`}
                                         onClick={() => onActionButtonClicked?.(row.actions)}>
-                                        <i className="fas fa-cogs"></i>
+                                        <DatatableIcon icon="actions" />
                                     </button>
 
                                     <NavDropdownComponent id={`dropdown_${row.id}`} pos="left">

package/src/components/DisabledLinkComponent.jsx

@@ -13,7 +13,8 @@ export default function DisabledLinkComponent({ icon = '', text }) {
             href="#"
             aria-disabled="true"
             className="disabled-link block px-4 py-2 dark:hover:text-white dark:text-slate-400"
-            uk-tooltip="title: This action is not authorized; pos:right"
+            data-tooltip="This action is not authorized"
+            data-tooltip-pos="right"
             onClick={(event) => event.preventDefault()}>
             {showIcon ? <DatatableIcon icon={icon} /> : null}
             <span>{text}</span>

package/src/components/NavDropdownComponent.jsx

@@ -1,35 +1,98 @@
-import { useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
+import { autoUpdate, computePosition, flip, offset as offsetMiddleware, shift } from '@floating-ui/dom'
+import { classFor } from 'innoboxrr-form-core'
 
 /**
  * Gemelo de NavDropdownComponent.vue.
  *
- * UIkit lee el atributo `uk-dropdown` del DOM. React lo escribe igual, pero
- * UIkit sólo lo procesa al montarse el nodo, así que se le avisa — con guarda,
- * porque UIkit lo aporta la aplicación anfitriona y en una prueba no está.
+ * Antes lo movía `uk-dropdown`, y como UIkit sólo procesa el atributo al
+ * montarse el nodo, había que avisarle con `UIkit.update()` — con guarda,
+ * porque UIkit lo aportaba la aplicación anfitriona sin que nadie lo
+ * declarara, y en una prueba no estaba.
+ *
+ * La mitad de lo que hacía ya lo hace el navegador. La **Popover API** —el
+ * atributo `popover` y el `popoverTarget` del botón— aporta de fábrica la capa
+ * superior, el cierre al pulsar fuera y el cierre con Escape. Lo único que
+ * falta es colocarlo, y de eso se ocupa Floating UI.
+ *
+ * El botón que lo abre sólo necesita `popoverTarget` con este mismo id:
+ *
+ *     <button popoverTarget={`dropdown_${row.id}`}>…</button>
+ *     <NavDropdownComponent id={`dropdown_${row.id}`} pos="left" />
+ *
+ * @param {{ id: string, pos?: string, offset?: number, children?: any }} props
  */
 export default function NavDropdownComponent({
     id,
+    // Se conservan los nombres que usaba UIkit para no romper a quien ya los
+    // pasa; `bottom-left` y compañía se traducen a los de Floating UI.
     pos = 'bottom-left',
-    mode = 'click',
-    offset = 0,
-    // Es el nombre de una animacion de UIkit, no una clase nuestra.
-    animation = 'uk-animation-slide-top-small',
-    duration = 500,
+    offset = 4,
     children,
 }) {
-    const host = useRef(null)
+    const panel = useRef(null)
+    const stopFollowing = useRef(null)
+
+    const placement = (() => {
+        const [side, align] = pos.split('-')
+
+        if (! align) {
+            return side
+        }
+
+        // UIkit dice `bottom-left` para «debajo, alineado a la izquierda»;
+        // Floating UI lo llama `bottom-start`.
+        return `${side}-${align === 'left' ? 'start' : 'end'}`
+    })()
+
+    const onBeforeToggle = useCallback((event) => {
+        if (event.newState !== 'open') {
+            stopFollowing.current?.()
+            stopFollowing.current = null
+
+            return
+        }
+
+        // El botón es quien apunta a este panel, así que se encuentra por el
+        // atributo y no hace falta que nadie lo pase como prop.
+        const trigger = document.querySelector(`[popovertarget="${id}"]`)
+
+        if (! trigger || ! panel.current) {
+            return
+        }
+
+        // autoUpdate recoloca al hacer scroll o redimensionar: un menú abierto
+        // que se queda flotando donde estaba es peor que uno mal colocado.
+        stopFollowing.current = autoUpdate(trigger, panel.current, () => {
+            computePosition(trigger, panel.current, {
+                placement,
+                middleware: [
+                    offsetMiddleware(offset),
+                    // Si no cabe abajo, se va arriba; si se sale por un lado,
+                    // se desplaza para caber.
+                    flip(),
+                    shift({ padding: 8 }),
+                ],
+            }).then(({ x, y }) => {
+                Object.assign(panel.current.style, { left: `${x}px`, top: `${y}px` })
+            })
+        })
+    }, [id, offset, placement])
 
     useEffect(() => {
-        globalThis.UIkit?.update?.(host.current)
-    }, [])
+        const node = panel.current
+
+        node?.addEventListener('beforetoggle', onBeforeToggle)
+
+        return () => {
+            node?.removeEventListener('beforetoggle', onBeforeToggle)
+            stopFollowing.current?.()
+        }
+    }, [onBeforeToggle])
 
     return (
-        <div
-            ref={host}
-            id={id}
-            uk-dropdown={`pos: ${pos}; mode: ${mode}; offset: ${offset}; animation: ${animation}; duration: ${duration};`}
-            className="fe-p-0 z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-slate-800 p-2">
-            <ul className="fe-menu">{children}</ul>
+        <div ref={panel} id={id} popover="" className={classFor('menu')}>
+            <ul className="fe-menu-list">{children}</ul>
         </div>
     )
 }