@lerx/promise-modal 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -0,0 +1,966 @@
+'use strict';
+
+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 lib = require('@winglet/common-utils/lib');
+const css = require('@emotion/css');
+const reactDom = require('react-dom');
+const array = require('@winglet/common-utils/array');
+const hoc = require('@winglet/react-utils/hoc');
+const filter = require('@winglet/common-utils/filter');
+const render = require('@winglet/react-utils/render');
+const console = require('@winglet/common-utils/console');
+
+class ModalManager {
+    static #active = false;
+    static activate() {
+        if (ModalManager.#active)
+            return false;
+        return (ModalManager.#active = true);
+    }
+    static #anchor = null;
+    static anchor(options) {
+        if (ModalManager.#anchor) {
+            const anchor = document.getElementById(ModalManager.#anchor.id);
+            if (anchor)
+                return anchor;
+        }
+        const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
+        const node = document.createElement(tag);
+        node.setAttribute('id', `${prefix}-${lib.getRandomString(36)}`);
+        root.appendChild(node);
+        ModalManager.#anchor = node;
+        return node;
+    }
+    static #prerenderList = [];
+    static get prerender() {
+        return ModalManager.#prerenderList;
+    }
+    static #openHandler = (modal) => ModalManager.#prerenderList.push(modal);
+    static set openHandler(handler) {
+        ModalManager.#openHandler = handler;
+        ModalManager.#prerenderList = [];
+    }
+    static get unanchored() {
+        return !ModalManager.#anchor;
+    }
+    static reset() {
+        ModalManager.#active = false;
+        ModalManager.#anchor = null;
+        ModalManager.#prerenderList = [];
+        ModalManager.#openHandler = (modal) => ModalManager.#prerenderList.push(modal);
+    }
+    static open(modal) {
+        ModalManager.#openHandler(modal);
+    }
+}
+
+const alert = ({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+    return new Promise((resolve, reject) => {
+        try {
+            ModalManager.open({
+                type: 'alert',
+                subtype,
+                resolve: () => resolve(),
+                title,
+                subtitle,
+                content,
+                background,
+                footer,
+                dimmed,
+                manualDestroy,
+                closeOnBackdropClick,
+                ForegroundComponent,
+                BackgroundComponent,
+            });
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+};
+
+const confirm = ({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+    return new Promise((resolve, reject) => {
+        try {
+            ModalManager.open({
+                type: 'confirm',
+                subtype,
+                resolve: (result) => resolve(result ?? false),
+                title,
+                subtitle,
+                content,
+                background,
+                footer,
+                dimmed,
+                manualDestroy,
+                closeOnBackdropClick,
+                ForegroundComponent,
+                BackgroundComponent,
+            });
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+};
+
+const prompt = ({ defaultValue, title, subtitle, content, Input, disabled, returnOnCancel, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+    return new Promise((resolve, reject) => {
+        try {
+            ModalManager.open({
+                type: 'prompt',
+                resolve: (result) => resolve(result),
+                title,
+                subtitle,
+                content,
+                Input,
+                defaultValue,
+                disabled,
+                returnOnCancel,
+                background,
+                footer,
+                dimmed,
+                manualDestroy,
+                closeOnBackdropClick,
+                ForegroundComponent,
+                BackgroundComponent,
+            });
+        }
+        catch (error) {
+            reject(error);
+        }
+    });
+};
+
+class AbstractNode {
+    id;
+    initiator;
+    title;
+    subtitle;
+    background;
+    manualDestroy;
+    closeOnBackdropClick;
+    dimmed;
+    ForegroundComponent;
+    BackgroundComponent;
+    #alive;
+    get alive() {
+        return this.#alive;
+    }
+    #visible;
+    get visible() {
+        return this.#visible;
+    }
+    #resolve;
+    #listeners = new Set();
+    constructor({ id, initiator, title, subtitle, background, dimmed = true, manualDestroy = false, closeOnBackdropClick = true, resolve, ForegroundComponent, BackgroundComponent, }) {
+        this.id = id;
+        this.initiator = initiator;
+        this.title = title;
+        this.subtitle = subtitle;
+        this.background = background;
+        this.dimmed = dimmed;
+        this.manualDestroy = manualDestroy;
+        this.closeOnBackdropClick = closeOnBackdropClick;
+        this.ForegroundComponent = ForegroundComponent;
+        this.BackgroundComponent = BackgroundComponent;
+        this.#alive = true;
+        this.#visible = true;
+        this.#resolve = resolve;
+    }
+    subscribe(listener) {
+        this.#listeners.add(listener);
+        return () => {
+            this.#listeners.delete(listener);
+        };
+    }
+    publish() {
+        for (const listener of this.#listeners)
+            listener();
+    }
+    resolve(result) {
+        this.#resolve(result);
+    }
+    onDestroy() {
+        const needPublish = this.#alive === true;
+        this.#alive = false;
+        if (this.manualDestroy && needPublish)
+            this.publish();
+    }
+    onShow() {
+        const needPublish = this.#visible === false;
+        this.#visible = true;
+        if (needPublish)
+            this.publish();
+    }
+    onHide() {
+        const needPublish = this.#visible === true;
+        this.#visible = false;
+        if (needPublish)
+            this.publish();
+    }
+}
+
+class AlertNode extends AbstractNode {
+    type;
+    subtype;
+    content;
+    footer;
+    constructor({ id, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+        super({
+            id,
+            initiator,
+            title,
+            subtitle,
+            background,
+            dimmed,
+            manualDestroy,
+            closeOnBackdropClick,
+            resolve,
+            ForegroundComponent,
+            BackgroundComponent,
+        });
+        this.type = type;
+        this.subtype = subtype;
+        this.content = content;
+        this.footer = footer;
+    }
+    onClose() {
+        this.resolve(null);
+    }
+    onConfirm() {
+        this.resolve(null);
+    }
+}
+
+class ConfirmNode extends AbstractNode {
+    type;
+    subtype;
+    content;
+    footer;
+    constructor({ id, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+        super({
+            id,
+            initiator,
+            title,
+            subtitle,
+            background,
+            dimmed,
+            manualDestroy,
+            closeOnBackdropClick,
+            resolve,
+            ForegroundComponent,
+            BackgroundComponent,
+        });
+        this.type = type;
+        this.subtype = subtype;
+        this.content = content;
+        this.footer = footer;
+    }
+    onClose() {
+        this.resolve(false);
+    }
+    onConfirm() {
+        this.resolve(true);
+    }
+}
+
+class PromptNode extends AbstractNode {
+    type;
+    content;
+    defaultValue;
+    Input;
+    disabled;
+    returnOnCancel;
+    footer;
+    #value;
+    constructor({ id, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
+        super({
+            id,
+            initiator,
+            title,
+            subtitle,
+            background,
+            dimmed,
+            manualDestroy,
+            closeOnBackdropClick,
+            resolve,
+            ForegroundComponent,
+            BackgroundComponent,
+        });
+        this.type = type;
+        this.content = content;
+        this.Input = Input;
+        this.defaultValue = defaultValue;
+        this.#value = defaultValue;
+        this.disabled = disabled;
+        this.returnOnCancel = returnOnCancel;
+        this.footer = footer;
+    }
+    onChange(value) {
+        this.#value = value;
+    }
+    onConfirm() {
+        this.resolve(this.#value ?? null);
+    }
+    onClose() {
+        if (this.returnOnCancel)
+            this.resolve(this.#value ?? null);
+        else
+            this.resolve(null);
+    }
+}
+
+const nodeFactory = (modal) => {
+    switch (modal.type) {
+        case 'alert':
+            return new AlertNode(modal);
+        case 'confirm':
+            return new ConfirmNode(modal);
+        case 'prompt':
+            return new PromptNode(modal);
+    }
+    throw new Error(`Unknown modal: ${modal.type}`, { modal });
+};
+
+const DEFAULT_ANIMATION_DURATION = '300ms';
+const DEFAULT_BACKDROP_COLOR = 'rgba(0, 0, 0, 0.5)';
+
+const fallback = css.css `
+  margin: unset;
+`;
+const frame = css.css `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: white;
+  padding: 20px 80px;
+  gap: 10px;
+  border: 1px solid black;
+`;
+
+const FallbackTitle = ({ children }) => {
+    return jsxRuntime.jsx("h2", { className: fallback, children: children });
+};
+
+const FallbackSubtitle = ({ children }) => {
+    return jsxRuntime.jsx("h3", { className: fallback, children: children });
+};
+
+const FallbackContent = ({ children }) => {
+    return jsxRuntime.jsx("div", { className: fallback, children: children });
+};
+
+const FallbackFooter = ({ confirmLabel, hideConfirm = false, cancelLabel, hideCancel = false, disabled, onConfirm, onCancel, }) => {
+    return (jsxRuntime.jsxs("div", { children: [!hideConfirm && (jsxRuntime.jsx("button", { onClick: onConfirm, disabled: disabled, children: confirmLabel || 'Confirm' })), !hideCancel && typeof onCancel === 'function' && (jsxRuntime.jsx("button", { onClick: onCancel, children: cancelLabel || 'Cancel' }))] }));
+};
+
+const ModalManagerContext = react.createContext({});
+
+const useModalManagerContext = () => react.useContext(ModalManagerContext);
+const useModal = (id) => {
+    const { getModal } = useModalManagerContext();
+    return react.useMemo(() => getModal(id), [id, getModal]);
+};
+
+const defaultValidate = (modal) => modal?.visible;
+const useActiveModalCount = (validate = defaultValidate, refreshKey = 0) => {
+    const { modalIds, getModalNode } = useModalManagerContext();
+    return react.useMemo(() => {
+        let count = 0;
+        for (const id of modalIds) {
+            if (validate(getModalNode(id)))
+                count++;
+        }
+        return count;
+    }, [getModalNode, modalIds, refreshKey]);
+};
+
+const MAX_MODAL_COUNT = 5;
+const MAX_MODAL_LEVEL = 3;
+const FallbackForegroundFrame = react.forwardRef(({ id, onChangeOrder, children }, ref) => {
+    const activeCount = useActiveModalCount();
+    const [level, offset] = react.useMemo(() => {
+        const stacked = activeCount > 1;
+        const level = stacked
+            ? (Math.floor(id / MAX_MODAL_COUNT) % MAX_MODAL_LEVEL) * 100
+            : 0;
+        const offset = stacked ? (id % MAX_MODAL_COUNT) * 35 : 0;
+        return [level, offset];
+    }, [activeCount, id]);
+    return (jsxRuntime.jsx("div", { ref: ref, className: frame, onClick: onChangeOrder, style: {
+            marginBottom: `calc(25vh + ${level}px)`,
+            marginLeft: `${level}px`,
+            transform: `translate(${offset}px, ${offset}px)`,
+        }, children: children }));
+});
+
+const ConfigurationContext = react.createContext({});
+
+const ConfigurationContextProvider = react.memo(({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, children, }) => {
+    const value = react.useMemo(() => ({
+        BackgroundComponent,
+        ForegroundComponent: ForegroundComponent || FallbackForegroundFrame,
+        TitleComponent: TitleComponent || FallbackTitle,
+        SubtitleComponent: SubtitleComponent || FallbackSubtitle,
+        ContentComponent: react.memo(ContentComponent || FallbackContent),
+        FooterComponent: react.memo(FooterComponent || FallbackFooter),
+        options: {
+            duration: DEFAULT_ANIMATION_DURATION,
+            backdrop: DEFAULT_BACKDROP_COLOR,
+            closeOnBackdropClick: true,
+            manualDestroy: false,
+            ...options,
+        },
+    }), [
+        ForegroundComponent,
+        BackgroundComponent,
+        ContentComponent,
+        FooterComponent,
+        SubtitleComponent,
+        TitleComponent,
+        options,
+    ]);
+    return (jsxRuntime.jsx(ConfigurationContext.Provider, { value: value, children: children }));
+});
+
+const useConfigurationContext = () => react.useContext(ConfigurationContext);
+const useConfigurationOptions = () => {
+    const context = react.useContext(ConfigurationContext);
+    return context.options;
+};
+const useConfigurationDuration = () => {
+    const context = useConfigurationOptions();
+    return {
+        duration: context.duration,
+        milliseconds: convert.convertMsFromDuration(context.duration),
+    };
+};
+const useConfigurationBackdrop = () => {
+    const context = useConfigurationOptions();
+    return context.backdrop;
+};
+
+const ModalManagerContextProvider = react.memo(({ usePathname, children, }) => {
+    const modalDictionary = react.useRef(new Map());
+    const [modalIds, setModalIds] = react.useState([]);
+    const modalIdsRef = hook.useReference(modalIds);
+    const { pathname } = usePathname();
+    const initiator = react.useRef(pathname);
+    const modalIdSequence = react.useRef(0);
+    const options = useConfigurationOptions();
+    const duration = react.useMemo(() => convert.convertMsFromDuration(options.duration), [options]);
+    hook.useOnMountLayout(() => {
+        const { manualDestroy, closeOnBackdropClick } = options;
+        for (const data of ModalManager.prerender) {
+            const modal = nodeFactory({
+                ...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({
+                ...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) => {
+                const aliveIds = [];
+                for (let index = 0; index < ids.length; index++) {
+                    const id = ids[index];
+                    const destroyed = !modalDictionary.current.get(id)?.alive;
+                    if (destroyed)
+                        modalDictionary.current.delete(id);
+                    else
+                        aliveIds.push(id);
+                }
+                return [...aliveIds, modal.id];
+            });
+        };
+        return () => {
+            ModalManager.reset();
+        };
+    });
+    react.useLayoutEffect(() => {
+        for (const id of modalIdsRef.current) {
+            const modal = modalDictionary.current.get(id);
+            if (!modal?.alive)
+                continue;
+            if (modal.initiator === pathname)
+                modal.onShow();
+            else
+                modal.onHide();
+        }
+        initiator.current = pathname;
+    }, [pathname]);
+    const getModalNode = react.useCallback((modalId) => {
+        return modalDictionary.current.get(modalId);
+    }, []);
+    const onDestroy = react.useCallback((modalId) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        modal.onDestroy();
+        updaterRef.current?.();
+    }, []);
+    const updaterRef = react.useRef(undefined);
+    const hideModal = react.useCallback((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) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        if (modal.type === 'prompt')
+            modal.onChange(value);
+    }, []);
+    const onConfirm = react.useCallback((modalId) => {
+        const modal = modalDictionary.current.get(modalId);
+        if (!modal)
+            return;
+        modal.onConfirm();
+        hideModal(modalId);
+    }, [hideModal]);
+    const onClose = react.useCallback((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]);
+    const value = react.useMemo(() => {
+        return {
+            modalIds,
+            getModalNode,
+            onChange,
+            onConfirm,
+            onClose,
+            onDestroy,
+            getModal,
+            setUpdater: (updater) => {
+                updaterRef.current = updater;
+            },
+        };
+    }, [
+        modalIds,
+        getModal,
+        getModalNode,
+        onChange,
+        onConfirm,
+        onClose,
+        onDestroy,
+    ]);
+    return (jsxRuntime.jsx(ModalManagerContext.Provider, { value: value, children: children }));
+});
+
+const UserDefinedContext = react.createContext({});
+
+const UserDefinedContextProvider = ({ context, children, }) => {
+    const contextValue = react.useMemo(() => ({ context: context || {} }), [context]);
+    return (jsxRuntime.jsx(UserDefinedContext.Provider, { value: contextValue, children: children }));
+};
+
+const useUserDefinedContext = () => {
+    return react.useContext(UserDefinedContext);
+};
+
+const usePathname = () => {
+    const [pathname, setPathname] = react.useState(window.location.pathname);
+    react.useLayoutEffect(() => {
+        let requestId;
+        const checkPathname = () => {
+            if (requestId)
+                cancelAnimationFrame(requestId);
+            if (pathname !== window.location.pathname) {
+                setPathname(window.location.pathname);
+            }
+            else {
+                requestId = requestAnimationFrame(checkPathname);
+            }
+        };
+        requestId = requestAnimationFrame(checkPathname);
+        return () => {
+            if (requestId)
+                cancelAnimationFrame(requestId);
+        };
+    }, [pathname]);
+    return { pathname };
+};
+
+const background = css.css `
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: -999;
+  pointer-events: none;
+  > * {
+    pointer-events: none;
+  }
+`;
+const active$1 = css.css `
+  pointer-events: all;
+`;
+const visible$1 = css.css `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
+    const { BackgroundComponent } = useConfigurationContext();
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { modal, onClose, onChange, onConfirm, onDestroy } = useModal(modalId);
+    const handleClose = react.useCallback((event) => {
+        if (modal && modal.closeOnBackdropClick && modal.visible)
+            onClose();
+        event.stopPropagation();
+    }, [modal, onClose]);
+    const Background = react.useMemo(() => modal?.BackgroundComponent || BackgroundComponent, [BackgroundComponent, modal]);
+    if (!modal)
+        return null;
+    return (jsxRuntime.jsx("div", { className: css.cx(background, {
+            [visible$1]: modal.manualDestroy ? modal.alive : modal.visible,
+            [active$1]: modal.closeOnBackdropClick && modal.visible,
+        }), onClick: handleClose, children: Background && (jsxRuntime.jsx(Background, { id: modal.id, type: modal.type, alive: modal.alive, visible: modal.visible, initiator: modal.initiator, manualDestroy: modal.manualDestroy, closeOnBackdropClick: modal.closeOnBackdropClick, background: modal.background, onChange: onChange, onConfirm: onConfirm, onClose: onClose, onDestroy: onDestroy, onChangeOrder: onChangeOrder, context: userDefinedContext })) }));
+};
+
+const foreground = css.css `
+  pointer-events: none;
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+`;
+const active = css.css `
+  > * {
+    pointer-events: all;
+  }
+`;
+const visible = css.css `
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+`;
+
+const AlertInner = react.memo(({ modal, handlers }) => {
+    const { title, subtitle, content, footer } = react.useMemo(() => modal, [modal]);
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { onConfirm } = react.useMemo(() => handlers, [handlers]);
+    const handleConfirm = hook.useHandle(onConfirm);
+    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 &&
+                (filter.isString(subtitle) ? (jsxRuntime.jsx(SubtitleComponent, { context: userDefinedContext, children: subtitle })) : (subtitle)), content &&
+                (filter.isString(content) ? (jsxRuntime.jsx(ContentComponent, { context: userDefinedContext, children: content })) : (render.renderComponent(content, {
+                    onConfirm: handleConfirm,
+                }))), footer !== false &&
+                (typeof footer === 'function' ? (footer({
+                    onConfirm: handleConfirm,
+                    context: userDefinedContext,
+                })) : (jsxRuntime.jsx(FooterComponent, { onConfirm: handleConfirm, confirmLabel: footer?.confirm, hideConfirm: footer?.hideConfirm, context: userDefinedContext })))] }));
+});
+
+const ConfirmInner = react.memo(({ modal, handlers }) => {
+    const { title, subtitle, content, footer } = react.useMemo(() => modal, [modal]);
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { onConfirm, onClose } = react.useMemo(() => handlers, [handlers]);
+    const handleConfirm = hook.useHandle(onConfirm);
+    const handleClose = hook.useHandle(onClose);
+    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 &&
+                (filter.isString(subtitle) ? (jsxRuntime.jsx(SubtitleComponent, { context: userDefinedContext, children: subtitle })) : (subtitle)), content &&
+                (filter.isString(content) ? (jsxRuntime.jsx(ContentComponent, { context: userDefinedContext, children: content })) : (render.renderComponent(content, {
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                }))), footer !== false &&
+                (typeof footer === 'function' ? (footer({
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                })) : (jsxRuntime.jsx(FooterComponent, { onConfirm: handleConfirm, onCancel: handleClose, confirmLabel: footer?.confirm, cancelLabel: footer?.cancel, hideConfirm: footer?.hideConfirm, hideCancel: footer?.hideCancel, context: userDefinedContext })))] }));
+});
+
+const PromptInner = react.memo(({ modal, handlers }) => {
+    const { Input, defaultValue, disabled: checkDisabled, title, subtitle, content, footer, } = react.useMemo(() => ({
+        ...modal,
+        Input: react.memo(hoc.withErrorBoundary(modal.Input)),
+    }), [modal]);
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const [value, setValue] = react.useState(defaultValue);
+    const { onChange, onClose, onConfirm } = react.useMemo(() => handlers, [handlers]);
+    const handleClose = hook.useHandle(onClose);
+    const handleChange = hook.useHandle((inputValue) => {
+        const input = filter.isFunction(inputValue) ? inputValue(value) : inputValue;
+        setValue(input);
+        onChange(input);
+    });
+    const handleConfirm = react.useCallback(() => {
+        requestAnimationFrame(onConfirm);
+    }, [onConfirm]);
+    const disabled = react.useMemo(() => (value ? !!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 &&
+                (filter.isString(subtitle) ? (jsxRuntime.jsx(SubtitleComponent, { context: userDefinedContext, children: subtitle })) : (subtitle)), content &&
+                (filter.isString(content) ? (jsxRuntime.jsx(ContentComponent, { context: userDefinedContext, children: content })) : (render.renderComponent(content, {
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                }))), Input && (jsxRuntime.jsx(Input, { defaultValue: defaultValue, value: value, onChange: handleChange, onConfirm: handleConfirm, onCancel: handleClose, context: userDefinedContext })), footer !== false &&
+                (typeof footer === 'function' ? (footer({
+                    value,
+                    disabled,
+                    onChange: handleChange,
+                    onConfirm: handleConfirm,
+                    onCancel: handleClose,
+                    context: userDefinedContext,
+                })) : (jsxRuntime.jsx(FooterComponent, { disabled: disabled, onConfirm: handleConfirm, onCancel: handleClose, confirmLabel: footer?.confirm, cancelLabel: footer?.cancel, hideConfirm: footer?.hideConfirm, hideCancel: footer?.hideCancel, context: userDefinedContext })))] }));
+});
+
+const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
+    const { ForegroundComponent } = useConfigurationContext();
+    const { context: userDefinedContext } = useUserDefinedContext();
+    const { modal, onChange, onConfirm, onClose, onDestroy } = useModal(modalId);
+    const Foreground = react.useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
+    if (!modal)
+        return null;
+    return (jsxRuntime.jsx("div", { className: css.cx(foreground, {
+            [visible]: modal.manualDestroy ? modal.alive : modal.visible,
+            [active]: modal.visible,
+        }), children: jsxRuntime.jsxs(Foreground, { id: modal.id, type: modal.type, alive: modal.alive, visible: modal.visible, initiator: modal.initiator, manualDestroy: modal.manualDestroy, closeOnBackdropClick: modal.closeOnBackdropClick, background: modal.background, onChange: onChange, onConfirm: onConfirm, onClose: onClose, onDestroy: onDestroy, onChangeOrder: onChangeOrder, context: userDefinedContext, children: [modal.type === 'alert' && (jsxRuntime.jsx(AlertInner, { modal: modal, handlers: { onConfirm } })), modal.type === 'confirm' && (jsxRuntime.jsx(ConfirmInner, { modal: modal, handlers: { onConfirm, onClose } })), modal.type === 'prompt' && (jsxRuntime.jsx(PromptInner, { modal: modal, handlers: { onChange, onConfirm, onClose } }))] }) }));
+};
+
+const useSubscribeModal = (modal) => {
+    const [version, update] = hook.useVersion();
+    react.useEffect(() => {
+        if (!modal)
+            return;
+        const unsubscribe = modal.subscribe(update);
+        return unsubscribe;
+    }, [modal, update]);
+    return version;
+};
+
+const presenter = css.css `
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  overflow: hidden;
+`;
+
+const { increment } = lib.counterFactory(1);
+const Presenter = react.memo(({ modalId }) => {
+    const ref = react.useRef(null);
+    const { modal } = useModal(modalId);
+    useSubscribeModal(modal);
+    const handleChangeOrder = hook.useHandle(() => {
+        if (ref.current) {
+            ref.current.style.zIndex = `${increment()}`;
+        }
+    });
+    return (jsxRuntime.jsxs("div", { ref: ref, className: presenter, children: [jsxRuntime.jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsxRuntime.jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
+});
+
+const anchor = css.css `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1000;
+  transition: background-color ease-in-out;
+`;
+
+const AnchorInner = () => {
+    const [version, update] = hook.useVersion();
+    const { modalIds, setUpdater } = useModalManagerContext();
+    react.useEffect(() => {
+        setUpdater(update);
+    }, [setUpdater, update]);
+    const options = useConfigurationOptions();
+    const dimmed = useActiveModalCount(validateDimmable, version);
+    return (jsxRuntime.jsx("div", { className: anchor, style: {
+            transitionDuration: options.duration,
+            backgroundColor: dimmed ? options.backdrop : 'transparent',
+        }, children: array.map(modalIds, (id) => (jsxRuntime.jsx(Presenter, { modalId: id }, id))) }));
+};
+const validateDimmable = (modal) => modal?.visible && modal.dimmed;
+const Anchor = react.memo(hoc.withErrorBoundary(AnchorInner));
+
+const bootstrap = ({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, usePathname, options, context, anchor, }) => reactDom.createPortal(jsxRuntime.jsx(UserDefinedContextProvider, { context: context, children: jsxRuntime.jsx(ConfigurationContextProvider, { ForegroundComponent: ForegroundComponent, BackgroundComponent: BackgroundComponent, TitleComponent: TitleComponent, SubtitleComponent: SubtitleComponent, ContentComponent: ContentComponent, FooterComponent: FooterComponent, options: options, children: jsxRuntime.jsx(ModalManagerContextProvider, { usePathname: usePathname, children: jsxRuntime.jsx(Anchor, {}) }) }) }), anchor);
+
+const useInitialize = () => {
+    const permitted = react.useRef(ModalManager.activate());
+    const anchorRef = react.useRef(null);
+    const [, update] = hook.useVersion();
+    const handleInitialize = react.useCallback((root) => {
+        if (permitted.current) {
+            anchorRef.current = ModalManager.anchor({ root });
+            update();
+        }
+        else
+            console.printError('ModalProvider is already initialized', [
+                'ModalProvider can only be initialized once.',
+                'Nesting ModalProvider will be ignored...',
+            ], {
+                info: 'Something is wrong with the ModalProvider initialization...',
+            });
+    }, [update]);
+    return {
+        anchorRef,
+        handleInitialize,
+    };
+};
+
+const BootstrapProvider = react.forwardRef(({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, children, }, handleRef) => {
+    const usePathname$1 = react.useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);
+    const { anchorRef, handleInitialize } = useInitialize();
+    react.useImperativeHandle(handleRef, () => ({
+        initialize: handleInitialize,
+    }), [handleInitialize]);
+    hook.useOnMount(() => {
+        if (handleRef === null)
+            handleInitialize();
+        return () => {
+            if (anchorRef.current)
+                anchorRef.current.remove();
+        };
+    });
+    return (jsxRuntime.jsxs(react.Fragment, { children: [children, anchorRef.current &&
+                bootstrap({
+                    ForegroundComponent,
+                    BackgroundComponent,
+                    TitleComponent,
+                    SubtitleComponent,
+                    ContentComponent,
+                    FooterComponent,
+                    usePathname: usePathname$1,
+                    options,
+                    context,
+                    anchor: anchorRef.current,
+                })] }));
+});
+
+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();
+    hook.useOnMount(() => {
+        if (mode === 'auto')
+            handleInitialize();
+        return () => {
+            if (anchorRef.current)
+                anchorRef.current.remove();
+        };
+    });
+    const initialize = react.useCallback((element) => {
+        if (mode === 'manual')
+            handleInitialize(element);
+    }, [mode, handleInitialize]);
+    const portal = anchorRef.current &&
+        bootstrap({
+            usePathname: usePathname$1,
+            ForegroundComponent,
+            BackgroundComponent,
+            TitleComponent,
+            SubtitleComponent,
+            ContentComponent,
+            FooterComponent,
+            options,
+            context,
+            anchor: anchorRef.current,
+        });
+    return { portal, initialize };
+};
+
+const useDestroyAfter = (modalId, duration) => {
+    const { modal, onDestroy } = useModal(modalId);
+    const tick = useSubscribeModal(modal);
+    const reference = react.useRef({
+        modal,
+        onDestroy,
+        milliseconds: filter.isString(duration)
+            ? convert.convertMsFromDuration(duration)
+            : duration,
+    });
+    react.useEffect(() => {
+        const { modal, onDestroy, milliseconds } = reference.current;
+        if (!modal || modal.visible || !modal.alive)
+            return;
+        const timer = setTimeout(() => {
+            onDestroy();
+        }, milliseconds);
+        return () => {
+            if (timer)
+                clearTimeout(timer);
+        };
+    }, [tick]);
+};
+
+const useModalAnimation = (visible, handler) => {
+    const handlerRef = react.useRef(handler);
+    handlerRef.current = handler;
+    react.useLayoutEffect(() => {
+        if (!handlerRef.current)
+            return;
+        let frame;
+        if (visible)
+            frame = requestAnimationFrame(() => handlerRef.current.onVisible?.());
+        else
+            frame = requestAnimationFrame(() => handlerRef.current.onHidden?.());
+        return () => {
+            if (frame)
+                cancelAnimationFrame(frame);
+        };
+    }, [visible]);
+};
+
+exports.ModalProvider = BootstrapProvider;
+exports.alert = alert;
+exports.confirm = confirm;
+exports.prompt = prompt;
+exports.useActiveModalCount = useActiveModalCount;
+exports.useDestroyAfter = useDestroyAfter;
+exports.useInitializeModal = useBootstrap;
+exports.useModalAnimation = useModalAnimation;
+exports.useModalBackdrop = useConfigurationBackdrop;
+exports.useModalDuration = useConfigurationDuration;
+exports.useModalOptions = useConfigurationOptions;
+exports.useSubscribeModal = useSubscribeModal;