In preparation for exposing RAC's collection implementation publicly, this refactors the internals with a safer and less error-prone API that exposes fewer implementation details. It exposes a CollectionBuilder component (name tbd??) that takes care of rendering the collection in a hidden tree and exposing the built collection.
<CollectionBuilder content={children}>
{collection => /* render stuff here */}
</CollectionBuilder>
This ensures that the order is always correct (the portal must be before the rendered content for SSR), and avoids exposing things like the internal document and other implementation details.
The content prop can be any React children, either direct collection elements (e.g. MenuItem) or other elements (in the case of Select and ComboBox). A <Collection> rendered inside starts a collection root and registers items with the collection owned by CollectionBuilder. Many collection components accept collection children and the items prop directly as a shortcut, so these render content={<Collection {...props} />}.
This will move to a separate package (out of RAC) so it can be used by hook users next. Wanted to do this refactor first so it's easier to review.
In preparation for exposing RAC's collection implementation publicly, this refactors the internals with a safer and less error-prone API that exposes fewer implementation details. It exposes a
CollectionBuilder
component (name tbd??) that takes care of rendering the collection in a hidden tree and exposing the built collection.This ensures that the order is always correct (the portal must be before the rendered content for SSR), and avoids exposing things like the internal document and other implementation details.
The
content
prop can be any React children, either direct collection elements (e.g.MenuItem
) or other elements (in the case ofSelect
andComboBox
). A<Collection>
rendered inside starts a collection root and registers items with the collection owned byCollectionBuilder
. Many collection components accept collection children and theitems
prop directly as a shortcut, so these rendercontent={<Collection {...props} />}
.This will move to a separate package (out of RAC) so it can be used by hook users next. Wanted to do this refactor first so it's easier to review.