componentes / popover
Popover
Painel aberto por clique, ancorado a um elemento, com flip/shift e fechamento por clique fora ou Esc.
Como usar
O gatilho recebe `aria-expanded` e `aria-controls`; o painel é um `role="dialog"` nomeado por `label`. O foco entra no painel ao abrir e volta ao gatilho com Esc. Pode ter conteúdo interativo; use `PopoverClose` para um botão de fechar interno. Para dicas curtas use `Tooltip`.
preview
Popover.tsx
import { Button, Popover, PopoverClose } from "vaiperui"; <Popover trigger={<Button variant="outlined">Detalhes</Button>} label="Detalhes"> <p>Conteúdo ancorado.</p> <PopoverClose><Button size="sm">Entendi</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 | Padrão | Descrição |
|---|---|---|---|
| trigger | ReactElement | nenhum | Elemento que alterna o painel (precisa de ref, foco e onClick) |
| label | string | obrigatório | Nome acessível do painel |
| side / align | top | right | bottom | left / start | center | end | bottom / center | Lado do gatilho (inverte se não houver espaço) e alinhamento |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | nenhum | Estado aberto controlado ou não controlado |
| radius / animation | none | sm | md | lg | full / none | smooth | fast | bounce | lg / fast | Arredondamento e velocidade da transição de entrada |
Acessibilidade
- O painel é um `role="dialog"` nomeado por `label` (obrigatório), renderizado em um portal.
- O gatilho recebe `aria-haspopup="dialog"`, `aria-expanded` e, enquanto aberto, `aria-controls` apontando para o painel.
- Ao abrir, o foco vai para o primeiro elemento focável do painel (ou o próprio painel).
- Esc fecha e devolve o foco ao gatilho; um clique fora também fecha.
Teclado
| Tecla | Ação |
|---|---|
| Enter / Space | No gatilho, alterna o painel (clique nativo do botão) |
| Esc | Fecha o painel e foca o gatilho |
Tenha em mente
- Não é modal: o Tab não fica preso, sair do foco do painel não o fecha e a página não tem a rolagem bloqueada. A ordem do Tab segue o DOM, e o painel fica no fim do `body`.
- O foco não volta ao gatilho ao fechar por clique fora ou `PopoverClose`; o `trigger` deve ser um elemento focável que aceite `ref` e `onClick`.