DropdownMenu
Menú de acciones bajo un disparador, con atajos y acciones destructivas.
Usar
import {
DropdownMenu,
MenuItem,
} from "@unozero-ai/ui/react";
<DropdownMenu></DropdownMenu>Lo básico
Agrupa las acciones secundarias de un objeto (una reserva, una conversación) bajo un solo botón, para que la fila o la cabecera no se llenen de botones. La acción que más se usa no va aquí: va a la vista, como botón.
El disparador va en el slot trigger (ya no es la prop trigger), y el menú le pone aria-haspopup y aria-expanded en su botón interno. Los elementos llegan por items, con separator para la línea; al elegir uno, onSelect recibe su value (o su texto, si no lo tiene). El onSelect de cada elemento sigue existiendo.
Última acción: ninguna
Iconos, atajos y estados
Para iconos, escribe los elementos como hijos MenuItem con el icono en el slot icon (16 px) y un <hr> de separador: el icon de items solo acepta un nodo del DOM, no un componente de React. shortcut se alinea a la derecha y solo se muestra: registrar la tecla le toca a tu pantalla. La acción destructiva va al final y separada, en el color de peligro y con una palabra que ya dice lo que hace.
Sigue el patrón menu button de la APG: Enter, Espacio o ↓ abren y enfocan el primero, ↑ el último; dentro, las flechas, Inicio/Fin y escribir una letra saltan; Esc cierra y devuelve el foco al disparador; Tab cierra y sigue. Un elemento disabled se puede enfocar pero no elegir, y no explica por qué está apagado: si el motivo no es obvio, mejor no mostrarlo.
Al final de una fila
Con align="end" el menú crece hacia la izquierda desde el borde derecho del disparador: es lo que necesita el «más acciones» que cierra una fila. El panel va en la top layer, así que un padre con overflow-hidden (aquí, el que envuelve la lista) ya no lo recorta, y si no cabe debajo se abre hacia arriba y se ciñe a la pantalla. En el kit React había que poner overflow-visible al contenedor.
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).