Popover

Usage

import { Popover, PopoverTrigger, PopoverContent } from '@acronis-platform/ui-react';

Popover is a compound component built on Base UI's Popover primitive (positioning, focus management, outside-press / Esc dismissal). Popover owns the open state; PopoverTrigger toggles and anchors it; PopoverContent is the portaled, positioned popup (side / align / sideOffset). This is a design-pending v1 themed from the shared semantic surface tokens (bg-background / text-foreground / border-border); a --ui-popover-* tier is pending a Figma pass.

Examples

A popover with a heading and description:

<Popover>
  <PopoverTrigger render={<Button variant="secondary">Open</Button>} />
  <PopoverContent>
    <div className="grid gap-2">
      <h4 className="font-medium leading-none">Dimensions</h4>
      <p className="text-sm text-muted-foreground">
        Set the dimensions for the layer.
      </p>
    </div>
  </PopoverContent>
</Popover>

Position it with side / align:

<PopoverContent side="right" align="start">
  {/* … */}
</PopoverContent>

Controlled — drive open and react to onOpenChange:

const [open, setOpen] = useState(false);

<Popover open={open} onOpenChange={setOpen}>
  {/* …trigger + content… */}
</Popover>;

When the popover renders inside an isolated container (e.g. a shadow root), pass a portalContainer so the popup inherits that scope's styles.

API Reference

PopoverContent

Popover (root) accepts the Base UI Popover root props — open / defaultOpen, onOpenChange. PopoverTrigger and PopoverPortal wrap the matching Base UI parts. See the Base UI Popover docs for the full prop surface.