Commit Graph

14 Commits

Author SHA1 Message Date
Robin Malfait ef00732685 cleanup and consistency (#213)
- Made the use of `const` and `let` consistent
- import required functions and types from 'react' instead of using the
  `React.` namespace.
- Added `Expand` type, which can expand complex types to their "final"
  result.
- Ensured that we use `as const` for DEFAULT_XXX_TAG where we used a
  string. So that we have the type of `div` instead of `string` for
  example.
- Used `interface` over `type` where possible. I'm personally more of a
  `type` fan. But the TypeScript recommends `interfaces` where possible
  because they are faster, yield better error messages and so on.
2021-01-30 14:46:54 +01:00
Robin Malfait 24725216e4 fix: outside click refocus bug (#114)
* add watch script

* make interactions in Vue and React consistent

* re-work focus restoration

When we click outside of the Menu or Listbox, we want to
restore the focus to the Button, *unless* we clicked on/in an element
that is focusable in itself. For example, when the Menu is open and you
click in an input field, the input field should stay focused. We should
also close the Menu itself at this point.

* add examples with multiple elements

* bump dependencies
2020-10-20 15:38:12 +02:00
Robin Malfait fc42ddedcf ensure options in listbox can be objects 2020-10-05 20:05:53 +02:00
Robin Malfait 6e3d496998 feat: add Switch component (#26)
* add Switch component

* add tests to verify that we can click the label to toggle the Switch

* use onKeyUp to prevent triggering the onClick in firefox
2020-10-05 16:47:31 +02:00
Arno Schutijzer ef25b08cb2 docs: fix typo (#29) 2020-10-02 22:59:07 +02:00
Robin Malfait 99ecdaefd4 update branding
Replace Tailwind UI with Headless UI
2020-10-02 13:56:47 +02:00
Robin Malfait 58ff88698b feat: add Listbox component (#3)
* make jest monorepo aware

* add @testing-library/jest-dom for custom matchers

This way we can use expect(element).toHaveAttribute(key, value?)

* abstract keys enum

* change type to unknown, because we don't know the return value

* update use-id hook, make it suspense aware

Thanks Reach UI!

* hoist the disposables collection

* add accessbility assertions for listbox

Also made it consistent for the Menu component and simplified some of the assertions

* add use-computed hook

This allows us re-render when hooks change, but also return a value. So this is a combination of useEffect and a useState value.

* add Listbox component

* bump dependencies

* add listbox example

* add lint-staged

This way we will only lint the files that have been staged and ready to be committed instead of the whole codebase

* add missing prevent defaults

* improve tests to verify that we can actually update the value of the listbox

* scroll the active listbox item into view

* small optimization, only focus "Nothing" on pointer leave when we are the active item

We used to always go to "Nothing" on pointer leave. And while this code
doesn't get called often, it *gets* called if you are using your arrow
keys and the mouse pointer is still over the list.

* bump dependencies

Also moved the tailwind dependencies to the root

* fix typo

* drop the default Transition inside the Menu and Listbox components

* update examples to reflect drop of default Transition wrapper

* rename Listbox.{Items,Item} to Listbox.{Options,Option}

Also rename all instances of `item` to `option` in tests and comments
and what have you...

* fix typo

* drop disabled prop, use aria-disabled only
2020-10-02 11:05:41 +02:00
Robin Malfait 4a6048ef6c make examples between Vue and React consistent 2020-09-21 23:25:09 +02:00
Robin Malfait 55c9adaa8a build code snippets for the Vue playground 2020-09-21 16:29:12 +02:00
Robin Malfait 8cc424c820 use absolute path instead of relative 2020-09-21 12:50:44 +02:00
Robin Malfait f6883677f5 add Menu examples in Vue 2020-09-21 12:50:39 +02:00
Robin Malfait eb441a13b0 generate all example paths at build time 2020-09-19 00:25:37 +02:00
Robin Malfait 110a01790b make the vue playground buildable for Vercel 2020-09-18 23:20:46 +02:00
Robin Malfait f20b7f845b setup @headlessui/vue package 2020-09-16 18:19:54 +02:00