@trackunit/react-modal 2.1.4 → 2.1.6

package/index.cjs.js

@@ -812,6 +812,33 @@ const useModalStack = (isOpen) => {
     }), [depthFromFront, totalStackSize, stackSizeAtOpen]);
 };
 
+/**
+ * The close safety timeout is a plain `setTimeout`, so it still fires in
+ * environments where the CSS `transitionend` it guards never does — headless
+ * Chrome report/screenshot renderers, backgrounded tabs, and anything with
+ * motion disabled. In those contexts the timeout firing is expected, not a
+ * defect, so reporting it to Sentry is pure noise (it produced 75k+ events
+ * with zero users impacted).
+ *
+ * Only capture when we're confident a real, painting browser was driving the
+ * close: the document is visible, the user hasn't asked to reduce motion, and
+ * an animation frame can actually run. `closeModal()` still runs regardless, so
+ * the modal always closes correctly.
+ */
+const getCloseTimeoutReportFrameScheduler = () => {
+    if (typeof document !== "undefined" && document.visibilityState !== "visible") {
+        return undefined;
+    }
+    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            return undefined;
+        }
+    }
+    if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
+        return undefined;
+    }
+    return callback => window.requestAnimationFrame(callback);
+};
 /**
  * A hook to handle the state and configuration of Modal components.
  *
@@ -863,7 +890,14 @@ const useModal = (props) => {
             if (pendingCloseModalRef.current) {
                 pendingCloseModalRef.current = false;
                 void closeModal();
-                errorHandling?.captureException(new Error("Modal close animation safety timeout: transitionend callback never fired"), { level: "warning" });
+                const scheduleCloseTimeoutReport = getCloseTimeoutReportFrameScheduler();
+                if (scheduleCloseTimeoutReport) {
+                    scheduleCloseTimeoutReport(() => {
+                        if (getCloseTimeoutReportFrameScheduler()) {
+                            errorHandling?.captureException(new Error("Modal close animation safety timeout: transitionend callback never fired"), { level: "warning" });
+                        }
+                    });
+                }
             }
         },
         duration: reactComponents.SHEET_TRANSITION_DURATION_MS + 100,

package/index.esm.js

@@ -810,6 +810,33 @@ const useModalStack = (isOpen) => {
     }), [depthFromFront, totalStackSize, stackSizeAtOpen]);
 };
 
+/**
+ * The close safety timeout is a plain `setTimeout`, so it still fires in
+ * environments where the CSS `transitionend` it guards never does — headless
+ * Chrome report/screenshot renderers, backgrounded tabs, and anything with
+ * motion disabled. In those contexts the timeout firing is expected, not a
+ * defect, so reporting it to Sentry is pure noise (it produced 75k+ events
+ * with zero users impacted).
+ *
+ * Only capture when we're confident a real, painting browser was driving the
+ * close: the document is visible, the user hasn't asked to reduce motion, and
+ * an animation frame can actually run. `closeModal()` still runs regardless, so
+ * the modal always closes correctly.
+ */
+const getCloseTimeoutReportFrameScheduler = () => {
+    if (typeof document !== "undefined" && document.visibilityState !== "visible") {
+        return undefined;
+    }
+    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            return undefined;
+        }
+    }
+    if (typeof window === "undefined" || typeof window.requestAnimationFrame !== "function") {
+        return undefined;
+    }
+    return callback => window.requestAnimationFrame(callback);
+};
 /**
  * A hook to handle the state and configuration of Modal components.
  *
@@ -861,7 +888,14 @@ const useModal = (props) => {
             if (pendingCloseModalRef.current) {
                 pendingCloseModalRef.current = false;
                 void closeModal();
-                errorHandling?.captureException(new Error("Modal close animation safety timeout: transitionend callback never fired"), { level: "warning" });
+                const scheduleCloseTimeoutReport = getCloseTimeoutReportFrameScheduler();
+                if (scheduleCloseTimeoutReport) {
+                    scheduleCloseTimeoutReport(() => {
+                        if (getCloseTimeoutReportFrameScheduler()) {
+                            errorHandling?.captureException(new Error("Modal close animation safety timeout: transitionend callback never fired"), { level: "warning" });
+                        }
+                    });
+                }
             }
         },
         duration: SHEET_TRANSITION_DURATION_MS + 100,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -8,12 +8,12 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.25",
-    "@trackunit/react-components": "2.1.3",
-    "@trackunit/css-class-variance-utilities": "1.13.13",
-    "@trackunit/shared-utils": "1.15.13",
+    "@trackunit/react-components": "2.1.4",
+    "@trackunit/css-class-variance-utilities": "1.13.14",
+    "@trackunit/shared-utils": "1.15.14",
     "@floating-ui/react-dom": "2.1.2",
-    "@trackunit/react-core-contexts-api": "1.17.13",
-    "@trackunit/i18n-library-translation": "2.0.5"
+    "@trackunit/react-core-contexts-api": "1.17.14",
+    "@trackunit/i18n-library-translation": "2.0.6"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.114.29",