Select (React Select)

1"use client";
2 
3import { Badge } from "@/components/ui/badge";
4import { Icon } from "@/lib/icon";
5import { mdiCheck, mdiChevronDown, mdiClose } from "@mdi/js";
6import * as React from "react";
7import ReactSelect, {
8  type Props as ReactSelectProps,
9  type GroupBase,
10  type StylesConfig,
11  type ClassNamesConfig,
12  components,
13  type DropdownIndicatorProps,
14  type ClearIndicatorProps,
15  type MultiValueRemoveProps,
16  type MultiValueGenericProps,
17  type OptionProps,
18} from "react-select";
19 
20import { cn } from "@/lib/utils";
21 
22export type SelectReactOption = {
23  value: string;
24  label: string;
25  description?: string;
26  disabled?: boolean;
27  icon?: React.ReactNode;
28};
29 
30export type SelectReactProps<
31  Option = SelectReactOption,
32  IsMulti extends boolean = false,
33  Group extends GroupBase<Option> = GroupBase<Option>,
34> = Omit<ReactSelectProps<Option, IsMulti, Group>, "classNames" | "styles"> & {
35  size?: "sm" | "default";
36  className?: string;
37};
38 
39// Custom dropdown indicator matching Blok select styling
40function DropdownIndicator<
41  Option,
42  IsMulti extends boolean,
43  Group extends GroupBase<Option>,
44>(props: DropdownIndicatorProps<Option, IsMulti, Group>) {
45  return (
46    <components.DropdownIndicator {...props}>
47      <Icon path={mdiChevronDown} className="size-5 opacity-50" />
48    </components.DropdownIndicator>
49  );
50}
51 
52// Custom clear indicator matching Blok styling
53function ClearIndicator<
54  Option,
55  IsMulti extends boolean,
56  Group extends GroupBase<Option>,
57>(props: ClearIndicatorProps<Option, IsMulti, Group>) {
58  return (
59    <components.ClearIndicator {...props}>
60      <Icon path={mdiClose} className="size-4 opacity-50 hover:opacity-100" />
61    </components.ClearIndicator>
62  );
63}
64 
65// Custom multi-value container using Badge component
66function MultiValueContainer<
67  Option,
68  IsMulti extends boolean,
69  Group extends GroupBase<Option>,
70>(props: MultiValueGenericProps<Option, IsMulti, Group>) {
71  return (
72    <Badge size="md" colorScheme="neutral" className="gap-1 pr-0.5">
73      {props.children}
74    </Badge>
75  );
76}
77 
78// Custom multi-value remove button
79function MultiValueRemove<
80  Option,
81  IsMulti extends boolean,
82  Group extends GroupBase<Option>,
83>(props: MultiValueRemoveProps<Option, IsMulti, Group>) {
84  return (
85    <components.MultiValueRemove {...props}>
86      <Icon path={mdiClose} className="size-3 opacity-60 hover:opacity-100" />
87    </components.MultiValueRemove>
88  );
89}
90 
91// Custom option component with checkmark for selected items
92// … truncated