GridList with sections

[manhhavu]

Hello,

I would like to develop this component in which user can:

• Move items between different sections. Items can be selected from different sections, for example, item 2,4,5 can be moved to Section 3
• Reorder items inside a section.
• Cancel the selection from multiple sections at the same time (by pressing Escape)

Without sections, the behavior looks pretty much as a GridList's one but I don't know how to do in case there are sections. I tried to use separate GridList for each section but I cannot move different items from different GridLists at the same time.

Do you have any idea of how it could be done?

[snowystinger]

It doesn't look like we support Sections in GridList yet, I think we'd want to add support for that, much like ListBox. However, that's likely going to need some a11y updates.

In the meantime you should be able to implement it as 3 (or more) and maintain unique keys for all the items across all of them. You'd track all the selected keys at the top level, you might not need to track which item is in which list and just pass all the selected keys to all lists.

As for deselect all at once, I think you could use a capturing phase listener for keydown and when you get an Escape key, you can clear your selected keys.

Reordering within the same list and moving between lists is already doable https://react-spectrum.adobe.com/react-aria/GridList.html#drag-and-drop

[manhhavu]

Thank you, I will dig further your ideas 😁