feat(hooks): add useSelect hook #747
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Codecov Report
@@ Coverage Diff @@
## master #747 +/- ##
======================================
Coverage 100% 100%
======================================
Files 3 9 +6
Lines 418 694 +276
Branches 105 153 +48
======================================
+ Hits 418 694 +276
Continue to review full report at Codecov.
|
|
🎉 This PR is included in version 3.3.0 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
mnajdova
reviewed
Sep 10, 2019
| @@ -8,6 +8,18 @@ config.plugins[cjsPluginIndex] = commonjs({ | |||
| include: 'node_modules/**', | |||
| namedExports: { | |||
| 'react-is': ['isForwardRef'], | |||
| react: ['useReducer', 'useEffect', 'useRef', 'useState'], | |||
| 'node_modules/keyboard-key/src/keyboardKey.js': ['getKey'], | |||
There was a problem hiding this comment.
Why was this added? Wouldn't this require all rollup clients to include this?
Daniel15
reviewed
Dec 18, 2019
| } | ||
|
|
||
| export interface UseSelectProps<Item> { | ||
| items: Item[] |
There was a problem hiding this comment.
I think this could actually be readonly Item[] (or ReadonlyArray<Item> which is equivalent) as Downshift doesn't mutate this array, right? What do you think about changing it?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adding
useSelect, the first hook ofDownshift.Downshiftis often used to create custom<select>widgets. Even if it's designed as an autocomplete solution first, it proves it's a versatile component and we should aim to keep it this way.As a follow-up to #683 I started the change to the hooks-based API by writing
useSelect.It aims to provide the same functionality and accessibility as a native HTML
<select>. It should follow the ARIA Dropdown Pattern for consistency reasons (it should work on Windows/Mac, with Jaws/NVDA/VoiceOver/ChromeVox no matter if the browser is Chrome/Safari/Firefox/Edge/IE).The API is meant to resemble Downshift's.
Functionality provided out of the box:
ariaattributes on both these elements, widget should be accessible via all screen readers.aria-livemessage on menu open and item select.