Refactor Export menu with Floating UI #1642
Merged
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.
Supersedes #1567
Since Ariakit and React Aria were unsatisfactory options with regard to bundle size, I decided to try a more specialised solution: Floating UI (a full rebuild of
popper.js
andreact-popper
). It's really well designed; all based on hooks (along with helper components that I didn't end up using).The two main hooks I use are
useFloating
, which provides the refs and the popover's positioning logic, anduseListNavigation
, which provides the arrow up/down navigation (including opening the menu on arrow down, looping, focus management, etc.) This weighs roughly 30 kB, which is way more reasonable than the other two headless UI libraries I tried...At first I was also using
useDismiss
, to close the menu on Escape and click outside, and<FloatingFocusManager />
to close the menu when the focus leaves the menu. But both of those added an extra 16 kB. Since we already useuseClickOutside
anduseKeyboardListener
from react-hookz, and since<FloatingFocusManager />
has a lot of features we don't need (e.g. focus trap for modals), I decided to reimplement the same behaviours myself. As I said, Floating UI is very well designed, and this was super easy to do.All in all, I'm very happy with the result at last, so I will continue the migration from
react-aria-menubutton
in separate PRs by refactoring other components likeSelector
.