Filter Toolbar

1"use client";
2 
3import { CaretDown, Check } from "@phosphor-icons/react/dist/ssr";
4import { useId, useMemo, useRef, useState } from "react";
5import type * as React from "react";
6import { cn } from "@/lib/utils";
7import { itemGroupLabel, itemRow } from "@/lib/recipes";
8import { Button, type ButtonProps } from "@/components/ui/button";
9import { Input } from "@/components/ui/input";
10import {
11  Popover,
12  PopoverContent,
13  PopoverTrigger,
14} from "@/components/ui/popover";
15import { Scroller } from "@/components/ui/scroller";
16import { Spinner } from "@/components/ui/spinner";
17 
18export type FilterToolbarOverflow = "scroll" | "wrap";
19export type FilterToolbarCountVisibility = "always" | "responsive";
20 
21export interface FilterToolbarProps
22  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
23  children: React.ReactNode;
24  /** Horizontal rail by default; wrap is useful on spacious directory pages. */
25  overflow?: FilterToolbarOverflow;
26  /** Number of active filters. Controls visibility of the clear action. */
27  activeCount?: number;
28  onClearAll?: () => void;
29  clearLabel?: string;
30  /** Preformatted result count or other quiet metadata. */
31  count?: React.ReactNode;
32  /** Responsive hides count below the sm breakpoint. */
33  countVisibility?: FilterToolbarCountVisibility;
34  /** Pinned controls such as sorting or view selection. */
35  trailing?: React.ReactNode;
36  ariaLabel?: string;
37  filtersClassName?: string;
38  trailingClassName?: string;
39}
40 
41/** Responsive filter rail with clear, count, and pinned trailing actions. */
42export function FilterToolbar({
43  children,
44  overflow = "scroll",
45  activeCount = 0,
46  onClearAll,
47  clearLabel = "Clear all",
48  count,
49  countVisibility = "responsive",
50  trailing,
51  ariaLabel = "Filters",
52  className,
53  filtersClassName,
54  trailingClassName,
55  ...props
56}: FilterToolbarProps): React.ReactElement {
57  const filtersRef = useRef<HTMLDivElement>(null);
58  const clearAction =
59    activeCount > 0 && onClearAll ? (
60      <div className="shrink-0">
61        <Button
62          variant="tertiary"
63          size="md"
64          className="text-ink-muted"
65          onClick={() => {
66            onClearAll();
67            filtersRef.current
68              ?.querySelector<HTMLElement>(
69                "button:not([disabled]), [href], input:not([disabled]):not([type=hidden]):not([hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex='-1'])",
70              )
71              ?.focus();
72          }}
73        >
74// … truncated