Komponen / Form & input
FilterBar
Baris pencarian + filter + jumlah hasil di atas daftar dokumen (PO, invoice, BAST).
Import
tsx
import { FilterBar, FilterChip, SearchField } from '@divistant/circca-react';Props
Juga menerima atribut <div>. Elemen akar ber-role="search".
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| search | SearchFieldProps | — | Props SearchField (Medium, mengisi sisa baris atas). Wajib berisi aria-label. |
| leading | ReactNode | — | Di kiri kolom cari, lebar 220 — mis. Select tampilan tersimpan. |
| actions | ReactNode | — | Aksi di kanan baris atas: Button Ghost "Simpan tampilan", IconButton ekspor. |
| children | ReactNode | — | FilterChip-chip (dibungkus role="group" "Filter"). |
| onClearAll | () => void | — | Isi hanya saat ada filter aktif; tombol "Hapus semua filter" tampil bila diisi. Fokus pindah ke chip pertama setelahnya. |
| clearLabel | string | 'Hapus semua filter' | Label tombol hapus semua. |
| resultCount | ReactNode | — | Jumlah hasil di kanan, mis. "24 dari 142 PO". Diumumkan lewat aria-live="polite". |
| aria-label | string | 'Cari dan filter' | Nama landmark pencarian. |
| className | string | — | Kelas tambahan. |
Sumber
Kode komponen ada di packages/react/src/components/filter-bar. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.