Add Combobox component

[RobinMalfait]

This PR will add a new Combobox component.

This component will allow you to render an Input and Options (think of it as a Listbox).
You are in charge of actually filtering the items yourself.

Here is an example of the API using React:

let people = [
  { value: 'alice', name: 'alice' },
  { value: 'bob', name: 'bob' },
  { value: 'charlie', name: 'charlie' },
]

function Example(props) {
  let [value, setValue] = useState(undefined)
  let [query, setQuery] = useState('')

  let filteredPeople =
    query === ''
      ? people
      : people.filter(person => person.name.toLowerCase().includes(query.toLowerCase()))

  return (
    <Combobox value={value} onChange={setValue}>
      <Combobox.Input onChange={event => setQuery(event.target.value)} />
      <Combobox.Button>↕</Combobox.Button>
      <Combobox.Options>
        {filteredPeople.map(person => (
          <Combobox.Option key={person.value} value={person.value}>
            {person.name}
          </Combobox.Option>
        ))}
      </Combobox.Options>
    </Combobox>
  )
}

Here is an example of the API using Vue:

let people = [
  { value: 'alice', name: 'alice' },
  { value: 'bob', name: 'bob' },
  { value: 'charlie', name: 'charlie' },
]

let Example = defineComponent({
  template: `
    <Combobox v-model="value">
      <ComboboxInput @change="setQuery" />
      <ComboboxButton>↕</ComboboxButton>
      <ComboboxOptions>
        <ComboboxOption
          v-for="person in filteredPeople"
          :key="person.value"
          :value="person.value"
        >
          {{ person.name }}
        </ComboboxOption>
      </ComboboxOptions>
    </Combobox>
  `,

  setup(props) {
    let value = ref(null)
    let query = ref('')

    let filteredPeople = computed(() => {
      return query.value === ''
        ? people
        : people.filter(person => person.name.toLowerCase().includes(query.value.toLowerCase()))
    })

    return {
      value,
      query,
      filteredPeople,
      setQuery: event => {
        query.value = event.target.value
      },
    }
  },
})

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

headlessui-vue – ./packages/playground-vue

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-vue/6L9FuKMNxFDMGh2d4bZxufaN4qet
✅ Preview: https://headlessui-vue-git-combobox-tailwindlabs.vercel.app

[Deployment for 3e5fc4f failed]

headlessui-react – ./packages/playground-react

🔍 Inspect: https://vercel.com/tailwindlabs/headlessui-react/HnNsmg3hxWZ6yQAZa5c6565VrzeM
✅ Preview: https://headlessui-react-git-combobox-tailwindlabs.vercel.app

[Deployment for 3e5fc4f failed]