* 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.
* fix broken `escape` key behaviour
We've "fixed" an issue when we had nested Dialogs ([#430](https://github.com/tailwindlabs/headlessui/pull/430)).
The `escape` would not close the correct Dialog. The issue here was with
the logic to know whether we were the last Dialog or not. The issue was
_not_ how we implemented the `close` functionality.
To make things easier, we moved the global window event to a scoped div
(the Dialog itself). While that fixed the nested Dialog issue, it
introduced this bug where `escape` would not close if you click on a
non-focusable element like a span in the Dialog.
Since that PR we did a bunch of improvements on how the underlying
"stacking" system worked.
This PR reverts to the "global" window event listener so that we can
still catch all of the `escape` keydown events.
Fixes: #524Fixes: #693
* update changelog
* add `{type:'button'}` only for buttons
We will try and infer the type based on the passed in `props.as` prop or
the default tag. However, when somebody uses `as={CustomComponent}` then
we don't know what it will render. Therefore we have to pass it a ref
and check if the final result is a button or not. If it is, and it
doesn't have a `type` yet, then we can set the `type` correctly.
* update changelog
* expose a `close` function via the render prop for the `Popover` and `Popover.Panel` components (React)
* expose a `close` function via the render prop for the `Disclosure` and `Disclosure.Panel` components (React)
* expose a `close` function via the render prop for the `Popover` and `PopoverPanel` components (Vue)
* expose a `close` function via the render prop for the `Disclosure` and `DisclosurePanel` components (Vue)
* add `aria-orientation` to the Listbox component
By default the `Listbox` will have an orientation of `vertical`. When
you pass the `horizontal` prop to the `Listbox` component then the
`aria-orientation` will be set to `horizontal`.
Additionally, we swap the previous/next keys:
- Vertical: ArrowUp/ArrowDown
- Horizontal: ArrowLeft/ArrowRight
* update changelog
* add ability to use `Disclosure.Button` inside a `Disclosure.Panel`
If you do it this way, then the `Disclosure.Button` will function as a
`close` button.
This will make it consistent with the `Popover.Button` inside the
`Popover.Panel` funcitonality.
* update changelog
* encode expected `aria-expanded` behaviour
* ensure `aria-expanded` has the correct value
`aria-expanded` can be in 3 different states:
| Value | Description |
| ------------------- | -------------------------------------------------------------------------- |
| false | The grouping element this element owns or controls is collapsed. |
| true | The grouping element this element owns or controls is expanded. |
| undefined (default) | The element does not own or control a grouping element that is expandable. |
Ref: https://www.w3.org/TR/wai-aria-1.2/#aria-expandedFixes: #580
* ensure `disabled` prop in Vue is not rendered when `false`
* update changelog
* add aria-disabled to RadioGroup Options
This will happen when:
- The RadioGroup is disabled
- The RadioGroup Option is disabled
Closes: #515
* update changelog
* only destructure from props inside render
* conditionally ensure that tabindex -1 exists
* reflect `disabled` prop in React as well
* update changelog
* ensure that you can use Transition Child components
When you are using the implicit variants of the components, for example
when you are using a Transition component inside a Menu component then
it might look weird in Vue.
The Vue code could look like this:
```
<Menu>
<TransitionRoot>
<MenuItems>...</MenuItems>
</TransitionRoot>
<Menu>
```
However, `TransitionRoot` doesn't make much sense here because it sits
in the middle of 2 components, and it is also not controlled by an
explicit `show` prop.
This commit will allows you to use a `TransitionChild` instead (in fact,
both work).
We basically now do a few things, when you are using a TransitionChild:
- Do we have a parent `TransitionRoot`? Yes -> Use it
- Do we have an open closed state? Yes -> Render a TransitionRoot in
between behind the scenes.
- Throw the error we were throwing before!
* update changelog
* add tests to verify the nested Dialog behaviour
* set mounted to true once rendered once
* cache useWindowEvent listener
We only care about the very last version of the listener function. This
allows us to only change the event listener if the event name (string)
and options (boolean | object) change.
* add/delete messages when mounting/unmounting
We don't require a dedicated hook anymore, so this is a bit of cleanup!
* add comments to the FocusResult enum
* splitup functionality and make it a bit more clear using feature flags
* add getDialogOverlays helper
* simplify the Portal component
We don't need to add the current element to the Stack. We only want to
take care of that in the Dialog component itself.
* drop dom-containers
Currently it is only used in a single spot, so I inlined it into that
file.
* simplify the FocusTrap component, use new API
* improve Dialog component
* update CHANGELOG
* delay initialization of Dialog
We were using a useLayoutEffect, now let's use a useEffect instead. It
still moves focus to the correct element, but that process is now a bit
delayed. This means that users will less-likely be urged to "hack"
around the issue by using fake focusable elements which will result in
worse accessibility.
* add hook to deal with server handoff
This will allow us to delay certain features. For example we can delay
the focus trapping until it is fully hydrated. We can also delay
rendering the Portal to ensure hydration works correctly.
* use server handoff complete hook
* update changelog
* simplify examples by using the implicit open/closed state
* introduce Open/Closed context (React)
* use Open/Closed context in Dialog component (React)
* use Open/Closed context in Disclosure component (React)
* use Open/Closed context in Listbox component (React)
* use Open/Closed context in Menu component (React)
* use Open/Closed context in Popover component (React)
* use Open/Closed context in Transition component (React)
* introduce Open/Closed context (Vue)
* use Open/Closed context in Dialog component (Vue)
* use Open/Closed context in Disclosure component (Vue)
* use Open/Closed context in Listbox component (Vue)
* use Open/Closed context in Menu component (Vue)
* use Open/Closed context in Popover component (Vue)
* use Open/Closed context in Transition component (Vue)
* use a ref in the Description comopnent
This allows us to update the ref and everything should work after that.
Currently we only saw the "current" state.
* add more Vue examples
* update changelog
Robin Malfait