Expose `ComboBoxContext` to `ListBoxItem`

[vezaynk]

Provide a general summary of the feature here

In our flow, we want users to be deliberate in when entering an option that isn't part of the available combobox options. Something like this:

In order to do this, we currently have to read inputs from the input box, generate a new dynamic item to append to the listbox, and pass it down to be rendered.

🤔 Expected Behavior?

useContext(ComboBoxContext) comes back as null.

😯 Current Behavior

useContext(ComboBoxContext) should come back with relevant information, such as the inputValue.

💁 Possible Solution

No response

🔦 Context

The context type already exists. I was surprised to find it unaccessible.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

This should probably be easier, but here is a way to do it:
https://codesandbox.io/p/sandbox/n6j8nr?file=%2Fsrc%2FApp.js%3A46%2C39

The key thing here is that we're doing custom filtering, which means telling the combobox that we are controlling the items, but then we actually do it through the added Collections farther down. I've split it into two so that you can avoid copying/concatenating/etc the actual array of items.

We cannot currently expose the context anywhere except for inside the items. That's just due to how collections work in order for us to be able to determine all the items ahead of time. There are some other issues around, but here's a starting point if you want more information Context set in collection item node not propagating

You could probably also do this using a custom renderer https://react-spectrum.adobe.com/react-aria/collections.html#advanced-custom-collection-renderers