Popover

Overlay

Componente de overlay flutuante para exibir conteúdo contextual quando ativado.

Preview

Exemplos de diferentes usos do componente Popover

Instalação

Como instalar e usar o componente Popover

Instalação

npm install @radix-ui/react-popover

Uso Básico

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@scmposs/hollow-ui";

<Popover>
  <PopoverTrigger asChild>
    <Button>Abrir Popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Conteúdo do popover aqui</p>
  </PopoverContent>
</Popover>

API dos Componentes

Propriedades disponíveis para cada parte do Popover

Popover

Componente raiz que gerencia o estado do popover.

Prop	Tipo	Default	Descrição
open	boolean	-	Estado controlado do popover
onOpenChange	function	-	Callback quando o estado muda

PopoverContent

Contêiner do conteúdo do popover.

Prop	Tipo	Default	Descrição
align	"start" \| "center" \| "end"	"center"	Alinhamento do popover
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Posição relativa ao trigger
sideOffset	number	4	Distância do trigger em pixels
className	string	-	Classes CSS adicionais

Posicionamento

Diferentes posições e alinhamentos do popover

Center

Posicionamento

<Popover>
  <PopoverTrigger asChild>
    <Button>Trigger</Button>
  </PopoverTrigger>
  <PopoverContent side="top" align="start" sideOffset={10}>
    Posicionado no topo, alinhado à esquerda
  </PopoverContent>
</Popover>

Popover Controlado

Como controlar o estado do popover programaticamente

Estado Controlado

import { useState } from "react";

export function ControlledPopover() {
  const [open, setOpen] = useState(false);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button>
          {open ? "Fechar" : "Abrir"} Popover
        </Button>
      </PopoverTrigger>
      <PopoverContent>
        <div className="space-y-2">
          <p>Este popover é controlado externamente</p>
          <Button onClick={() => setOpen(false)}>
            Fechar
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}

Exemplos Avançados

Implementações mais complexas do Popover

Formulário em Popover

PopoverForm.tsx

import { useState } from "react";

export function PopoverForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    // Processar formulário
    console.log({ name, email });
  };

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button>Adicionar Usuário</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="space-y-2">
            <h4 className="font-medium">Novo Usuário</h4>
            <p className="text-sm text-muted-foreground">
              Preencha as informações abaixo
            </p>
          </div>
          <div className="space-y-3">
            <div>
              <Label htmlFor="name">Nome</Label>
              <Input
                id="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Nome completo"
              />
            </div>
            <div>
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="email@exemplo.com"
              />
            </div>
            <Button type="submit" className="w-full">
              Criar Usuário
            </Button>
          </div>
        </form>
      </PopoverContent>
    </Popover>
  );
}

Menu Contextual

ContextMenu.tsx

export function ContextMenu({ children }) {
  return (
    <Popover>
      <PopoverTrigger asChild>
        {children}
      </PopoverTrigger>
      <PopoverContent className="w-48 p-1">
        <div className="space-y-1">
          <MenuItem icon={<Copy />} text="Copiar" shortcut="Ctrl+C" />
          <MenuItem icon={<Cut />} text="Recortar" shortcut="Ctrl+X" />
          <MenuItem icon={<Paste />} text="Colar" shortcut="Ctrl+V" />
          <Separator />
          <MenuItem icon={<Trash />} text="Excluir" shortcut="Del" danger />
        </div>
      </PopoverContent>
    </Popover>
  );
}

function MenuItem({ icon, text, shortcut, danger = false }) {
  return (
    <button
      className={`flex items-center justify-between w-full px-2 py-1.5 text-sm rounded hover:bg-accent ${
        danger ? "text-destructive" : ""
      }`}
    >
      <div className="flex items-center gap-2">
        {icon}
        <span>{text}</span>
      </div>
      {shortcut && (
        <span className="text-xs text-muted-foreground">{shortcut}</span>
      )}
    </button>
  );
}

Boas Práticas

Diretrizes para uso eficaz do Popover

✅ Faça

Use para conteúdo contextual e não-crítico
Mantenha o conteúdo conciso
Forneça formas alternativas de acessar o conteúdo
Use posicionamento que não obstrua conteúdo importante
Inclua indicadores visuais no trigger

❌ Evite

Conteúdo essencial ou crítico
Popovers aninhados (popover dentro de popover)
Conteúdo muito extenso
Triggers muito pequenos para touch devices
Abrir automaticamente sem interação do usuário

💡 Dica de Acessibilidade

O Popover usa role="dialog" e gerencia foco automaticamente. Certifique-se de que triggers tenham labels descritivos e que o conteúdo seja navegável via teclado (Tab, Escape para fechar).