[RAC] Expose collection components and utils to enable custom collections

[Pearce-Ropion]

Provide a general summary of the feature here

It'd be great if the contents of react-aria-components/src/Collections.tsx were exported/exposed. Currently you can almost replicate collection components such as ListBox or Menu with @react-aria and @react-stately. But all of the nice features that come out of the box with react-aria-components such as useCachedChildren useSSRCollectionNode and the prerendered Document are hidden away. Building custom collection based components is unnecessarily difficult due to not having the tools necessary to do so.

🤔 Expected Behavior?

Expose the contents of react-aria-components/src/Collections.tsx.

😯 Current Behavior

Only Section Collection and SectionProps are currently exposed.

💁 Possible Solution

Individually export all of the named components, hooks, utils and types from react-aria-components/src/Collections.tsx to facilitate custom component creation. I think these could be moved to @react-aria/collections for ease of packaging.

I'd be happy to contribute toward this effort.

🔦 Context

I was recently trying to make an Accordion component using react-aria. (I know Accordion isn't a priority for the react-spectrum team based on bunch of other comments/issues. I have no problem making one myself). I can see others wanting to implement their own collection based components or build their own implementations of the built-in collection components to ensure their own design system consistency, etc.

I wanted to make it work similar to the existing GridList or ListBox implementation, where reusable wrappers could be used to wrap items in order to provide a consistent API. I got my implementation mostly working (using Item directly) but I was unable to create reusable wrappers which is essential to provide a consistent API for my company's design system. Looking at the code for GridList or ListBox, I assumed that what I was missing was all of the "extra" stuff that RACs Collections provides that isn't available directly from @react-aria.

I actually did try copy/pasting all of the collection code but something was still missing and it didn't work. However, the collection system is a lot of extra code that I don't think makes sense for my team to maintain on our own.

I also tried to use GridList for my component instead of attempting to roll my own but ran into other issues where options provided to the SelectionManager didn't fit my use case. I think another potential GH issue to create would be to allow users to pass in additional options for the selection manager for the various existing collection based components but that can be moved to a different issue.

💻 Examples

Let me know if you need examples and I can mock something up. Everything I've done thus far has been in private repos.

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

I believe the work in https://github.com/adobe/react-spectrum/pull/5912 will be of interest here. We are still hashing out the specific api but things like createLeafComponent and createBranchComponent would help you make your own custom collection components

[lithdew]

@LFDanLu Is there a reason that createLeafComponent and createBranchComponent are not exported from react-aria-components?

[snowystinger]

They just aren't quite ready for release is all. We just did a breaking change on them and now we're waiting for them to settle a bit to make sure we're happy with the change.