@lerx/promise-modal 0.12.2 → 0.13.0

package/dist/index.cjs

@@ -4,13 +4,13 @@ const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const convert = require('@winglet/common-utils/convert');
 const hook = require('@winglet/react-utils/hook');
+const array = require('@winglet/common-utils/array');
 const hash = require('@winglet/common-utils/hash');
 const lib = require('@winglet/common-utils/lib');
 const styleManager = require('@winglet/style-utils/style-manager');
 const util = require('@winglet/style-utils/util');
 const filter = require('@winglet/common-utils/filter');
 const reactDom = require('react-dom');
-const array = require('@winglet/common-utils/array');
 const hoc = require('@winglet/react-utils/hoc');
 const render = require('@winglet/react-utils/render');
 
@@ -30,11 +30,38 @@ class ModalManager {
         return ModalManager.__anchor__ !== null;
     }
     static get prerender() {
-        return ModalManager.__prerenderList__;
+        return array.map(ModalManager.__prerenderList__, (entry) => entry.modal);
     }
     static set openHandler(handler) {
         ModalManager.__openHandler__ = handler;
+        const entries = ModalManager.__prerenderList__;
         ModalManager.__prerenderList__ = [];
+        for (const entry of entries)
+            try {
+                if (entry.dispatch)
+                    entry.dispatch();
+                else
+                    handler(entry.modal);
+            }
+            catch {
+            }
+    }
+    static bindPrerender(modal, dispatch) {
+        const list = ModalManager.__prerenderList__;
+        for (let index = 0; index < list.length; index++)
+            if (list[index].modal === modal) {
+                list[index].dispatch = dispatch;
+                return;
+            }
+    }
+    static cancelPrerender(modal) {
+        const list = ModalManager.__prerenderList__;
+        for (let index = 0; index < list.length; index++)
+            if (list[index].modal === modal) {
+                list.splice(index, 1);
+                return true;
+            }
+        return false;
     }
     static set refreshHandler(handler) {
         ModalManager.__refreshHandler__ = handler;
@@ -55,11 +82,10 @@ class ModalManager {
     static reset() {
         ModalManager.__anchor__ = null;
         ModalManager.__prerenderList__ = [];
-        ModalManager.__openHandler__ = ((modal) => {
-            ModalManager.__prerenderList__.push(modal);
-        });
+        ModalManager.__openHandler__ = ModalManager.__defaultOpenHandler__;
         ModalManager.__refreshHandler__ = undefined;
         styleManager.destroyScope(ModalManager.__scope__);
+        ModalManager.__styleManager__ = styleManager.styleManagerFactory(ModalManager.__scope__);
     }
     static open(modal) {
         return ModalManager.__openHandler__(modal);
@@ -71,14 +97,17 @@ ModalManager.__hash__ = hash.polynomialHash(ModalManager.__scope__);
 ModalManager.__styleManager__ = styleManager.styleManagerFactory(ModalManager.__scope__);
 ModalManager.__styleSheetDefinition__ = new Map();
 ModalManager.__prerenderList__ = [];
-ModalManager.__openHandler__ = ((modal) => {
-    ModalManager.__prerenderList__.push(modal);
-});
+ModalManager.__defaultOpenHandler__ = (modal) => {
+    ModalManager.__prerenderList__.push({ modal });
+    return undefined;
+};
+ModalManager.__openHandler__ = ModalManager.__defaultOpenHandler__;
 
-const closeModal = (modalNode, refresh = true) => {
-    if (modalNode.visible === false)
-        return;
-    modalNode.onClose();
+const DEFAULT_Z_INDEX = 1000;
+const DEFAULT_ANIMATION_DURATION = '300ms';
+const DEFAULT_BACKDROP_COLOR = 'rgba(0, 0, 0, 0.5)';
+
+const hideModal = (modalNode, refresh = true) => {
     modalNode.onHide();
     if (refresh)
         ModalManager.refresh();
@@ -87,85 +116,108 @@ const closeModal = (modalNode, refresh = true) => {
     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 closeModal = (modalNode, refresh = true) => {
+    if (modalNode.visible === false)
+        return;
+    modalNode.onClose();
+    return hideModal(modalNode, refresh);
 };
 
-const alertHandler = (args) => {
-    const modalNode = ModalManager.open({
-        ...args,
-        type: 'alert',
-    });
-    const unsubscribe = subscribeAbortSignal(modalNode, args.signal);
+const dispatchModal = (modal, { signal, mapResult, cancelResult }) => {
+    let modalNode;
+    let cancel = () => { };
     const promiseHandler = new Promise((resolve, reject) => {
+        let cleanupAbort = null;
+        let settled = false;
+        const settle = (result) => {
+            if (settled)
+                return;
+            settled = true;
+            cleanupAbort?.();
+            cleanupAbort = null;
+            resolve(mapResult(result));
+        };
+        modal.handleResolve = settle;
+        cancel = () => {
+            if (ModalManager.cancelPrerender(modal))
+                settle(cancelResult());
+        };
+        const wire = (node) => {
+            modalNode = node;
+            if (signal === undefined)
+                return;
+            cleanupAbort?.();
+            if (signal.aborted) {
+                closeModal(node);
+                return;
+            }
+            const handleAbort = () => closeModal(node);
+            signal.addEventListener('abort', handleAbort, { once: true });
+            cleanupAbort = () => signal.removeEventListener('abort', handleAbort);
+        };
         try {
-            modalNode.handleResolve = () => {
-                unsubscribe?.();
-                resolve();
-            };
-            if (args.signal?.aborted)
-                closeModal(modalNode);
+            if (signal?.aborted) {
+                settle(cancelResult());
+                return;
+            }
+            const node = ModalManager.open(modal);
+            if (node)
+                wire(node);
+            else {
+                if (signal) {
+                    const handleAbort = () => {
+                        ModalManager.cancelPrerender(modal);
+                        settle(cancelResult());
+                    };
+                    signal.addEventListener('abort', handleAbort, { once: true });
+                    cleanupAbort = () => signal.removeEventListener('abort', handleAbort);
+                }
+                ModalManager.bindPrerender(modal, () => {
+                    try {
+                        const flushed = ModalManager.open(modal);
+                        if (flushed)
+                            wire(flushed);
+                    }
+                    catch (error) {
+                        settled = true;
+                        cleanupAbort?.();
+                        cleanupAbort = null;
+                        reject(error);
+                    }
+                });
+            }
         }
         catch (error) {
-            closeModal(modalNode);
-            unsubscribe?.();
+            cleanupAbort?.();
             reject(error);
         }
     });
-    return { modalNode, promiseHandler };
+    return {
+        get modalNode() {
+            return modalNode;
+        },
+        promiseHandler,
+        cancel,
+    };
 };
 
-const confirmHandler = (args) => {
-    const modalNode = ModalManager.open({
-        ...args,
-        type: 'confirm',
-    });
-    const unsubscribe = subscribeAbortSignal(modalNode, args.signal);
-    const promiseHandler = new Promise((resolve, reject) => {
-        try {
-            modalNode.handleResolve = (result) => {
-                unsubscribe?.();
-                resolve(result ?? false);
-            };
-            if (args.signal?.aborted)
-                closeModal(modalNode);
-        }
-        catch (error) {
-            closeModal(modalNode);
-            unsubscribe?.();
-            reject(error);
-        }
-    });
-    return { modalNode, promiseHandler };
-};
+const alertHandler = (args) => dispatchModal({ ...args, type: 'alert' }, {
+    signal: args.signal,
+    mapResult: () => undefined,
+    cancelResult: () => null,
+});
 
-const promptHandler = (args) => {
-    const modalNode = ModalManager.open({
-        ...args,
-        type: 'prompt',
-    });
-    const unsubscribe = subscribeAbortSignal(modalNode, args.signal);
-    const promiseHandler = new Promise((resolve, reject) => {
-        try {
-            modalNode.handleResolve = (result) => {
-                unsubscribe?.();
-                resolve(result);
-            };
-            if (args.signal?.aborted)
-                closeModal(modalNode);
-        }
-        catch (error) {
-            closeModal(modalNode);
-            unsubscribe?.();
-            reject(error);
-        }
-    });
-    return { modalNode, promiseHandler };
-};
+const confirmHandler = (args) => dispatchModal({ ...args, type: 'confirm' }, {
+    signal: args.signal,
+    mapResult: (result) => result ?? false,
+    cancelResult: () => null,
+});
+
+const promptHandler = (args) => dispatchModal({ ...args, type: 'prompt' }, {
+    signal: args.signal,
+    mapResult: (result) => result ?? null,
+    cancelResult: () => args.returnOnCancel ? (args.defaultValue ?? null) : null,
+});
 
 const alert = (args) => alertHandler(args).promiseHandler;
 const confirm = (args) => confirmHandler(args).promiseHandler;
@@ -344,10 +396,6 @@ const nodeFactory = (modal) => {
     throw new Error(`Unknown modal: ${modal.type}`, { modal });
 };
 
-const DEFAULT_Z_INDEX = 1000;
-const DEFAULT_ANIMATION_DURATION = '300ms';
-const DEFAULT_BACKDROP_COLOR = 'rgba(0, 0, 0, 0.5)';
-
 const FallbackTitle = ({ children }) => {
     return jsxRuntime.jsx("h2", { style: { margin: 'unset' }, children: children });
 };
@@ -480,24 +528,12 @@ const ModalManagerContextProvider = react.memo(({ usePathname, children, }) => {
     const initiator = react.useRef(pathname);
     const modalIdSequence = react.useRef(0);
     const options = useConfigurationOptions();
-    const duration = react.useMemo(() => convert.convertMsFromDuration(options.duration), [options]);
+    const optionsRef = hook.useReference(options);
     hook.useOnMountLayout(() => {
-        const { manualDestroy, closeOnBackdropClick } = options;
-        for (const data of ModalManager.prerender) {
-            const modal = nodeFactory({
-                duration,
-                manualDestroy,
-                closeOnBackdropClick,
-                ...data,
-                id: modalIdSequence.current++,
-                initiator: initiator.current,
-            });
-            modalDictionary.current.set(modal.id, modal);
-            setModalIds((ids) => [...ids, modal.id]);
-        }
         ModalManager.openHandler = (data) => {
+            const { duration, manualDestroy, closeOnBackdropClick } = optionsRef.current;
             const modalNode = nodeFactory({
-                duration,
+                duration: convert.convertMsFromDuration(duration),
                 manualDestroy,
                 closeOnBackdropClick,
                 ...data,
@@ -532,43 +568,33 @@ const ModalManagerContextProvider = react.memo(({ usePathname, children, }) => {
         }
         initiator.current = pathname;
     }, [pathname]);
-    const getModalNodeRef = react.useRef((modalId) => modalDictionary.current.get(modalId));
+    const getModalNodeRef = react.useRef((modalId) => modalId !== undefined ? modalDictionary.current.get(modalId) : undefined);
     const onDestroyRef = react.useRef((modalId) => {
-        const modal = modalDictionary.current.get(modalId);
+        const modal = getModalNodeRef.current(modalId);
         if (!modal)
             return;
         modal.onDestroy();
         ModalManager.refresh();
     });
-    const hideModalRef = react.useRef((modalId) => {
-        const modal = modalDictionary.current.get(modalId);
-        if (!modal)
-            return;
-        modal.onHide();
-        ModalManager.refresh();
-        if (modal.manualDestroy === false)
-            setTimeout(() => modal.onDestroy(), modal.duration);
-    });
     const onChangeRef = react.useRef((modalId, value) => {
-        const modal = modalDictionary.current.get(modalId);
+        const modal = getModalNodeRef.current(modalId);
         if (!modal)
             return;
         if (modal.type === 'prompt')
             modal.onChange(value);
     });
     const onConfirmRef = react.useRef((modalId) => {
-        const modal = modalDictionary.current.get(modalId);
+        const modal = getModalNodeRef.current(modalId);
         if (!modal)
             return;
         modal.onConfirm();
-        hideModalRef.current(modalId);
+        hideModal(modal);
     });
     const onCloseRef = react.useRef((modalId) => {
-        const modal = modalDictionary.current.get(modalId);
+        const modal = getModalNodeRef.current(modalId);
         if (!modal)
             return;
-        modal.onClose();
-        hideModalRef.current(modalId);
+        closeModal(modal);
     });
     const getModalRef = react.useRef((modalId) => ({
         modal: getModalNodeRef.current(modalId),
@@ -605,21 +631,26 @@ const useUserDefinedContext = () => {
 const usePathname = () => {
     const [pathname, setPathname] = react.useState(window.location.pathname);
     react.useLayoutEffect(() => {
+        const handleChange = () => setPathname(window.location.pathname);
+        const navigation = window.navigation;
+        if (navigation) {
+            navigation.addEventListener('currententrychange', handleChange);
+            window.addEventListener('popstate', handleChange);
+            return () => {
+                navigation.removeEventListener('currententrychange', handleChange);
+                window.removeEventListener('popstate', handleChange);
+            };
+        }
         let requestId;
         const checkPathname = () => {
-            if (requestId)
-                cancelAnimationFrame(requestId);
-            if (pathname !== window.location.pathname) {
+            if (pathname !== window.location.pathname)
                 setPathname(window.location.pathname);
-            }
-            else {
+            else
                 requestId = requestAnimationFrame(checkPathname);
-            }
         };
         requestId = requestAnimationFrame(checkPathname);
         return () => {
-            if (requestId)
-                cancelAnimationFrame(requestId);
+            cancelAnimationFrame(requestId);
         };
     }, [pathname]);
     return { pathname };
@@ -725,7 +756,7 @@ const PromptInner = react.memo(({ modal, handlers }) => {
     const handleConfirm = react.useCallback(() => {
         requestAnimationFrame(onConfirm);
     }, [onConfirm]);
-    const disabled = react.useMemo(() => (value ? !!checkDisabled?.(value) : false), [checkDisabled, value]);
+    const disabled = react.useMemo(() => (checkDisabled ? !!checkDisabled(value) : false), [checkDisabled, value]);
     const { TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, } = useConfigurationContext();
     return (jsxRuntime.jsxs(react.Fragment, { children: [title &&
                 (filter.isString(title) ? (jsxRuntime.jsx(TitleComponent, { context: userDefinedContext, children: title })) : (title)), subtitle &&
@@ -798,6 +829,7 @@ const style$1 = `
   z-index: var(--z-index);
   pointer-events: none;
   overflow: hidden;
+}
 `;
 ModalManager.defineStyleSheet('presenter', style$1);
 
@@ -856,8 +888,10 @@ const AnchorInner = () => {
     }, [update]);
     const options = useConfigurationOptions();
     const dimmed = useActiveModalCount(validateDimmable, version);
-    if (!dimmed)
-        reset();
+    react.useEffect(() => {
+        if (!dimmed)
+            reset();
+    }, [dimmed]);
     const anchorStyle = react.useMemo(() => ({
         '--z-index': options.zIndex,
         '--transition-duration': options.duration,
@@ -898,12 +932,12 @@ const BootstrapProvider = react.memo(react.forwardRef(({ usePathname: useExterna
         initialize: handleInitialize,
     }), [handleInitialize]);
     hook.useOnMount(() => {
-        if (handleRef !== null)
-            return;
-        handleInitialize();
+        if (handleRef === null)
+            handleInitialize();
         return () => {
-            if (anchorRef.current)
-                anchorRef.current.remove();
+            if (anchorRef.current === null)
+                return;
+            anchorRef.current.remove();
             handleReset();
         };
     });
@@ -924,13 +958,15 @@ const BootstrapProvider = react.memo(react.forwardRef(({ usePathname: useExterna
 
 const useBootstrap = ({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, mode = 'auto', } = {}) => {
     const usePathname$1 = react.useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);
-    const { anchorRef, handleInitialize } = useInitialize();
+    const { anchorRef, handleInitialize, handleReset } = useInitialize();
     hook.useOnMount(() => {
         if (mode === 'auto')
             handleInitialize();
         return () => {
-            if (anchorRef.current)
-                anchorRef.current.remove();
+            if (anchorRef.current === null)
+                return;
+            anchorRef.current.remove();
+            handleReset();
         };
     });
     const initialize = react.useCallback((element) => {
@@ -954,28 +990,33 @@ const useBootstrap = ({ usePathname: useExternalPathname, ForegroundComponent, B
 };
 
 const useModal = (configuration) => {
-    const modalNodesRef = react.useRef([]);
+    const modalResultsRef = 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 result = alertHandler(baseArgsRef.current ? { ...baseArgsRef.current, ...args } : args);
+        modalResultsRef.current.push(result);
+        return result.promiseHandler;
     });
     const confirmRef = react.useRef((args) => {
-        const { modalNode, promiseHandler } = confirmHandler(baseArgsRef.current ? { ...baseArgsRef.current, ...args } : args);
-        modalNodesRef.current.push(modalNode);
-        return promiseHandler;
+        const result = confirmHandler(baseArgsRef.current ? { ...baseArgsRef.current, ...args } : args);
+        modalResultsRef.current.push(result);
+        return result.promiseHandler;
     });
     const promptRef = react.useRef((args) => {
-        const { modalNode, promiseHandler } = promptHandler(baseArgsRef.current ? { ...baseArgsRef.current, ...args } : args);
-        modalNodesRef.current.push(modalNode);
-        return promiseHandler;
+        const result = promptHandler(baseArgsRef.current ? { ...baseArgsRef.current, ...args } : args);
+        modalResultsRef.current.push(result);
+        return result.promiseHandler;
     });
     hook.useOnUnmount(() => {
-        for (const node of modalNodesRef.current)
-            closeModal(node, false);
+        for (const result of modalResultsRef.current) {
+            const modalNode = result.modalNode;
+            if (modalNode)
+                closeModal(modalNode, false);
+            else
+                result.cancel();
+        }
         ModalManager.refresh();
-        modalNodesRef.current = [];
+        modalResultsRef.current = [];
     });
     return {
         alert: alertRef.current,
@@ -1028,8 +1069,6 @@ const useModalAnimation = (visible, handler) => {
 
 const useModalDuration = (modalId) => {
     const globalDuration = useConfigurationDuration();
-    if (modalId === undefined)
-        return globalDuration;
     const { modal } = useModalManager(modalId);
     if (modal === undefined)
         return globalDuration;