FilterChip

import { useState } from 'react';
import { Button, Checkbox, FilterChip, Popover } from '@divistant/circca-react';

const STATUS = ['Draft', 'Menunggu approval', 'PO terbit', 'Menunggu BAST/DO', 'Ditagih'] as const;

// Tidak aktif: "Status ▾". Aktif: "Status: Draft ▾ ×" — bagian utama membuka pilihan, × menghapus filter.
// Pilihan disimpan sementara dan baru berlaku setelah "Terapkan".
export default function Example() {
  const [aktif, setAktif] = useState<string[]>(['Draft']);
  const [draf, setDraf] = useState<string[]>(aktif);
  const label = aktif.length === 0 ? undefined : aktif.length === 1 ? aktif[0] : `${aktif.length} status`;
  return (
    <div className="flex flex-wrap items-center gap-2">
      <FilterChip
        field="Status"
        value={label}
        onRemove={() => setAktif([])}
        onOpenChange={o => o && setDraf(aktif)}
        content={
          <div className="grid gap-2">
            {STATUS.map(s => (
              <Checkbox
                key={s}
                checked={draf.includes(s)}
                onCheckedChange={on => setDraf(d => (on ? [...d, s] : d.filter(x => x !== s)))}
              >
                {s}
              </Checkbox>
            ))}
          </div>
        }
        popoverFooter={
          <>
            <Button size="sm" onClick={() => setDraf([])}>
              Atur ulang
            </Button>
            <Popover.Close asChild>
              <Button size="sm" variant="primary" onClick={() => setAktif(draf)}>
                Terapkan
              </Button>
            </Popover.Close>
          </>
        }
      />
      <FilterChip field="Customer" content={<p className="text-muted">Pilihan customer…</p>} />
      <FilterChip field="Periode" disabled />
    </div>
  );
}

import { useState } from 'react';
import { FilterChip, Radio, RadioGroup } from '@divistant/circca-react';

const PEMILIK = ['Saya', 'Anisa Nugraha', 'Rina Kartika', 'Budi Santoso'];

// Pilihan tunggal langsung berlaku tanpa tombol Terapkan; popover menutup setelah memilih.
export default function Example() {
  const [pemilik, setPemilik] = useState<string>();
  const [open, setOpen] = useState(false);
  return (
    <FilterChip
      field="Pemilik"
      value={pemilik}
      open={open}
      onOpenChange={setOpen}
      onRemove={() => setPemilik(undefined)}
      content={
        <RadioGroup
          aria-label="Pemilik"
          value={pemilik ?? ''}
          onValueChange={v => {
            setPemilik(v);
            setOpen(false);
          }}
        >
          {PEMILIK.map(p => (
            <Radio key={p} value={p}>
              {p}
            </Radio>
          ))}
        </RadioGroup>
      }
    />
  );
}