Loading video...

Video Failed to Load

Go Home

New React Aria components! 🚀 🔗 PreviewTrigger – build accessible hover popovers 🐭 Context menu trigger for mouse, keyboard, and touch 🪙 TokenField (alpha) – a text input with inline tokens 📋 Editable table cells 🎹 Keyboard shortcuts 🪝 New hook docs

25,457 views • 1 month ago •via X (Twitter)

28 Comments

Devon Govett's profile picture
Devon Govett1 month ago

Check out the release notes here.

Devon Govett's profile picture
Devon Govett1 month ago

PreviewTrigger opens a popover on hover, focus, or long press. Unlike Tooltip, it may include interactive content. Keyboard users can tab in and out of the popover, and it's accessible across devices. Includes open delay, safe area handling, and coordinated entry and exit animations.

Devon Govett's profile picture
Devon Govett1 month ago

MenuTrigger adds support for context menus, accessible via right click, OS-specific keyboard shortcuts (e.g. Control + Enter on macOS), and touch long press.

Devon Govett's profile picture
Devon Govett1 month ago

TokenField is a versatile component for entering text with inline tokens, supporting autocomplete and auto-tokenization. Use it to build AI prompt fields, tag inputs, structured search fields, mention inputs, and multi-select comboboxes. Currently alpha.

Devon Govett's profile picture
Devon Govett1 month ago

We also completely re-wrote the React Aria and React Stately hook documentation for every component! The new docs use the same styles as our React Aria Components examples, and show how to use components and hooks together when you need more control.

Darkstar's profile picture
Darkstar1 month ago

Amazing as always! 🥳

Jeff Rosen's profile picture
Jeff Rosen1 month ago

Thank you

Peter Emad's profile picture
Peter Emad1 month ago

Amazing work as alawys

Damian Stasik's profile picture
Damian Stasik1 month ago

Thank you! I also love the new `shouldObserveItemSize` prop on the Virtualizer, as it could help me completely switch away from the other package I've been using for virtualization.

Pav Sidhu's profile picture
Pav Sidhu1 month ago

You guys are always cooking! TokenField is 🔥🔥

Elias Witt's profile picture
Elias Witt1 month ago

Gonna get some mileage out of that tokenfield component 👀

Nate Smith's profile picture
Nate Smith25 days ago

Do you expect to eventually refactor DatePicker to use TokenField? E.g. would be cool to have an autocomplete tokenfield for time zone.

Artur Bień's profile picture
Artur Bień1 month ago

Awesome stuff 😍

Anton Reshetov's profile picture
Anton Reshetov1 month ago

A context menu that works for mouse, keyboard and touch is quietly the hardest item on this list. Hand-rolled menus usually die on Shift+F10 or on telling long-press from scroll. Shipping that as a trigger you just attach is years of edge cases compressed into one API.

pxlgrdnr's profile picture
pxlgrdnr1 month ago

Shipped some UI w/ PreviewTrigger this week. Loving it. Not sure if it's intentional but if a Button inside the Popover is used for a TooltipTrigger/Tooltip, the Popover closes immediately on hover of the Button.

Devon Govett's profile picture
Devon Govett1 month ago

sounds like a bug. could you file it on GitHub?

pxlgrdnr's profile picture
pxlgrdnr1 month ago

No problem, submitted

Mikhail Rogov's profile picture
Mikhail Rogov1 month ago

Context menus across mouse, keyboard, and touch save a lot of easy-to-miss edge case work.

Curtis Flaming's profile picture
Curtis Flaming1 month ago

Amazing

Culer's profile picture
Culer1 month ago

Examples on editable cells?

Devon Govett's profile picture
Devon Govett1 month ago

Basically just that text fields now work as expected in table cells with keyboardNavigationBehavior="tab".

Culer's profile picture
Culer1 month ago

I never truly understood the purpose of having separate editable cell, we could turn any cell into editable even before this so what is the difference here? Sorry if question is dumb😅

Devon Govett's profile picture
Devon Govett1 month ago

Before this if you tried to use the arrow keys to move the cursor within the text field it would conflict with navigating between cells in the table. That's now fixed with the new tab mode.

Culer's profile picture
Culer1 month ago

in the doc's example when I press tab it focuses input field of the cell (which is intended) but when I press tab while input being focused it moves the focus out of the table completely, shouldn't it instead just move focus out of cell into grid navigation?

Devon Govett's profile picture
Devon Govett1 month ago

The problem with that is you’d end up in a tab loop. Cell -> input -> cell -> input etc. From input you can shift tab back to the cell though.

Culer's profile picture
Culer1 month ago

yeah tab loop makes sense, but instead of shift + tab could we do ESC or at least configure it, if shift + tab kind of default?

Devon Govett's profile picture
Devon Govett1 month ago

Yeah I think we were discussing adding escape in a follow up. Need a bit more testing to make sure it doesn’t conflict with anything.

Raja ARK's profile picture
Raja ARK1 month ago

Can we get all the components which @ark_ui_ have?

Related Videos