* First attempt at a multi-listbox
* implement `multiple` mode on Listbox
* add multiple Listbox example to playground
* implement `multiple` mode on Combobox
* make sure groupContext is not undefined or null
On vercel, getting a strange issue like `TypeError: undefined is not an
object (evaluating 'r.resolveTarget')` which doesn't happen locally or
once published. Would expect it to be `null` since we default to `null`.
Hopefully this fixes things.
* bump all the dependencies
* make sure that `@types/react` use set to the correct version
`@types/react-dom` hardcoded the `@types/react` to version `16.14.21`
instead of using the latest `16.14.24` resulting in type mismatches.
*cries in inconsistency*
* update changelog
* add multiple Combobox example to playground
* refactor Combobox, use actions
* use combobox data
This is a first step in refactoring everything where we use dedicated
actions and data instead of accessing the reducer state directly.
It also allows us to get rid of mutations in render where we updated
some values in render directly which is not ideal.
Co-authored-by: pvanliefland <pierre.vanliefland@gmail.com>
* add internal FocusSentinel component
This component will allow you to catch the focus and forward it to a new
element. The catch is that it will retry to do that because sometimes
components won't be available yet.
E.g.: We want to focus the first Tab component if it is rendered inside
the Dialog. However, a Tab will register itself in the next tick,
triggering a re-render and only then will it be `selected`. This is a
bit too late for the FocusTrap component.
The FocusSentinel should fix this by catching the focus, and forwarding
it to the correct component. Once that is done, it will remove itself
from the DOM tree so that you can't ever focus that element anymore.
This should fix potential `<tab>` and `<shift+tab>` behaviour.
* find the selectedIndex asap
* use the FocusSentinel and forward it to the correct Tab
* add example Tab in Dialog example
* suppress console warnings
Because we are firing `setState` calls within the component, React is
yelling at us for not using `act(() => { ... })`. Welp, not going to add
those calls inside the component just for tests...
* update changelog
* remove raw `document.getElementById` calls
When we introduced the `forwardRef` for all components, we also made
sure that internal `ref`s were used to keep track of the actual DOM
node.
This code prefers the `internalXXRef` refs in favor of the
`document.getElementById` calls. This is way more React-ish, and also
fixes a few issues:
- Potential performance improvements (no need to re-query the DOM, since
we already have a reference to the DOM node). Note: this is a *guess*,
I didn't measure this.
- It could be that the element is rendered in another `document`, the
correct would involve something like
`someDOMNode.ownerDocument.getElementById(...)` but that should not be
necessary anymore now.
* make Disclosure implementation between React & Vue consistent
* use a similar convention for DOM refs to other components
* update changelog
* cleanup auto-scrolling
We keep the actual container focused, so we don't require the invidiual
option to be focused as well. We do want to scroll it into view but
that's part of another piece of code.
Also cleaned up some manual `document.querySelector` calls now that we
keep track of a `ref`.
* update changelog
* implement `objetToFormEntries` functionality
If we are working with more complex data structures then we have to
encode those data structures into a syntax that the HTML can understand.
This means that we have to use `<input type="hidden" name="..." value="...">` syntax.
To convert a simple array we can use the following syntax:
```js
// Assuming we have a `name` of `person`
let input = ['Alice', 'Bob', 'Charlie']
```
Results in:
```html
<input type="hidden" name="person[]" value="Alice" />
<input type="hidden" name="person[]" value="Bob" />
<input type="hidden" name="person[]" value="Charlie" />
```
Note: the additional `[]` in the name attribute.
---
A more complex object (even deeply nested) can be encoded like this:
```js
// Assuming we have a `name` of `person`
let input = {
id: 1,
name: {
first: 'Jane',
last: 'Doe'
}
}
```
Results in:
```html
<input type="hidden" name="person[id]" value="1" />
<input type="hidden" name="person[name][first]" value="Jane" />
<input type="hidden" name="person[name][last]" value="Doe" />
```
* implement VisuallyHidden component
* implement and export some extra helper utilities
* implement form element for Switch
* implement form element for Combobox
* implement form element for RadioGroup
* implement form element for Listbox
* add combined forms example to the playground
* update changelog
* enable support for iterators
* ensure to compile dom iterables
* remove unused imports
* ignore "outside click" on removed elements
Co-authored-by: Colin King <me@colinking.co>
* update changelog
Co-authored-by: Colin King <me@colinking.co>
* add tests to verify that tabbing around when using `initialFocus` works
* add nesting example to `playground-vue`
* fix nested dialog and initialFocus cycling
* make React dialog consistent
- Disable FocusLock on leaf Dialog's
* update changelog
* adjust active {item,option} index
We had various ordering issues, and now we properly sort all the notes
which is awesome. However, there is this case where we still use the
`activeOptionIndex` / `activeItemIndex` from _before_ the sort happens.
Now we will ensure that this is properly adjusted when performing the
sort of the items.
In addition, we will also properly adjust these values when
`registering` and `unregistering` items, not only when performing
actions.
* update changelog
* prevent initial transitioning in SSR environment
Due to SSR and the hydration step, the transition code was already
called even if we were not ready yet. This caused an issue where the
`beforeEnter` callback got fired twice intead of once.
Fixes: #311
* update changelog
* ensure that `appear` works regardless of multiple rerenders
* remove incorrect `afterLeave` call
* update changelog
* only set the prevShow when using the unmount strategy
* improve outside click support
We used to use `pointerdown`, but some older devices with iOS 12 didn't
have support for that. Instead we used `mousedown`. But now it turns out
that some devices only properly use `pointerdown` and not the `mousedown` event.
Instead, we will listen to both, but make sure to only handle the event
once.
* update changelog
* Fix React transition bug
* use a ref instead of a useCallback (#1108)
This allows us to guarantee that the ref is always referencing the
latest callback. This also allows us to re-run fewer effects because we
don't really care about intermediate callback values, just the last one.
* Fix tests
* Update changelog
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* ensure proper sort order
We already fixed a bug in the past where the order of DOM nodes wasn't
stored in the correct order when performing operations (e.g.: using your
keyboard to go to the next option).
We fixed this by ensuring that when we register/unregister an
option/item, that we sorted the list properly. This worked fine, until
we introduced the Combobox components. This is because items in a
Combobox are continuously filtered and because of that moved around.
Moving a DOM node to a new position _doesn't_ require a full
unmount/remount. This means that the sort gets messed up and the order
is wrong when moving around again.
To fix this, we will always perform a sort when performing actions. This
could have performance drawbacks, but the alternative is to re-sort when
the component gets updated. The bad part is that you can update a
component via many ways (like changes on the parent), in those
scenario's you probably don't care to properly re-order the internal
list. Instead we do it while performing an action (`goToOption` / `goToItem`).
To make things a bit more efficient, instead of querying the DOM all the
time using `document.querySelectorAll`, we will keep track of the
underlying DOM node instead. This does increase memory usage a bit but I
think that this is a fine trade-off.
Performance wise this could also be a bottleneck to perform the sorting
if you have a lot of data. But this problem already exists today,
therefore I consider this a complete new problem instead to solve. Maybe
we don't solve it in Headless UI itself, but figure out a way to make it
composable with existing virtualization libraries.
* update changelog
* disable scroll when hover list item
* change API a bit
* fix scroll into view
For keyboard only for Combobox, Listbox and Menu for both React and Vue.
* update changelog
Co-authored-by: yuta-ike <38308823+yuta-ike@users.noreply.github.com>
* forward ref to all components
* fix playground pages
This isn't a perfect fix of course. But the TypeScript changes required
to do it properly are a bit bigger and require more work.
Having this ready is a good step forward.
* update changelog
* trigger scrollIntoView effect when position changes
This is important otherwise it could happen that the current active item
is still the active item even if we inserted X items before the current
one. This will result in the active item being out of the current
viewport. To fix this, we will also make sure to trigger the effect if
the position of the active item changes.
* update changelog
* bubble Escape event even if `Combobox.Options` is not rendered at all
If you use `<Combobox.Options static />` it means that you are in
control of rendering and in that case we also bubble the `Escape`
because you are in control of it.
However, if you do something like this:
```js
{filteredList.length > 0 && (
<Combobox.Options static>
...
</Combobox.Options>
)}
```
Then whenever the `filteredList` is empty, the Combobox.Options are not
rendered at all which means that we can't look at the `static` prop. To
fix this, we also bubble the `Escape` event if we don't have a
`Combobox.Options` at all so that the above example works as expected.
* update changelog
* ensure combobox option gets activated on hover (while static)
* rename combobox test file
* remove leftover `horizontal` prop
* remove unnecessary handleLeave calls
These are implemented on the `Combobox.Option` instead of the
`Combobox.Options`. This allows you to have additional visual padding
between `Combobox.Options` and `Combobox.Option` and if you hover over
that area then the option becomes inactive.
If we implement it on the `Combobox.Options` instead then this isn't
_that_ easy to do. We can do it by checking the target and whether or
not it is inside a headlessui-combobox-option. This would only have a
single listener instead of `N` listeners though. Potential improvements!
* implement `hold` in favor of `latestActiveOption`
* update changelog
* Allow Escape to bubble when options is static
You’ve taken control of the open/close state yourself in which case this should be allowed to be handled by other event handlers
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* Add combobox to Vue playground
* Update input props
* Wire up input event for changes
This fires changes whenever you type, not just on blur
* Fix playground
* Don't fire input event when pressing escape
The input event is only supposed to fire when the .value of the input changes. Pressing escape doesn't change the value of the input directly so it shouldn't fire.
* Add latest active option render prop
* Add missing active option props to Vue version
* cleanup
* Move test
* Fix error
* Add latest active option to Vue version
* Tweak active option to not re-render
* Remove refocusing on outside mousedown
* Update tests
* Forward refs on combobox to children
* Cleanup code a bit
* Fix lint problems on commit
* Fix typescript issues
* Update changelog
* rename `ComboboxState` to `comboboxState` for consistency
* ensure all elements between `role: listbox` and `role: option` are marked as `role: none`
* add test to demonstrate the `role: none`
* use esbuild for React instead of tsdx
* remove tsdx from Vue
* use consistent names
* add jest and prettier
* update scripts
* ignore some folders for prettier
* run lint script instead of tsdx lint
* run prettier en-masse
This has a few changes because of the new prettier version.
* bump typescript to latest version
* make typescript happy
* cleanup playground package.json
* make esbuild a dev dependency
* make scripts consistent
* fix husky hooks
* add dedicated watch script
* add `yarn playground-react` and `yarn react-playground` (alias)
This will make sure to run a watcher for the actual @headlessui/react
package, and start a development server in the playground-react package.
* ignore formatting in the .next folder
* run prettier on playground-react package
* setup playground-vue
Still not 100% working, but getting there!
* add playground aliases in @headlessui/vue and @headlessui/react
This allows you to run `yarn react playground` or `yarn vue playground`
from the root.
* add `clean` script
* move examples folder in playground-vue to root
* ensure new lines for consistency in scripts
* fix typescript issue
* fix typescript issues in playgrounds
* make sure to run prettier on everything it can
* run prettier on all files
* improve error output
If you minify the code, then it could happen that the errors are a bit
obscure. This will hardcode the component name to improve errors.
* add the `prettier-plugin-tailwindcss` plugin, party!
* update changelog
* 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>
* improve typeahead search logic
This ensures that if you have 4 items:
- Alice
- Bob
- Charlie
- Bob
And you search for `b`, then you jump to the first `Bob`, but if yuo
search again for `b` then we used to go to the very first `Bob` because
we always searched from the top. Now we will search from the active item
and onwards. Which means that we will now jump to the second `Bob`.
* update changelog
* Append tests for Tab.Group's selectedIndex.
* ensure that we correctly use the incoming selectedIndex
* update changelog
Co-authored-by: Ryoga Kitagawa <ryoga.kitagawa@gmail.com>
* ensure correct order in `Menu.Item`
* Update Vue version of menu component ordering issue
* ensure correct order of `Listbox.Option`s
* add test to verify that RadioGroup.Option order is correct
* ensure correct order of `ListboxOption`s
* cleanup
* add test to verify that `RadioGroupOption` order is correct
* update changelog
* use similar a,z signature compared to other places
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
* simplify CI and make it consistent with CI of tailwindcss
* add contributing guidelines
* use correct org name
* ensure `yarn lint` is fully passing without warnings
* add subject to change message for `insiders` build
* placeholder for next release
* Ensure portal root exists in the DOM (#950)
* ensure that the portal root is always in the DOM
When using NextJS, it happens that between page transitions the portal
root gets removed form the DOM. We will check the DOM when the `target`
updates, and if it doesn't exist anymore, then we will re-insert it in
the DOM.
* update changelog
* Allow `Tabs` to be controllable (#970)
* feat(react): Allow Tab Component to be controlled
* fix falsy bug
`selectedIndex || defaultIndex` would result in the `defaultIndex` if
`selectedIndex` is set to 0. This means that if you have this code:
```js
<Tab.Group selectedIndex={0} defaultIndex={2} />
```
That you will never be able to see the very first tab, unless you
provided a negative value like `-1`.
`selectedIndex ?? defaultIndex` fixes this, since it purely checkes for
`undefined` and `null`.
* implemented controllable Tabs for Vue
* add dedicated test to ensure changing the defaultIndex has no effect
* update changelog
Co-authored-by: ChiefORZ <seb.schaffernak@gmail.com>
* Fix missing key binding in examples (#1036)
Co-authored-by: superDragon <xkloveme@gmail.com>
* Fix slice => splice typo in Vue Tabs component (#1037)
Co-authored-by: Ryan Gossiaux <ryan.gossiaux@gmail.com>
* update changelog
* Ensure correct DOM node order when performing focus actions (#1038)
* ensure that the order of DOM nodes is correct
When we are performing actions like `focusIn(list, Focus.First)` then we
have to ensrue that we are working with the correct list that is
properly sorted.
It can happen that the list of DOM nodes is out of sync. This can happen
if you have 3 Tabs, hide the second (which triggers an unmount and an
`unregister` of the Tab), then re-add the second item in the middle.
This will re-add the item to the end of the list instead of in the middle.
We can solve this by always sorting items when we are adding / removing
items, but this is a bit more error prone because it is easy to forget.
Instead we will sort it when performing the actual keyboard action.
If we didn't provide a list but an element, then we use a
getFocusableElements(element) function, but this already gives you a
correctly sorted list so we don't need to do that for this list.
* add tests to prove the correct order when performing actions
* cleanup code just for tests
It could still happen that this internal list is not ordered correctly
but that's not really a problem we just have the list to keep track of
things.
For our tests we now use the position from the DOM directly.
* update changelog
Co-authored-by: ChiefORZ <seb.schaffernak@gmail.com>
Co-authored-by: superDragon <xkloveme@gmail.com>
Co-authored-by: Ryan Gossiaux <ryan.gossiaux@gmail.com>
The `useId` hook causes a re-render in TransitionChild immediately after mount which triggers a transition by `initial` being false in the second re-render regardless of how `appear` was set.
Robin Malfait