Section support in GridList Drag And Drop

[kevinolsson]

Provide a general summary of the feature here

Hi!

I wanted to ask if there are any plans to support sections with Drag and Drop in GridList. I know that Sections is still marked as alpha, so I completely understand it’s early, just curious if this feature is on the roadmap yet.

P.S. I’m asking because I’ve tried getting Drag and Drop to work with sections but haven’t had any luck. The lack of documentation, combined with the number of workarounds I’ve had to try, makes me think it’s not fully supported yet.

Thanks!

🤔 Expected Behavior?

Ideally it would work list this, but in my experience I've had to flatten the list and simulate headings into its own GridList.Item.

   const list = useListData({ initialItems: initialItemsContainingLists });
   const {dragAndDropHooks} = useDragAndDrop({ ...dragAndDropOptions });


    <GridList
      aria-label="Pick an animal"
      items={list}
      selectedKeys={selected}
      selectionMode="single"
      onSelectionChange={setSelected}>
      {section => (
        <GridListSection id={section.name}>
          <GridListHeader>{section.name}</GridListHeader>
          <Collection items={section.children}>
            {item => <MyItem >{item.name}</MyItem>}
          </Collection>
        </GridListSection>
      )}
    </GridList>

😯 Current Behavior

The current behavior prevents me from using sections. Like I wrote up top I've had to flatten the list, and simulate section headings inside GridList.Items.

💁 Possible Solution

The working example I have is to flatten the list, and simulate section headings as their own GridList.Item. In my implementation, I have a switch statement happening with conditionally renders the type of block I'd like inside my GridList. Not sure how usably this solution is to you guys, I'm sure you have something that's more "primitive" to React Aria cooking!

🔦 Context

Like most collections, our GridList have sections.

💻 Examples

No response

🧢 Your Company/Team

Ubiquiti

🕷 Tracking Issue

No response