[combobox] Access filtered items without having to control it entirely (e.g. to implement virtualized)

[guisehn]

Feature request

Summary

I'm currently implementing a virtualized combobox, following the docs.

To implement a virtualized list, we need to pass a children to Combobox.List with a ReactNode containing our virtualized list.

When passing a ReactNode as children to Combobox.List, we opt-out of the automatic filtering, and need to handle everything manually, which considerably increases the complexity of the consumer code, e.g. the example in the docs creates a searchValue state, defines a deferredSearchValue, calls Combobox.useFilter, then does the filtering inside a useMemo.

It would be nice if we could implement a virtualized list without having to opt out of automatic filtering.

Motivation

Implementing a virtualized list properly is already a complex thing on its own. If we could remove the complexity of filtering which is currently necessary in this case, it would make things much easier for consumers of the library.

API ideas

Some ideas on API, in order of personal preference, without doing a breaking change:

• New hook Combobox.useFilteredItems that can be called anywhere inside <Combobox.Root>

• Combobox.List.State received as 2nd arg of render could expose the filtered items.

• A new prop on Combobox.List that changes the way that children works when passing a function (currently, this function is evaluated for every item, we could have a function that is called once and receives the filtered items)

[github-actions]

This feature will be available in the next npm release of Base UI.

In the meantime, you can try it out on our Canary release channel:

npm i https://pkg.pr.new/@base-ui/react@3732