@radix-ui/react-dismissable-layer - npm Package Compare versions

Comparing version 1.0.1-rc.10 to 1.0.1-rc.11

dist/index.js

@@ -40,5 +40,7 @@ var $g2vWm$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
 const $d715e0554b679f1f$export$177fb62ff3ec1f22 = /*#__PURE__*/ $g2vWm$react.forwardRef((props, forwardedRef)=>{
+    var _node$ownerDocument;
     const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
     const context = $g2vWm$react.useContext($d715e0554b679f1f$var$DismissableLayerContext);
     const [node1, setNode] = $g2vWm$react.useState(null);
+    const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : document;
     const [, force] = $g2vWm$react.useState({});
@@ -65,3 +67,3 @@ const composedRefs = $g2vWm$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setNode(node)
         if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
-    });
+    }, ownerDocument);
     const focusOutside = $d715e0554b679f1f$var$useFocusOutside((event)=>{
@@ -77,3 +79,3 @@ const target = event.target;
         if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
-    });
+    }, ownerDocument);
     $g2vWm$radixuireactuseescapekeydown.useEscapeKeydown((event)=>{
@@ -87,3 +89,3 @@ const isHighestLayer = index === context.layers.size - 1;
         }
-    });
+    }, ownerDocument);
     $g2vWm$react.useEffect(()=>{
@@ -93,4 +95,4 @@ if (!node1) return;
             if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
-                $d715e0554b679f1f$var$originalBodyPointerEvents = document.body.style.pointerEvents;
-                document.body.style.pointerEvents = 'none';
+                $d715e0554b679f1f$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+                ownerDocument.body.style.pointerEvents = 'none';
             }
@@ -102,6 +104,7 @@ context.layersWithOutsidePointerEventsDisabled.add(node1);
         return ()=>{
-            if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) document.body.style.pointerEvents = $d715e0554b679f1f$var$originalBodyPointerEvents;
+            if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $d715e0554b679f1f$var$originalBodyPointerEvents;
         };
     }, [
         node1,
+        ownerDocument,
         disableOutsidePointerEvents,
@@ -176,3 +179,3 @@ context
  * Returns props to pass to the node we want to check for outside events.
- */ function $d715e0554b679f1f$var$usePointerDownOutside(onPointerDownOutside) {
+ */ function $d715e0554b679f1f$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = document) {
     const handlePointerDownOutside = $g2vWm$radixuireactusecallbackref.useCallbackRef(onPointerDownOutside);
@@ -204,5 +207,5 @@ const isPointerInsideReactTreeRef = $g2vWm$react.useRef(false);
          */ if (event.pointerType === 'touch') {
-                    document.removeEventListener('click', handleClickRef.current);
+                    ownerDocument.removeEventListener('click', handleClickRef.current);
                     handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
-                    document.addEventListener('click', handleClickRef.current, {
+                    ownerDocument.addEventListener('click', handleClickRef.current, {
                         once: true
@@ -227,10 +230,11 @@ });
      */ const timerId = window.setTimeout(()=>{
-            document.addEventListener('pointerdown', handlePointerDown);
+            ownerDocument.addEventListener('pointerdown', handlePointerDown);
         }, 0);
         return ()=>{
             window.clearTimeout(timerId);
-            document.removeEventListener('pointerdown', handlePointerDown);
-            document.removeEventListener('click', handleClickRef.current);
+            ownerDocument.removeEventListener('pointerdown', handlePointerDown);
+            ownerDocument.removeEventListener('click', handleClickRef.current);
         };
     }, [
+        ownerDocument,
         handlePointerDownOutside
@@ -246,3 +250,3 @@ ]);
  * Returns props to pass to the root (node) of the subtree we want to check.
- */ function $d715e0554b679f1f$var$useFocusOutside(onFocusOutside) {
+ */ function $d715e0554b679f1f$var$useFocusOutside(onFocusOutside, ownerDocument = document) {
     const handleFocusOutside = $g2vWm$radixuireactusecallbackref.useCallbackRef(onFocusOutside);
@@ -261,6 +265,7 @@ const isFocusInsideReactTreeRef = $g2vWm$react.useRef(false);
         };
-        document.addEventListener('focusin', handleFocus);
-        return ()=>document.removeEventListener('focusin', handleFocus)
+        ownerDocument.addEventListener('focusin', handleFocus);
+        return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
         ;
     }, [
+        ownerDocument,
         handleFocusOutside
@@ -267,0 +272,0 @@ ]);

dist/index.module.js

@@ -29,5 +29,7 @@ import $kqwpH$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
 const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ $kqwpH$forwardRef((props, forwardedRef)=>{
+    var _node$ownerDocument;
     const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props;
     const context = $kqwpH$useContext($5cb92bef7577960e$var$DismissableLayerContext);
     const [node1, setNode] = $kqwpH$useState(null);
+    const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : document;
     const [, force] = $kqwpH$useState({});
@@ -54,3 +56,3 @@ const composedRefs = $kqwpH$useComposedRefs(forwardedRef, (node)=>setNode(node)
         if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
-    });
+    }, ownerDocument);
     const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{
@@ -66,3 +68,3 @@ const target = event.target;
         if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss();
-    });
+    }, ownerDocument);
     $kqwpH$useEscapeKeydown((event)=>{
@@ -76,3 +78,3 @@ const isHighestLayer = index === context.layers.size - 1;
         }
-    });
+    }, ownerDocument);
     $kqwpH$useEffect(()=>{
@@ -82,4 +84,4 @@ if (!node1) return;
             if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
-                $5cb92bef7577960e$var$originalBodyPointerEvents = document.body.style.pointerEvents;
-                document.body.style.pointerEvents = 'none';
+                $5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
+                ownerDocument.body.style.pointerEvents = 'none';
             }
@@ -91,6 +93,7 @@ context.layersWithOutsidePointerEventsDisabled.add(node1);
         return ()=>{
-            if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) document.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
+            if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
         };
     }, [
         node1,
+        ownerDocument,
         disableOutsidePointerEvents,
@@ -165,3 +168,3 @@ context
  * Returns props to pass to the node we want to check for outside events.
- */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside) {
+ */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = document) {
     const handlePointerDownOutside = $kqwpH$useCallbackRef(onPointerDownOutside);
@@ -193,5 +196,5 @@ const isPointerInsideReactTreeRef = $kqwpH$useRef(false);
          */ if (event.pointerType === 'touch') {
-                    document.removeEventListener('click', handleClickRef.current);
+                    ownerDocument.removeEventListener('click', handleClickRef.current);
                     handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
-                    document.addEventListener('click', handleClickRef.current, {
+                    ownerDocument.addEventListener('click', handleClickRef.current, {
                         once: true
@@ -216,10 +219,11 @@ });
      */ const timerId = window.setTimeout(()=>{
-            document.addEventListener('pointerdown', handlePointerDown);
+            ownerDocument.addEventListener('pointerdown', handlePointerDown);
         }, 0);
         return ()=>{
             window.clearTimeout(timerId);
-            document.removeEventListener('pointerdown', handlePointerDown);
-            document.removeEventListener('click', handleClickRef.current);
+            ownerDocument.removeEventListener('pointerdown', handlePointerDown);
+            ownerDocument.removeEventListener('click', handleClickRef.current);
         };
     }, [
+        ownerDocument,
         handlePointerDownOutside
@@ -235,3 +239,3 @@ ]);
  * Returns props to pass to the root (node) of the subtree we want to check.
- */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside) {
+ */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = document) {
     const handleFocusOutside = $kqwpH$useCallbackRef(onFocusOutside);
@@ -250,6 +254,7 @@ const isFocusInsideReactTreeRef = $kqwpH$useRef(false);
         };
-        document.addEventListener('focusin', handleFocus);
-        return ()=>document.removeEventListener('focusin', handleFocus)
+        ownerDocument.addEventListener('focusin', handleFocus);
+        return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
         ;
     }, [
+        ownerDocument,
         handleFocusOutside
@@ -256,0 +261,0 @@ ]);

package.json

 {
   "name": "@radix-ui/react-dismissable-layer",
-  "version": "1.0.1-rc.10",
+  "version": "1.0.1-rc.11",
   "license": "MIT",
@@ -22,5 +22,5 @@ "source": "src/index.ts",
     "@radix-ui/react-compose-refs": "1.0.0",
-    "@radix-ui/react-primitive": "1.0.1-rc.3",
+    "@radix-ui/react-primitive": "1.0.1-rc.4",
     "@radix-ui/react-use-callback-ref": "1.0.0",
-    "@radix-ui/react-use-escape-keydown": "1.0.0"
+    "@radix-ui/react-use-escape-keydown": "1.0.1-rc.1"
   },
@@ -27,0 +27,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84781

increased by2.66%

Lines of code

597

increased by1.7%

Dependency changes

• + Added@radix-ui/react-primitive@1.0.1-rc.4(transitive)

• + Added@radix-ui/react-use-escape-keydown@1.0.1-rc.1(transitive)

• - Removed@radix-ui/react-primitive@1.0.1-rc.3(transitive)

• - Removed@radix-ui/react-use-escape-keydown@1.0.0(transitive)

• Updated@radix-ui/react-primitive@1.0.1-rc.4

• Updated@radix-ui/react-use-escape-keydown@1.0.1-rc.1