summaryrefslogtreecommitdiffhomepage
path: root/packages/ui/src/components/select.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/ui/src/components/select.tsx')
-rw-r--r--packages/ui/src/components/select.tsx18
1 files changed, 4 insertions, 14 deletions
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index fef00500a..0386c329e 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -1,10 +1,8 @@
import { Select as Kobalte } from "@kobalte/core/select"
-import { createMemo, createSignal, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
+import { createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
import { pipe, groupBy, entries, map } from "remeda"
-import { Show } from "solid-js"
import { Button, ButtonProps } from "./button"
import { Icon } from "./icon"
-import { MorphChevron } from "./morph-chevron"
export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "onSelect" | "children"> & {
placeholder?: string
@@ -40,8 +38,6 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
"triggerVariant",
])
- const [isOpen, setIsOpen] = createSignal(false)
-
const state = {
key: undefined as string | undefined,
cleanup: undefined as (() => void) | void,
@@ -89,7 +85,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
data-component="select"
data-trigger-style={local.triggerVariant}
placement={local.triggerVariant === "settings" ? "bottom-end" : "bottom-start"}
- gutter={8}
+ gutter={4}
value={local.current}
options={grouped()}
optionValue={(x) => (local.value ? local.value(x) : (x as string))}
@@ -119,7 +115,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
: (itemProps.item.rawValue as string)}
</Kobalte.ItemLabel>
<Kobalte.ItemIndicator data-slot="select-select-item-indicator">
- <Icon name="check" size="small" />
+ <Icon name="check-small" size="small" />
</Kobalte.ItemIndicator>
</Kobalte.Item>
)}
@@ -128,7 +124,6 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
stop()
}}
onOpenChange={(open) => {
- setIsOpen(open)
local.onOpenChange?.(open)
if (!open) stop()
}}
@@ -154,12 +149,7 @@ export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">)
}}
</Kobalte.Value>
<Kobalte.Icon data-slot="select-select-trigger-icon">
- <Show when={local.triggerVariant === "settings"}>
- <Icon name="selector" size="small" />
- </Show>
- <Show when={local.triggerVariant !== "settings"}>
- <MorphChevron expanded={isOpen()} />
- </Show>
+ <Icon name={local.triggerVariant === "settings" ? "selector" : "chevron-down"} size="small" />
</Kobalte.Icon>
</Kobalte.Trigger>
<Kobalte.Portal>