refactor(select): improve keyboard and events

WesSouza commented 2 years ago

Work in progress for Select component refactor:

Moves <Select native> to <SelectNative>
Extract logic from Select into useSelectState hook (only used by Select)
Extract common components and prop handling into useSelectCommon (used by both selects)
Change onChange callback to pass selected option as the first argument
Change all custom callbacks to receive { fromEvent: Event | React.SyntheticEvent } as the last argument (onOpen, onClose, onChange)
Changed spread props to spread on the StyledInner component instead of input (replaces SelectDisplayProps prop)
Added inputProps to allow spreading of props on the input element
Deprecated labelId in favor of aria-labelledby
Enforced strict select value matching, where the option value is not coerced arbitrarily anymore
Improved keyboard handling, including support for Home, End, Enter and Escape keys
Support typing to select (closed menu) or activate (open menu) an option, by word or cycling through words that start with the repeated letter
Enhanced "scroll to option" behavior to keep the active option touching the top or bottom of the scrollable list

I've also changed the Select story to list all Pokémon, so typing can be tested.

vercel[bot] commented 2 years ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react95	✅ Ready (Inspect)	Visit Preview	Aug 13, 2022 at 11:44PM (UTC)

codesandbox-ci[bot] commented 2 years ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 4bceb5a632488ede9c09190fe6a17260ebd352ae:

Sandbox	Source
React95 template	Configuration

github-actions[bot] commented 2 years ago

:tada: This PR is included in version 4.0.0-beta.13 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

github-actions[bot] commented 1 year ago

:tada: This PR is included in version 4.0.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

react95-io / React95