fix: make select.web consistent

For each `<Item>` component, keep track of its `value` to `label`
mapping on the `<Root>` component by passing a `MutableRefObject`
that stores the mapping from `<Root>` to `<Item>` via context.

On render, `<Item>` sets the label for its value. `<Root>` can then call
`onValueChange` with `labelForValueRef.current[val] ?? val`, allowing
feature parity with the native implementation.

This approach works perfectly. Since `Item` must be rendered before it
can be interacted with and emit events, this always ensures that
`labelForValueRef[val]` exists before `onStrValueChange` is called.
Furthermore, since the `value` and `defaultValue` prop requires `{
value: string, label: string }`, the initial render also does not have
any issues.

Author: bryanmylee

packages/select/src/select.web.tsx

@@ -41,14 +41,11 @@ const SelectContext = React.createContext<
   | (SharedRootContext & {
       open: boolean;
       onOpenChange: (open: boolean) => void;
+      labelForValueRef: React.MutableRefObject<Record<string, string>>;
     })
   | null
 >(null);
 
-/**
- * @web Parameter of `onValueChange` has the value of `value` for the `value` and the `label` of the selected Option
- * @ex When an Option with a label of Green Apple, the parameter passed to `onValueChange` is { value: 'green-apple', label: 'green-apple' }
- */
 const Root = React.forwardRef<RootRef, RootProps>(
   (
     {
@@ -73,8 +70,12 @@ const Root = React.forwardRef<RootRef, RootProps>(
       onOpenChangeProp?.(value);
     }
 
+    const labelForValueRef = React.useRef<Record<string, string>>({});
     function onStrValueChange(val: string) {
-      onValueChange({ value: val, label: val });
+      onValueChange({
+        value: val,
+        label: labelForValueRef.current[val] ?? val,
+      });
     }
 
     const Component = asChild ? Slot.View : View;
@@ -85,6 +86,7 @@ const Root = React.forwardRef<RootRef, RootProps>(
           onValueChange,
           open,
           onOpenChange,
+          labelForValueRef,
         }}
       >
         <Select.Root
@@ -225,6 +227,8 @@ const ItemContext = React.createContext<{
 
 const Item = React.forwardRef<ItemRef, ItemProps>(
   ({ asChild, closeOnPress = true, label, value, children, ...props }, ref) => {
+    const { labelForValueRef } = useRootContext();
+    labelForValueRef.current[value] = label;
     return (
       <ItemContext.Provider value={{ itemValue: value, label: label }}>
         <Slot.Pressable ref={ref} {...props}>