2 Commits

Author	SHA1	Message	Date
Robin Malfait	0162c57d88	add React 18 compatibility (#1326) ... * bump dev dependencies to React 18 * setup Jest to include `IS_REACT_ACT_ENVIRONMENT` * prefer `useId` from React 18 if it exists In React 16 & 17, where `useId` doesn't exist, we will fallback to our implementation we have been using up until now. The `useId` exposed by React 18, ensures stable references even in SSR environments. * update expected events React 18 now uses the proper events: - `blur` -> `focusout` - `focus` -> `focusin` * ensure to wait a bit longer This is a bit unfortunate, but since React 18 now does an extra unmount/remount in `StrictMode` to ensure that your code is ConcurrentMode ready, it takes a bit longer to settle what the DOM sees. That said, this is a temporary "hack". We are going to experiment with using tools like Puppeteer/Playwright to run our tests in an actual browser instead to eliminate all the weird details that we have to keep in mind. * prefer `.focus()` over `fireEvent.focus(el)` * abstract `microTask` polyfill code * prefer our `focus(el)` function over `el.focus()` Internally we would still use `el.focus()`, but this allows us to have more control over that `focus` function. * add React 18 to the React Playground * improve hooks for React 18 - Improving the cleanup of useEffect hooks - useIsoMorphicEffect instead of normal useEffect, so that we can use useLayoutEffect to be a bit quicker. * improve disposables - This allows us to add event listeners on a node, and get automatic cleanup once `dispose` gets called. - We also return all the `d.add` calls, so that we can cleanup specific parts only instead of everything or nothing. * reimplement the Transition component to be React 18 ready * wait an additional frame for everything to settle * update playground examples * suppressConsoleLogs for RadioGroup components * update changelog * keep the `to` classes for a smoother transition In the next transition we will remove _all_ classes provided and re-add the once we need. --- Some extra special thanks: - Thanks @silvenon for your initial work on the `transition` events in #926 - Thanks @thecrypticace for doing late-night debugging sessions Co-authored-by: =?UTF-8?q?Matija=20Marohni=C4=87?= <matija.marohnic@gmail.com> Co-authored-by: Jordan Pittman <jordan@cryptica.me>	2022-04-13 22:07:01 +02:00
Robin Malfait	ea26870480	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 <jordan@cryptica.me>	2022-01-27 16:42:47 +01:00