componente · @solu30/ui-kit/feedback

PopoverContent

El panel flotante, posicionado contra el disparador. anchorEl cambia esa referencia por un elemento externo, para los casos imperativos donde el disparador vive fuera del árbol del Popover (event.currentTarget). disableAnimation apaga la transición de apertura.

79 sitios de import en 7 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
cmp-packages
dietaly
elliot
gestorsalon
luigi
raquetea

La parte, adentro de su padre

Cargando el espécimen…

export function PopoverMatrix() {
  return (
    <Stage label="Popover · 4 posiciones, no modal" tall wide>
      <PopoverPosiciones />
    </Stage>
  )
}

De specimens/feedback.tsx · PopoverMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

PopoverContent es una parte de Popover: sola no significa nada. Así que el escenario monta el padre completo, y lo que se ve incluye más piezas que la de esta ficha.

Cómo se usa

import { PopoverContent } from '@solu30/ui-kit/feedback'

Props

8 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
className	opcional	`string`	Additional CSS class
children	sí	`React__default.ReactNode`	—
closeOnClickOutside	opcional	`boolean`	Whether clicking outside closes the popover
align	opcional	`"start" \| "center" \| "end"`	@deprecated NO POSICIONA NADA. Este Popover no tiene concepto de alineación sobre el eje cruzado: `useFloatingPosition` SIEMPRE centra el panel contra el ancla (`anchorRect.left + width / 2 - contentWidth / 2` para `top`/`bottom`, y el equivalente vertical para `left`/`right`) y después lo clampea al viewport con 8 px de padding. La prop existe sólo para que el código migrado desde un Popover de Radix compilara, y se descarta en el destructuring. Para elegir el lado va `side`; para el ancho, `className`. Se elimina en el próximo major — la alineación de eje cruzado, si se agrega, va en `useFloatingPosition` y cambia posiciones ya en producción.
sideOffset	opcional	`number`	@deprecated NO HACE NADA. La separación entre el ancla y el panel la fija `useFloatingPosition` con su parámetro `offset` (8 px), que este componente no expone: el valor que se pase acá se descarta en el destructuring. Se elimina en el próximo major.
anchorEl	opcional	`HTMLElement \| null`	External anchor element used as the positioning reference. When provided, the popover positions itself relative to this element instead of the PopoverTrigger. Useful for imperative patterns where the trigger element is managed outside the Popover tree (e.g. event.currentTarget). @example <Popover open={isOpen} onOpenChange={setIsOpen}> <PopoverContent anchorEl={buttonRef.current} side="bottom"> {content} </PopoverContent> </Popover>
disableAnimation	opcional	`boolean`	Disable CSS entry/exit animation (e.g. for snapshot tests)
side	opcional	`PopoverPosition`	Position side — alias for the root-level `position` prop when using anchorEl

Ejemplo del paquete

// `side` es el único eje que se honra hoy: el panel se centra contra el ancla
// y después se clampea al viewport. `align` y `sideOffset` están deprecadas.
<PopoverContent side="bottom" closeOnClickOutside>
  <Filtros />
</PopoverContent>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.