Komponen / Kolaborasi & domain
CommentBox
Kolom komentar di detail dokumen dengan @mention untuk menyebut rekan; ⌘ Return untuk kirim. Tumbuh mengikuti isi.
Import
tsx
import { CommentBox } from '@divistant/circca-react';Props
ref dan atribut <textarea> lainnya (id, name, autoFocus, maxLength, aria-*) diteruskan ke <textarea>; className dipasang ke baris akar.
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| author | { name: string; src?: string } | — | Penulis (pengguna saat ini) — Avatar Circle 32 di kiri. |
| value / defaultValue / onValueChange | string / string / (value: string) => void | — | Isi terkendali/tak terkendali. |
| onSubmit | ({ text, mentions }) => void | Promise | — | Kirim / ⌘ Return. `text` dipangkas; `mentions` berisi `value` orang yang disebut dan masih ada di teks. Promise → spinner, kolom dikosongkan setelah berhasil. |
| people | { value: string; label: string; description?: string; src?: string }[] | — | Orang yang bisa disebut. Disaring lokal berdasarkan nama/peran (maks. 8). |
| onMentionSearch | (query: string) => void | — | Pencarian dari server: CommentBox tidak menyaring sendiri, perbarui `people` dengan hasilnya. |
| onAttach | () => void | — | Menampilkan IconButton Ghost Small paperclip (Figma "attach"), mis. membuka pemilih file. |
| attachLabel | string | 'Lampirkan file' | Label/tooltip tombol lampiran. |
| submitLabel | string | 'Kirim' | Label tombol kirim (Button Primary Small). |
| hint | ReactNode | false | '⌘ Return untuk kirim' | Petunjuk pintasan; di Windows/Linux "Ctrl Enter untuk kirim". Disembunyikan otomatis bila kolom < 360 px. |
| placeholder | string | 'Tulis komentar… ketik @ untuk menyebut rekan' | Placeholder fg/subtle. |
| disabled | boolean | false | Nonaktif (opasitas 45%). |
| aria-label | string | 'Komentar' | Nama aksesibel kolom, mis. "Komentar untuk PO-2026-0142". |
| className | string | — | Kelas tambahan untuk baris akar. |
Sumber
Kode komponen ada di packages/react/src/components/comment-box. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.