Component with react-stately composition inversion

[Cuttsy27]

Hi,

I am building a SearchAutocomplete component with useComboBox and the react-stately components Item and Section. I have a scenario where it would be beneficial to be able to pass className or other props to Section or Item but this isn't possible. Can I invert the composition of the component so I can pass my ListBoxOption or ListBoxSection to the ListBox as children and they handle rendering of the Item or Section? Does this still work correctly with react-stately? Currently the ListBox component maps over state.collection to render either the ListBoxOption or ListBoxSection based on the item.type.

Are there any examples online of the structure I am proposing?

[snowystinger]

Could you pass the props on context? We do that a lot for RSP https://react-spectrum.adobe.com/react-spectrum/layout.html#slots

Otherwise, I might need more of an example outlining the issue you're facing.

[Cuttsy27]

Sorry I should've been more specific - I am working with the react-aria hooks currently and not the components (they were still alpha when I started and we need to use our component/s in production).

My ListBox looks something like this:

function ListBox() {
return (
    <ul
      {...listBoxProps}
      ref={listBoxRef}
    >
      {[...state.collection].map((item) =>
        item.type === 'section' ? (
          <ListBoxSection
            key={item.key}
            section={item}
            state={state}
          />
        ) : (
          <ListBoxOption
            key={item.key}
            item={item}
            state={state}
          />
        )
      )}
    </ul>
)
}

It gets state from props which is created by useComboBoxState in the parent component (in this case a SearchAutocomplete). Then, Item or Section from react-stately are provided to SearchAutocomplete as children. I need to be able to add custom styles or change the structure of the Sections for the SearchAutocomplete but not for all comboboxes, so it makes sense to be able to pass ListBoxSection or ListBoxItem as children to SearchAutocomplete instead, if they can render Section and Item themselves? But when the components are inverted this way I'm not sure we can still use state.collection for mapping.

I am new to react-aria so I'm sorry for any ignorance in how the components/hooks should be used. I am basing my components on the example provided here by Devon Govett https://codesandbox.io/s/hardcore-moon-xzc4r?file=/src/SearchAutocomplete.tsx

[Cuttsy27]

What I am trying to achieve in this scenario and the reason I want to be able to customize the Sections or Items is, this SearchAutocomplete should be able to have two Sections. The first will be plain Items which when clicked will set the value of the Search input. The second Section will contain custom actions (still just an Item so navigation etc work as expected) but instead of changing the value of the input, they might open a dialog to add a new item to the list. The styles of the sections and items are slightly different but specific to this use case, which means the customization needs to happen as high in the component structure as possible - in this case where we pass Item and Section as children to SearchAutocomplete.

[snowystinger]

You could make the Sections and Items very generic, just empty containers basically. Then pass a classname to the outer element and pass children, which are specific to the component, into the Items. Or you can do it all through context.

This is what we do in React Spectrum using semantic elements and slots

However, you may find all of this much easier starting from React Aria Components https://react-spectrum.adobe.com/react-aria/ComboBox.html#reusable-wrappers

That said, these special link options are difficult to get right, you may want to wait for this PR #4993