components/chips/chips.react.tsx

Functions

Imports

It imports no other module of this repo. No module of this repo imports it.

Source

1import { useId, useRef, type ReactNode } from "react";
2
3export interface ChipOption<V extends string> {
4  value: V;
5  label: ReactNode;
6  disabled?: boolean;
7}
8
9export interface FilterChipsProps<V extends string> {
10  // The visible label of the group: "Status".
11  label: ReactNode;
12  // Up to six.
13  options: Array<ChipOption<V>>;
14  // Controlled: the pressed values, in any order.
15  value: V[];
16  // Called with the pressed values in the options' order. Keep them in the address
17  // (writeParam from "capsomer/behaviour/chips" makes ?status=blocked,running).
18  onChange: (value: V[]) => void;
19  // What the filter leaves, in words: "3 of 14 jobs". Announced politely as it changes.
20  count: ReactNode;
21  size?: "sm" | "default" | "lg";
22}
23
24export function FilterChips<V extends string>({ label, options, value, onChange, count, size = "default" }: FilterChipsProps<V>) {
25  const labelId = useId();
26  const first = useRef<HTMLButtonElement>(null);
27  if (options.length > 6) console.warn("FilterChips: chips hold at most six values; use a select or a combobox for more.");
28  const pressed = new Set(value);
29  // A pressed value that no option carries (from a shared address) still shows, pressed,
30  // after the options, so a filter is never active without a chip to say so and release it.
31  const known = new Set(options.map((o) => o.value));
32  const extra = value.filter((v) => !known.has(v));
33  const set = (next: Set<V>) => onChange([...options.map((o) => o.value), ...extra].filter((v) => next.has(v)));
34  const toggle = (v: V) => {
35    const next = new Set(pressed);
36    if (next.has(v)) next.delete(v);
37    else next.add(v);
38    set(next);
39  };
40  const clear = () => {
41    set(new Set());
42    // Clear hides itself; focus goes to the first chip rather than being lost.
43    first.current?.focus();
44  };
45
46  return (
47    <div className="cap-chips" role="group" aria-labelledby={labelId}>
48      <span className="cap-chips-label" id={labelId}>
49        {label}
50      </span>
51      {options.map((o, i) => (
52        <button key={o.value} ref={i === 0 ? first : undefined} type="button" className="cap-chip" data-size={size === "default" ? undefined : size} aria-pressed={pressed.has(o.value)} aria-disabled={o.disabled || undefined} data-value={o.value} onClick={() => (o.disabled ? undefined : toggle(o.value))}>
53          {o.label}
54        </button>
55      ))}
56      {extra.map((v) => (
57        <button key={v} type="button" className="cap-chip" aria-pressed="true" data-value={v} onClick={() => toggle(v)}>
58          {v}
59        </button>
60      ))}
61      <button type="button" className="cap-link-btn" data-cap-part="clear" hidden={pressed.size === 0} onClick={clear}>
62        Clear
63      </button>
64      <span className="cap-chips-count" role="status">
65        {count}
66      </span>
67    </div>
68  );
69}