Filetree with Radix Primitives

[fsteenkamp]

I'm trying to build a filetree with standard keyboard navigation, including:

• multiple select (using shift+click to select a set OR shift+down arrow to select next item)
• typeahead
• drag and drop

Not sure if anyone has done something similar using Radix. What would a good starting point be? It seems like a filetree would be some combination of a Toggle Group and a Navigation Menu with multi select drag & drop. Would it be a stretch to build with Radix Prims? Any other suggestions?

Thanks in advance!

[fsteenkamp]

I spent some time looking around, I guess the quickest win for me would be to use a ToggleGroup and implement

• Typeahead same as here
• Shift+Down arrow to select the next item
• Shift click to select a range
• And normal click/select to remove all selections except item that was selected
• Cmd/Ctr select to select item without unselecting currently selected items
• Click away to unselect everything
• Arrow-Right and Arrow-Left to navigate

Any other suggestions? :D

[fsteenkamp]

None of the current primitives are a good starting point since the a11y rules for a tree are completely different.
From @benoitgrelard - https://twitter.com/benoitgrelard/status/1508364012047769600

[benoitgrelard]

Ha! I was about to respond here after responding on the tweet. Thanks!