@radix-ui/react-toast - npm Package Compare versions

Comparing version 1.1.0-rc.2 to 1.1.0-rc.3

dist/index.js

@@ -138,17 +138,29 @@ var $iTyic$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
         const viewport = ref.current;
-        if (wrapper && viewport) {
+        if (hasToasts && wrapper && viewport) {
             const handlePause = ()=>{
-                const pauseEvent = new CustomEvent($9208a85b3e79d33f$var$VIEWPORT_PAUSE);
-                viewport.dispatchEvent(pauseEvent);
-                context.isClosePausedRef.current = true;
+                if (!context.isClosePausedRef.current) {
+                    const pauseEvent = new CustomEvent($9208a85b3e79d33f$var$VIEWPORT_PAUSE);
+                    viewport.dispatchEvent(pauseEvent);
+                    context.isClosePausedRef.current = true;
+                }
             };
             const handleResume = ()=>{
-                const resumeEvent = new CustomEvent($9208a85b3e79d33f$var$VIEWPORT_RESUME);
-                viewport.dispatchEvent(resumeEvent);
-                context.isClosePausedRef.current = false;
+                if (context.isClosePausedRef.current) {
+                    const resumeEvent = new CustomEvent($9208a85b3e79d33f$var$VIEWPORT_RESUME);
+                    viewport.dispatchEvent(resumeEvent);
+                    context.isClosePausedRef.current = false;
+                }
+            };
+            const handleFocusOutResume = (event)=>{
+                const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
+                if (isFocusMovingOutside) handleResume();
+            };
+            const handlePointerLeaveResume = ()=>{
+                const isFocusInside = wrapper.contains(document.activeElement);
+                if (!isFocusInside) handleResume();
             }; // Toasts are not in the viewport React tree so we need to bind DOM events
             wrapper.addEventListener('focusin', handlePause);
-            wrapper.addEventListener('focusout', handleResume);
-            wrapper.addEventListener('pointerenter', handlePause);
-            wrapper.addEventListener('pointerleave', handleResume);
+            wrapper.addEventListener('focusout', handleFocusOutResume);
+            wrapper.addEventListener('pointermove', handlePause);
+            wrapper.addEventListener('pointerleave', handlePointerLeaveResume);
             window.addEventListener('blur', handlePause);
@@ -158,5 +170,5 @@ window.addEventListener('focus', handleResume);
                 wrapper.removeEventListener('focusin', handlePause);
-                wrapper.removeEventListener('focusout', handleResume);
-                wrapper.removeEventListener('pointerenter', handlePause);
-                wrapper.removeEventListener('pointerleave', handleResume);
+                wrapper.removeEventListener('focusout', handleFocusOutResume);
+                wrapper.removeEventListener('pointermove', handlePause);
+                wrapper.removeEventListener('pointerleave', handlePointerLeaveResume);
                 window.removeEventListener('blur', handlePause);
@@ -167,2 +179,3 @@ window.removeEventListener('focus', handleResume);
     }, [
+        hasToasts,
         context.isClosePausedRef
@@ -169,0 +182,0 @@ ]);

dist/index.module.js

@@ -116,17 +116,29 @@ import $eyrYI$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
         const viewport = ref.current;
-        if (wrapper && viewport) {
+        if (hasToasts && wrapper && viewport) {
             const handlePause = ()=>{
-                const pauseEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_PAUSE);
-                viewport.dispatchEvent(pauseEvent);
-                context.isClosePausedRef.current = true;
+                if (!context.isClosePausedRef.current) {
+                    const pauseEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_PAUSE);
+                    viewport.dispatchEvent(pauseEvent);
+                    context.isClosePausedRef.current = true;
+                }
             };
             const handleResume = ()=>{
-                const resumeEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_RESUME);
-                viewport.dispatchEvent(resumeEvent);
-                context.isClosePausedRef.current = false;
+                if (context.isClosePausedRef.current) {
+                    const resumeEvent = new CustomEvent($054eb8030ebde76e$var$VIEWPORT_RESUME);
+                    viewport.dispatchEvent(resumeEvent);
+                    context.isClosePausedRef.current = false;
+                }
+            };
+            const handleFocusOutResume = (event)=>{
+                const isFocusMovingOutside = !wrapper.contains(event.relatedTarget);
+                if (isFocusMovingOutside) handleResume();
+            };
+            const handlePointerLeaveResume = ()=>{
+                const isFocusInside = wrapper.contains(document.activeElement);
+                if (!isFocusInside) handleResume();
             }; // Toasts are not in the viewport React tree so we need to bind DOM events
             wrapper.addEventListener('focusin', handlePause);
-            wrapper.addEventListener('focusout', handleResume);
-            wrapper.addEventListener('pointerenter', handlePause);
-            wrapper.addEventListener('pointerleave', handleResume);
+            wrapper.addEventListener('focusout', handleFocusOutResume);
+            wrapper.addEventListener('pointermove', handlePause);
+            wrapper.addEventListener('pointerleave', handlePointerLeaveResume);
             window.addEventListener('blur', handlePause);
@@ -136,5 +148,5 @@ window.addEventListener('focus', handleResume);
                 wrapper.removeEventListener('focusin', handlePause);
-                wrapper.removeEventListener('focusout', handleResume);
-                wrapper.removeEventListener('pointerenter', handlePause);
-                wrapper.removeEventListener('pointerleave', handleResume);
+                wrapper.removeEventListener('focusout', handleFocusOutResume);
+                wrapper.removeEventListener('pointermove', handlePause);
+                wrapper.removeEventListener('pointerleave', handlePointerLeaveResume);
                 window.removeEventListener('blur', handlePause);
@@ -145,2 +157,3 @@ window.removeEventListener('focus', handleResume);
     }, [
+        hasToasts,
         context.isClosePausedRef
@@ -147,0 +160,0 @@ ]);

package.json

 {
   "name": "@radix-ui/react-toast",
-  "version": "1.1.0-rc.2",
+  "version": "1.1.0-rc.3",
   "license": "MIT",
@@ -24,3 +24,3 @@ "source": "src/index.ts",
     "@radix-ui/react-context": "1.0.0",
-    "@radix-ui/react-dismissable-layer": "1.0.1-rc.6",
+    "@radix-ui/react-dismissable-layer": "1.0.1-rc.7",
     "@radix-ui/react-portal": "1.0.0",
@@ -27,0 +27,0 @@ "@radix-ui/react-presence": "1.0.0",

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

237147

increased by1.58%

Lines of code

1565

increased by1.69%

Dependency changes

• + Added@radix-ui/react-dismissable-layer@1.0.1-rc.7(transitive)

• - Removed@radix-ui/react-dismissable-layer@1.0.1-rc.6(transitive)

• Updated@radix-ui/react-dismissable-layer@1.0.1-rc.7