- 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.
* add right click option to the interactions
* add tests to ensure right click behaves as expected
Fixes: #142Fixes: #167
* fallback to mouse events if pointer events are not supported
When the pointer events are not supported, then this is essentially a
no-op. When they *are* supported, then both the pointer *and* mouse
events will fire.
To mitigate potential issues, we make sure that state changes (and
potential re-renders) are idempotent (we bail out on potential state
updates when we are already ina certain state).
Fixes: #173Fixes: #167
And if we are in a disabled fieldset, double check that we are not in
the first legend. Because in that case we are visually outside of the
fieldset and according to the spec those elements should **not** be
considered disabled.
Fixes: #194
* 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
* add unmount strategy to README (React)
* add unmount strategy to README (Vue)
* add different render features (React)
* use render features in Menu and Listbox (React)
* add different render features (Vue)
* use render features in Menu and Listbox (Vue)
* bump dependencies
* add ability to change the ref property using `refName`
Example use case:
```tsx
// Some components have this API with an `innerRef`. The suggested approach is to use
// `React.forwardRef` so that you get the actual `ref` value. However if you already have this
// `innerRef` API than we can use the `refName="innerRef"` to give the `ref` prop a good name. It
// defaults to `ref` so that it still works everywhere else.
function MyButton({ innerRef, ...props }) {
return <button ref={innerRef} {...props} />
}
<Menu.Button as={MyButton} refName="innerRef" />
```
* small cleanup, move refs to props we control
* add tests for the render abstraction (Render)
+ use the unique __ symbol as a default value in the Props type for the
omitable props.
* use render features in Transition (React)
* add/update Transition examples to also showcase the `unmount={false}` render strategy
* bump dependencies
* add example with nested unmount/hide transitions
* add unmount to Transition documentation
* make sure the Menu.Button can be disabled (React)
* make sure the MenuButton can be disabled (Vue)
* make sure the Listbox.Button can be disabled (React)
* make sure the ListboxButton can be disabled (Vue)
* make sure the Button is focused when the Menu closes (React)
* make sure the Button is focused when the Menu closes (Vue)
* make sure the Button is focused when the Listbox closes (React)
* make sure the Button is focused when the Listbox closes (Vue)
* 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
This will allow us to do 2 things:
- When we are in "type ahead" mode, aka search, we can use spaces to
search. E.g.: "Account Settings" (notice the space)
- When we are not in "type ahead" mode, we can use `Space` to invoke the
menu item. We used to only allow `Enter` and `Click`.
* add failing tests to prove the outside-click issue
* fix outside click when we have multiple menu's
- We removed the `toggleMenu` since we only used it in a single spot,
and had to do some side effect logic (focus & event.preventDefault).
Wanted to make this consistent between React and Vue.
- If, in the "outside click" logic we detect that we clicked on the
button, we also ignore it.
- If, we click on the button we will toggle the menu.
Fixes: #18
This is an issue in the Vue version (it just works in the React version)
but I added tests for them anyway.
While this solution "works" I am not 100% happy with it. Let me explain
what's happening here and why I am not that happy about it:
- For starters, the Vue `nextTick` is apparently too fast. So what we do
is when we get the pointer up event, we will close the menu and
re-focus the button. We ran this code in a `nextTick` so that we can
ensure that we close the menu *after* all the click events are
finished. However because this is too fast, the menu is already closed
and the anchor link is already unmounted and thus not clickable
anymore. So instead we use a double requestAnimationFrame (to mimick a
`nextFrame` as seen in the `disposables` from the React code). This
works, but a bit messy, oh well.
- The next reason why I am not that happy is because I can't reproduce
it in JSDOM (Jest tests). When you *click* a link in JSDOM it doesn't
update the `window.location.hash` or `window.location.href`. To mimick
that behaviour I put a `@click` event on the anchor to verify that we
actually clicked it. However this already works, even before the
"fix". So I left a TODO in there so that we can hopefully fix the
test, so that we _can_ reproduce this behaviour.
Fixes: #14
Robin Malfait