How to reimplement the "wrapper" from getCollectionNode in the new CollectionBuilder from a "@react-aria/collections"?

[over-over]

Hi there! 👋
I'm working on the onboarding React component which will guide a user through the app by highlighting parts of the interface. Let’s call this component an <OnboardingHighlight /> that wraps child nodes in a new <div> with custom styles and props like onFocus to prevent conflict with children components which also have a onFocus prop.

Visual example of what I want to achieve with a <OnboardingHighlight /> akin to the React Joyride

<OnboardingHighlight /> works great with regular components, but when it comes to collections, there are a bunch of problems. To make it work as intended with collections components, I can add a special property getCollectionNode (like in TooltipTrigger) to the component with a "wrapper" in the result object. Via this "wrapper", I can define how collection keys will be handled and elements are rendered. But it works only if I'm creating a collection via useCollection and passing it to the CollectionBuilder from "react-stately".

But there’s another CollectionBuilder from a "@react-aria/collections", which works very differently. In order to make <OnboardingHighlight /> work with these collections, I need to wrap it either in createLeafComponent or createBranchComponent. However, neither of them has a "wrapper" support like the one defined in getCollectionNode, leading to another set of problems:

• If I use createLeafComponent with 2 parameters, the component can be used both in and outside collections. But if <OnboardingHighlight /> have a child leaf component like TabItem, TabItem won’t be present in the collection object and will only be accessible via node.props.children;
• If I use createBranchComponent there’s no problem rendering child leaf components, but it becomes impossible to use <OnboardingHighlight /> outside collections because it results in a JS error.

Is there any way to achieve desired behaviour with a "wrapper" from getCollectionNode in the new CollectionBuilder from a "@react-aria/collections"? 🤔

[snowystinger]

We have contemplated opening createBranchComponent in the same way as createLeafComponent. I think I explored in in a PR at one point. This one https://github.com/adobe/react-spectrum/pull/7289/files
We decided on a different way to implement it. Maybe this can help you as well so that you don't need collections inside every component of yours.

We'll likely have to solve something similar when we get to Coachmarks as well. I know an approach we've used in the past has been to render the overlays separately, and position them by finding the target in the dom. We'd also like to avoid that because it typically means needing to implement polling and retry logic, but it could work for now.

[over-over]

Hey! I read your comment a while ago but forgot to reply. Thank you for answering me. I have indeed decided to switch from collections to simple react components with data attributes and custom keyboard listeners (as a way to preserve the previous UX).
While I had to drop some react-aria hooks, it pushed me to delve a bit deeper into the ARIA docs. I think that's a plus in this trade-off 😅