@trackunit/react-modal 2.2.7 → 2.2.8

package/index.cjs.js

@@ -326,6 +326,12 @@ const Modal = ({ children, container, dismiss, isOpen, mode, requestClose, role
     // In card mode, there is no close animation so notify useModal immediately
     // so it can call closeModal() without delay.
     // In sheet mode, Sheet's onCloseComplete handles this instead.
+    //
+    // Must stay a passive effect (useWatch): useModal arms the close safety
+    // timeout in a layout effect, which has to flush before onCloseComplete
+    // cancels it. Moving this to a layout effect would run it first (child
+    // effects run before parent effects within a phase), leaving the timeout
+    // armed with nothing to cancel it.
     reactComponents.useWatch({
         value: isOpen,
         onChange: (current, prev) => {
@@ -1014,33 +1020,55 @@ const useModal = (props) => {
             void closeModal();
         }
     }, [stopCloseTimeout, closeModal]);
-    // Sync controlled isOpen state with iframe size controller.
-    // Defers rendering until the iframe has finished resizing to fullscreen
-    // so the modal animation plays after the resize, not during it.
-    reactComponents.useWatch({
-        value: controlledIsOpen,
-        immediate: true,
-        skip: typeof controlledIsOpen !== "boolean",
-        onChange: (current, prev) => {
-            if (current && !prev) {
-                const id = ++openIdRef.current;
-                const result = openModal();
-                if (result instanceof Promise) {
-                    setOpenDeferred(true);
-                    void result.then(() => {
-                        if (openIdRef.current === id) {
-                            setOpenDeferred(false);
-                        }
-                    });
+    // Asks the host iframe to resize to fullscreen. While the resize is running,
+    // rendering is deferred so the open animation plays after the resize, not
+    // during it.
+    const beginControlledOpen = react.useCallback(() => {
+        const id = ++openIdRef.current;
+        const result = openModal();
+        if (result instanceof Promise) {
+            setOpenDeferred(true);
+            void result.then(() => {
+                if (openIdRef.current === id) {
+                    setOpenDeferred(false);
                 }
-            }
-            else if (!current && prev) {
-                openIdRef.current++;
-                setOpenDeferred(false);
-                startPendingCloseModal();
-            }
-        },
-    });
+            });
+        }
+    }, [openModal]);
+    // Arms the pending close, so closeModal() resizes the iframe back once the
+    // close animation completes (or the safety timeout fires as a fallback).
+    const beginControlledClose = react.useCallback(() => {
+        openIdRef.current++;
+        setOpenDeferred(false);
+        startPendingCloseModal();
+    }, [startPendingCloseModal]);
+    // Reacts to changes of the controlled isOpen prop.
+    //
+    // Must be a layout effect: layout effects flush before ALL passive effects,
+    // so the close safety timeout is armed (or re-armed, after modal.close()'s
+    // synchronous arm in handleClose) before the child Modal's passive effect
+    // cancels it via onCloseComplete. Within the same phase child effects run
+    // first, so this ordering only holds while Modal calls onCloseComplete from
+    // a passive effect. With a passive effect here, the arm came after the
+    // cancellation and the timeout fired on every controlled card-mode close
+    // (sheet-mode closes usually completed later via transitionend).
+    const prevControlledIsOpenRef = react.useRef(null);
+    react.useLayoutEffect(() => {
+        if (typeof controlledIsOpen !== "boolean") {
+            return;
+        }
+        const wasOpen = prevControlledIsOpenRef.current;
+        prevControlledIsOpenRef.current = controlledIsOpen;
+        if (controlledIsOpen === wasOpen) {
+            return;
+        }
+        if (controlledIsOpen) {
+            beginControlledOpen();
+        }
+        else if (wasOpen) {
+            beginControlledClose();
+        }
+    }, [controlledIsOpen, beginControlledOpen, beginControlledClose]);
     // Cleanup: notify context when component unmounts while modal is open or mid-close.
     // Calls closeModal() directly (no animation to wait for during unmount).
     react.useEffect(() => {

package/index.esm.js

@@ -324,6 +324,12 @@ const Modal = ({ children, container, dismiss, isOpen, mode, requestClose, role
     // In card mode, there is no close animation so notify useModal immediately
     // so it can call closeModal() without delay.
     // In sheet mode, Sheet's onCloseComplete handles this instead.
+    //
+    // Must stay a passive effect (useWatch): useModal arms the close safety
+    // timeout in a layout effect, which has to flush before onCloseComplete
+    // cancels it. Moving this to a layout effect would run it first (child
+    // effects run before parent effects within a phase), leaving the timeout
+    // armed with nothing to cancel it.
     useWatch({
         value: isOpen,
         onChange: (current, prev) => {
@@ -1012,33 +1018,55 @@ const useModal = (props) => {
             void closeModal();
         }
     }, [stopCloseTimeout, closeModal]);
-    // Sync controlled isOpen state with iframe size controller.
-    // Defers rendering until the iframe has finished resizing to fullscreen
-    // so the modal animation plays after the resize, not during it.
-    useWatch({
-        value: controlledIsOpen,
-        immediate: true,
-        skip: typeof controlledIsOpen !== "boolean",
-        onChange: (current, prev) => {
-            if (current && !prev) {
-                const id = ++openIdRef.current;
-                const result = openModal();
-                if (result instanceof Promise) {
-                    setOpenDeferred(true);
-                    void result.then(() => {
-                        if (openIdRef.current === id) {
-                            setOpenDeferred(false);
-                        }
-                    });
+    // Asks the host iframe to resize to fullscreen. While the resize is running,
+    // rendering is deferred so the open animation plays after the resize, not
+    // during it.
+    const beginControlledOpen = useCallback(() => {
+        const id = ++openIdRef.current;
+        const result = openModal();
+        if (result instanceof Promise) {
+            setOpenDeferred(true);
+            void result.then(() => {
+                if (openIdRef.current === id) {
+                    setOpenDeferred(false);
                 }
-            }
-            else if (!current && prev) {
-                openIdRef.current++;
-                setOpenDeferred(false);
-                startPendingCloseModal();
-            }
-        },
-    });
+            });
+        }
+    }, [openModal]);
+    // Arms the pending close, so closeModal() resizes the iframe back once the
+    // close animation completes (or the safety timeout fires as a fallback).
+    const beginControlledClose = useCallback(() => {
+        openIdRef.current++;
+        setOpenDeferred(false);
+        startPendingCloseModal();
+    }, [startPendingCloseModal]);
+    // Reacts to changes of the controlled isOpen prop.
+    //
+    // Must be a layout effect: layout effects flush before ALL passive effects,
+    // so the close safety timeout is armed (or re-armed, after modal.close()'s
+    // synchronous arm in handleClose) before the child Modal's passive effect
+    // cancels it via onCloseComplete. Within the same phase child effects run
+    // first, so this ordering only holds while Modal calls onCloseComplete from
+    // a passive effect. With a passive effect here, the arm came after the
+    // cancellation and the timeout fired on every controlled card-mode close
+    // (sheet-mode closes usually completed later via transitionend).
+    const prevControlledIsOpenRef = useRef(null);
+    useLayoutEffect(() => {
+        if (typeof controlledIsOpen !== "boolean") {
+            return;
+        }
+        const wasOpen = prevControlledIsOpenRef.current;
+        prevControlledIsOpenRef.current = controlledIsOpen;
+        if (controlledIsOpen === wasOpen) {
+            return;
+        }
+        if (controlledIsOpen) {
+            beginControlledOpen();
+        }
+        else if (wasOpen) {
+            beginControlledClose();
+        }
+    }, [controlledIsOpen, beginControlledOpen, beginControlledClose]);
     // Cleanup: notify context when component unmounts while modal is open or mid-close.
     // Calls closeModal() directly (no animation to wait for during unmount).
     useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-modal",
-  "version": "2.2.7",
+  "version": "2.2.8",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {