Filter

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { Button } from "@/components/ui/button";
5import { Checkbox } from "@/components/ui/checkbox";
6import {
7  Popover,
8  PopoverContent,
9  PopoverTrigger,
10} from "@/components/ui/popover";
11import {
12  SearchInput,
13  SearchInputClearButton,
14  SearchInputField,
15  SearchInputLeftElement,
16  SearchInputRightElement,
17} from "@/components/ui/search-input";
18import {
19  Select,
20  SelectContent,
21  SelectGroup,
22  SelectItem,
23  SelectLabel,
24  SelectTrigger,
25  SelectValue,
26} from "@/components/ui/select";
27import { Icon } from "@/lib/icon";
28import { cn } from "@/lib/utils";
29import { mdiCheck, mdiChevronDown, mdiClose, mdiMagnify } from "@mdi/js";
30import * as React from "react";
31import type { ComponentProps } from "react";
32 
33const FILTER_DROPDOWN_WIDTH = "w-54 min-w-54";
34 
35const FILTER_DROPDOWN_CONTAINER =
36  "rounded-lg border border-border bg-popover text-popover-foreground shadow-md outline-none";
37 
38const FILTER_SELECT_TRIGGER_CLASSNAME =
39  "border-border text-md text-neutral-fg font-semibold outline-none focus-visible:ring-1 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 bg-body-bg hover:bg-neutral-bg dark:bg-input/30 dark:hover:bg-input/50 flex w-fit min-w-0 max-w-full items-center justify-between gap-2 rounded-md border-1 px-3 py-2 whitespace-nowrap transition-[color] h-10 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 data-[state=open]:border-primary data-[state=open]:border-2 data-[state=open]:bg-primary-bg data-[state=open]:text-primary-fg data-[state=open]:hover:bg-primary-bg [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&>svg]:!text-current [&>svg]:!opacity-100";
40 
41function FilterSingleSelectContent({
42  className,
43  children,
44  position = "popper",
45  ...props
46}: React.ComponentProps<typeof SelectContent>) {
47  return (
48    <SelectContent
49      data-slot="filter-single-select-content"
50      className={cn(
51        FILTER_DROPDOWN_WIDTH,
52        FILTER_DROPDOWN_CONTAINER,
53        "min-w-0 max-h-80 overflow-hidden p-0 [&_[data-slot=select-viewport]]:h-auto [&_[data-slot=select-viewport]]:min-w-0 [&_[data-slot=select-viewport]]:p-2 [&_[data-slot=select-viewport]]:max-h-80",
54        className,
55      )}
56      position={position}
57      {...props}
58    >
59      {children}
60    </SelectContent>
61  );
62}
63 
64function getMultiSelectDisplayParts(
65  labels: string[],
66// … truncated