@lerx/promise-modal 0.7.0 → 0.8.1

package/dist/app/ModalManager.d.ts

@@ -2,15 +2,14 @@ import type { Fn } from '../@aileron/declare';
 import type { Modal } from '../types';
 export declare class ModalManager {
     #private;
-    static initialize(): boolean;
     static anchor(options?: {
         tag?: string;
         prefix?: string;
         root?: HTMLElement;
     }): HTMLElement;
+    static get anchored(): boolean;
     static get prerender(): Modal[];
     static set openHandler(handler: Fn<[Modal], void>);
-    static get unanchored(): boolean;
     static defineStyleSheet(styleId: string, css: string): void;
     static applyStyleSheet(): void;
     static getHashedClassNames(styleId: string): string;

package/dist/app/constant.d.ts

@@ -1,3 +1,4 @@
 import type { Color, Duration } from '../@aileron/declare';
+export declare const DEFAULT_Z_INDEX: number;
 export declare const DEFAULT_ANIMATION_DURATION: Duration;
 export declare const DEFAULT_BACKDROP_COLOR: Color;

package/dist/bootstrap/BootstrapProvider/BootstrapProvider.d.ts

@@ -114,7 +114,7 @@ import type { BootstrapProviderHandle } from './type';
  * - All modals created within this provider share the same configuration
  * - The provider creates a portal for rendering modals outside the React tree
  */
-export declare const BootstrapProvider: import("react").ForwardRefExoticComponent<{
+export declare const BootstrapProvider: import("react").NamedExoticComponent<{
     usePathname?: import("../../@aileron/declare").Fn<[], {
         pathname: string;
     }>;

package/dist/index.cjs

@@ -13,20 +13,13 @@ 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 #initialized = false;
-    static initialize() {
-        if (ModalManager.#initialized)
-            return false;
-        return (ModalManager.#initialized = true);
-    }
     static #anchor = null;
     static #scope = `promise-modal-${lib.getRandomString(36)}`;
     static #hash = hash.polynomialHash(ModalManager.#scope);
     static anchor(options) {
-        if (ModalManager.#anchor)
+        if (ModalManager.#anchor !== null)
             return ModalManager.#anchor;
         const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
         const node = document.createElement(tag);
@@ -36,6 +29,9 @@ class ModalManager {
         ModalManager.#anchor = node;
         return node;
     }
+    static get anchored() {
+        return ModalManager.#anchor !== null;
+    }
     static #prerenderList = [];
     static get prerender() {
         return ModalManager.#prerenderList;
@@ -45,9 +41,6 @@ class ModalManager {
         ModalManager.#openHandler = handler;
         ModalManager.#prerenderList = [];
     }
-    static get unanchored() {
-        return !ModalManager.#anchor;
-    }
     static #styleManager = styleManager.styleManagerFactory(ModalManager.#scope);
     static #styleSheetDefinition = new Map();
     static defineStyleSheet(styleId, css) {
@@ -61,7 +54,6 @@ class ModalManager {
         return `${styleId}-${ModalManager.#hash}`;
     }
     static reset() {
-        ModalManager.#initialized = false;
         ModalManager.#anchor = null;
         ModalManager.#prerenderList = [];
         ModalManager.#openHandler = (modal) => ModalManager.#prerenderList.push(modal);
@@ -349,6 +341,7 @@ 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)';
 
@@ -420,6 +413,7 @@ const FallbackForegroundFrame = react.forwardRef(({ id, onChangeOrder, children
 const ConfigurationContext = react.createContext({});
 
 const DEFAULT_OPTIONS = {
+    zIndex: DEFAULT_Z_INDEX,
     duration: DEFAULT_ANIMATION_DURATION,
     backdrop: DEFAULT_BACKDROP_COLOR,
     closeOnBackdropClick: true,
@@ -811,21 +805,25 @@ const style$1 = `
 .${presenter} {
   position: fixed;
   inset: 0;
+  z-index: var(--z-index);
   pointer-events: none;
   overflow: hidden;
 `;
 ModalManager.defineStyleSheet('presenter', style$1);
 
-const { increment } = lib.counterFactory(1);
+const { getValue, increment } = lib.counterFactory(1);
 const Presenter = react.memo(({ modalId }) => {
     const ref = react.useRef(null);
+    const options = useConfigurationOptions();
     const { modal } = useModal(modalId);
     useSubscribeModal(modal);
-    const handleChangeOrder = hook.useHandle(() => {
-        if (ref.current) {
-            ref.current.style.zIndex = `${increment()}`;
-        }
-    });
+    const handleChangeOrder = react.useCallback(() => {
+        if (ref.current === null)
+            return;
+        if (ref.current.style.zIndex === '' + options.zIndex + getValue())
+            return;
+        ref.current.style.zIndex = '' + options.zIndex + increment();
+    }, [options.zIndex]);
     return (jsxRuntime.jsxs("div", { ref: ref, className: presenter, children: [jsxRuntime.jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsxRuntime.jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
 });
 
@@ -838,7 +836,7 @@ const style = `
    position: fixed;
    inset: 0;
    pointer-events: none;
-   z-index: 1000;
+   z-index: var(--z-index);
    transition: background-color ease-in-out;
 }`;
 ModalManager.defineStyleSheet('anchor', style);
@@ -852,6 +850,7 @@ const AnchorInner = () => {
     const options = useConfigurationOptions();
     const dimmed = useActiveModalCount(validateDimmable, version);
     return (jsxRuntime.jsx("div", { className: anchor, style: {
+            '--z-index': options.zIndex,
             transitionDuration: options.duration,
             backgroundColor: dimmed ? options.backdrop : 'transparent',
         }, children: array.map(modalIds, (id) => (jsxRuntime.jsx(Presenter, { modalId: id }, id))) }));
@@ -862,42 +861,33 @@ 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.initialize());
-    const anchorRef = react.useRef(null);
     const [, update] = hook.useVersion();
-    const handleInitialize = react.useCallback((root) => {
-        if (permitted.current) {
-            anchorRef.current = ModalManager.anchor({ root });
-            ModalManager.applyStyleSheet();
-            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]);
-    const handleReset = react.useCallback(() => {
-        ModalManager.reset();
-    }, []);
+    const anchorRef = react.useRef(null);
+    const handleInitialize = react.useRef((root) => {
+        if (ModalManager.anchored)
+            return;
+        anchorRef.current = ModalManager.anchor({ root });
+        ModalManager.applyStyleSheet();
+        update();
+    });
+    const handleReset = react.useRef(() => ModalManager.reset());
     return {
         anchorRef,
-        handleInitialize,
-        handleReset,
+        handleInitialize: handleInitialize.current,
+        handleReset: handleReset.current,
     };
 };
 
-const BootstrapProvider = react.forwardRef(({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, children, }, handleRef) => {
+const BootstrapProvider = react.memo(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, handleReset } = useInitialize();
     react.useImperativeHandle(handleRef, () => ({
         initialize: handleInitialize,
     }), [handleInitialize]);
     hook.useOnMount(() => {
-        if (handleRef === null)
-            handleInitialize();
+        if (handleRef !== null)
+            return;
+        handleInitialize();
         return () => {
             if (anchorRef.current)
                 anchorRef.current.remove();
@@ -917,7 +907,7 @@ const BootstrapProvider = react.forwardRef(({ usePathname: useExternalPathname,
                     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]);

package/dist/index.mjs

@@ -11,20 +11,13 @@ 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';
-import { printError } from '@winglet/common-utils/console';
 
 class ModalManager {
-    static #initialized = false;
-    static initialize() {
-        if (ModalManager.#initialized)
-            return false;
-        return (ModalManager.#initialized = true);
-    }
     static #anchor = null;
     static #scope = `promise-modal-${getRandomString(36)}`;
     static #hash = polynomialHash(ModalManager.#scope);
     static anchor(options) {
-        if (ModalManager.#anchor)
+        if (ModalManager.#anchor !== null)
             return ModalManager.#anchor;
         const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
         const node = document.createElement(tag);
@@ -34,6 +27,9 @@ class ModalManager {
         ModalManager.#anchor = node;
         return node;
     }
+    static get anchored() {
+        return ModalManager.#anchor !== null;
+    }
     static #prerenderList = [];
     static get prerender() {
         return ModalManager.#prerenderList;
@@ -43,9 +39,6 @@ class ModalManager {
         ModalManager.#openHandler = handler;
         ModalManager.#prerenderList = [];
     }
-    static get unanchored() {
-        return !ModalManager.#anchor;
-    }
     static #styleManager = styleManagerFactory(ModalManager.#scope);
     static #styleSheetDefinition = new Map();
     static defineStyleSheet(styleId, css) {
@@ -59,7 +52,6 @@ class ModalManager {
         return `${styleId}-${ModalManager.#hash}`;
     }
     static reset() {
-        ModalManager.#initialized = false;
         ModalManager.#anchor = null;
         ModalManager.#prerenderList = [];
         ModalManager.#openHandler = (modal) => ModalManager.#prerenderList.push(modal);
@@ -347,6 +339,7 @@ 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)';
 
@@ -418,6 +411,7 @@ const FallbackForegroundFrame = forwardRef(({ id, onChangeOrder, children }, ref
 const ConfigurationContext = createContext({});
 
 const DEFAULT_OPTIONS = {
+    zIndex: DEFAULT_Z_INDEX,
     duration: DEFAULT_ANIMATION_DURATION,
     backdrop: DEFAULT_BACKDROP_COLOR,
     closeOnBackdropClick: true,
@@ -809,21 +803,25 @@ const style$1 = `
 .${presenter} {
   position: fixed;
   inset: 0;
+  z-index: var(--z-index);
   pointer-events: none;
   overflow: hidden;
 `;
 ModalManager.defineStyleSheet('presenter', style$1);
 
-const { increment } = counterFactory(1);
+const { getValue, increment } = counterFactory(1);
 const Presenter = memo(({ modalId }) => {
     const ref = useRef(null);
+    const options = useConfigurationOptions();
     const { modal } = useModal(modalId);
     useSubscribeModal(modal);
-    const handleChangeOrder = useHandle(() => {
-        if (ref.current) {
-            ref.current.style.zIndex = `${increment()}`;
-        }
-    });
+    const handleChangeOrder = useCallback(() => {
+        if (ref.current === null)
+            return;
+        if (ref.current.style.zIndex === '' + options.zIndex + getValue())
+            return;
+        ref.current.style.zIndex = '' + options.zIndex + increment();
+    }, [options.zIndex]);
     return (jsxs("div", { ref: ref, className: presenter, children: [jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
 });
 
@@ -836,7 +834,7 @@ const style = `
    position: fixed;
    inset: 0;
    pointer-events: none;
-   z-index: 1000;
+   z-index: var(--z-index);
    transition: background-color ease-in-out;
 }`;
 ModalManager.defineStyleSheet('anchor', style);
@@ -850,6 +848,7 @@ const AnchorInner = () => {
     const options = useConfigurationOptions();
     const dimmed = useActiveModalCount(validateDimmable, version);
     return (jsx("div", { className: anchor, style: {
+            '--z-index': options.zIndex,
             transitionDuration: options.duration,
             backgroundColor: dimmed ? options.backdrop : 'transparent',
         }, children: map(modalIds, (id) => (jsx(Presenter, { modalId: id }, id))) }));
@@ -860,42 +859,33 @@ const Anchor = memo(withErrorBoundary(AnchorInner));
 const bootstrap = ({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, usePathname, options, context, anchor, }) => createPortal(jsx(UserDefinedContextProvider, { context: context, children: jsx(ConfigurationContextProvider, { ForegroundComponent: ForegroundComponent, BackgroundComponent: BackgroundComponent, TitleComponent: TitleComponent, SubtitleComponent: SubtitleComponent, ContentComponent: ContentComponent, FooterComponent: FooterComponent, options: options, children: jsx(ModalManagerContextProvider, { usePathname: usePathname, children: jsx(Anchor, {}) }) }) }), anchor);
 
 const useInitialize = () => {
-    const permitted = useRef(ModalManager.initialize());
-    const anchorRef = useRef(null);
     const [, update] = useVersion();
-    const handleInitialize = useCallback((root) => {
-        if (permitted.current) {
-            anchorRef.current = ModalManager.anchor({ root });
-            ModalManager.applyStyleSheet();
-            update();
-        }
-        else
-            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]);
-    const handleReset = useCallback(() => {
-        ModalManager.reset();
-    }, []);
+    const anchorRef = useRef(null);
+    const handleInitialize = useRef((root) => {
+        if (ModalManager.anchored)
+            return;
+        anchorRef.current = ModalManager.anchor({ root });
+        ModalManager.applyStyleSheet();
+        update();
+    });
+    const handleReset = useRef(() => ModalManager.reset());
     return {
         anchorRef,
-        handleInitialize,
-        handleReset,
+        handleInitialize: handleInitialize.current,
+        handleReset: handleReset.current,
     };
 };
 
-const BootstrapProvider = forwardRef(({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, children, }, handleRef) => {
+const BootstrapProvider = memo(forwardRef(({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, children, }, handleRef) => {
     const usePathname$1 = useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);
     const { anchorRef, handleInitialize, handleReset } = useInitialize();
     useImperativeHandle(handleRef, () => ({
         initialize: handleInitialize,
     }), [handleInitialize]);
     useOnMount(() => {
-        if (handleRef === null)
-            handleInitialize();
+        if (handleRef !== null)
+            return;
+        handleInitialize();
         return () => {
             if (anchorRef.current)
                 anchorRef.current.remove();
@@ -915,7 +905,7 @@ const BootstrapProvider = forwardRef(({ usePathname: useExternalPathname, Foregr
                     context,
                     anchor: anchorRef.current,
                 })] }));
-});
+}));
 
 const useBootstrap = ({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, mode = 'auto', } = {}) => {
     const usePathname$1 = useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);

package/dist/types/option.d.ts

@@ -1,5 +1,7 @@
 import type { Color, Duration } from '../@aileron/declare';
 export interface ModalOptions {
+    /** Modal z-index */
+    zIndex?: number;
     /** Modal transition time(ms, s) */
     duration?: Duration;
     /** Modal backdrop color */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerx/promise-modal",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Universal React modal utility that can be used outside React components with promise-based results for alert, confirm, and prompt modals",
   "keywords": [
     "react",
@@ -64,9 +64,9 @@
     "version:patch": "yarn version patch"
   },
   "dependencies": {
-    "@winglet/common-utils": "^0.7.0",
-    "@winglet/react-utils": "^0.7.0",
-    "@winglet/style-utils": "^0.7.0"
+    "@winglet/common-utils": "^0.8.1",
+    "@winglet/react-utils": "^0.8.0",
+    "@winglet/style-utils": "^0.8.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",