@e1himself/react-promise-modal 2.0.2 → 3.0.1

package/dist/ModalTransitions.d.ts

@@ -8,15 +8,15 @@ type Props = {
 };
 type RenderProps = {
     isOpen: boolean;
-    stage: `${Stage.CLOSED | Stage.OPEN | Stage.OPENING | Stage.CLOSING}`;
     onClose: () => void;
 };
 export declare enum Stage {
     UNMOUNTED = "unmounted",
+    STANDBY = "standby",// same as "closed", but before "opening"
     OPEN = "open",
     OPENING = "opening",
     CLOSING = "closing",
     CLOSED = "closed"
 }
-export declare function ModalTransitions({ isOpen: shouldOpen, onClosed, transitionDuration, render }: Props): React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export declare function ModalTransitions({ isOpen: shouldOpen, onClosed, transitionDuration, render }: Props): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
 export {};

package/dist/ModalTransitions.js

@@ -4,11 +4,10 @@ var _react = require("react");
 var React = _react;
 var _lib = require("./lib");
 var delay = _lib.delay;
-var noop = _lib.noop;
-var _useIsMounted = require("./useIsMounted");
-var useIsMounted = _useIsMounted.useIsMounted;
 var _useLatest = require("./useLatest");
 var useLatest = _useLatest.useLatest;
+var _useNextFrameEffect = require("./useNextFrameEffect");
+var useNextFrameEffect = _useNextFrameEffect.useNextFrameEffect;
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -17,10 +16,12 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 var Stage = /*#__PURE__*/exports.Stage = function (Stage) {
   Stage["UNMOUNTED"] = "unmounted";
+  Stage["STANDBY"] = "standby";
+  // same as "closed", but before "opening"
   Stage["OPEN"] = "open";
   Stage["OPENING"] = "opening";
   Stage["CLOSING"] = "closing";
-  Stage["CLOSED"] = "closed";
+  Stage["CLOSED"] = "closed"; // same as "standby", but after "closing"
   return Stage;
 }({});
 function ModalTransitions(_ref) {
@@ -28,7 +29,6 @@ function ModalTransitions(_ref) {
     onClosed = _ref.onClosed,
     transitionDuration = _ref.transitionDuration,
     render = _ref.render;
-  var isMounted = useIsMounted();
   var _React$useState = React.useState(Stage.UNMOUNTED),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     stage = _React$useState2[0],
@@ -39,72 +39,84 @@ function ModalTransitions(_ref) {
     transitionDuration: transitionDuration
   });
   var onOpen = React.useCallback(function () {
-    if (!isMounted()) {
-      return noop;
-    }
-    if (refs.current.stage === Stage.OPENING || refs.current.stage === Stage.OPEN) {
-      return noop; // Nothing to do
-    }
-    var cancel = false;
-
-    // First, render it closed
-    setStage(Stage.CLOSED);
+    setStage(function (stage) {
+      // If it's UNMOUNTED or CLOSED: switch to STANDBY to prepare for OPENING.
+      if (stage === Stage.UNMOUNTED || stage === Stage.CLOSED) {
+        setStage(Stage.STANDBY);
+      }
 
-    // Then, immediately start "opening" sequence
-    delay(0).then(function () {
-      return setStage(Stage.OPENING);
-    }).then(function () {
-      return delay(refs.current.transitionDuration);
-    }) // Wait another `transitionDelay`
-    .then(function () {
-      if (cancel || !isMounted()) {
-        return;
+      // If it's CLOSING: override and start OPENING.
+      if (stage === Stage.CLOSING) {
+        setStage(Stage.OPENING);
       }
-      // Mark it open.
-      setStage(Stage.OPEN);
+
+      // If opening is requested while it's STANDBY, OPENING or already OPEN: do nothing.
+      // The `useLayoutEffect()` hook below will do the rest.
+      return stage;
     });
-    return function () {
-      cancel = true;
-    };
   }, []);
   var onClose = React.useCallback(function () {
-    if (!isMounted()) {
-      return noop;
+    setStage(function (stage) {
+      // If it's OPENING or already OPEN: override and start CLOSING.
+      if (stage === Stage.OPENING || stage === Stage.OPEN) {
+        return Stage.CLOSING;
+      }
+
+      // If it was in STANDBY preparing for OPENING: override and mark CLOSED.
+      if (stage === Stage.STANDBY) {
+        return Stage.CLOSED;
+      }
+
+      // If opening is requested while it's UNMOUNTED, CLOSING or already CLOSED: do nothing.
+      // The `useLayoutEffect()` hook below will do the rest.
+      return stage;
+    });
+  }, []);
+  useNextFrameEffect(function () {
+    var cancel = false;
+    if (stage === Stage.STANDBY) {
+      // If it's in STANDBY (no longer unmounted, prepared for opening): start OPENING.
+      setStage(Stage.OPENING);
     }
-    if (refs.current.stage === Stage.CLOSING || refs.current.stage === Stage.CLOSED) {
-      return noop; // Nothing to do
+    if (stage === Stage.OPENING) {
+      // Allow the transitions to happen and then switch to OPEN.
+      delay(refs.current.transitionDuration).then(function () {
+        // If the OPENING sequence was not canceled with later calls, mark it OPEN.
+        if (!cancel) {
+          setStage(Stage.OPEN);
+        }
+      });
     }
-    var cancel = false;
-    setStage(Stage.CLOSING);
-    delay(refs.current.transitionDuration).then(function () {
+    if (stage === Stage.CLOSING) {
+      delay(refs.current.transitionDuration).then(function () {
+        // If the CLOSING sequence was not canceled with later calls, mark it CLOSED.
+        if (!cancel) {
+          setStage(Stage.CLOSED);
+        }
+      });
+    }
+    if (stage === Stage.CLOSED) {
       var _refs$current$onClose, _refs$current;
-      if (cancel || !isMounted()) {
-        return;
-      }
-      setStage(Stage.CLOSED);
+      // Once the CLOSED state is rendered, trigger the onClosed callback and immediately switch to UNMOUNTED
       (_refs$current$onClose = (_refs$current = refs.current).onClosed) === null || _refs$current$onClose === void 0 || _refs$current$onClose.call(_refs$current);
-    }).then(function () {
-      return delay(0);
-    }).then(function () {
-      return setStage(Stage.UNMOUNTED);
-    });
+      setStage(Stage.UNMOUNTED);
+    }
     return function () {
       cancel = true;
     };
-  }, []);
+  }, [stage]);
   React.useEffect(function () {
     if (shouldOpen) {
       return onOpen();
     } else {
       return onClose();
     }
-  }, [open]);
+  }, [shouldOpen]);
   if (stage === Stage.UNMOUNTED) {
-    // Do not render anything in "closed" stage
+    // Do not render anything in "unmounted" stage
     return null;
   }
   return render({
-    stage: stage,
     isOpen: stage === Stage.OPEN || stage === Stage.OPENING,
     onClose: onClose
   });

package/dist/useLatest.js

@@ -14,7 +14,9 @@ var React = _react;
  */
 function useLatest(value) {
   var ref = React.useRef(value);
-  ref.current = value;
+  React.useLayoutEffect(function () {
+    ref.current = value;
+  }, [value]);
   return ref;
 }
 exports.useLatest = useLatest;

package/dist/useNextFrameEffect.d.ts

@@ -0,0 +1,3 @@
+type CleanupFn = () => void;
+export declare function useNextFrameEffect(callback: () => CleanupFn, deps: unknown[]): void;
+export {};

package/dist/useNextFrameEffect.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _react = require("react");
+var useEffect = _react.useEffect;
+var useEffectEvent = _react.useEffectEvent;
+var _lib = require("./lib");
+var noop = _lib.noop;
+function useNextFrameEffect(callback, deps) {
+  var stableCallback = useEffectEvent(callback);
+  useEffect(function () {
+    var cleanup = noop;
+    var frame = requestAnimationFrame(function () {
+      cleanup = stableCallback();
+    });
+    return function () {
+      cleanup();
+      cancelAnimationFrame(frame);
+    };
+  }, deps);
+}
+exports.useNextFrameEffect = useNextFrameEffect;

package/dist/usePromiseModal.d.ts

@@ -8,7 +8,6 @@ type ConcurrencyMode = "stack" | "replace" | "ignore";
 type RenderFunction<P> = (props: P) => React.ReactElement | null | undefined;
 interface RenderProps<T> {
     show: boolean;
-    stage: "closed" | "opening" | "open" | "closing";
     onDismiss: () => void;
     onSubmit: (value: Exclude<T, undefined>) => void;
 }

package/dist/usePromiseModal.js

@@ -81,10 +81,8 @@ function usePromiseModal(render) {
       }(function (_ref2) {
         var _render;
         var isOpen = _ref2.isOpen,
-          stage = _ref2.stage,
           onClose = _ref2.onClose;
         return (_render = render(_objectSpread(_objectSpread({}, args), {}, {
-          stage: stage,
           show: isOpen,
           onDismiss: function onDismiss() {
             deferred.resolve(undefined);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@e1himself/react-promise-modal",
-  "version": "2.0.2",
+  "version": "3.0.1",
   "description": "The proper (and easy) way of doing modals in React. With Promises.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -38,8 +38,8 @@
   },
   "homepage": "https://github.com/e1himself/react-promise-modal#readme",
   "dependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0"
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",
@@ -50,13 +50,13 @@
     "babel-plugin-transform-es2015-modules-simple-commonjs": "^0.3.0",
     "np": "^12.0.1",
     "prettier": "^3.4.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",
     "typescript": "^5.7.2"
   },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   }
 }