Multi Select

1'use client'
2 
3import * as React from 'react'
4 
5import { useEffect } from 'react'
6 
7import { Command as CommandPrimitive, useCommandState } from 'cmdk'
8import { Command, CommandGroup, CommandItem, CommandList } from '@/components/ui/command'
9import { cn } from '@/lib/utils'
10import { XIcon } from "lucide-react"
11 
12export interface Option {
13  value: string
14  label: string
15  disable?: boolean
16 
17  /** fixed option that can't be removed. */
18  fixed?: boolean
19 
20  /** Group the options by providing key. */
21  [key: string]: string | boolean | undefined
22}
23interface GroupOption {
24  [key: string]: Option[]
25}
26 
27interface MultipleSelectorProps {
28  value?: Option[]
29  defaultOptions?: Option[]
30 
31  /** manually controlled options */
32  options?: Option[]
33  placeholder?: string
34 
35  /** Loading component. */
36  loadingIndicator?: React.ReactNode
37 
38  /** Empty component. */
39  emptyIndicator?: React.ReactNode
40 
41  /** Debounce time for async search. Only work with `onSearch`. */
42  delay?: number
43 
44  /**
45   * Only work with `onSearch` prop. Trigger search when `onFocus`.
46   * For example, when user click on the input, it will trigger the search to get initial options.
47   **/
48  triggerSearchOnFocus?: boolean
49 
50  /** async search */
51  onSearch?: (value: string) => Promise<Option[]>
52 
53  /**
54   * sync search. This search will not showing loadingIndicator.
55   * The rest props are the same as async search.
56   * i.e.: creatable, groupBy, delay.
57   **/
58  onSearchSync?: (value: string) => Option[]
59  onChange?: (options: Option[]) => void
60 
61  /** Limit the maximum number of selected options. */
62  maxSelected?: number
63 
64  /** When the number of selected options exceeds the limit, the onMaxSelected will be called. */
65  onMaxSelected?: (maxLimit: number) => void
66 
67  /** Hide the placeholder when there are options selected. */
68  hidePlaceholderWhenSelected?: boolean
69  disabled?: boolean
70 
71  /** Group the options base on provided key. */
72  groupBy?: string
73  className?: string
74  badgeClassName?: string
75 
76  /**
77   * First item selected is a default behavior by cmdk. That is why the default is true.
78   * This is a workaround solution by add a dummy item.
79   *
80   * @reference: https://github.com/pacocoursey/cmdk/issues/171
81   */
82  selectFirstItem?: boolean
83 
84  /** Allow user to create option when there is no option matched. */
85  creatable?: boolean
86 
87  /** Props of `Command` */
88  commandProps?: React.ComponentPropsWithoutRef<typeof Command>
89 
90  /** Props of `CommandInput` */
91// … truncated