Filter Bar

1"use client";
2 
3import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
4import * as React from "react";
5 
6export type FilterOption = {
7  label: string;
8  value: string;
9  count?: number;
10};
11 
12export type Facet = {
13  id: string;
14  label: string;
15  options: FilterOption[];
16};
17 
18export type FilterValue = Record<string, string[]>;
19 
20export type FilterBarProps = Omit<
21  React.HTMLAttributes<HTMLDivElement>,
22  "onChange" | "defaultValue"
23> & {
24  facets: Facet[];
25  value?: FilterValue;
26  defaultValue?: FilterValue;
27  onChange?: (value: FilterValue) => void;
28  /** Show a search box inside each facet popover. */
29  searchable?: boolean;
30  /** Show option counts. */
31  showCounts?: boolean;
32};
33 
34const CloseIcon = (
35  <svg
36    aria-hidden="true"
37    viewBox="0 0 24 24"
38    className="h-3.5 w-3.5"
39    fill="none"
40    stroke="currentColor"
41    strokeWidth="2.5"
42    strokeLinecap="round"
43  >
44    <path d="M6 6l12 12M18 6 6 18" />
45  </svg>
46);
47 
48const PlusIcon = (
49  <svg
50    aria-hidden="true"
51    viewBox="0 0 24 24"
52    className="h-4 w-4"
53    fill="none"
54    stroke="currentColor"
55    strokeWidth="2"
56    strokeLinecap="round"
57    strokeLinejoin="round"
58  >
59    <path d="M12 5v14M5 12h14" />
60  </svg>
61);
62 
63const FilterBar = React.forwardRef<HTMLDivElement, FilterBarProps>(
64  (
65    {
66      facets,
67      value: valueProp,
68      defaultValue,
69      onChange,
70      searchable = true,
71      showCounts = true,
72      className,
73      ...props
74    },
75    ref,
76  ) => {
77    const reduceMotion = useReducedMotion();
78    const isControlled = valueProp !== undefined;
79    const [internal, setInternal] = React.useState<FilterValue>(
80      () => defaultValue ?? {},
81    );
82    const value = isControlled ? valueProp : internal;
83    const [open, setOpen] = React.useState<string | null>(null);
84    const [query, setQuery] = React.useState("");
85    const rootRef = React.useRef<HTMLDivElement>(null);
86 
87    React.useImperativeHandle(ref, () => rootRef.current as HTMLDivElement);
88 
89    React.useEffect(() => {
90      if (!open) return;
91      const onDown = (e: MouseEvent) => {
92        if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
93          setOpen(null);
94        }
95      };
96      const onKey = (e: KeyboardEvent) => {
97        if (e.key === "Escape") setOpen(null);
98      };
99      document.addEventListener("mousedown", onDown);
100      document.addEventListener("keydown", onKey);
101      return () => {
102        document.removeEventListener("mousedown", onDown);
103// … truncated