use-combobox

import { List, Picker, useCombobox } from "@/ui";

function CountryPicker() {
  const [open, setOpen] = useState(false);
  const [text, setText] = useState("");
  const filtered = countries.filter((c) => c.toLowerCase().includes(text.toLowerCase()));

  const { highlightIndex, setHighlightIndex, handleKeyDown, reset } = useCombobox({
    open,
    items: filtered,
    onSelect: (item) => {
      setText(item);
      setOpen(false);
      reset();
    },
  });

  return (
    <Picker
      open={open}
      onOpenChange={(next) => {
        setOpen(next);
        if (!next) reset();
      }}
      value={text}
      onValueChange={(next) => {
        setText(next);
        reset();
      }}
      onKeyDown={handleKeyDown}
    >
      <List
        highlightIndex={highlightIndex}
        onHighlightChange={setHighlightIndex}
        items={filtered}
        renderItem={(item) => item}
      />
    </Picker>
  );
}