@lerx/promise-modal 0.8.4 → 0.8.6

package/dist/index.cjs

@@ -18,6 +18,8 @@ class ModalManager {
     static #anchor = null;
     static #scope = `promise-modal-${lib.getRandomString(36)}`;
     static #hash = hash.polynomialHash(ModalManager.#scope);
+    static #styleManager = styleManager.styleManagerFactory(ModalManager.#scope);
+    static #styleSheetDefinition = new Map();
     static anchor(options) {
         if (ModalManager.#anchor !== null)
             return ModalManager.#anchor;
@@ -36,13 +38,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 = 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, util.compressCss(css));
     }
@@ -56,95 +65,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;
         styleManager.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;
@@ -152,9 +179,10 @@ class AbstractNode {
     title;
     subtitle;
     background;
+    dimmed;
+    duration;
     manualDestroy;
     closeOnBackdropClick;
-    dimmed;
     ForegroundComponent;
     BackgroundComponent;
     #alive;
@@ -165,9 +193,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;
@@ -175,13 +206,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);
@@ -193,9 +228,6 @@ class AbstractNode {
         for (const listener of this.#listeners)
             listener();
     }
-    resolve(result) {
-        this.#resolve(result);
-    }
     onDestroy() {
         const needPublish = this.#alive === true;
         this.#alive = false;
@@ -221,7 +253,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,
@@ -230,9 +262,10 @@ class AlertNode extends AbstractNode {
             subtitle,
             background,
             dimmed,
+            duration,
             manualDestroy,
             closeOnBackdropClick,
-            resolve,
+            handleResolve,
             ForegroundComponent,
             BackgroundComponent,
         });
@@ -242,10 +275,10 @@ class AlertNode extends AbstractNode {
         this.footer = footer;
     }
     onClose() {
-        this.resolve(null);
+        this.onResolve(null);
     }
     onConfirm() {
-        this.resolve(null);
+        this.onResolve(null);
     }
 }
 
@@ -254,7 +287,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,
@@ -263,9 +296,10 @@ class ConfirmNode extends AbstractNode {
             subtitle,
             background,
             dimmed,
+            duration,
             manualDestroy,
             closeOnBackdropClick,
-            resolve,
+            handleResolve,
             ForegroundComponent,
             BackgroundComponent,
         });
@@ -275,10 +309,10 @@ class ConfirmNode extends AbstractNode {
         this.footer = footer;
     }
     onClose() {
-        this.resolve(false);
+        this.onResolve(false);
     }
     onConfirm() {
-        this.resolve(true);
+        this.onResolve(true);
     }
 }
 
@@ -291,7 +325,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,
@@ -300,9 +334,10 @@ class PromptNode extends AbstractNode {
             subtitle,
             background,
             dimmed,
+            duration,
             manualDestroy,
             closeOnBackdropClick,
-            resolve,
+            handleResolve,
             ForegroundComponent,
             BackgroundComponent,
         });
@@ -319,13 +354,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);
     }
 }
 
@@ -364,8 +399,8 @@ const FallbackFooter = ({ confirmLabel, hideConfirm = false, cancelLabel, hideCa
 const ModalManagerContext = react.createContext({});
 
 const useModalManagerContext = () => react.useContext(ModalManagerContext);
-const useModal = (id) => {
-    const { getModal } = useModalManagerContext();
+const useModalManager = (id) => {
+    const { getModal } = react.useContext(ModalManagerContext);
     return react.useMemo(() => getModal(id), [id, getModal]);
 };
 
@@ -482,32 +517,26 @@ const ModalManagerContextProvider = react.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++) {
@@ -518,8 +547,9 @@ const ModalManagerContextProvider = react.memo(({ usePathname, children, }) => {
                     else
                         aliveIds.push(id);
                 }
-                return [...aliveIds, modal.id];
+                return [...aliveIds, modalNode.id];
             });
+            return modalNode;
         };
     });
     react.useLayoutEffect(() => {
@@ -534,78 +564,62 @@ const ModalManagerContextProvider = react.memo(({ usePathname, children, }) => {
         }
         initiator.current = pathname;
     }, [pathname]);
-    const getModalNode = react.useCallback((modalId) => {
-        return modalDictionary.current.get(modalId);
-    }, []);
-    const onDestroy = react.useCallback((modalId) => {
+    const getModalNodeRef = react.useRef((modalId) => modalDictionary.current.get(modalId));
+    const onDestroyRef = react.useRef((modalId) => {
         const modal = modalDictionary.current.get(modalId);
         if (!modal)
             return;
         modal.onDestroy();
-        updaterRef.current?.();
-    }, []);
-    const updaterRef = react.useRef(undefined);
-    const hideModal = react.useCallback((modalId) => {
+        ModalManager.refresh();
+    });
+    const hideModalRef = react.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 = react.useCallback((modalId, value) => {
+        ModalManager.refresh();
+        if (modal.manualDestroy === false)
+            setTimeout(() => modal.onDestroy(), modal.duration);
+    });
+    const onChangeRef = react.useRef((modalId, value) => {
         const modal = modalDictionary.current.get(modalId);
         if (!modal)
             return;
         if (modal.type === 'prompt')
             modal.onChange(value);
-    }, []);
-    const onConfirm = react.useCallback((modalId) => {
+    });
+    const onConfirmRef = react.useRef((modalId) => {
         const modal = modalDictionary.current.get(modalId);
         if (!modal)
             return;
         modal.onConfirm();
-        hideModal(modalId);
-    }, [hideModal]);
-    const onClose = react.useCallback((modalId) => {
+        hideModalRef.current(modalId);
+    });
+    const onCloseRef = react.useRef((modalId) => {
         const modal = modalDictionary.current.get(modalId);
         if (!modal)
             return;
         modal.onClose();
-        hideModal(modalId);
-    }, [hideModal]);
-    const getModal = react.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 = react.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 = react.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 (jsxRuntime.jsx(ModalManagerContext.Provider, { value: value, children: children }));
 });
 
@@ -674,7 +688,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 = react.useCallback((event) => {
         if (modal && modal.closeOnBackdropClick && modal.visible)
             onClose();
@@ -790,7 +804,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 = react.useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
     if (!modal)
         return null;
@@ -822,7 +836,7 @@ ModalManager.defineStyleSheet('presenter', style$1);
 const Presenter = react.memo(({ modalId, getValue, increment }) => {
     const ref = react.useRef(null);
     const options = useConfigurationOptions();
-    const { modal } = useModal(modalId);
+    const { modal } = useModalManager(modalId);
     useSubscribeModal(modal);
     hook.useOnMountLayout(() => {
         if (ref.current === null)
@@ -868,10 +882,10 @@ ModalManager.defineStyleSheet('backdrop', backdropStyle);
 const { getValue, increment, reset } = lib.counterFactory(0);
 const AnchorInner = () => {
     const [version, update] = hook.useVersion();
-    const { modalIds, setUpdater } = useModalManagerContext();
+    const { modalIds } = useModalManagerContext();
     react.useEffect(() => {
-        setUpdater(update);
-    }, [setUpdater, update]);
+        ModalManager.refreshHandler = update;
+    }, [update]);
     const options = useConfigurationOptions();
     const dimmed = useActiveModalCount(validateDimmable, version);
     if (!dimmed)
@@ -971,8 +985,39 @@ const useBootstrap = ({ usePathname: useExternalPathname, ForegroundComponent, B
     return { portal, initialize };
 };
 
+const useModal = (configuration) => {
+    const modalNodesRef = react.useRef([]);
+    const baseArgsRef = react.useRef(configuration);
+    const alertRef = react.useRef((args) => {
+        const { modalNode, promiseHandler } = alertHandler(baseArgsRef.current ? { ...baseArgsRef.current, ...args } : args);
+        modalNodesRef.current.push(modalNode);
+        return promiseHandler;
+    });
+    const confirmRef = react.useRef((args) => {
+        const { modalNode, promiseHandler } = confirmHandler(baseArgsRef.current ? { ...baseArgsRef.current, ...args } : args);
+        modalNodesRef.current.push(modalNode);
+        return promiseHandler;
+    });
+    const promptRef = react.useRef((args) => {
+        const { modalNode, promiseHandler } = promptHandler(baseArgsRef.current ? { ...baseArgsRef.current, ...args } : args);
+        modalNodesRef.current.push(modalNode);
+        return promiseHandler;
+    });
+    hook.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 = react.useRef({
         modal,
@@ -1013,6 +1058,17 @@ const useModalAnimation = (visible, handler) => {
     }, [visible]);
 };
 
+const useModalDuration = (id) => {
+    const globalDuration = useConfigurationDuration();
+    if (id === undefined)
+        return globalDuration;
+    const { modal } = useModalManager(id);
+    if (modal === undefined)
+        return globalDuration;
+    const duration = modal.duration;
+    return { duration, milliseconds: duration + 'ms' };
+};
+
 exports.ModalProvider = BootstrapProvider;
 exports.alert = alert;
 exports.confirm = confirm;
@@ -1020,8 +1076,9 @@ exports.prompt = prompt;
 exports.useActiveModalCount = useActiveModalCount;
 exports.useDestroyAfter = useDestroyAfter;
 exports.useInitializeModal = useBootstrap;
+exports.useModal = useModal;
 exports.useModalAnimation = useModalAnimation;
 exports.useModalBackdrop = useConfigurationBackdrop;
-exports.useModalDuration = useConfigurationDuration;
+exports.useModalDuration = useModalDuration;
 exports.useModalOptions = useConfigurationOptions;
 exports.useSubscribeModal = useSubscribeModal;

package/dist/index.d.ts

@@ -1,8 +1,10 @@
-export { useConfigurationOptions as useModalOptions, useConfigurationDuration as useModalDuration, useConfigurationBackdrop as useModalBackdrop, } from './providers';
+export { useConfigurationOptions as useModalOptions, useConfigurationBackdrop as useModalBackdrop, } from './providers';
 export { useBootstrap as useInitializeModal, BootstrapProvider as ModalProvider, type BootstrapProviderHandle as ModalProviderHandle, type BootstrapProviderProps as ModalProviderProps, } from './bootstrap';
+export { useModal } from './hooks/useModal';
 export { useActiveModalCount } from './hooks/useActiveModalCount';
 export { useDestroyAfter } from './hooks/useDestroyAfter';
 export { useModalAnimation } from './hooks/useModalAnimation';
+export { useModalDuration } from './hooks/useModalDuration';
 export { useSubscribeModal } from './hooks/useSubscribeModal';
 export { alert, confirm, prompt } from './core';
 export type { ModalOptions, ModalFrameProps, FooterComponentProps, ModalBackground, PromptInputProps, AlertContentProps, ConfirmContentProps, PromptContentProps, WrapperComponentProps, } from './types';