@trackunit/react-modal 2.1.43-alpha-7bce9c1cf2a.0 → 2.1.43

package/index.cjs.js

@@ -217,6 +217,23 @@ const useModalFooterBorder = (rootRef, { footerClass = "border-t", enabled = tru
     });
 };
 
+/**
+ * Calls onCloseComplete when the modal transitions from sheet→card mode while
+ * already closed. This handles the race where the Sheet unmounts before its
+ * transitionend fires (viewport widens mid-close), which would otherwise leave
+ * pendingCloseModalRef armed and trigger the safety-timeout Sentry report.
+ */
+function useSheetToCardCleanup(mode, isOpen, onCloseComplete) {
+    const prevModeRef = react.useRef(mode);
+    react.useEffect(() => {
+        const prevMode = prevModeRef.current;
+        prevModeRef.current = mode;
+        if (prevMode === "sheet" && mode === "card" && !isOpen) {
+            onCloseComplete();
+        }
+    }, [mode, isOpen, onCloseComplete]);
+}
+
 /** Scale factor per modal depth level (5% smaller per level back) */
 const SCALE_FACTOR_PER_LEVEL = 0.05;
 /** Maximum number of stacked modals visible behind the frontmost one. */
@@ -317,6 +334,7 @@ const Modal = ({ children, container, dismiss, isOpen, mode, requestClose, role
             }
         },
     });
+    useSheetToCardCleanup(mode, isOpen, onCloseComplete);
     const stackScale = 1 - Math.min(depthFromFront, MAX_VISIBLE_STACK_BEHIND) * SCALE_FACTOR_PER_LEVEL;
     const sheetContainerStyle = react.useMemo(() => {
         const style = {

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useNamespaceTranslation, registerTranslations } from '@trackunit/i18n-library-translation';
 import { useMergeRefs, FloatingFocusManager, FloatingOverlay, useFloating, shift, autoUpdate, useDismiss, useInteractions } from '@floating-ui/react';
 import { useOverflowBorder, useSheetSnap, useWatch, Card, Portal, Sheet, Button, Heading, Text, IconButton, Icon, useContainerBreakpoints, useViewportBreakpoints, useTimeout, SHEET_TRANSITION_DURATION_MS } from '@trackunit/react-components';
-import { useRef, useCallback, useState, useReducer, useMemo, forwardRef, useId, useSyncExternalStore, useLayoutEffect, useContext, useEffect } from 'react';
+import { useRef, useEffect, useCallback, useState, useReducer, useMemo, forwardRef, useId, useSyncExternalStore, useLayoutEffect, useContext } from 'react';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { ModalDialogContext, ErrorHandlingContext } from '@trackunit/react-core-contexts-api';
 
@@ -215,6 +215,23 @@ const useModalFooterBorder = (rootRef, { footerClass = "border-t", enabled = tru
     });
 };
 
+/**
+ * Calls onCloseComplete when the modal transitions from sheet→card mode while
+ * already closed. This handles the race where the Sheet unmounts before its
+ * transitionend fires (viewport widens mid-close), which would otherwise leave
+ * pendingCloseModalRef armed and trigger the safety-timeout Sentry report.
+ */
+function useSheetToCardCleanup(mode, isOpen, onCloseComplete) {
+    const prevModeRef = useRef(mode);
+    useEffect(() => {
+        const prevMode = prevModeRef.current;
+        prevModeRef.current = mode;
+        if (prevMode === "sheet" && mode === "card" && !isOpen) {
+            onCloseComplete();
+        }
+    }, [mode, isOpen, onCloseComplete]);
+}
+
 /** Scale factor per modal depth level (5% smaller per level back) */
 const SCALE_FACTOR_PER_LEVEL = 0.05;
 /** Maximum number of stacked modals visible behind the frontmost one. */
@@ -315,6 +332,7 @@ const Modal = ({ children, container, dismiss, isOpen, mode, requestClose, role
             }
         },
     });
+    useSheetToCardCleanup(mode, isOpen, onCloseComplete);
     const stackScale = 1 - Math.min(depthFromFront, MAX_VISIBLE_STACK_BEHIND) * SCALE_FACTOR_PER_LEVEL;
     const sheetContainerStyle = useMemo(() => {
         const style = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "2.1.43-alpha-7bce9c1cf2a.0",
+  "version": "2.1.43",
   "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.39-alpha-7bce9c1cf2a.0",
-    "@trackunit/css-class-variance-utilities": "1.13.43-alpha-7bce9c1cf2a.0",
-    "@trackunit/shared-utils": "1.15.43-alpha-7bce9c1cf2a.0",
+    "@trackunit/react-components": "2.1.39",
+    "@trackunit/css-class-variance-utilities": "1.13.43",
+    "@trackunit/shared-utils": "1.15.43",
     "@floating-ui/react-dom": "2.1.2",
-    "@trackunit/react-core-contexts-api": "1.17.47-alpha-7bce9c1cf2a.0",
-    "@trackunit/i18n-library-translation": "2.0.40-alpha-7bce9c1cf2a.0"
+    "@trackunit/react-core-contexts-api": "1.17.47",
+    "@trackunit/i18n-library-translation": "2.0.40"
   },
   "peerDependencies": {
     "@tanstack/react-router": "^1.114.29",

package/src/modal/utils/useSheetToCardCleanup.d.ts

@@ -0,0 +1,8 @@
+import type { ModalMode } from "../useModal";
+/**
+ * Calls onCloseComplete when the modal transitions from sheet→card mode while
+ * already closed. This handles the race where the Sheet unmounts before its
+ * transitionend fires (viewport widens mid-close), which would otherwise leave
+ * pendingCloseModalRef armed and trigger the safety-timeout Sentry report.
+ */
+export declare function useSheetToCardCleanup(mode: ModalMode, isOpen: boolean, onCloseComplete: () => void): void;