@radix-ui/react-select 0.1.2-rc.42 → 0.1.2-rc.45

package/dist/index.d.ts

@@ -1,10 +1,13 @@
 import * as React from "react";
 import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
 import { FocusScope } from "@radix-ui/react-focus-scope";
+import { UnstablePortal } from "@radix-ui/react-portal";
 import * as Radix from "@radix-ui/react-primitive";
 import { Primitive } from "@radix-ui/react-primitive";
+import { RemoveScroll } from "react-remove-scroll";
 type Direction = 'ltr' | 'rtl';
 export const createSelectScope: import("@radix-ui/react-context").CreateScope;
+type RemoveScrollProps = React.ComponentProps<typeof RemoveScroll>;
 export interface SelectProps {
     children?: React.ReactNode;
     value?: string;
@@ -16,6 +19,10 @@ export interface SelectProps {
     dir?: Direction;
     name?: string;
     autoComplete?: string;
+    /**
+     * @see https://github.com/theKashey/react-remove-scroll#usage
+     */
+    allowPinchZoom?: RemoveScrollProps['allowPinchZoom'];
 }
 export const Select: React.FC<SelectProps>;
 type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;
@@ -30,6 +37,11 @@ export const SelectValue: React.ForwardRefExoticComponent<SelectValueProps & Rea
 export interface SelectIconProps extends PrimitiveSpanProps {
 }
 export const SelectIcon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
+type PortalProps = React.ComponentPropsWithoutRef<typeof UnstablePortal>;
+export interface SelectPortalProps extends Omit<PortalProps, 'asChild'> {
+    children?: React.ReactNode;
+}
+export const SelectPortal: React.FC<SelectPortalProps>;
 export interface SelectContentProps extends SelectContentImplProps {
 }
 export const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
@@ -80,6 +92,7 @@ export const Root: React.FC<SelectProps>;
 export const Trigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export const Value: React.ForwardRefExoticComponent<SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
 export const Icon: React.ForwardRefExoticComponent<SelectIconProps & React.RefAttributes<HTMLSpanElement>>;
+export const Portal: React.FC<SelectPortalProps>;
 export const Content: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
 export const Viewport: React.ForwardRefExoticComponent<SelectViewportProps & React.RefAttributes<HTMLDivElement>>;
 export const Group: React.ForwardRefExoticComponent<SelectGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/react/select/src/packages/react/select/src/Select.tsx","packages/react/select/src/packages/react/select/src/index.ts","packages/react/select/src/index.ts"],"sourcesContent":[null,null,"export * from './Select';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
+{"mappings":"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","sources":["packages/react/select/src/packages/react/select/src/Select.tsx","packages/react/select/src/packages/react/select/src/index.ts","packages/react/select/src/index.ts"],"sourcesContent":[null,null,"export * from './Select';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -6,13 +6,15 @@ var $cg2C9$radixuiprimitive = require("@radix-ui/primitive");
 var $cg2C9$radixuireactcollection = require("@radix-ui/react-collection");
 var $cg2C9$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
 var $cg2C9$radixuireactcontext = require("@radix-ui/react-context");
+var $cg2C9$radixuireactdirection = require("@radix-ui/react-direction");
 var $cg2C9$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer");
+var $cg2C9$radixuireactfocusguards = require("@radix-ui/react-focus-guards");
 var $cg2C9$radixuireactfocusscope = require("@radix-ui/react-focus-scope");
 var $cg2C9$radixuireactid = require("@radix-ui/react-id");
 var $cg2C9$radixuireactlabel = require("@radix-ui/react-label");
 var $cg2C9$radixuireactportal = require("@radix-ui/react-portal");
 var $cg2C9$radixuireactprimitive = require("@radix-ui/react-primitive");
-var $cg2C9$radixuireactdirection = require("@radix-ui/react-direction");
+var $cg2C9$radixuireactslot = require("@radix-ui/react-slot");
 var $cg2C9$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
 var $cg2C9$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
 var $cg2C9$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
@@ -50,6 +52,7 @@ $parcel$export($1345bda09ffc1bc6$exports, "Select", () => $1345bda09ffc1bc6$expo
 $parcel$export($1345bda09ffc1bc6$exports, "SelectTrigger", () => $1345bda09ffc1bc6$export$3ac1e88a1c0b9f1);
 $parcel$export($1345bda09ffc1bc6$exports, "SelectValue", () => $1345bda09ffc1bc6$export$e288731fd71264f0);
 $parcel$export($1345bda09ffc1bc6$exports, "SelectIcon", () => $1345bda09ffc1bc6$export$99b400cabb58c515);
+$parcel$export($1345bda09ffc1bc6$exports, "SelectPortal", () => $1345bda09ffc1bc6$export$b2af6c9944296213);
 $parcel$export($1345bda09ffc1bc6$exports, "SelectContent", () => $1345bda09ffc1bc6$export$c973a4b3cb86a03d);
 $parcel$export($1345bda09ffc1bc6$exports, "SelectViewport", () => $1345bda09ffc1bc6$export$9ed6e7b40248d36d);
 $parcel$export($1345bda09ffc1bc6$exports, "SelectGroup", () => $1345bda09ffc1bc6$export$ee25a334c55de1f4);
@@ -64,6 +67,7 @@ $parcel$export($1345bda09ffc1bc6$exports, "Root", () => $1345bda09ffc1bc6$export
 $parcel$export($1345bda09ffc1bc6$exports, "Trigger", () => $1345bda09ffc1bc6$export$41fb9f06171c75f4);
 $parcel$export($1345bda09ffc1bc6$exports, "Value", () => $1345bda09ffc1bc6$export$4c8d1a57a761ef94);
 $parcel$export($1345bda09ffc1bc6$exports, "Icon", () => $1345bda09ffc1bc6$export$f04a61298a47a40f);
+$parcel$export($1345bda09ffc1bc6$exports, "Portal", () => $1345bda09ffc1bc6$export$602eac185826482c);
 $parcel$export($1345bda09ffc1bc6$exports, "Content", () => $1345bda09ffc1bc6$export$7c6e2c02157bb7d2);
 $parcel$export($1345bda09ffc1bc6$exports, "Viewport", () => $1345bda09ffc1bc6$export$d5c6c08dc2d3ca7);
 $parcel$export($1345bda09ffc1bc6$exports, "Group", () => $1345bda09ffc1bc6$export$eb2fcfdbd7ba97d4);
@@ -93,6 +97,8 @@ $parcel$export($1345bda09ffc1bc6$exports, "Separator", () => $1345bda09ffc1bc6$e
 
 
 
+
+
 
 
 
@@ -114,8 +120,9 @@ const [$1345bda09ffc1bc6$var$createSelectContext, $1345bda09ffc1bc6$export$28672
     $1345bda09ffc1bc6$var$createCollectionScope
 ]);
 const [$1345bda09ffc1bc6$var$SelectProvider, $1345bda09ffc1bc6$var$useSelectContext] = $1345bda09ffc1bc6$var$createSelectContext($1345bda09ffc1bc6$var$SELECT_NAME);
+const [$1345bda09ffc1bc6$var$SelectNativeOptionsProvider, $1345bda09ffc1bc6$var$useSelectNativeOptionsContext] = $1345bda09ffc1bc6$var$createSelectContext($1345bda09ffc1bc6$var$SELECT_NAME);
 const $1345bda09ffc1bc6$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] = $cg2C9$react.useState(null);
     const [valueNode, setValueNode] = $cg2C9$react.useState(null);
     const [valueNodeHasChildren, setValueNodeHasChildren] = $cg2C9$react.useState(false);
@@ -130,7 +137,15 @@ const $1345bda09ffc1bc6$export$ef9b1a59e592288f = (props)=>{
         defaultProp: defaultValue,
         onChange: onValueChange
     });
-    const triggerPointerDownPosRef = $cg2C9$react.useRef(null);
+    const triggerPointerDownPosRef = $cg2C9$react.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] = $cg2C9$react.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__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectProvider, {
         scope: __scopeSelect,
         trigger: trigger,
@@ -145,12 +160,33 @@ const $1345bda09ffc1bc6$export$ef9b1a59e592288f = (props)=>{
         open: open,
         onOpenChange: setOpen,
         dir: direction,
-        name: name,
-        autoComplete: autoComplete,
-        triggerPointerDownPosRef: triggerPointerDownPosRef
+        triggerPointerDownPosRef: triggerPointerDownPosRef,
+        allowPinchZoom: allowPinchZoom
     }, /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$Collection.Provider, {
         scope: __scopeSelect
-    }, children));
+    }, /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectNativeOptionsProvider, {
+        scope: props.__scopeSelect,
+        onNativeOptionAdd: $cg2C9$react.useCallback((option)=>{
+            setNativeOptionsSet((prev)=>new Set(prev).add(option)
+            );
+        }, []),
+        onNativeOptionRemove: $cg2C9$react.useCallback((option)=>{
+            setNativeOptionsSet((prev)=>{
+                const optionsSet = new Set(prev);
+                optionsSet.delete(option);
+                return optionsSet;
+            });
+        }, [])
+    }, children)), isFormControl ? /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$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($1345bda09ffc1bc6$export$ef9b1a59e592288f, {
     displayName: $1345bda09ffc1bc6$var$SELECT_NAME
@@ -263,47 +299,27 @@ const $1345bda09ffc1bc6$export$99b400cabb58c515 = /*#__PURE__*/ $cg2C9$react.for
 /*#__PURE__*/ Object.assign($1345bda09ffc1bc6$export$99b400cabb58c515, {
     displayName: $1345bda09ffc1bc6$var$ICON_NAME
 });
+/* -------------------------------------------------------------------------------------------------
+ * SelectPortal
+ * -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$PORTAL_NAME = 'SelectPortal';
+const $1345bda09ffc1bc6$export$b2af6c9944296213 = (props)=>{
+    return /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactportal.UnstablePortal, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({
+        asChild: true
+    }, props));
+};
+/*#__PURE__*/ Object.assign($1345bda09ffc1bc6$export$b2af6c9944296213, {
+    displayName: $1345bda09ffc1bc6$var$PORTAL_NAME
+});
 /* -------------------------------------------------------------------------------------------------
  * SelectContent
  * -----------------------------------------------------------------------------------------------*/ const $1345bda09ffc1bc6$var$CONTENT_NAME = 'SelectContent';
-const [$1345bda09ffc1bc6$var$SelectNativeOptionsProvider, $1345bda09ffc1bc6$var$useSelectNativeOptionsContext] = $1345bda09ffc1bc6$var$createSelectContext($1345bda09ffc1bc6$var$CONTENT_NAME);
 const $1345bda09ffc1bc6$export$c973a4b3cb86a03d = /*#__PURE__*/ $cg2C9$react.forwardRef((props, forwardedRef)=>{
     const context = $1345bda09ffc1bc6$var$useSelectContext($1345bda09ffc1bc6$var$CONTENT_NAME, props.__scopeSelect);
-    const [fragment, setFragment] = $cg2C9$react.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] = $cg2C9$react.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] = $cg2C9$react.useState(); // setting the fragment in `useLayoutEffect` as `DocumentFragment` doesn't exist on the server
     $cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>{
         setFragment(new DocumentFragment());
     }, []);
-    return /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectNativeOptionsProvider, {
-        scope: props.__scopeSelect,
-        onNativeOptionAdd: $cg2C9$react.useCallback((option)=>{
-            setNativeOptionsSet((prev)=>new Set(prev).add(option)
-            );
-        }, []),
-        onNativeOptionRemove: $cg2C9$react.useCallback((option)=>{
-            setNativeOptionsSet((prev)=>{
-                const optionsSet = new Set(prev);
-                optionsSet.delete(option);
-                return optionsSet;
-            });
-        }, [])
-    }, isFormControl ? /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$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__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentImpl, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({}, props, {
+    return /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$react.Fragment, null, context.open ? /*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentImpl, ($parcel$interopDefault($cg2C9$babelruntimehelpersextends))({}, props, {
         ref: forwardedRef
     })) : fragment ? /*#__PURE__*/ $cg2C9$reactdom.createPortal(/*#__PURE__*/ $cg2C9$react.createElement($1345bda09ffc1bc6$var$SelectContentProvider, {
         scope: props.__scopeSelect
@@ -335,6 +351,14 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
         if (content) return $cg2C9$ariahidden.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`)
+    $cg2C9$radixuireactfocusguards.useFocusGuards();
+    const [contentZIndex, setContentZIndex] = $cg2C9$react.useState();
+    $cg2C9$radixuireactuselayouteffect.useLayoutEffect(()=>{
+        if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
+    }, [
+        content
     ]);
     const focusFirst = $cg2C9$react.useCallback((candidates)=>{
         const [firstItem, ...restItems] = getItems().map((item)=>item.ref.current
@@ -582,13 +606,16 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
         isPositioned: isPositioned,
         shouldExpandOnScrollRef: shouldExpandOnScrollRef,
         searchRef: searchRef
-    }, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactportal.Portal, null, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$reactremovescroll.RemoveScroll, null, /*#__PURE__*/ $cg2C9$react.createElement("div", {
+    }, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$reactremovescroll.RemoveScroll, {
+        as: $cg2C9$radixuireactslot.Slot,
+        allowPinchZoom: context.allowPinchZoom
+    }, /*#__PURE__*/ $cg2C9$react.createElement("div", {
         ref: setContentWrapper,
         style: {
             display: 'flex',
             flexDirection: 'column',
             position: 'fixed',
-            zIndex: 0
+            zIndex: contentZIndex
         }
     }, /*#__PURE__*/ $cg2C9$react.createElement($cg2C9$radixuireactfocusscope.FocusScope, {
         asChild: true // we make sure we're not trapping once it's been closed
@@ -663,7 +690,7 @@ const $1345bda09ffc1bc6$var$SelectContentImpl = /*#__PURE__*/ $cg2C9$react.forwa
                 event.preventDefault();
             }
         })
-    })))))));
+    }))))));
 });
 /* -------------------------------------------------------------------------------------------------
  * SelectViewport
@@ -1144,6 +1171,7 @@ const $1345bda09ffc1bc6$export$be92b6f5f03c0fe9 = $1345bda09ffc1bc6$export$ef9b1
 const $1345bda09ffc1bc6$export$41fb9f06171c75f4 = $1345bda09ffc1bc6$export$3ac1e88a1c0b9f1;
 const $1345bda09ffc1bc6$export$4c8d1a57a761ef94 = $1345bda09ffc1bc6$export$e288731fd71264f0;
 const $1345bda09ffc1bc6$export$f04a61298a47a40f = $1345bda09ffc1bc6$export$99b400cabb58c515;
+const $1345bda09ffc1bc6$export$602eac185826482c = $1345bda09ffc1bc6$export$b2af6c9944296213;
 const $1345bda09ffc1bc6$export$7c6e2c02157bb7d2 = $1345bda09ffc1bc6$export$c973a4b3cb86a03d;
 const $1345bda09ffc1bc6$export$d5c6c08dc2d3ca7 = $1345bda09ffc1bc6$export$9ed6e7b40248d36d;
 const $1345bda09ffc1bc6$export$eb2fcfdbd7ba97d4 = $1345bda09ffc1bc6$export$ee25a334c55de1f4;