Commit Graph

9 Commits

Author SHA1 Message Date
Robin Malfait 78ebd3eb23 prevent scrolling when refocusing items
Fixes #161
2020-11-30 13:12:41 +01:00
Robin Malfait 96e0fa96bd remove unused d dependency 2020-11-30 12:35:53 +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 47b3ad1387 chore: Cleanup duplication (#109)
* remove duplicate calculate-active-index calculation

* make codebase a bit more consistent

* remove duplicate resolve-prop-value
2020-10-19 12:21:12 +02:00
Robin Malfait aab23c9077 feat: add render features + render strategy (#106)
* 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
2020-10-18 15:34:05 +02:00
Robin Malfait 7701a48c64 fix Listbox.Option value typing 2020-10-08 15:15:30 +02:00
Robin Malfait c7b91dc731 fix: allow disabling the Menu/Listbox button (#56)
* 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)
2020-10-06 14:41:54 +02:00
Robin Malfait 7d402c4213 fix: button focus management (#47)
* 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)
2020-10-05 18:09:10 +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