[select] Support arbitrary object value types

[atomiks]

Bug report

Current behavior

Only primitive string/number types are properly supported despite value being typed any. The Select.Root items prop and form value can't resolve the value or label from object value items.

Combobox has itemToLabel/String and itemToValue props to resolve the display and form submission value from the object value

Expected behavior

<Select.Item value={object}> should be properly supported

This reduces or prevents the need to map data to the conforming value/label format before rendering it

const items = [
  { id: 'test', name: 'Test' }
];

<Select.Root 
  defaultValue={items[0]} 
  items={items}
  itemToLabel={(item) => item.name} {/* <Select.Value> */}
  itemToValue={(item) => item.id} {/* hidden input value */}
>
[...] <Select.Item value={item}>

Base UI version

1.0.0-beta.2

[ingokpp]

@atomiks, Should this replace the current behavior (breaking change) or fallback to it if itemToValue is not provided?

[atomiks]

@ingokpp it should be supplementary without breaking changes ideally, so fallbacks should be fine

[oliviertassinari]

I guess the equivalent issue is mui/material-ui#10845 (could be useful to see the challenges with fixing this in the past, the follow ups that we didn't think of initially).

[github-actions]

This fix 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-components/react@2704