@lerx/promise-modal 0.8.3 → 0.8.5

package/dist/index.mjs

@@ -1,21 +1,23 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, forwardRef, memo, useRef, useState, useLayoutEffect, useCallback, Fragment, useEffect, useImperativeHandle } from 'react';
 import { convertMsFromDuration } from '@winglet/common-utils/convert';
-import { useConstant, useSnapshot, useReference, useOnMountLayout, useHandle, useVersion, useOnMount } from '@winglet/react-utils/hook';
+import { useConstant, useSnapshot, useReference, useOnMountLayout, useHandle, useVersion, useOnMount, useOnUnmount } from '@winglet/react-utils/hook';
 import { polynomialHash } from '@winglet/common-utils/hash';
 import { getRandomString, counterFactory } from '@winglet/common-utils/lib';
 import { styleManagerFactory, destroyScope } from '@winglet/style-utils/style-manager';
 import { compressCss, cxLite } from '@winglet/style-utils/util';
+import { isPlainObject, isString, isFunction } from '@winglet/common-utils/filter';
 import { createPortal } from 'react-dom';
 import { map } from '@winglet/common-utils/array';
 import { withErrorBoundary } from '@winglet/react-utils/hoc';
-import { isString, isFunction } from '@winglet/common-utils/filter';
 import { renderComponent } from '@winglet/react-utils/render';
 
 class ModalManager {
     static #anchor = null;
     static #scope = `promise-modal-${getRandomString(36)}`;
     static #hash = polynomialHash(ModalManager.#scope);
+    static #styleManager = styleManagerFactory(ModalManager.#scope);
+    static #styleSheetDefinition = new Map();
     static anchor(options) {
         if (ModalManager.#anchor !== null)
             return ModalManager.#anchor;
@@ -34,13 +36,20 @@ class ModalManager {
     static get prerender() {
         return ModalManager.#prerenderList;
     }
-    static #openHandler = (modal) => ModalManager.#prerenderList.push(modal);
+    static #openHandler = ((modal) => {
+        ModalManager.#prerenderList.push(modal);
+    });
     static set openHandler(handler) {
         ModalManager.#openHandler = handler;
         ModalManager.#prerenderList = [];
     }
-    static #styleManager = styleManagerFactory(ModalManager.#scope);
-    static #styleSheetDefinition = new Map();
+    static #refreshHandler;
+    static set refreshHandler(handler) {
+        ModalManager.#refreshHandler = handler;
+    }
+    static refresh() {
+        ModalManager.#refreshHandler?.();
+    }
     static defineStyleSheet(styleId, css) {
         ModalManager.#styleSheetDefinition.set(styleId, compressCss(css));
     }
@@ -54,95 +63,113 @@ class ModalManager {
     static reset() {
         ModalManager.#anchor = null;
         ModalManager.#prerenderList = [];
-        ModalManager.#openHandler = (modal) => ModalManager.#prerenderList.push(modal);
+        ModalManager.#openHandler = ((modal) => {
+            ModalManager.#prerenderList.push(modal);
+        });
+        ModalManager.#refreshHandler = undefined;
         destroyScope(ModalManager.#scope);
     }
     static open(modal) {
-        ModalManager.#openHandler(modal);
+        return ModalManager.#openHandler(modal);
     }
 }
 
-const alert = ({ group, subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
-    return new Promise((resolve, reject) => {
+const closeModal = (modalNode, refresh = true) => {
+    if (modalNode.visible === false)
+        return;
+    modalNode.onClose();
+    modalNode.onHide();
+    if (refresh)
+        ModalManager.refresh();
+    if (modalNode.manualDestroy || modalNode.alive === false)
+        return;
+    return setTimeout(() => modalNode.onDestroy(), modalNode.duration);
+};
+
+const subscribeAbortSignal = (modalNode, signal) => {
+    if (signal === undefined)
+        return null;
+    const handleAbort = () => closeModal(modalNode);
+    signal.addEventListener('abort', handleAbort, { once: true });
+    return () => signal.removeEventListener('abort', handleAbort);
+};
+
+const alertHandler = (args) => {
+    const modalNode = ModalManager.open({
+        ...args,
+        type: 'alert',
+    });
+    const unsubscribe = subscribeAbortSignal(modalNode, args.signal);
+    const promiseHandler = new Promise((resolve, reject) => {
         try {
-            ModalManager.open({
-                type: 'alert',
-                group,
-                subtype,
-                resolve: () => resolve(),
-                title,
-                subtitle,
-                content,
-                background,
-                footer,
-                dimmed,
-                manualDestroy,
-                closeOnBackdropClick,
-                ForegroundComponent,
-                BackgroundComponent,
-            });
+            modalNode.handleResolve = () => {
+                unsubscribe?.();
+                resolve();
+            };
+            if (args.signal?.aborted)
+                closeModal(modalNode);
         }
         catch (error) {
+            closeModal(modalNode);
+            unsubscribe?.();
             reject(error);
         }
     });
+    return { modalNode, promiseHandler };
 };
 
-const confirm = ({ group, subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
-    return new Promise((resolve, reject) => {
+const confirmHandler = (args) => {
+    const modalNode = ModalManager.open({
+        ...args,
+        type: 'confirm',
+    });
+    const unsubscribe = subscribeAbortSignal(modalNode, args.signal);
+    const promiseHandler = new Promise((resolve, reject) => {
         try {
-            ModalManager.open({
-                type: 'confirm',
-                group,
-                subtype,
-                resolve: (result) => resolve(result ?? false),
-                title,
-                subtitle,
-                content,
-                background,
-                footer,
-                dimmed,
-                manualDestroy,
-                closeOnBackdropClick,
-                ForegroundComponent,
-                BackgroundComponent,
-            });
+            modalNode.handleResolve = (result) => {
+                unsubscribe?.();
+                resolve(result ?? false);
+            };
+            if (args.signal?.aborted)
+                closeModal(modalNode);
         }
         catch (error) {
+            closeModal(modalNode);
+            unsubscribe?.();
             reject(error);
         }
     });
+    return { modalNode, promiseHandler };
 };
 
-const prompt = ({ group, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
-    return new Promise((resolve, reject) => {
+const promptHandler = (args) => {
+    const modalNode = ModalManager.open({
+        ...args,
+        type: 'prompt',
+    });
+    const unsubscribe = subscribeAbortSignal(modalNode, args.signal);
+    const promiseHandler = new Promise((resolve, reject) => {
         try {
-            ModalManager.open({
-                type: 'prompt',
-                group,
-                resolve: (result) => resolve(result),
-                title,
-                subtitle,
-                content,
-                Input,
-                defaultValue,
-                disabled,
-                returnOnCancel,
-                background,
-                footer,
-                dimmed,
-                manualDestroy,
-                closeOnBackdropClick,
-                ForegroundComponent,
-                BackgroundComponent,
-            });
+            modalNode.handleResolve = (result) => {
+                unsubscribe?.();
+                resolve(result);
+            };
+            if (args.signal?.aborted)
+                closeModal(modalNode);
         }
         catch (error) {
+            closeModal(modalNode);
+            unsubscribe?.();
             reject(error);
         }
     });
+    return { modalNode, promiseHandler };
 };
 
+const alert = (args) => alertHandler(args).promiseHandler;
+const confirm = (args) => confirmHandler(args).promiseHandler;
+const prompt = (args) => promptHandler(args).promiseHandler;
+
 class AbstractNode {
     id;
     group;
@@ -150,9 +177,10 @@ class AbstractNode {
     title;
     subtitle;
     background;
+    dimmed;
+    duration;
     manualDestroy;
     closeOnBackdropClick;
-    dimmed;
     ForegroundComponent;
     BackgroundComponent;
     #alive;
@@ -163,9 +191,12 @@ class AbstractNode {
     get visible() {
         return this.#visible;
     }
-    #resolve;
+    #handleResolve;
+    set handleResolve(handleResolve) {
+        this.#handleResolve = handleResolve;
+    }
     #listeners = new Set();
-    constructor({ id, initiator, group, title, subtitle, background, dimmed = true, manualDestroy = false, closeOnBackdropClick = true, resolve, ForegroundComponent, BackgroundComponent, }) {
+    constructor({ id, initiator, group, title, subtitle, background, dimmed = true, duration = 0, manualDestroy = false, closeOnBackdropClick = true, handleResolve, ForegroundComponent, BackgroundComponent, }) {
         this.id = id;
         this.group = group;
         this.initiator = initiator;
@@ -173,13 +204,17 @@ class AbstractNode {
         this.subtitle = subtitle;
         this.background = background;
         this.dimmed = dimmed;
+        this.duration = duration;
         this.manualDestroy = manualDestroy;
         this.closeOnBackdropClick = closeOnBackdropClick;
         this.ForegroundComponent = ForegroundComponent;
         this.BackgroundComponent = BackgroundComponent;
         this.#alive = true;
         this.#visible = true;
-        this.#resolve = resolve;
+        this.#handleResolve = handleResolve;
+    }
+    onResolve(result) {
+        this.#handleResolve?.(result);
     }
     subscribe(listener) {
         this.#listeners.add(listener);
@@ -191,9 +226,6 @@ class AbstractNode {
         for (const listener of this.#listeners)
             listener();
     }
-    resolve(result) {
-        this.#resolve(result);
-    }
     onDestroy() {
         const needPublish = this.#alive === true;
         this.#alive = false;
@@ -219,7 +251,7 @@ class AlertNode extends AbstractNode {
     subtype;
     content;
     footer;
-    constructor({ id, group, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+    constructor({ id, group, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
             group,
@@ -228,9 +260,10 @@ class AlertNode extends AbstractNode {
             subtitle,
             background,
             dimmed,
+            duration,
             manualDestroy,
             closeOnBackdropClick,
-            resolve,
+            handleResolve,
             ForegroundComponent,
             BackgroundComponent,
         });
@@ -240,10 +273,10 @@ class AlertNode extends AbstractNode {
         this.footer = footer;
     }
     onClose() {
-        this.resolve(null);
+        this.onResolve(null);
     }
     onConfirm() {
-        this.resolve(null);
+        this.onResolve(null);
     }
 }
 
@@ -252,7 +285,7 @@ class ConfirmNode extends AbstractNode {
     subtype;
     content;
     footer;
-    constructor({ id, group, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+    constructor({ id, group, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
             group,
@@ -261,9 +294,10 @@ class ConfirmNode extends AbstractNode {
             subtitle,
             background,
             dimmed,
+            duration,
             manualDestroy,
             closeOnBackdropClick,
-            resolve,
+            handleResolve,
             ForegroundComponent,
             BackgroundComponent,
         });
@@ -273,10 +307,10 @@ class ConfirmNode extends AbstractNode {
         this.footer = footer;
     }
     onClose() {
-        this.resolve(false);
+        this.onResolve(false);
     }
     onConfirm() {
-        this.resolve(true);
+        this.onResolve(true);
     }
 }
 
@@ -289,7 +323,7 @@ class PromptNode extends AbstractNode {
     returnOnCancel;
     footer;
     #value;
-    constructor({ id, group, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+    constructor({ id, group, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
             group,
@@ -298,9 +332,10 @@ class PromptNode extends AbstractNode {
             subtitle,
             background,
             dimmed,
+            duration,
             manualDestroy,
             closeOnBackdropClick,
-            resolve,
+            handleResolve,
             ForegroundComponent,
             BackgroundComponent,
         });
@@ -317,13 +352,13 @@ class PromptNode extends AbstractNode {
         this.#value = value;
     }
     onConfirm() {
-        this.resolve(this.#value ?? null);
+        this.onResolve(this.#value ?? null);
     }
     onClose() {
         if (this.returnOnCancel)
-            this.resolve(this.#value ?? null);
+            this.onResolve(this.#value ?? null);
         else
-            this.resolve(null);
+            this.onResolve(null);
     }
 }
 
@@ -362,8 +397,8 @@ const FallbackFooter = ({ confirmLabel, hideConfirm = false, cancelLabel, hideCa
 const ModalManagerContext = createContext({});
 
 const useModalManagerContext = () => useContext(ModalManagerContext);
-const useModal = (id) => {
-    const { getModal } = useModalManagerContext();
+const useModalManager = (id) => {
+    const { getModal } = useContext(ModalManagerContext);
     return useMemo(() => getModal(id), [id, getModal]);
 };
 
@@ -427,20 +462,28 @@ const ConfigurationContextProvider = memo(({ ForegroundComponent, BackgroundComp
         FooterComponent: memo(FooterComponent || FallbackFooter),
     });
     const options = useSnapshot(inputOptions);
-    const value = useMemo(() => ({
-        ForegroundComponent: constant.ForegroundComponent,
-        BackgroundComponent: constant.BackgroundComponent,
-        TitleComponent: constant.TitleComponent,
-        SubtitleComponent: constant.SubtitleComponent,
-        ContentComponent: constant.ContentComponent,
-        FooterComponent: constant.FooterComponent,
-        options: {
-            ...DEFAULT_OPTIONS,
-            ...options,
-        },
-    }), [constant, options]);
+    const value = useMemo(() => {
+        const { backdrop: defaultBackdrop, ...defaultOptions } = DEFAULT_OPTIONS;
+        const backdrop = getBackdropStyle(options?.backdrop, defaultBackdrop);
+        return {
+            ForegroundComponent: constant.ForegroundComponent,
+            BackgroundComponent: constant.BackgroundComponent,
+            TitleComponent: constant.TitleComponent,
+            SubtitleComponent: constant.SubtitleComponent,
+            ContentComponent: constant.ContentComponent,
+            FooterComponent: constant.FooterComponent,
+            options: { ...defaultOptions, ...options, backdrop },
+        };
+    }, [constant, options]);
     return (jsx(ConfigurationContext.Provider, { value: value, children: children }));
 });
+const getBackdropStyle = (backdrop, defaultBackdrop) => {
+    if (isPlainObject(backdrop))
+        return backdrop;
+    if (isString(backdrop))
+        return { backgroundColor: backdrop };
+    return defaultBackdrop;
+};
 
 const useConfigurationContext = () => useContext(ConfigurationContext);
 const useConfigurationOptions = () => {
@@ -472,32 +515,26 @@ const ModalManagerContextProvider = memo(({ usePathname, children, }) => {
         const { manualDestroy, closeOnBackdropClick } = options;
         for (const data of ModalManager.prerender) {
             const modal = nodeFactory({
+                duration,
+                manualDestroy,
+                closeOnBackdropClick,
                 ...data,
                 id: modalIdSequence.current++,
                 initiator: initiator.current,
-                manualDestroy: data.manualDestroy !== undefined
-                    ? data.manualDestroy
-                    : manualDestroy,
-                closeOnBackdropClick: data.closeOnBackdropClick !== undefined
-                    ? data.closeOnBackdropClick
-                    : closeOnBackdropClick,
             });
             modalDictionary.current.set(modal.id, modal);
             setModalIds((ids) => [...ids, modal.id]);
         }
         ModalManager.openHandler = (data) => {
-            const modal = nodeFactory({
+            const modalNode = nodeFactory({
+                duration,
+                manualDestroy,
+                closeOnBackdropClick,
                 ...data,
                 id: modalIdSequence.current++,
                 initiator: initiator.current,
-                manualDestroy: data.manualDestroy !== undefined
-                    ? data.manualDestroy
-                    : manualDestroy,
-                closeOnBackdropClick: data.closeOnBackdropClick !== undefined
-                    ? data.closeOnBackdropClick
-                    : closeOnBackdropClick,
             });
-            modalDictionary.current.set(modal.id, modal);
+            modalDictionary.current.set(modalNode.id, modalNode);
             setModalIds((ids) => {
                 const aliveIds = [];
                 for (let i = 0, l = ids.length; i < l; i++) {
@@ -508,8 +545,9 @@ const ModalManagerContextProvider = memo(({ usePathname, children, }) => {
                     else
                         aliveIds.push(id);
                 }
-                return [...aliveIds, modal.id];
+                return [...aliveIds, modalNode.id];
             });
+            return modalNode;
         };
     });
     useLayoutEffect(() => {
@@ -524,78 +562,62 @@ const ModalManagerContextProvider = memo(({ usePathname, children, }) => {
         }
         initiator.current = pathname;
     }, [pathname]);
-    const getModalNode = useCallback((modalId) => {
-        return modalDictionary.current.get(modalId);
-    }, []);
-    const onDestroy = useCallback((modalId) => {
+    const getModalNodeRef = useRef((modalId) => modalDictionary.current.get(modalId));
+    const onDestroyRef = useRef((modalId) => {
         const modal = modalDictionary.current.get(modalId);
         if (!modal)
             return;
         modal.onDestroy();
-        updaterRef.current?.();
-    }, []);
-    const updaterRef = useRef(undefined);
-    const hideModal = useCallback((modalId) => {
+        ModalManager.refresh();
+    });
+    const hideModalRef = useRef((modalId) => {
         const modal = modalDictionary.current.get(modalId);
         if (!modal)
             return;
         modal.onHide();
-        updaterRef.current?.();
-        if (!modal.manualDestroy)
-            setTimeout(() => {
-                modal.onDestroy();
-            }, duration);
-    }, [duration]);
-    const onChange = useCallback((modalId, value) => {
+        ModalManager.refresh();
+        if (modal.manualDestroy === false)
+            setTimeout(() => modal.onDestroy(), modal.duration);
+    });
+    const onChangeRef = useRef((modalId, value) => {
         const modal = modalDictionary.current.get(modalId);
         if (!modal)
             return;
         if (modal.type === 'prompt')
             modal.onChange(value);
-    }, []);
-    const onConfirm = useCallback((modalId) => {
+    });
+    const onConfirmRef = useRef((modalId) => {
         const modal = modalDictionary.current.get(modalId);
         if (!modal)
             return;
         modal.onConfirm();
-        hideModal(modalId);
-    }, [hideModal]);
-    const onClose = useCallback((modalId) => {
+        hideModalRef.current(modalId);
+    });
+    const onCloseRef = useRef((modalId) => {
         const modal = modalDictionary.current.get(modalId);
         if (!modal)
             return;
         modal.onClose();
-        hideModal(modalId);
-    }, [hideModal]);
-    const getModal = useCallback((modalId) => ({
-        modal: getModalNode(modalId),
-        onConfirm: () => onConfirm(modalId),
-        onClose: () => onClose(modalId),
-        onChange: (value) => onChange(modalId, value),
-        onDestroy: () => onDestroy(modalId),
-    }), [getModalNode, onConfirm, onClose, onChange, onDestroy]);
+        hideModalRef.current(modalId);
+    });
+    const getModalRef = useRef((modalId) => ({
+        modal: getModalNodeRef.current(modalId),
+        onConfirm: () => onConfirmRef.current(modalId),
+        onClose: () => onCloseRef.current(modalId),
+        onChange: (value) => onChangeRef.current(modalId, value),
+        onDestroy: () => onDestroyRef.current(modalId),
+    }));
     const value = useMemo(() => {
         return {
             modalIds,
-            getModalNode,
-            onChange,
-            onConfirm,
-            onClose,
-            onDestroy,
-            getModal,
-            setUpdater: (updater) => {
-                updaterRef.current = updater;
-            },
+            getModalNode: getModalNodeRef.current,
+            onChange: onChangeRef.current,
+            onConfirm: onConfirmRef.current,
+            onClose: onCloseRef.current,
+            onDestroy: onDestroyRef.current,
+            getModal: getModalRef.current,
         };
-    }, [
-        modalIds,
-        getModal,
-        getModalNode,
-        onChange,
-        onConfirm,
-        onClose,
-        onDestroy,
-    ]);
+    }, [modalIds]);
     return (jsx(ModalManagerContext.Provider, { value: value, children: children }));
 });
 
@@ -664,7 +686,7 @@ ModalManager.defineStyleSheet('background', style$3);
 const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     const { BackgroundComponent } = useConfigurationContext();
     const { context: userDefinedContext } = useUserDefinedContext();
-    const { modal, onClose, onChange, onConfirm, onDestroy } = useModal(modalId);
+    const { modal, onClose, onChange, onConfirm, onDestroy } = useModalManager(modalId);
     const handleClose = useCallback((event) => {
         if (modal && modal.closeOnBackdropClick && modal.visible)
             onClose();
@@ -780,7 +802,7 @@ ModalManager.defineStyleSheet('foreground', style$2);
 const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
     const { ForegroundComponent } = useConfigurationContext();
     const { context: userDefinedContext } = useUserDefinedContext();
-    const { modal, onChange, onConfirm, onClose, onDestroy } = useModal(modalId);
+    const { modal, onChange, onConfirm, onClose, onDestroy } = useModalManager(modalId);
     const Foreground = useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
     if (!modal)
         return null;
@@ -812,7 +834,7 @@ ModalManager.defineStyleSheet('presenter', style$1);
 const Presenter = memo(({ modalId, getValue, increment }) => {
     const ref = useRef(null);
     const options = useConfigurationOptions();
-    const { modal } = useModal(modalId);
+    const { modal } = useModalManager(modalId);
     useSubscribeModal(modal);
     useOnMountLayout(() => {
         if (ref.current === null)
@@ -840,27 +862,41 @@ const style = `
    inset: 0;
    pointer-events: none;
    z-index: var(--z-index);
-   transition: background-color ease-in-out;
+}`;
+const backdrop = ModalManager.getHashedClassNames('backdrop');
+const backdropStyle = `
+.${backdrop} {
+  position: fixed;
+  inset: 0;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease-in-out;
+  pointer-events: none;
 }`;
 ModalManager.defineStyleSheet('anchor', style);
+ModalManager.defineStyleSheet('backdrop', backdropStyle);
 
 const { getValue, increment, reset } = counterFactory(0);
 const AnchorInner = () => {
     const [version, update] = useVersion();
-    const { modalIds, setUpdater } = useModalManagerContext();
+    const { modalIds } = useModalManagerContext();
     useEffect(() => {
-        setUpdater(update);
-    }, [setUpdater, update]);
+        ModalManager.refreshHandler = update;
+    }, [update]);
     const options = useConfigurationOptions();
     const dimmed = useActiveModalCount(validateDimmable, version);
     if (!dimmed)
         reset();
-    const backdropStyle = useMemo(() => ({
-        ...(dimmed ? options.backdrop : {}),
+    const anchorStyle = useMemo(() => ({
         '--z-index': options.zIndex,
-        transitionDuration: options.duration,
+        '--transition-duration': options.duration,
+    }), [options]);
+    const backdropStyle = useMemo(() => ({
+        ...options.backdrop,
+        opacity: dimmed ? 1 : 0,
     }), [dimmed, options]);
-    return (jsx("div", { className: anchor, style: backdropStyle, children: map(modalIds, (id) => (jsx(Presenter, { modalId: id, getValue: getValue, increment: increment, reset: reset }, id))) }));
+    return (jsxs("div", { className: anchor, style: anchorStyle, children: [jsx("div", { className: backdrop, style: backdropStyle }), map(modalIds, (id) => (jsx(Presenter, { modalId: id, getValue: getValue, increment: increment, reset: reset }, id)))] }));
 };
 const validateDimmable = (modal) => modal?.visible && modal.dimmed;
 const Anchor = memo(withErrorBoundary(AnchorInner));
@@ -947,8 +983,38 @@ const useBootstrap = ({ usePathname: useExternalPathname, ForegroundComponent, B
     return { portal, initialize };
 };
 
+const useModal = () => {
+    const modalNodesRef = useRef([]);
+    const alertRef = useRef((args) => {
+        const { modalNode, promiseHandler } = alertHandler(args);
+        modalNodesRef.current.push(modalNode);
+        return promiseHandler;
+    });
+    const confirmRef = useRef((args) => {
+        const { modalNode, promiseHandler } = confirmHandler(args);
+        modalNodesRef.current.push(modalNode);
+        return promiseHandler;
+    });
+    const promptRef = useRef((args) => {
+        const { modalNode, promiseHandler } = promptHandler(args);
+        modalNodesRef.current.push(modalNode);
+        return promiseHandler;
+    });
+    useOnUnmount(() => {
+        for (const node of modalNodesRef.current)
+            closeModal(node, false);
+        ModalManager.refresh();
+        modalNodesRef.current = [];
+    });
+    return {
+        alert: alertRef.current,
+        confirm: confirmRef.current,
+        prompt: promptRef.current,
+    };
+};
+
 const useDestroyAfter = (modalId, duration) => {
-    const { modal, onDestroy } = useModal(modalId);
+    const { modal, onDestroy } = useModalManager(modalId);
     const tick = useSubscribeModal(modal);
     const reference = useRef({
         modal,
@@ -989,4 +1055,4 @@ const useModalAnimation = (visible, handler) => {
     }, [visible]);
 };
 
-export { BootstrapProvider as ModalProvider, alert, confirm, prompt, useActiveModalCount, useDestroyAfter, useBootstrap as useInitializeModal, useModalAnimation, useConfigurationBackdrop as useModalBackdrop, useConfigurationDuration as useModalDuration, useConfigurationOptions as useModalOptions, useSubscribeModal };
+export { BootstrapProvider as ModalProvider, alert, confirm, prompt, useActiveModalCount, useDestroyAfter, useBootstrap as useInitializeModal, useModal, useModalAnimation, useConfigurationBackdrop as useModalBackdrop, useConfigurationDuration as useModalDuration, useConfigurationOptions as useModalOptions, useSubscribeModal };