Push full item object into values array for combobox/select components

[btroop]

The documentation mentions the benefit of rendering multi-selected values outside of the component (https://zagjs.com/components/react/combobox#rendering-the-selected-values-outside-the-combobox).

The problem I see with the implementation, though, is the value array is designed as a simplified array of selected value keys from the passed in object (BTW love the ability to use a custom object and map the appropriate keys to the value/label used by the state machine). If I am trying to render my list of selected items, and other item keys are important in rendering that list (for UI/UX purposes), then I have to start with my full item list and filter by the array of values the component maintains.

IMO, it would be better to offer the option to push the entire selected item object into the values array, so that rendering that array in another component would be as easy as looking at the list of selected values which would contain all the information necessary to perform the render.

The state machine already requires a {value:x, label: y} shaped object, or a custom object that has its keys appropriately mapped to the value & label keys, so it doesn't seem like a far-fetched idea to be able to internally generate the "simple" array the component already uses. I.E., going from valuesSimpleArray = [{value: 1, label: a}, {value: 2, label: b}].map((i)=>i.value) within the machine to get the already-used simple values array is much easier than going selectedItems = fullItemArray.filter(i=>values.includes(i.value)) outside the machine to render the list of values, especially if the full item list contains hundreds or thousands of items.

An easy use case would be a list of links. The URL of the link would direct the user to the page based on the uuid of the item in the item's value key, but the link should be readable by the user and use item's label key. Currently the component's value array would only give me the uuids and not the labels that I need to render the links in a user-friendly way.

Not sure if I'm making my idea clear, so the TLDR:

change combobox/select component values to array of objects from items. i.e., values = [{value:1, label: "a"}, {value:2, label: "b"}] instead of values = [1,2] to make rendering the selected items outside the component easier.