Komponen / Aksi
ActionMenu
Menu aksi pop-up dengan grup, pemisah, dan aksi merusak: aksi per baris di DataTable (⋯), "Aksi lain" di header detail PO (Duplikat, Cetak, Kirim ke customer, Batalkan PO).
Import
tsx
import { ActionMenu } from '@divistant/circca-react';Props · ActionMenu
Isi `trigger` untuk bentuk ringkas (children = isi menu). Tanpa `trigger`, susun sendiri: <ActionMenu><ActionMenu.Trigger asChild>…</ActionMenu.Trigger><ActionMenu.Content>…</ActionMenu.Content></ActionMenu>.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| trigger | ReactNode | — | Elemen pemicu: <Button trailingVisual={CaretDown}>, <IconButton icon={DotsThree} label="Aksi lain">. Untuk tombol bergaya pull-down, pakai PullDownButton. |
| children | ReactNode | — | ActionMenu.Item / Group / Label / Separator. |
| items | ActionMenuEntry[] | — | Pintasan data: item `{ label, leadingVisual, shortcut, description, variant, disabled, onSelect, onSelectAfterClose }`, `{ type: 'separator' }`, atau `{ type: 'group', label, items }`. |
| align | 'start' | 'center' | 'end' | 'start' | Perataan terhadap pemicu. `end` untuk tombol ⋯ di ujung kanan baris tabel. |
| side | 'top' | 'right' | 'bottom' | 'left' | 'bottom' | Sisi pemicu; bertukar otomatis bila ruang tidak cukup. |
| sideOffset | number | 4 | Jarak panel ke pemicu, px. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | Kendali keadaan terbuka. |
| modal | boolean | true | Selama menu terbuka, bagian lain halaman tidak bisa diklik dan pembaca layar hanya membaca menu. |
| aria-label | string | — | Nama aksesibel menu. Bawaan: label pemicu. |
| className | string | — | Kelas tambahan untuk panel (lebar minimum 251 sesuai Figma). |
Props · ActionMenu.Item
Juga menerima props Radix DropdownMenu.Item (textValue, asChild untuk tautan, dll.).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| children | ReactNode | — | Label aksi (properti Figma Label). |
| leadingVisual | Visual | — | Ikon 16 sebelum label (properti Figma Leading icon). |
| description | ReactNode | — | Keterangan singkat di bawah label, Footnote/Default fg/muted (properti Figma Description). |
| shortcut | ReactNode | — | Teks pintasan di kanan, mis. "⌘D" (properti Figma Trailing). Hanya tampilan — daftarkan pintasannya sendiri. |
| variant | 'default' | 'danger' | 'default' | Danger untuk aksi merusak: label & ikon danger/fg. |
| disabled | boolean | false | Nonaktif: opasitas 40%, dilewati panah. |
| onSelect | (event: Event) => void | — | Dijalankan saat dipilih. Menu lalu tertutup; `event.preventDefault()` menahannya tetap terbuka. |
| onSelectAfterClose | () => void | — | Dijalankan setelah menu tertutup dan fokus kembali ke pemicu — pakai untuk membuka Dialog. |
Props · ActionMenu.Group / Label / Separator
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| Group label | ReactNode | — | Judul grup (ActionList/Group title); otomatis menjadi nama aksesibel grup. |
| Label | — | — | Judul grup lepas, tanpa Group. |
| Separator | — | — | Garis 1 border/muted dengan jarak 4 (ActionList/Divider). |
Sumber
Kode komponen ada di packages/react/src/components/action-menu. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.