Popover

Renderiza contenido arbitrario en un panel flotante posicionado directamente debajo del elemento ancla. El popover y su fondo transparente se insertan en document.body mediante un portal de React. Se puede cerrar haciendo clic en el fondo o presionando Escape. La posición se calcula desde el bounding rect del elemento ancla.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | content | ReactNode | Sí | — | Contenido del panel flotante. | | anchorRef | React.RefObject<HTMLElement> | Sí | — | Ref del elemento ancla. | | isOpen | boolean | Sí | — | Controla si el popover está visible. | | onClose | () => void | Sí | — | Se ejecuta al hacer clic en el fondo o presionar Escape. | | hasShadow | boolean | No | true | Agrega sombra al panel flotante. | | zIndex | number | No | 9999999 | Z-index base del fondo; el panel usa zIndex + 1. | | containerStyle | React.CSSProperties | No | {} | Estilos del panel flotante. | | backdropStyle | React.CSSProperties | No | {} | Estilos del fondo transparente. |

Uso

Básico

import { useRef, useState } from 'react';
import Popover from '@/components/Popover';

export default function Example() {
  const anchorRef = useRef<HTMLButtonElement>(null);
  const [open, setOpen] = useState(false);

  return (
    <>
      <button ref={anchorRef} onClick={() => setOpen(true)}>
        Abrir Popover
      </button>
      <Popover
        anchorRef={anchorRef}
        isOpen={open}
        onClose={() => setOpen(false)}
        content={
          <ul>
            <li>Opción A</li>
            <li>Opción B</li>
          </ul>
        }
      />
    </>
  );
}