Filter bar

const FACETS = [
  { key: 'status', label: 'Status', options: ['Open', 'In progress', 'Closed'] },
  { key: 'priority', label: 'Priority', options: ['High', 'Medium', 'Low'] },
  { key: 'assignee', label: 'Assignee', options: ['Jun', 'Mina', 'Sara'] },
] as const;

type FacetKey = (typeof FACETS)[number]['key'];
type Filters = Record<FacetKey, readonly string[]>;

const NONE: Filters = { status: [], priority: [], assignee: [] };

const matches = ISSUES.filter((issue) =>
  FACETS.every(({ key }) => filters[key].length === 0 || filters[key].includes(issue[key])),
);

const toggle = (key: FacetKey, value: string, on: boolean) =>
  setFilters((current) => ({
    ...current,
    [key]: on ? [...current[key], value] : current[key].filter((v) => v !== value),
  }));

const [openMenu, setOpenMenu] = useState<FacetKey | null>(null);
const menuOpenChange = (key: FacetKey, open: boolean) =>
  setOpenMenu((current) => (open ? key : current === key ? null : current));

<Toolbar.Root aria-label="Filter issues">
  {FACETS.map(({ key, label, options }, index) => (
    <Menu.Root key={key} onOpenChange={(open) => menuOpenChange(key, open)}>
      <Menu.Trigger ref={index === 0 ? firstFilter : undefined} variant="secondary">
        {label}
        {filters[key].length > 0 && (
          <Badge.Root>
            {filters[key].length}
            <VisuallyHidden.Root> selected</VisuallyHidden.Root>
          </Badge.Root>
        )}
      </Menu.Trigger>
      <Menu.Content aria-label={label}>
        {options.map((option) => (
          <Menu.CheckboxItem
            key={option}
            checked={filters[key].includes(option)}
            onCheckedChange={(on) => toggle(key, option, on)}
          >
            {option}
          </Menu.CheckboxItem>
        ))}
      </Menu.Content>
    </Menu.Root>
  ))}
</Toolbar.Root>

const firstFilter = useRef<HTMLButtonElement>(null);
const chipsHandoff = useFocusHandoff({ to: firstFilter });
const active = FACETS.flatMap(({ key, label, options }) =>
  options.filter((option) => filters[key].includes(option)).map((value) => ({ key, label, value })),
);

{active.length > 0 && (
  <Stack.Root ref={chipsHandoff} direction="row" align="center" gap="condensed" wrap>
    <ChipList.Root
      aria-label="Active filters"
      chips={active.map(({ label, value }) => `${label}: ${value}`)}
      onRemove={(index) => {
        const chip = active[index];
        if (chip) toggle(chip.key, chip.value, false);
      }}
    />
    <Button.Root variant="ghost" onClick={() => setFilters(NONE)}>
      Clear all
    </Button.Root>
  </Stack.Root>
)}

const announce = useAnnouncer();
const emptyHandoff = useFocusHandoff({ to: firstFilter });
const countOf = (count: number) => `${count} ${count === 1 ? 'issue' : 'issues'}`;
const chosen = active.map((chip) => `${chip.key}:${chip.value}`).join('|');
const announced = useRef(chosen);

useEffect(() => {
  if (openMenu) return;
  const timer = setTimeout(() => {
    if (announced.current === chosen) return;
    announced.current = chosen;
    announce(matches.length === 0 ? 'No issues match these filters' : `${countOf(matches.length)} shown`);
  }, 500);
  return () => clearTimeout(timer);
}, [chosen, openMenu, matches.length, announce]);

<Table.Row>
  <Table.Cell colSpan={5}>
    <EmptyState.Root>
      <EmptyState.Title as="h3">No issues match these filters</EmptyState.Title>
      <EmptyState.Description>Remove a filter or clear them all.</EmptyState.Description>
      <EmptyState.Actions ref={emptyHandoff}>
        <Button.Root variant="secondary" onClick={() => setFilters(NONE)}>
          Clear filters
        </Button.Root>
      </EmptyState.Actions>
    </EmptyState.Root>
  </Table.Cell>
</Table.Row>