componentes / popover
Popover
Panel abierto por clic, anclado a un elemento, con flip/shift y cierre por clic fuera o Esc.
Cómo usar
El disparador recibe `aria-expanded` y `aria-controls`; el panel es un `role="dialog"` nombrado por `label`. El foco entra al panel al abrir y vuelve al disparador con Esc. Puede tener contenido interactivo; usa `PopoverClose` para un botón de cierre interno. Para pistas cortas usa `Tooltip`.
preview
Popover.tsx
import { Button, Popover, PopoverClose } from "vaiperui"; <Popover trigger={<Button variant="outlined">Detalles</Button>} label="Detalles"> <p>Contenido anclado.</p> <PopoverClose><Button size="sm">Entendido</Button></PopoverClose></Popover>Lados
preview
lados.tsx
<Popover side="top" label="top" trigger={<Button>top</Button>}>...</Popover><Popover side="right" label="right" trigger={<Button>right</Button>}>...</Popover><Popover side="bottom" label="bottom" trigger={<Button>bottom</Button>}>...</Popover><Popover side="left" label="left" trigger={<Button>left</Button>}>...</Popover>Props
| Prop | Valores | Predeterminado | Descripción |
|---|---|---|---|
| trigger | ReactElement | ninguno | Elemento que alterna el panel (necesita ref, foco y onClick) |
| label | string | obligatorio | Nombre accesible del panel |
| side / align | top | right | bottom | left / start | center | end | bottom / center | Lado del disparador (se invierte si no hay espacio) y alineación |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | ninguno | Estado abierto controlado o no controlado |
| radius / animation | none | sm | md | lg | full / none | smooth | fast | bounce | lg / fast | Redondeo y velocidad de la transición de entrada |
Accesibilidad
- El panel es un `role="dialog"` nombrado por `label` (obligatorio), renderizado en un portal.
- El disparador recibe `aria-haspopup="dialog"`, `aria-expanded` y, mientras está abierto, `aria-controls` apuntando al panel.
- Al abrir, el foco va al primer elemento enfocable del panel (o al propio panel).
- Esc cierra y devuelve el foco al disparador; un clic fuera también cierra.
Teclado
| Tecla | Acción |
|---|---|
| Enter / Space | En el disparador, alterna el panel (clic nativo del botón) |
| Esc | Cierra el panel y enfoca el disparador |
Ten en cuenta
- No es modal: el Tab no queda atrapado, perder el foco del panel no lo cierra y la página no bloquea el scroll. El orden del Tab sigue el DOM, y el panel queda al final del `body`.
- El foco no vuelve al disparador al cerrar por clic fuera o `PopoverClose`; el `trigger` debe ser un elemento enfocable que acepte `ref` y `onClick`.