Combobox

import { useState } from 'react';
import { Combobox } from '@base-ui/react/combobox';

const CITIES = ['Berlin', 'Boston', 'Lisbon', 'London', 'Paris', 'Tokyo'];

export function CityCombobox() {
  const [query, setQuery] = useState('');

  // Base UI wires up role='combobox', aria-expanded, and aria-activedescendant.
  return (
    <Combobox.Root
      items={CITIES}
      limit={8}
      inputValue={query}
      onInputValueChange={setQuery}
    >
      <label className='flex w-64 flex-col gap-1.5 text-sm font-medium'>
        City
        <Combobox.Input
          placeholder='Start typing a city'
          className='h-10 rounded-lg border bg-background px-3 font-normal outline-none focus:ring-2 focus:ring-ring'
        />
      </label>
      <Combobox.Portal>
        <Combobox.Positioner sideOffset={4}>
          <Combobox.Popup className='w-(--anchor-width) origin-(--transform-origin) rounded-lg border bg-background p-1 shadow-lg transition-[opacity,scale] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0'>
            <Combobox.Empty className='px-3 py-2 text-sm text-muted-foreground empty:p-0'>
              No matches
            </Combobox.Empty>
            <Combobox.List>
              {(city: string) => (
                <Combobox.Item
                  key={city}
                  value={city}
                  className='cursor-default rounded-md px-3 py-2 text-sm outline-none select-none data-highlighted:bg-muted'
                >
                  <Highlight text={city} query={query} />
                </Combobox.Item>
              )}
            </Combobox.List>
          </Combobox.Popup>
        </Combobox.Positioner>
      </Combobox.Portal>
    </Combobox.Root>
  );
}

// Bolds the part of the city name that matches what was typed.
function Highlight({ text, query }: { text: string; query: string }) {
  const start = query ? text.toLowerCase().indexOf(query.toLowerCase()) : -1;
  if (start < 0) return text;
  const end = start + query.length;
  return (
    <>
      {text.slice(0, start)}
      <strong>{text.slice(start, end)}</strong>
      {text.slice(end)}
    </>
  );
}