Komponen / Lapisan & umpan balik
Popover
Panel melayang non-modal untuk detail ringkas atau filter tanpa meninggalkan layar: filter daftar PO, detail singkat customer, ringkasan termin.
Import
tsx
import { Popover } from '@divistant/circca-react';Props · Popover
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| trigger | ReactNode | — | Elemen pemicu, mis. <Button>. Tanpa trigger, pakai Popover.Anchor dan kendalikan lewat open/onOpenChange. |
| title | ReactNode | — | Judul singkat (Headline). Menjadi nama aksesibel panel lewat aria-labelledby. |
| children | ReactNode | — | Isi panel; bergulir sendiri bila melebihi tinggi layar. |
| footer | ReactNode | — | Tombol Small rata kanan: Atur ulang/Batal lalu aksi utama paling kanan. |
| caret | boolean | true | Segitiga penunjuk ke pemicu (Figma Caret=Top / None). |
| side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Sisi pemicu tempat panel muncul; bertukar otomatis bila ruang tidak cukup. |
| align | 'start' | 'center' | 'end' | 'start' | Perataan terhadap pemicu. |
| sideOffset | number | 4 | Jarak panel ke pemicu (px). |
| open / defaultOpen | boolean | — | Status terbuka (terkontrol / awal). |
| onOpenChange | (open: boolean) => void | — | Dipanggil saat dibuka/ditutup (pemicu, Esc, klik di luar, Popover.Close). |
| aria-label | string | — | Nama aksesibel bila tidak ada title. |
| className | string | — | Kelas tambahan untuk panel, mis. w-[400px] untuk mengganti lebar 320. |
Props · Popover.Close / Popover.Trigger / Popover.Anchor
Pakai asChild agar elemen anak (mis. <Button>) yang menutup atau membuka popover. Anchor menjadi titik acu posisi selain pemicu.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| asChild | boolean | false | Render sebagai elemen anak. |
Sumber
Kode komponen ada di packages/react/src/components/popover. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.