Popover

@/components/ui/Popover

Delt chrome for et ANKRET panel mot en trigger — posisjon, elevasjon, Escape, klikk-utenfor, fokusretur og mobil-ark. Materiale «meny»: bg surface, shadow-menu, min-bredde 220px.

Når brukes den

Ethvert ankret panel mot en trigger-knapp eller et felt — dropdown, meny, listboks, hjelpetekst.
Posisjon (`plassering` under/over/auto, `align` venstre/høyre), bakgrunn/kant/skygge/radius fra tokens, Escape, klikk utenfor, fokusretur og mobil-ark på `(pointer: coarse)` er komponentens ansvar.
`role`, piltastnavigasjon og radrendering er IKKE komponentens ansvar — send dem via `panelProps`, fordi et menyvalg (`role="menu"`) og en listboks (`role="listbox"`) annonseres helt ulikt for skjermleser.
Ikke bygg en ny håndrullet dropdown — designsystem-audit 2026-08-31 fant fem duplikater av nøyaktig denne logikken før Popover fantes.

Eksempler

Venstreankret, med fokusretur

Standardplassering. Trigger sender sin egen ref som `triggerRef` og får fokus tilbake ved Escape.

<Popover trigger={<Button ref={triggerRef} onClick={...} />} open={open} onOpenChange={setOpen} triggerRef={triggerRef}>
  …
</Popover>

Høyreankret

`align="hoyre"` — riktig når triggeren står ytterst til høyre i en rad, slik at panelet ikke går utenfor skjermen.

bredde="trigger"

Panelet spenner nøyaktig triggerens bredde — for et søkefelt- eller feltnedtrekk.

Props

Sveip tabellen for å se hele innholdet

Navn

Type

Default

Beskrivelse

trigger *

ReactNode

—

Ferdig bygget trigger-element. Kallstedet eier ref, klikk og aria-attributter selv.

children *

ReactNode

—

Panelinnholdet. Popover eier kun chrome rundt dette.

open

boolean

—

Kontrollert åpen-tilstand.

defaultOpen

boolean

false

Ukontrollert startverdi.

onOpenChange

(open: boolean) => void

—

Kalles ved enhver tilstandsendring.

triggerRef

React.RefObject<HTMLElement | null>

—

Samme ref-objekt kallstedet selv fester på triggeren. Utelatt: ingen automatisk fokusretur ved Escape.

panelProps

React.HTMLAttributes<HTMLDivElement>

—

Spres på panel-diven: role, aria-*, onKeyDown, id, tabIndex.

panelRef

(el: HTMLDivElement | null) => void

—

Callback-ref til panel-DOM-noden, f.eks. for scrollIntoView.

plassering

'under' | 'over' | 'auto'

'under'

'auto' måler ledig plass ved åpning og velger side.

align

'venstre' | 'hoyre'

'venstre'

Horisontal ankring.

bredde

number | string | 'trigger'

220

Tall/CSS-bredde → min-width. 'trigger' → panelet spenner triggerens bredde.

mobilArk

boolean

true

Slå av for et lite, statisk panel der bunnark-mønsteret er overkill.

className

string

—

Legges på rot-wrapperen.

Regler

regel/modal-gjore-accordion-lese

Beslektede komponenter

overflow-menu

dropdown

modal