1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
import { Select as Kobalte } from "@kobalte/core/select"
import { createMemo, type ComponentProps } from "solid-js"
import { Icon, Button, type ButtonProps } from "@opencode-ai/ui"
import { pipe, groupBy, entries, map } from "remeda"
export interface SelectProps<T> {
placeholder?: string
options: T[]
current?: T
value?: (x: T) => string
label?: (x: T) => string
groupBy?: (x: T) => string
onSelect?: (value: T | undefined) => void
class?: ComponentProps<"div">["class"]
classList?: ComponentProps<"div">["classList"]
}
export function Select<T>(props: SelectProps<T> & ButtonProps) {
const grouped = createMemo(() => {
const result = pipe(
props.options,
groupBy((x) => (props.groupBy ? props.groupBy(x) : "")),
// mapValues((x) => x.sort((a, b) => a.title.localeCompare(b.title))),
entries(),
map(([k, v]) => ({ category: k, options: v })),
)
return result
})
return (
<Kobalte<T, { category: string; options: T[] }>
data-component="select"
value={props.current}
options={grouped()}
optionValue={(x) => (props.value ? props.value(x) : (x as string))}
optionTextValue={(x) => (props.label ? props.label(x) : (x as string))}
optionGroupChildren="options"
placeholder={props.placeholder}
sectionComponent={(props) => (
<Kobalte.Section data-slot="section">{props.section.rawValue.category}</Kobalte.Section>
)}
itemComponent={(itemProps) => (
<Kobalte.Item
data-slot="select-item"
classList={{
...(props.classList ?? {}),
[props.class ?? ""]: !!props.class,
}}
{...itemProps}
>
<Kobalte.ItemLabel data-slot="select-item-label">
{props.label ? props.label(itemProps.item.rawValue) : (itemProps.item.rawValue as string)}
</Kobalte.ItemLabel>
<Kobalte.ItemIndicator data-slot="select-item-indicator">
<Icon name="check-small" size="small" />
</Kobalte.ItemIndicator>
</Kobalte.Item>
)}
onChange={(v) => {
props.onSelect?.(v ?? undefined)
}}
>
<Kobalte.Trigger
data-slot="select-trigger"
as={Button}
size={props.size}
variant={props.variant}
classList={{
...(props.classList ?? {}),
[props.class ?? ""]: !!props.class,
}}
>
<Kobalte.Value<T> data-slot="select-trigger-value">
{(state) => {
const selected = state.selectedOption() ?? props.current
if (!selected) return props.placeholder || ""
if (props.label) return props.label(selected)
return selected as string
}}
</Kobalte.Value>
<Kobalte.Icon data-slot="select-trigger-icon">
<Icon name="chevron-down" size="small" />
</Kobalte.Icon>
</Kobalte.Trigger>
<Kobalte.Portal>
<Kobalte.Content
classList={{
...(props.classList ?? {}),
[props.class ?? ""]: !!props.class,
}}
data-component="select-content"
>
<Kobalte.Listbox data-slot="select-content-list" />
</Kobalte.Content>
</Kobalte.Portal>
</Kobalte>
)
}
|
