* 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
* 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
* 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>
* 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>
* 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
Robin Malfait