@radix-ui/react-select 0.1.2-rc.44 → 0.1.2-rc.47

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, useCallback as $01b9c$useCallback, useEffect as $01b9c$useEffect, Fragment as $01b9c$Fragment, useMemo as $01b9c$useMemo} from "react";
+import {useState as $01b9c$useState, useRef as $01b9c$useRef, createElement as $01b9c$createElement, useCallback as $01b9c$useCallback, forwardRef as $01b9c$forwardRef, Fragment as $01b9c$Fragment, useEffect as $01b9c$useEffect, 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";
@@ -8,6 +8,7 @@ import {useComposedRefs as $01b9c$useComposedRefs} from "@radix-ui/react-compose
 import {createContextScope as $01b9c$createContextScope} from "@radix-ui/react-context";
 import {useDirection as $01b9c$useDirection} from "@radix-ui/react-direction";
 import {DismissableLayer as $01b9c$DismissableLayer} from "@radix-ui/react-dismissable-layer";
+import {useFocusGuards as $01b9c$useFocusGuards} from "@radix-ui/react-focus-guards";
 import {FocusScope as $01b9c$FocusScope} from "@radix-ui/react-focus-scope";
 import {useId as $01b9c$useId} from "@radix-ui/react-id";
 import {useLabelContext as $01b9c$useLabelContext} from "@radix-ui/react-label";
@@ -32,6 +33,7 @@ $parcel$export($cc7e05a45900e73f$exports, "Select", () => $cc7e05a45900e73f$expo
 $parcel$export($cc7e05a45900e73f$exports, "SelectTrigger", () => $cc7e05a45900e73f$export$3ac1e88a1c0b9f1);
 $parcel$export($cc7e05a45900e73f$exports, "SelectValue", () => $cc7e05a45900e73f$export$e288731fd71264f0);
 $parcel$export($cc7e05a45900e73f$exports, "SelectIcon", () => $cc7e05a45900e73f$export$99b400cabb58c515);
+$parcel$export($cc7e05a45900e73f$exports, "SelectPortal", () => $cc7e05a45900e73f$export$b2af6c9944296213);
 $parcel$export($cc7e05a45900e73f$exports, "SelectContent", () => $cc7e05a45900e73f$export$c973a4b3cb86a03d);
 $parcel$export($cc7e05a45900e73f$exports, "SelectViewport", () => $cc7e05a45900e73f$export$9ed6e7b40248d36d);
 $parcel$export($cc7e05a45900e73f$exports, "SelectGroup", () => $cc7e05a45900e73f$export$ee25a334c55de1f4);
@@ -46,6 +48,7 @@ $parcel$export($cc7e05a45900e73f$exports, "Root", () => $cc7e05a45900e73f$export
 $parcel$export($cc7e05a45900e73f$exports, "Trigger", () => $cc7e05a45900e73f$export$41fb9f06171c75f4);
 $parcel$export($cc7e05a45900e73f$exports, "Value", () => $cc7e05a45900e73f$export$4c8d1a57a761ef94);
 $parcel$export($cc7e05a45900e73f$exports, "Icon", () => $cc7e05a45900e73f$export$f04a61298a47a40f);
+$parcel$export($cc7e05a45900e73f$exports, "Portal", () => $cc7e05a45900e73f$export$602eac185826482c);
 $parcel$export($cc7e05a45900e73f$exports, "Content", () => $cc7e05a45900e73f$export$7c6e2c02157bb7d2);
 $parcel$export($cc7e05a45900e73f$exports, "Viewport", () => $cc7e05a45900e73f$export$d5c6c08dc2d3ca7);
 $parcel$export($cc7e05a45900e73f$exports, "Group", () => $cc7e05a45900e73f$export$eb2fcfdbd7ba97d4);
@@ -77,6 +80,7 @@ $parcel$export($cc7e05a45900e73f$exports, "Separator", () => $cc7e05a45900e73f$e
 
 
 
+
 
 
 const $cc7e05a45900e73f$var$OPEN_KEYS = [
@@ -97,8 +101,9 @@ const [$cc7e05a45900e73f$var$createSelectContext, $cc7e05a45900e73f$export$28672
     $cc7e05a45900e73f$var$createCollectionScope
 ]);
 const [$cc7e05a45900e73f$var$SelectProvider, $cc7e05a45900e73f$var$useSelectContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$SELECT_NAME);
+const [$cc7e05a45900e73f$var$SelectNativeOptionsProvider, $cc7e05a45900e73f$var$useSelectNativeOptionsContext] = $cc7e05a45900e73f$var$createSelectContext($cc7e05a45900e73f$var$SELECT_NAME);
 const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
-    const { __scopeSelect: __scopeSelect , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , value: valueProp , defaultValue: defaultValue , onValueChange: onValueChange , dir: dir , name: name , autoComplete: autoComplete  } = props;
+    const { __scopeSelect: __scopeSelect , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , value: valueProp , defaultValue: defaultValue , onValueChange: onValueChange , dir: dir , name: name , autoComplete: autoComplete , allowPinchZoom: allowPinchZoom  } = props;
     const [trigger, setTrigger] = $01b9c$useState(null);
     const [valueNode, setValueNode] = $01b9c$useState(null);
     const [valueNodeHasChildren, setValueNodeHasChildren] = $01b9c$useState(false);
@@ -113,7 +118,15 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
         defaultProp: defaultValue,
         onChange: onValueChange
     });
-    const triggerPointerDownPosRef = $01b9c$useRef(null);
+    const triggerPointerDownPosRef = $01b9c$useRef(null); // 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 [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(';');
     return /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectProvider, {
         scope: __scopeSelect,
         trigger: trigger,
@@ -128,12 +141,33 @@ const $cc7e05a45900e73f$export$ef9b1a59e592288f = (props)=>{
         open: open,
         onOpenChange: setOpen,
         dir: direction,
-        name: name,
-        autoComplete: autoComplete,
-        triggerPointerDownPosRef: triggerPointerDownPosRef
+        triggerPointerDownPosRef: triggerPointerDownPosRef,
+        allowPinchZoom: allowPinchZoom
     }, /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$Collection.Provider, {
         scope: __scopeSelect
-    }, children));
+    }, /*#__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;
+            });
+        }, [])
+    }, children)), isFormControl ? /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$BubbleSelect, {
+        key: nativeSelectKey,
+        "aria-hidden": true,
+        tabIndex: -1,
+        name: name,
+        autoComplete: autoComplete,
+        value: value // enable form autofill
+        ,
+        onChange: (event)=>setValue(event.target.value)
+    }, Array.from(nativeOptionsSet)) : null);
 };
 /*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$ef9b1a59e592288f, {
     displayName: $cc7e05a45900e73f$var$SELECT_NAME
@@ -246,47 +280,27 @@ const $cc7e05a45900e73f$export$99b400cabb58c515 = /*#__PURE__*/ $01b9c$forwardRe
 /*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$99b400cabb58c515, {
     displayName: $cc7e05a45900e73f$var$ICON_NAME
 });
+/* -------------------------------------------------------------------------------------------------
+ * SelectPortal
+ * -----------------------------------------------------------------------------------------------*/ const $cc7e05a45900e73f$var$PORTAL_NAME = 'SelectPortal';
+const $cc7e05a45900e73f$export$b2af6c9944296213 = (props)=>{
+    return /*#__PURE__*/ $01b9c$createElement($01b9c$Portal, $01b9c$babelruntimehelpersesmextends({
+        asChild: true
+    }, props));
+};
+/*#__PURE__*/ Object.assign($cc7e05a45900e73f$export$b2af6c9944296213, {
+    displayName: $cc7e05a45900e73f$var$PORTAL_NAME
+});
 /* -------------------------------------------------------------------------------------------------
  * 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(); // 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
+    const [fragment, setFragment] = $01b9c$useState(); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
     $01b9c$useLayoutEffect(()=>{
         setFragment(new DocumentFragment());
     }, []);
-    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, {
+    return /*#__PURE__*/ $01b9c$createElement($01b9c$Fragment, null, context.open ? /*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentImpl, $01b9c$babelruntimehelpersesmextends({}, props, {
         ref: forwardedRef
     })) : fragment ? /*#__PURE__*/ $01b9c$createPortal(/*#__PURE__*/ $01b9c$createElement($cc7e05a45900e73f$var$SelectContentProvider, {
         scope: props.__scopeSelect
@@ -318,6 +332,14 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
         if (content) return $01b9c$hideOthers(content);
     }, [
         content
+    ]); // Make sure the whole tree has focus guards as our `Select` may be
+    // the last element in the DOM (because of the `Portal`)
+    $01b9c$useFocusGuards();
+    const [contentZIndex, setContentZIndex] = $01b9c$useState();
+    $01b9c$useLayoutEffect(()=>{
+        if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
+    }, [
+        content
     ]);
     const focusFirst = $01b9c$useCallback((candidates)=>{
         const [firstItem, ...restItems] = getItems().map((item)=>item.ref.current
@@ -565,15 +587,16 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
         isPositioned: isPositioned,
         shouldExpandOnScrollRef: shouldExpandOnScrollRef,
         searchRef: searchRef
-    }, /*#__PURE__*/ $01b9c$createElement($01b9c$Portal, null, /*#__PURE__*/ $01b9c$createElement($01b9c$RemoveScroll, {
-        as: $01b9c$Slot
+    }, /*#__PURE__*/ $01b9c$createElement($01b9c$RemoveScroll, {
+        as: $01b9c$Slot,
+        allowPinchZoom: context.allowPinchZoom
     }, /*#__PURE__*/ $01b9c$createElement("div", {
         ref: setContentWrapper,
         style: {
             display: 'flex',
             flexDirection: 'column',
             position: 'fixed',
-            zIndex: 0
+            zIndex: contentZIndex
         }
     }, /*#__PURE__*/ $01b9c$createElement($01b9c$FocusScope, {
         asChild: true // we make sure we're not trapping once it's been closed
@@ -648,7 +671,7 @@ const $cc7e05a45900e73f$var$SelectContentImpl = /*#__PURE__*/ $01b9c$forwardRef(
                 event.preventDefault();
             }
         })
-    })))))));
+    }))))));
 });
 /* -------------------------------------------------------------------------------------------------
  * SelectViewport
@@ -1129,6 +1152,7 @@ const $cc7e05a45900e73f$export$be92b6f5f03c0fe9 = $cc7e05a45900e73f$export$ef9b1
 const $cc7e05a45900e73f$export$41fb9f06171c75f4 = $cc7e05a45900e73f$export$3ac1e88a1c0b9f1;
 const $cc7e05a45900e73f$export$4c8d1a57a761ef94 = $cc7e05a45900e73f$export$e288731fd71264f0;
 const $cc7e05a45900e73f$export$f04a61298a47a40f = $cc7e05a45900e73f$export$99b400cabb58c515;
+const $cc7e05a45900e73f$export$602eac185826482c = $cc7e05a45900e73f$export$b2af6c9944296213;
 const $cc7e05a45900e73f$export$7c6e2c02157bb7d2 = $cc7e05a45900e73f$export$c973a4b3cb86a03d;
 const $cc7e05a45900e73f$export$d5c6c08dc2d3ca7 = $cc7e05a45900e73f$export$9ed6e7b40248d36d;
 const $cc7e05a45900e73f$export$eb2fcfdbd7ba97d4 = $cc7e05a45900e73f$export$ee25a334c55de1f4;
@@ -1143,5 +1167,5 @@ const $cc7e05a45900e73f$export$1ff3c3f08ae963c0 = $cc7e05a45900e73f$export$eba4b
 
 
 
-export {$cc7e05a45900e73f$export$286727a75dc039bd as createSelectScope, $cc7e05a45900e73f$export$ef9b1a59e592288f as Select, $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 as SelectTrigger, $cc7e05a45900e73f$export$e288731fd71264f0 as SelectValue, $cc7e05a45900e73f$export$99b400cabb58c515 as SelectIcon, $cc7e05a45900e73f$export$c973a4b3cb86a03d as SelectContent, $cc7e05a45900e73f$export$9ed6e7b40248d36d as SelectViewport, $cc7e05a45900e73f$export$ee25a334c55de1f4 as SelectGroup, $cc7e05a45900e73f$export$f67338d29bd972f8 as SelectLabel, $cc7e05a45900e73f$export$13ef48a934230896 as SelectItem, $cc7e05a45900e73f$export$3572fb0fb821ff49 as SelectItemText, $cc7e05a45900e73f$export$6b9198de19accfe6 as SelectItemIndicator, $cc7e05a45900e73f$export$d8117927658af6d7 as SelectScrollUpButton, $cc7e05a45900e73f$export$ff951e476c12189 as SelectScrollDownButton, $cc7e05a45900e73f$export$eba4b1df07cb1d3 as SelectSeparator, $cc7e05a45900e73f$export$be92b6f5f03c0fe9 as Root, $cc7e05a45900e73f$export$41fb9f06171c75f4 as Trigger, $cc7e05a45900e73f$export$4c8d1a57a761ef94 as Value, $cc7e05a45900e73f$export$f04a61298a47a40f as Icon, $cc7e05a45900e73f$export$7c6e2c02157bb7d2 as Content, $cc7e05a45900e73f$export$d5c6c08dc2d3ca7 as Viewport, $cc7e05a45900e73f$export$eb2fcfdbd7ba97d4 as Group, $cc7e05a45900e73f$export$b04be29aa201d4f5 as Label, $cc7e05a45900e73f$export$6d08773d2e66f8f2 as Item, $cc7e05a45900e73f$export$d6e5bf9c43ea9319 as ItemText, $cc7e05a45900e73f$export$c3468e2714d175fa as ItemIndicator, $cc7e05a45900e73f$export$2f60d3ec9ad468f2 as ScrollUpButton, $cc7e05a45900e73f$export$bf1aedc3039c8d63 as ScrollDownButton, $cc7e05a45900e73f$export$1ff3c3f08ae963c0 as Separator};
+export {$cc7e05a45900e73f$export$286727a75dc039bd as createSelectScope, $cc7e05a45900e73f$export$ef9b1a59e592288f as Select, $cc7e05a45900e73f$export$3ac1e88a1c0b9f1 as SelectTrigger, $cc7e05a45900e73f$export$e288731fd71264f0 as SelectValue, $cc7e05a45900e73f$export$99b400cabb58c515 as SelectIcon, $cc7e05a45900e73f$export$b2af6c9944296213 as SelectPortal, $cc7e05a45900e73f$export$c973a4b3cb86a03d as SelectContent, $cc7e05a45900e73f$export$9ed6e7b40248d36d as SelectViewport, $cc7e05a45900e73f$export$ee25a334c55de1f4 as SelectGroup, $cc7e05a45900e73f$export$f67338d29bd972f8 as SelectLabel, $cc7e05a45900e73f$export$13ef48a934230896 as SelectItem, $cc7e05a45900e73f$export$3572fb0fb821ff49 as SelectItemText, $cc7e05a45900e73f$export$6b9198de19accfe6 as SelectItemIndicator, $cc7e05a45900e73f$export$d8117927658af6d7 as SelectScrollUpButton, $cc7e05a45900e73f$export$ff951e476c12189 as SelectScrollDownButton, $cc7e05a45900e73f$export$eba4b1df07cb1d3 as SelectSeparator, $cc7e05a45900e73f$export$be92b6f5f03c0fe9 as Root, $cc7e05a45900e73f$export$41fb9f06171c75f4 as Trigger, $cc7e05a45900e73f$export$4c8d1a57a761ef94 as Value, $cc7e05a45900e73f$export$f04a61298a47a40f as Icon, $cc7e05a45900e73f$export$602eac185826482c as Portal, $cc7e05a45900e73f$export$7c6e2c02157bb7d2 as Content, $cc7e05a45900e73f$export$d5c6c08dc2d3ca7 as Viewport, $cc7e05a45900e73f$export$eb2fcfdbd7ba97d4 as Group, $cc7e05a45900e73f$export$b04be29aa201d4f5 as Label, $cc7e05a45900e73f$export$6d08773d2e66f8f2 as Item, $cc7e05a45900e73f$export$d6e5bf9c43ea9319 as ItemText, $cc7e05a45900e73f$export$c3468e2714d175fa as ItemIndicator, $cc7e05a45900e73f$export$2f60d3ec9ad468f2 as ScrollUpButton, $cc7e05a45900e73f$export$bf1aedc3039c8d63 as ScrollDownButton, $cc7e05a45900e73f$export$1ff3c3f08ae963c0 as Separator};
 //# sourceMappingURL=index.module.js.map