combobox

1import * as ComboboxPrimitive from "@kobalte/core/combobox";
2import type { PolymorphicProps } from "@kobalte/core/polymorphic";
3 
4import { cn } from "~/lib/utils.ts";
5import IconCheck from "~icons/lucide/check";
6import IconChevronDown from "~icons/lucide/chevron-down";
7import IconX from "~icons/lucide/x";
8import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
9import { Show, splitProps } from "solid-js";
10 
11import { Button } from "./button.tsx";
12import {
13  InputGroup,
14  InputGroupAddon,
15  InputGroupButton,
16  InputGroupInput,
17} from "./input-group.tsx";
18 
19// Kobalte's default triggerMode="input" only opens the popup once the
20// user types; upstream's base-ui combobox opens it when the input is
21// clicked. triggerMode="focus" is the closest match: clicking the input
22// opens the popup (it also opens on keyboard focus, which upstream does
23// not do — the smaller mismatch). placement="bottom-start" mirrors
24// upstream ComboboxContent's side/align defaults; Kobalte only accepts
25// it on the root. Consumers can override both.
26const Combobox = <Option, OptGroup = never, T extends ValidComponent = "div">(
27  props: PolymorphicProps<
28    T,
29    ComboboxPrimitive.ComboboxRootProps<Option, OptGroup, T>
30  >,
31) => (
32  <ComboboxPrimitive.Root
33    triggerMode="focus"
34    placement="bottom-start"
35    {...(props as ComboboxPrimitive.ComboboxRootProps<Option, OptGroup>)}
36  />
37);
38const ComboboxItemLabel = ComboboxPrimitive.ItemLabel;
39const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect;
40 
41type ComboboxTriggerProps<T extends ValidComponent = "button"> =
42  & ComboboxPrimitive.ComboboxTriggerProps<T>
43  & {
44    class?: string | undefined;
45    children?: JSX.Element;
46  };
47 
48const ComboboxTrigger = <T extends ValidComponent = "button">(
49  props: PolymorphicProps<T, ComboboxTriggerProps<T>>,
50) => {
51  const [local, others] = splitProps(props as ComboboxTriggerProps, [
52    "class",
53    "children",
54  ]);
55  return (
56    <ComboboxPrimitive.Trigger
57      data-slot="combobox-trigger"
58      class={cn("[&_svg:not([class*='size-'])]:size-4", local.class)}
59      {...others}
60    >
61      {local.children}
62      <IconChevronDown
63        class="text-muted-foreground size-4 pointer-events-none"
64      />
65    </ComboboxPrimitive.Trigger>
66  );
67};
68 
69type ComboboxClearProps = ComponentProps<"button">;
70 
71const ComboboxClear: Component<ComboboxClearProps> = (props) => {
72  const [local, others] = splitProps(props, ["class"]);
73  return (
74    <InputGroupButton
75// … truncated