@4i/modal-manager 1.0.117 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4i/modal-manager",
-  "version": "1.0.117",
+  "version": "1.1.1",
   "description": "",
   "main": "src/index.ts",
   "scripts": {

package/readme.md

@@ -13,37 +13,41 @@ This package simplifies the management of multiple modals, popups, notifications
 npm install @4i/modal-manager
 ```
 
-## Usage
-
-#### Instance methods:
-
-##### .call(action, props)
-
-Call a modal by its action name and pass props to it.
-
-##### .close('all')
-
-Close all modals.
-
-##### .close(-1)
+## Example
 
-Close last modals.
+<a href="https://codesandbox.io/p/github/tonichiga/modal-manager-example/main?layout=%257B%2522sidebarPanel%2522%253A%2522GIT%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clsnqfzod00063p6le9554u03%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clsnqfzod00023p6lo9e5ocrg%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clsnqfzod00043p6l5kpjziav%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clsnqfzod00053p6lleknh8sj%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clsnqfzod00023p6lo9e5ocrg%2522%253A%257B%2522id%2522%253A%2522clsnqfzod00023p6lo9e5ocrg%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clsnqfzod00053p6lleknh8sj%2522%253A%257B%2522id%2522%253A%2522clsnqfzod00053p6lleknh8sj%2522%252C%2522activeTabId%2522%253A%2522clsnqihgr00ht3p6l2nn59nq5%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clsnqihgr00ht3p6l2nn59nq5%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clsnqfzod00043p6l5kpjziav%2522%253A%257B%2522id%2522%253A%2522clsnqfzod00043p6l5kpjziav%2522%252C%2522activeTabId%2522%253A%2522clsnqojb3003j3p6m98yg0rzn%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clsnqh362007k3p6lgb90p583%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%252C%257B%2522id%2522%253A%2522clsnqojb3003j3p6m98yg0rzn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clsnqojh1001mdjig37kbat9k%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D">Codesandbox</a>
 
-##### .close(0)
-
-Close first modals.
-
-##### .close() (default)
-
-Close last modals.
-
-##### .addEventListener(event, callback)
-
-Add an event listener to the modal manager.
+## Usage
 
-##### .removeEventListener(event, callback)
+#### Instance methods:
 
-Remove an event listener from the modal manager.
+| Method                               | Description                                           |
+| ------------------------------------ | ----------------------------------------------------- |
+| call(action, props)                  | Call a modal by its action name and pass props to it. |
+|                                      |
+| close('all')                         | Close all modals.                                     |
+|                                      |
+| close(-1)                            | Close last modals.                                    |
+|                                      |
+| close(0)                             | Close first modals.                                   |
+|                                      |
+| close()                              | Close last modals. (default)                          |
+|                                      |
+| onOpenModalState(callback)           | Is there at least one window open now                 |
+|                                      |
+| addEventListener(event, callback)    | Add an event listener to the modal manager.           |
+|                                      |
+| removeEventListener(event, callback) | Remove an event listener from the modal manager.      |
+|                                      |
+
+#### ModalProvider props
+
+| Prop               | Type     | Description                                                                |
+| ------------------ | -------- | -------------------------------------------------------------------------- |
+| modalList          | Object   | An object containing modal actions as keys and modal components as values. |
+| className          | string   |                                                                            |
+| isOverflow         | boolean  | Set "overflow: hidden" on body                                             |
+| onModalStateChange | function | Callback function that is called when modal state changes.                 |
 
 #### Define Modal Actions:
 

package/src/components/modal-provider.d.ts

@@ -1,9 +1,18 @@
 import React from "react";
+import { ModalManager } from "../utils/ModalManager";
 export type ModalList = {
     [key: string]: React.ComponentType;
 };
 interface ModalProviderProps {
-    modalList: ModalList;
+    modalList: any;
+    isOverflow?: boolean;
+    className?: string;
+    backdropClassName?: string;
+    modalManager?: ModalManager;
+    onModalStateChange?: (modalState: boolean, data: TData[], names: string[]) => void;
 }
-declare const ModalProvider: ({ modalList }: ModalProviderProps) => false | React.JSX.Element[];
+type TData = {
+    [key: string]: any;
+};
+declare const ModalProvider: ({ modalList, isOverflow, className, backdropClassName, modalManager, onModalStateChange, }: ModalProviderProps) => React.JSX.Element;
 export default ModalProvider;

package/src/components/modal-provider.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -42,24 +43,38 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var ModalManager_1 = __importDefault(require("../utils/ModalManager"));
-var ModalManager_2 = __importDefault(require("../utils/ModalManager"));
+var ModalManager_1 = __importStar(require("../utils/ModalManager"));
 var ModalProvider = function (_a) {
-    var modalList = _a.modalList;
+    var modalList = _a.modalList, isOverflow = _a.isOverflow, className = _a.className, backdropClassName = _a.backdropClassName, modalManager = _a.modalManager, onModalStateChange = _a.onModalStateChange;
     var _b = (0, react_1.useState)([]), data = _b[0], setData = _b[1];
     var _c = (0, react_1.useState)([]), names = _c[0], setNames = _c[1];
     var modalRef = (0, react_1.useRef)([]);
+    var m = modalManager !== null && modalManager !== void 0 ? modalManager : ModalManager_1.default;
+    (0, react_1.useEffect)(function () {
+        if (!onModalStateChange)
+            return;
+        var modalState = data.length !== 0;
+        onModalStateChange(modalState, data, names);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [data, names]);
     (0, react_1.useEffect)(function () {
         var handleOpenModal = function (name, data) {
             setData(function (prev) { return __spreadArray(__spreadArray([], prev, true), [data], false); });
             setNames(function (prev) { return __spreadArray(__spreadArray([], prev, true), [name], false); });
+            if (isOverflow) {
+                if (typeof document === "undefined")
+                    return;
+                document.body.style.overflow = "hidden";
+            }
         };
         var handleClose = function (position) {
+            if (isOverflow) {
+                if (typeof document !== "undefined") {
+                    document.body.style.overflow = "";
+                }
+            }
             if (position === "all") {
                 setData([]);
                 setNames([]);
@@ -89,38 +104,37 @@ var ModalProvider = function (_a) {
                 return prev.filter(function (_, index) { return index !== prev.length - 1; });
             });
         };
-        ModalManager_1.default.addEventListener("change", handleOpenModal);
-        ModalManager_1.default.addEventListener("close", handleClose);
+        m.addEventListener(ModalManager_1.constants.CHANGE, handleOpenModal);
+        m.addEventListener(ModalManager_1.constants.CLOSE, handleClose);
         return function () {
-            ModalManager_1.default.removeEventListener("change", handleOpenModal);
-            ModalManager_1.default.removeEventListener("close", handleClose);
+            m.removeEventListener(ModalManager_1.constants.CHANGE, handleOpenModal);
+            m.removeEventListener(ModalManager_1.constants.CLOSE, handleClose);
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     var activeModals = names.map(function (name) {
         var Component = modalList[name] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
         return Component;
     });
-    var handleCloseModal = function (index, e) {
-        console.log(index);
-        if (modalRef.current[index] &&
-            !modalRef.current[index].contains(e.target)) {
-            ModalManager_2.default.close(index);
-        }
+    var handleCloseModal = function (index) {
+        m.close(index);
     };
     var refReducer = function (index, value) {
         modalRef.current[index] = value;
     };
-    return (data.length !== 0 &&
+    return (react_1.default.createElement(react_1.default.Fragment, null, data.length !== 0 &&
         data.map(function (item, i) {
             var Modal = activeModals[i] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
-            return (react_1.default.createElement("div", { key: item.modalId, onClick: function (e) {
-                    handleCloseModal(i, e);
-                } },
-                react_1.default.createElement("div", { className: "backdrop_modal_manager" },
+            return (react_1.default.createElement("div", { key: item.modalId, className: "modal-manager backdrop_modal_manager ".concat(backdropClassName) },
+                react_1.default.createElement("div", { onClick: function (e) {
+                        e.stopPropagation();
+                        handleCloseModal(i);
+                    }, className: "backdrop" }),
+                react_1.default.createElement("div", { className: "".concat(className, " modal_paper") },
                     react_1.default.createElement("div", { ref: function (ref) {
                             refReducer(i, ref);
                         } },
                         react_1.default.createElement(Modal, __assign({}, item.data))))));
-        }));
+        })));
 };
 exports.default = ModalProvider;

package/src/components/modal-provider.tsx

@@ -1,27 +1,63 @@
+"use client";
+
 import React, { useEffect, useRef, useState } from "react";
-import manager from "../utils/ModalManager";
-import modal from "../utils/ModalManager";
+import modal, { constants, ModalManager } from "../utils/ModalManager";
 
 export type ModalList = { [key: string]: React.ComponentType };
 
 interface ModalProviderProps {
-  modalList: ModalList;
+  modalList: any;
+  isOverflow?: boolean;
+  className?: string;
+  backdropClassName?: string;
+  modalManager?: ModalManager;
+  onModalStateChange?: (
+    modalState: boolean,
+    data: TData[],
+    names: string[]
+  ) => void;
 }
 
 type TData = { [key: string]: any };
 
-const ModalProvider = ({ modalList }: ModalProviderProps) => {
+const ModalProvider = ({
+  modalList,
+  isOverflow,
+  className,
+  backdropClassName,
+  modalManager,
+  onModalStateChange,
+}: ModalProviderProps) => {
   const [data, setData] = useState<TData[]>([]);
   const [names, setNames] = useState<string[]>([]);
   const modalRef = useRef<any[]>([]);
+  const m = modalManager ?? modal;
+
+  useEffect(() => {
+    if (!onModalStateChange) return;
+    const modalState = data.length !== 0;
+    onModalStateChange(modalState, data, names);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, names]);
 
   useEffect(() => {
     const handleOpenModal = (name: string, data: TData) => {
       setData((prev: TData[]) => [...prev, data]);
       setNames((prev: string[]) => [...prev, name]);
+
+      if (isOverflow) {
+        if (typeof document === "undefined") return;
+        document.body.style.overflow = "hidden";
+      }
     };
 
     const handleClose = (position: number | string) => {
+      if (isOverflow) {
+        if (typeof document !== "undefined") {
+          document.body.style.overflow = "";
+        }
+      }
+
       if (position === "all") {
         setData([]);
         setNames([]);
@@ -55,12 +91,13 @@ const ModalProvider = ({ modalList }: ModalProviderProps) => {
       );
     };
 
-    manager.addEventListener("change", handleOpenModal);
-    manager.addEventListener("close", handleClose);
+    m.addEventListener(constants.CHANGE, handleOpenModal);
+    m.addEventListener(constants.CLOSE, handleClose);
     return () => {
-      manager.removeEventListener("change", handleOpenModal);
-      manager.removeEventListener("close", handleClose);
+      m.removeEventListener(constants.CHANGE, handleOpenModal);
+      m.removeEventListener(constants.CLOSE, handleClose);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const activeModals = names.map((name: string) => {
@@ -68,14 +105,8 @@ const ModalProvider = ({ modalList }: ModalProviderProps) => {
     return Component;
   });
 
-  const handleCloseModal = (index: number, e: any) => {
-    console.log(index);
-    if (
-      modalRef.current[index] &&
-      !modalRef.current[index].contains(e.target)
-    ) {
-      modal.close(index);
-    }
+  const handleCloseModal = (index: number) => {
+    m.close(index);
   };
 
   const refReducer = (index: number, value: any) => {
@@ -83,29 +114,37 @@ const ModalProvider = ({ modalList }: ModalProviderProps) => {
   };
 
   return (
-    data.length !== 0 &&
-    data.map((item, i) => {
-      const Modal = activeModals[i] || (() => <></>);
-
-      return (
-        <div
-          key={item.modalId}
-          onClick={(e) => {
-            handleCloseModal(i, e);
-          }}
-        >
-          <div className="backdrop_modal_manager">
+    <>
+      {data.length !== 0 &&
+        data.map((item, i) => {
+          const Modal = activeModals[i] || (() => <></>);
+
+          return (
             <div
-              ref={(ref) => {
-                refReducer(i, ref);
-              }}
+              key={item.modalId}
+              className={`modal-manager backdrop_modal_manager ${backdropClassName}`}
             >
-              <Modal {...item.data} />
+              <div
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleCloseModal(i);
+                }}
+                className="backdrop"
+              />
+              {/* // h-full modal not close */}
+              <div className={`${className} modal_paper`}>
+                <div
+                  ref={(ref) => {
+                    refReducer(i, ref);
+                  }}
+                >
+                  <Modal {...item.data} />
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
-      );
-    })
+          );
+        })}
+    </>
   );
 };
 

package/src/styles.css

@@ -16,8 +16,7 @@
   }
 }
 
-.backdrop_modal_manager {
-  position: absolute;
+.modal-manager.backdrop_modal_manager {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -27,18 +26,23 @@
   bottom: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
   position: fixed;
   z-index: 1000;
+}
+
+.modal-manager .backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
   opacity: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   animation: bg_opacity 150ms ease-in-out forwards;
 }
 
-.backdrop_modal_manager > div {
+.modal-manager .modal_paper {
+  position: relative;
+  z-index: 1001;
   animation: bg_opacity_scale 150ms ease-in-out forwards;
 }
-
-.main_container_modal_manager {
-  opacity: 0;
-  animation: bg_opacity 250ms forwards;
-}

package/src/utils/ModalManager.d.ts

@@ -1,11 +1,36 @@
 import Manager from "./Manager";
-declare class ModalManager extends Manager {
+export declare const constants: {
+    CHANGE: string;
+    CLOSE: string;
+};
+interface QueueState {
+    queue: string[];
+    closedModalName?: string | undefined;
+    lastOpenedModal?: string | undefined;
+}
+interface ModalState {
+    isHaveOpenModals: boolean;
+    queue: string[];
+    closedModalName?: string | undefined;
+    lastOpenedModal?: string | undefined;
+}
+export declare class ModalManager extends Manager {
+    queue: string[];
+    _openModalStateCallback: null | ((props: ModalState) => void);
     constructor();
-    create(name: string, data: {
-        [key: string]: any;
+    create<T>(name: string, payload: {
+        modalId: number;
+        data?: T;
     }): void;
-    call(name: string, data?: any): void;
+    call<T>(name: string, data?: T): void;
     close<T>(position?: T): void;
+    getQueueState({ queue, closedModalName, lastOpenedModal }: QueueState): {
+        isHaveOpenModals: boolean;
+        queue: string[];
+        lastOpenedModal: string | undefined;
+        closedModalName: string | undefined;
+    };
+    onOpenModalState(callback: (state: ModalState) => void): void;
 }
 declare const modal: ModalManager;
 export default modal;

package/src/utils/ModalManager.js

@@ -18,32 +18,65 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalManager = exports.constants = void 0;
 var Manager_1 = __importDefault(require("./Manager"));
 function uniqueID() {
     return Math.floor(Math.random() * Date.now());
 }
-var constants = {
+exports.constants = {
     CHANGE: "change",
     CLOSE: "close",
 };
 var ModalManager = /** @class */ (function (_super) {
     __extends(ModalManager, _super);
     function ModalManager() {
-        return _super.call(this) || this;
+        var _this = _super.call(this) || this;
+        _this.queue = [];
+        _this.create = _this.create.bind(_this);
+        _this.call = _this.call.bind(_this);
+        _this.close = _this.close.bind(_this);
+        _this._openModalStateCallback = null;
+        return _this;
     }
-    ModalManager.prototype.create = function (name, data) {
+    ModalManager.prototype.create = function (name, payload) {
         this.name = name;
-        this.data = data;
-        this.emitter.emit(constants.CHANGE, this.name, this.data);
+        this.data = payload;
+        this.emitter.emit(exports.constants.CHANGE, this.name, this.data);
     };
     ModalManager.prototype.call = function (name, data) {
-        if (data === void 0) { data = {}; }
+        var _a;
         this.create(name, { modalId: uniqueID(), data: data });
+        var lastOpenedModal = name;
+        this.queue.push(name);
+        (_a = this._openModalStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, this.getQueueState({
+            queue: this.queue,
+            lastOpenedModal: lastOpenedModal,
+        }));
     };
     ModalManager.prototype.close = function (position) {
-        this.emitter.emit(constants.CLOSE, position);
+        var _a, _b;
+        this.emitter.emit(exports.constants.CLOSE, position !== null && position !== void 0 ? position : ((_a = this.queue) === null || _a === void 0 ? void 0 : _a.length) - 1);
+        var closedModalName = this.queue[this.queue.length - 1];
+        this.queue.pop();
+        (_b = this._openModalStateCallback) === null || _b === void 0 ? void 0 : _b.call(this, this.getQueueState({
+            queue: this.queue,
+            closedModalName: closedModalName,
+        }));
+    };
+    ModalManager.prototype.getQueueState = function (_a) {
+        var queue = _a.queue, closedModalName = _a.closedModalName, lastOpenedModal = _a.lastOpenedModal;
+        return {
+            isHaveOpenModals: queue.length > 0,
+            queue: queue,
+            lastOpenedModal: lastOpenedModal,
+            closedModalName: closedModalName,
+        };
+    };
+    ModalManager.prototype.onOpenModalState = function (callback) {
+        this._openModalStateCallback = callback;
     };
     return ModalManager;
 }(Manager_1.default));
+exports.ModalManager = ModalManager;
 var modal = new ModalManager();
 exports.default = modal;

package/src/utils/ModalManager.ts

@@ -4,28 +4,79 @@ function uniqueID() {
   return Math.floor(Math.random() * Date.now());
 }
 
-const constants = {
+export const constants = {
   CHANGE: "change",
   CLOSE: "close",
 };
 
-class ModalManager extends Manager {
+interface QueueState {
+  queue: string[];
+  closedModalName?: string | undefined;
+  lastOpenedModal?: string | undefined;
+}
+
+interface ModalState {
+  isHaveOpenModals: boolean;
+  queue: string[];
+  closedModalName?: string | undefined;
+  lastOpenedModal?: string | undefined;
+}
+
+export class ModalManager extends Manager {
+  queue: string[] = [];
+  _openModalStateCallback: null | ((props: ModalState) => void);
+
   constructor() {
     super();
+    this.create = this.create.bind(this);
+    this.call = this.call.bind(this);
+    this.close = this.close.bind(this);
+    this._openModalStateCallback = null;
   }
 
-  create(name: string, data: { [key: string]: any }) {
+  create<T>(name: string, payload: { modalId: number; data?: T }) {
     this.name = name;
-    this.data = data;
+    this.data = payload;
     this.emitter.emit(constants.CHANGE, this.name, this.data);
   }
 
-  call(name: string, data: any = {}) {
-    this.create(name, { modalId: uniqueID(), data });
+  call<T>(name: string, data?: T) {
+    this.create<T>(name, { modalId: uniqueID(), data });
+    const lastOpenedModal = name;
+    this.queue.push(name);
+
+    this._openModalStateCallback?.(
+      this.getQueueState({
+        queue: this.queue,
+        lastOpenedModal,
+      })
+    );
   }
 
   close<T>(position?: T) {
-    this.emitter.emit(constants.CLOSE, position);
+    this.emitter.emit(constants.CLOSE, position ?? this.queue?.length - 1);
+    const closedModalName = this.queue[this.queue.length - 1];
+    this.queue.pop();
+
+    this._openModalStateCallback?.(
+      this.getQueueState({
+        queue: this.queue,
+        closedModalName,
+      })
+    );
+  }
+
+  getQueueState({ queue, closedModalName, lastOpenedModal }: QueueState) {
+    return {
+      isHaveOpenModals: queue.length > 0,
+      queue,
+      lastOpenedModal: lastOpenedModal,
+      closedModalName,
+    };
+  }
+
+  onOpenModalState(callback: (state: ModalState) => void) {
+    this._openModalStateCallback = callback;
   }
 }
 

package/tsconfig.json

@@ -2,9 +2,9 @@
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",
+    "esModuleInterop": true,
     "jsx": "react",
     "strict": true,
-    "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "moduleResolution": "node",