"use client"; import { Command } from "cmdk"; import { Check, ChevronsUpDown } from "lucide-react"; import { useEffect, useId, useRef, useState } from "react"; import type { HTMLAttributes, KeyboardEvent } from "react"; export type ComboboxOption = { value: string; label: string; description?: string; group?: string; disabled?: boolean; keywords?: string[]; }; export type ComboboxSelectProps = Omit, "onChange" | "defaultValue"> & { options: ComboboxOption[]; label: string; value?: string | null; defaultValue?: string | null; onValueChange?: (value: string | null) => void; placeholder?: string; searchPlaceholder?: string; emptyText?: string; description?: string; error?: string; /** Name of the hidden input used for native form submission. */ name?: string; disabled?: boolean; /** Force reduced motion regardless of the user preference. */ reducedMotion?: boolean; }; function cx(...values: Array) { return values.filter(Boolean).join(" "); } export function ComboboxSelect({ options, label, value, defaultValue = null, onValueChange, placeholder = "Select an option", searchPlaceholder = "Type to search", emptyText = "No matches. Try a different spelling.", description, error, name, disabled, reducedMotion = false, className, ...props }: ComboboxSelectProps) { const id = useId(); const triggerId = id + "-trigger"; const labelId = id + "-label"; const panelId = id + "-panel"; const descriptionId = id + "-description"; const errorId = id + "-error"; const [inner, setInner] = useState(defaultValue); const selected = value !== undefined ? value : inner; const [open, setOpen] = useState(false); const [search, setSearch] = useState(""); const rootRef = useRef(null); const triggerRef = useRef(null); const selectedOption = options.find((option) => option.value === selected) ?? null; const groups = options.reduce>((acc, option) => { const bucket = acc.find((group) => group.heading === option.group); if (bucket) bucket.items.push(option); else acc.push({ heading: option.group, items: [option] }); return acc; }, []); const close = (restoreFocus: boolean) => { setOpen(false); setSearch(""); if (restoreFocus) triggerRef.current?.focus(); }; const choose = (next: string) => { if (value === undefined) setInner(next); onValueChange?.(next); close(true); }; useEffect(() => { if (!open) return; const onPointerDown = (event: PointerEvent) => { if (rootRef.current && !rootRef.current.contains(event.target as Node)) { setOpen(false); setSearch(""); } }; document.addEventListener("pointerdown", onPointerDown); return () => document.removeEventListener("pointerdown", onPointerDown); }, [open]); const onTriggerKeyDown = (event: KeyboardEvent) => { if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); setOpen(true); return; } // Typeahead: typing on the closed trigger opens the list with that character searched. if (event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey) { event.preventDefault(); setSearch(event.key); setOpen(true); } }; const onPanelKeyDown = (event: KeyboardEvent) => { if (event.key === "Escape") { event.preventDefault(); event.stopPropagation(); close(true); } if (event.key === "Tab") close(false); }; const describedBy = cx(description && descriptionId, error && errorId) || undefined; return (

{label}

{open ? (

{emptyText} {groups.map((group) => ( {group.items.map((option) => ( choose(option.value)} className="flex min-h-11 cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-[15px] text-[#1D211F] outline-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[selected=true]:bg-[#DDEBE8] dark:text-[#E9EBE4] dark:data-[selected=true]:bg-[#1F3533]" > {option.label} {option.description ? ( {option.description} ) : null} ))} ))}

) : null}

{description ? (

{description}

) : null} {name ? : null}

{error ?? ""}

); }