* change className to class
Co-authored-by: Ryan Johnston <ryan@magic.nz>
* drop className as a function in Vue
* update changelog
Co-authored-by: Ryan Johnston <ryan@magic.nz>
* 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
* Fixed typos (#350)
* chore: Fix typo in render.ts (#347)
* Better vue link (#353)
* Better vue link
* add better React link
Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
* Enable NoScroll feature for the initial useFocusTrap hook (#356)
* enable NoScroll feature for the initial useFocusTrap hook
Once you are using Tab and Shift+Tab it does the scrolling.
Fixes: #345
* update changelog
* Revert "Enable NoScroll feature for the initial useFocusTrap hook (#356)"
This reverts commit 19590b07624d7e3d751cbf11de869dfb0ea432ba.
Solution is not 100% correct, so will revert for now!
* Improve search (#385)
* make search case insensitive for the listbox
* make search case insensitive for the menu
* update changelog
* add `disabled` prop to RadioGroup and RadioGroup Option (#401)
* add `disabled` prop to RadioGroup and RadioGroup Option
Also did some general cleanup which in turn fixed an issue where the
RadioGroup is unreachable when a value is used that doesn't exist in the
list of options.
Fixes: #378
* update changelog
* Fix type of `RadioGroupOption` (#400)
Match RadioGroupOption value types to match modelValue allowed types for RadioGroup
* update changelog
* fix typo's
* chore(CI): update main workflow (#395)
* chore(CI): update main workflow
* Update main.yml
* fix dialog event propagation (#422)
* re-export the `screen` utility for quick debugging purposes
* stop event propagation when clicking inside a Dialog
Fixes: #414
* improve dialog escape (#430)
* Make sure that `Escape` only closes the top most Dialog
* update changelog
* add defaultOpen prop to Disclosure component (#447)
* add defaultOpen prop to Disclosure component
* update changelog
Co-authored-by: Shuvro Roy <shuvro.roy@northsouth.edu>
Co-authored-by: Alex Nault <nault.alex@gmail.com>
Co-authored-by: Eugene Kopich <github@web2033.com>
Co-authored-by: Nathan Shoemark <n.shoemark@gmail.com>
Co-authored-by: Michaël De Boey <info@michaeldeboey.be>
* increase maximum error offset for CI tests
We try to detect how long durations took. However there is no nice way
to time this in JSDOM. Instead we take snapshots every
requestAnimationFrame and when things change we also write down the
time.
This solution is not ideal and results in false positives (especially on
CI environments).
However, it is good enough to ensure that the duration is not 0 and not
500.
* cleanup README's and link to docs site
* remove readme's in favor of doc site
This will be easier, so that we don't have to maintain multiple repo's.
* rename Transition to TransitionRoot
This will allow us to write it as:
- TransitionRoot
- TransitionChild
This has the added benefit that it doesn't collide with the internal
Transition component from Vue itself.
* alias Transition.Root to Transition
This allows us to write:
- Transition.Root
- Transition.Child
If you have a standalone Transition, then you can still use <Transition /> as is.
* drop unusued import
* update changelog
* add redent function when verifying snapshots
This allows us not to care about the correct amount of spaces and always
produces a clean output.
* make the container the parent of the wrapper element
* drop the visible prop on the Portal component
* drop visible prop on Portal component
+ Also cleanup a little bit
* expose the RenderStrategy
* implement Transition component in Vue
* expose Transition component
* add Transitions to the Dialog example
* add useTreeWalker hooks
We got a PR to fix the createTreeWalker so that it also works in IE11.
We don't actively support IE11, so if things work (with polyfills) then
it's good but I don't want to maintain IE11 specific code.
That said, I wanted to abstract the createTreeWalker code to a nice
little hook. The fix for IE is also pretty small, it uses a function
instead of an object and it has a last argument that is deprecated, but
has no obvious effect for our use cases.
Since the incoming PR was based on the `main` branch (where we only had
1 reference to createTreeWalker), I wanted to make sure that we got all
the references on the latest `develop` branch.
Closes: #295
Co-authored-by: Simon VDB <simonvdbroeck@gmail.com>
* use useTreeWalker hook
Co-authored-by: Simon VDB <simonvdbroeck@gmail.com>
I was on a walk, and I realised that in Vue you can just call
provide(Symbol, context), which means that a hook like `useLabels` can
just provide context...
This simplifies a lot!
* improve internal Label component
We will now add a name to improve error messages, we also introduced a
`clickable` prop on the label.
Not 100% happy with the implementation of these internal Label &
Description components, but they are internal so we can always change it
to something that makes more sense!
* improve internal Description component
We will now add a name to improve error messages.
* provide the name prop to Description & Label providers
* implement the useLabels and useDescriptions in the Switch components
* update documentation
When we are listening to a keydown event, and when a `space` event
enters. If you then event.preventDefault(), then we still trigger the
click event in firefox. To get around this, we have to make sure that we
cancel the `space` event in the keyup event.
We didn't take functional components into account, therefore we would
receive errors because a Transition component is a functional component
in production and we didn't take that into account.
* small improvement
* validate Vue vnode
Also change Fragment to "template", *oops*.
* improve error messages in tests for Menu (Vue)
Also actually making sure that we have valid MenuItem components... By
default it renders a template, therefore `<MenuItem>Abc</MenuItem>` is
technically incorrect.
Dmitry Ishkov