Drop everything! Drag and drop support in the React Aria Tree component is here. 🫳🎤 🪜 Reorder and move between levels 🌴 Drop on or between rows 🧩 Interoperable with other components 📜 Auto expanding and scrolling 📂 File and directory support 🎹 Fully keyboard accessible

This release also includes lots of bug fixes. • No more scrollbar layout shift when opening popovers and modals! • Fixed tapping outside popovers on Android • Date picker interaction improvements • Form reset fixes • ... and more!

If you missed my blog post when we first introduced drag and drop in React Aria, check it out! It details how we make drag and drop accessible by default across all of our components. Tree added a few new complexities, but overall approach is the same.

Some small details on the new interactions for Tree: Dragging and holding over an item will expand it. You can also expand an item while dragging with the keyboard using the right arrow key, or by focusing the chevron and clicking with a screen reader. There may be multiple possible drop positions between two items, for each parent in the hierarchy between them. You can move your mouse left or right to choose which one. This is not based on the absolute position of the cursor, it's based on the direction and amount of motion. The first selected target is based on whether you came from above or below, and the x positions are relative to that starting point. This makes it a bit easier to use. With a keyboard you can select a position by moving up or down with the arrow keys between each possible level. It was an interesting challenge to make it feel as natural as possible in such a limited space!

Two more cool things: 1. Despite being deeply integrated with our components, the drag and drop API is tree shakeable, so you only pay for the bundle size if you use it. We use dependency injection to implement this. 2. We use the native browser drag and drop API internally, so it is interoperable with non-React Aria components, as well as apps in different browser windows, or even external native applications.

Discover the top Safari web extensions to boost productivity, enhance workflow, and customize your browsing experience on Mac, iOS, and iPadOS.

RAC is great. I must say better than shadcn because of keyboard and so many minor things which doesn't handled by radix still yet. I'm using this in my all projects lately. Created this demo to showcase elements including multi-select component.

very nice!

🤩 always looking for the ultimate cleanest dnd tree

Awesome! That's very useful.

Great! Is there a way to throttle keyboard navigation on a table? I tried creating a large table with many columns, and it becomes very laggy with virtualization. Thanks

Twitter is not a great place for support. If you open a GitHub issue or discussion we’d be happy to assist!