Add Combobox component (#1047)

* start of combobox

* start with a copy of the Listbox

* WIP

* Add Vue Combobox

* Update Vue version of combobox

* Update tests

* Fix typescript errors in combobox test

* Fix input label

The spec says that the combobox itself is labelled directly by the associated label. The button can however be labelled by the label or itself.

* Add active descendant to combobox/input

* Add listbox role to comobox options

Right now the option list *is* just a listbox. If we were to allow other types in the future this will need to be changable

* Update tests

* move React playground to dedicated package

* add react playground script to root

* ensure we only open/close the combobox when necessary

* ensure export order is correct

* remove leftover pages directory from React package

* Only add aria controls when combobox is open

* add missing next commands

* make typescript happy

* build @headlessui/react before building playground-react

* add empty public folder

This makes vercel happy

* wip

* Add todo

* Update tests

Still more updates to do but some are blocked on implementation

* change default combobox example slightly

* ensure that we sync the input with new state

When the <Combobox value={...} /> changes, then the input should change
as well.

* only sync the value with the input in a single spot

* WIP: object value to string

* WIP

* WIP

* WIP groups

* Add static search filtering to combobox

* Move mouse leave event to combobox

* Fix use in fragments

* Update

* WIP

* make all tests pass for the combobox in React

* remove unnecessary playground item

* remove listbox wip

* only fire change event on inputs

Potentially we also have to do this for all kinds of form inputs. But
this will do for now.

* disable combobox vue tests

* Fix vue typescript errors

* Vue tests WIP

* improve combobox playgrounds a tiny bit

* ensure to lookup the correct value

* make sure that we are using a div instead of a Fragment

* expose `activeItem`

This will be similar to `yourData[activeIndex]`, but in this case the
active option's data. Can probably rename this if necessary!

* Update comments

* Port react tests to Vue

* Vue tests WIP

* WIP

* Rename activeItem to activeOption

* Move display value to input

* Update playgrounds

* Remove static filtering

* Add tests for display value

* WIP Vue Tests

* WIP

* unfocus suite

* Cleanup react accessibility assertions code

* Vue WIP

* Cleanup errors in react interactions test utils

* Update vue implementation

closer :D

* Fix searching

* Update

* Add display value stubs

* Update tests

* move `<Combobox onSearch={} />` to `<Combobox.Input onChange={} />`

* use `useLatestValue` hook

* make `onChange` explicitly required

* remove unused variables

* move `<Combobox @search="" />` to `<ComboboxInput @change="" />`

* use correct event

* use `let` for consistency

* remove unnecessary hidden check

* implement displayValue for Vue

* update playground to reflect changes

* make sure that the activeOptionIndex stays correct

* update changelog

Co-authored-by: Jordan Pittman <[email protected]>

Author: RobinMalfait

CHANGELOG.md

@@ -13,13 +13,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Improve controlled Tabs behaviour ([#1050](https://github.com/tailwindlabs/headlessui/pull/1050))
 - Improve typeahead search logic ([#1051](https://github.com/tailwindlabs/headlessui/pull/1051))
 
+### Added
+
+- Add `Combobox` component ([#1047](https://github.com/tailwindlabs/headlessui/pull/1047))
+
 ## [Unreleased - @headlessui/vue]
 
 ### Fixed
 
 - Ensure correct order when conditionally rendering `MenuItem`, `ListboxOption` and `RadioGroupOption` ([#1045](https://github.com/tailwindlabs/headlessui/pull/1045))
 - Improve typeahead search logic ([#1051](https://github.com/tailwindlabs/headlessui/pull/1051))
 
+### Added
+
+- Add `Combobox` component ([#1047](https://github.com/tailwindlabs/headlessui/pull/1047))
+
 ## [@headlessui/react@v1.4.3] - 2022-01-14
 
 ### Fixes
@@ -88,7 +96,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `aria-orientation` to `Listbox`, which swaps Up/Down with Left/Right keys ([#683](https://github.com/tailwindlabs/headlessui/pull/683))
 - Expose `close` function from the render prop for `Disclosure`, `Disclosure.Panel`, `Popover` and `Popover.Panel` ([#697](https://github.com/tailwindlabs/headlessui/pull/697))
 
-
 ## [@headlessui/vue@v1.4.0] - 2021-07-29
 
 ### Added

package.json

@@ -11,6 +11,8 @@
   ],
   "scripts": {
     "react": "yarn workspace @headlessui/react",
+    "react-playground": "yarn workspace playground-react dev",
+    "playground-react": "yarn workspace playground-react dev",
     "vue": "yarn workspace @headlessui/vue",
     "shared": "yarn workspace @headlessui/shared",
     "build": "yarn workspaces run build",

packages/@headlessui-react/package.json

@@ -26,6 +26,7 @@
     "prepublishOnly": "npm run build",
     "test": "../../scripts/test.sh",
     "build": "../../scripts/build.sh",
+    "watch": "../../scripts/watch.sh",
     "lint": "../../scripts/lint.sh"
   },
   "peerDependencies": {