@radix-ui/react-select 0.1.2-rc.33 → 0.1.2-rc.34

package/dist/index.module.js

@@ -1,5 +1,5 @@
 import $01b9c$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
-import {useState as $01b9c$useState, useRef as $01b9c$useRef, createElement as $01b9c$createElement, forwardRef as $01b9c$forwardRef, useEffect as $01b9c$useEffect, useCallback as $01b9c$useCallback, Fragment as $01b9c$Fragment} from "react";
+import {useState as $01b9c$useState, useRef as $01b9c$useRef, createElement as $01b9c$createElement, forwardRef as $01b9c$forwardRef, useCallback as $01b9c$useCallback, useEffect as $01b9c$useEffect, Fragment as $01b9c$Fragment, useMemo as $01b9c$useMemo} from "react";
 import {createPortal as $01b9c$createPortal} from "react-dom";
 import {clamp as $01b9c$clamp} from "@radix-ui/number";
 import {composeEventHandlers as $01b9c$composeEventHandlers} from "@radix-ui/primitive";
@@ -110,9 +110,7 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
         prop: valueProp,
         defaultProp: defaultValue,
         onChange: onValueChange
-    }); // We set this to true by default so that events bubble to forms without JS (SSR)
-    const isFormControl = trigger ? Boolean(trigger.closest('form')) : true;
-    const [bubbleSelect, setBubbleSelect] = $01b9c$useState(null);
+    });
     const triggerPointerDownPosRef = $01b9c$useRef(null);
     return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectProvider, {
         scope: __scopeSelect,
@@ -128,20 +126,12 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
         open: open,
         onOpenChange: setOpen,
         dir: direction,
-        bubbleSelect: bubbleSelect,
+        name: name,
+        autoComplete: autoComplete,
         triggerPointerDownPosRef: triggerPointerDownPosRef
     }, /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$Collection.Provider, {
         scope: __scopeSelect
-    }, children), isFormControl ? /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$BubbleSelect, {
-        ref: setBubbleSelect,
-        "aria-hidden": true,
-        tabIndex: -1,
-        name: name,
-        autoComplete: autoComplete,
-        value: value // enable form autofill
-        ,
-        onChange: (event)=>setValue(event.target.value)
-    }) : null);
+    }, children));
 };
 /*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$ef9b1a59e592288f, {
     displayName: $cc7e05a45900e73f$var$SELECT_NAME
@@ -257,22 +247,56 @@ const $cc7e05a45900e73f$export$99b400cabb58c515 = /*#__PURE__*/ $01b9c$forwardRe
 /* -------------------------------------------------------------------------------------------------
  * SelectContent
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$CONTENT_NAME = 'SelectContent';
+const [$cc7e05a45900e73f$var$SelectNativeOptionsProvider, $cc7e05a45900e73f$var$useSelectNativeOptionsContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$CONTENT_NAME);
 const $cc7e05a45900e73f$export$c973a4b3cb86a03d = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, props.__scopeSelect);
-    const [fragment, setFragment] = $01b9c$useState(); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
+    const [fragment, setFragment] = $01b9c$useState(); // We set this to true by default so that events bubble to forms without JS (SSR)
+    const isFormControl = context.trigger ? Boolean(context.trigger.closest('form')) : true;
+    const [nativeOptionsSet, setNativeOptionsSet] = $01b9c$useState(new Set()); // The native `select` only associates the correct default value if the corresponding
+    // `option` is rendered as a child **at the same time** as itself.
+    // Because it might take a few renders for our items to gather the information to build
+    // the native `option`(s), we generate a key on the `select` to make sure React re-builds it
+    // each time the options change.
+    const nativeSelectKey = Array.from(nativeOptionsSet).map((option)=>option.props.value
+    ).join(';'); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
     $01b9c$useLayoutEffect(()=>{
         setFragment(new DocumentFragment());
     }, []);
-    return context.open ? /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentImpl, $01b9c$babelruntimehelpersesmextends({}, props, {
+    return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectNativeOptionsProvider, {
+        scope: props.__scopeSelect,
+        onNativeOptionAdd: $01b9c$useCallback((option)=>{
+            setNativeOptionsSet((prev)=>new Set(prev).add(option)
+            );
+        }, []),
+        onNativeOptionRemove: $01b9c$useCallback((option)=>{
+            setNativeOptionsSet((prev)=>{
+                const optionsSet = new Set(prev);
+                optionsSet.delete(option);
+                return optionsSet;
+            });
+        }, [])
+    }, isFormControl ? /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$BubbleSelect, {
+        key: nativeSelectKey,
+        "aria-hidden": true,
+        tabIndex: -1,
+        name: context.name,
+        autoComplete: context.autoComplete,
+        value: context.value // enable form autofill
+        ,
+        onChange: (event)=>context.onValueChange(event.target.value)
+    }, Array.from(nativeOptionsSet)) : null, context.open ? /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentImpl, $01b9c$babelruntimehelpersesmextends({}, props, {
         ref: forwardedRef
-    })) : fragment ? /*#__PURE__*/ $01b9c$createPortal(/*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentContextProvider, {
+    })) : fragment ? /*#__PURE__*/ $01b9c$createPortal(/*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentProvider, {
         scope: props.__scopeSelect
     }, /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$Collection.Slot, {
         scope: props.__scopeSelect
-    }, /*#__PURE__*/ $01b9c$createElement("div", null, props.children))), fragment) : null;
+    }, /*#__PURE__*/ $01b9c$createElement("div", null, props.children))), fragment) : null);
+});
+/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$c973a4b3cb86a03d, {
+    displayName: $cc7e05a45900e73f$var$CONTENT_NAME
 });
 const $cc7e05a45900e73f$var$CONTENT_MARGIN = 10;
-const [$cc7e05a45900e73f$var$SelectContentContextProvider, $cc7e05a45900e73f$var$useSelectContentContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$CONTENT_NAME);
+const [$cc7e05a45900e73f$var$SelectContentProvider, $cc7e05a45900e73f$var$useSelectContentContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$CONTENT_NAME);
 const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
     const { __scopeSelect: __scopeSelect , onCloseAutoFocus: onCloseAutoFocus , ...contentProps } = props;
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$CONTENT_NAME, __scopeSelect);
@@ -524,7 +548,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
     }, [
         context.value
     ]);
-    return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentContextProvider, {
+    return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentProvider, {
         scope: __scopeSelect,
         contentWrapper: contentWrapper,
         content: content,
@@ -622,9 +646,6 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
         })
     })))))));
 });
-/*#__PURE__*/ Object.assign($cc7e05a45900e73f$var$SelectContentImpl, {
-    displayName: $cc7e05a45900e73f$var$CONTENT_NAME
-});
 /* -------------------------------------------------------------------------------------------------
  * SelectViewport
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$VIEWPORT_NAME = 'SelectViewport';
@@ -805,25 +826,44 @@ const $cc7e05a45900e73f$export$13ef48a934230896 = /*#__PURE__*/ $01b9c$forwardRe
  * SelectItemText
  * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$ITEM_TEXT_NAME = 'SelectItemText';
 const $cc7e05a45900e73f$export$3572fb0fb821ff49 = /*#__PURE__*/ $01b9c$forwardRef((props, forwardedRef)=>{
-    var _ref$current;
     // We ignore `className` and `style` as this part shouldn't be styled.
     const { __scopeSelect: __scopeSelect , className: className , style: style , ...itemTextProps } = props;
     const context = $cc7e05a45900e73f$var$useSelectContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
     const contentContext = $cc7e05a45900e73f$var$useSelectContentContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
     const itemContext = $cc7e05a45900e73f$var$useSelectItemContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
-    const ref = $01b9c$useRef(null);
-    const composedRefs = $01b9c$useComposedRefs(forwardedRef, ref, itemContext.onItemTextChange, (node)=>{
+    const nativeOptionsContext = $cc7e05a45900e73f$var$useSelectNativeOptionsContext($cc7e05a45900e73f$var$ITEM_TEXT_NAME, __scopeSelect);
+    const [itemTextNode, setItemTextNode] = $01b9c$useState(null);
+    const composedRefs = $01b9c$useComposedRefs(forwardedRef, (node)=>setItemTextNode(node)
+    , itemContext.onItemTextChange, (node)=>{
         var _contentContext$itemT;
         return (_contentContext$itemT = contentContext.itemTextRefCallback) === null || _contentContext$itemT === void 0 ? void 0 : _contentContext$itemT.call(contentContext, node, itemContext.value, itemContext.disabled);
     });
+    const textContent = itemTextNode === null || itemTextNode === void 0 ? void 0 : itemTextNode.textContent;
+    const nativeOption = $01b9c$useMemo(()=>/*#__PURE__*/ $01b9c$createElement("option", {
+            key: itemContext.value,
+            value: itemContext.value,
+            disabled: itemContext.disabled
+        }, textContent)
+    , [
+        itemContext.disabled,
+        itemContext.value,
+        textContent
+    ]);
+    const { onNativeOptionAdd: onNativeOptionAdd , onNativeOptionRemove: onNativeOptionRemove  } = nativeOptionsContext;
+    $01b9c$useLayoutEffect(()=>{
+        onNativeOptionAdd(nativeOption);
+        return ()=>onNativeOptionRemove(nativeOption)
+        ;
+    }, [
+        onNativeOptionAdd,
+        onNativeOptionRemove,
+        nativeOption
+    ]);
     return /*#__PURE__*/ $01b9c$createElement($01b9c$Fragment, null, /*#__PURE__*/ $01b9c$createElement($01b9c$Primitive.span, $01b9c$babelruntimehelpersesmextends({
         id: itemContext.textId
     }, itemTextProps, {
         ref: composedRefs
-    })), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? /*#__PURE__*/ $01b9c$createPortal(itemTextProps.children, context.valueNode) : null, context.bubbleSelect ? /*#__PURE__*/ $01b9c$createPortal(/*#__PURE__*/ // we use `.textContent` because `option` only support `string` or `number`
-    $01b9c$createElement("option", {
-        value: itemContext.value
-    }, (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.textContent), context.bubbleSelect) : null);
+    })), itemContext.isSelected && context.valueNode && !context.valueNodeHasChildren ? /*#__PURE__*/ $01b9c$createPortal(itemTextProps.children, context.valueNode) : null);
 });
 /*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$3572fb0fb821ff49, {
     displayName: $cc7e05a45900e73f$var$ITEM_TEXT_NAME
@@ -1014,6 +1054,7 @@ const $cc7e05a45900e73f$export$eba4b1df07cb1d3 = /*#__PURE__*/ $01b9c$forwardRef
         defaultValue: value
     })));
 });
+$cc7e05a45900e73f$var$BubbleSelect.displayName = 'BubbleSelect';
 function $cc7e05a45900e73f$var$useTypeaheadSearch(onSearchChange) {
     const handleSearchChange = $01b9c$useCallbackRef(onSearchChange);
     const searchRef = $01b9c$useRef('');