@lerx/promise-modal 0.2.1 → 0.2.3

package/dist/app/ModalManager.d.ts

@@ -11,6 +11,9 @@ export declare class ModalManager {
     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;
     static reset(): void;
     static open(modal: Modal): void;
 }

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

@@ -1,4 +1,5 @@
 export declare const useInitialize: () => {
     readonly anchorRef: import("react").RefObject<HTMLElement | null>;
     readonly handleInitialize: (root?: HTMLElement) => void;
+    readonly handleReset: () => void;
 };

package/dist/core/handle/alert.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { AlertContentProps, AlertFooterRender, BackgroundComponent, FooterOptions, ForegroundComponent, ModalBackground } from '../../types';
 interface AlertProps<B> {
+    group?: string;
     subtype?: 'info' | 'success' | 'warning' | 'error';
     title?: ReactNode;
     subtitle?: ReactNode;
@@ -13,5 +14,5 @@ interface AlertProps<B> {
     ForegroundComponent?: ForegroundComponent;
     BackgroundComponent?: BackgroundComponent;
 }
-export declare const alert: <B = any>({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }: AlertProps<B>) => Promise<void>;
+export declare const alert: <B = any>({ group, subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }: AlertProps<B>) => Promise<void>;
 export {};

package/dist/core/handle/confirm.d.ts

@@ -1,6 +1,7 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { BackgroundComponent, ConfirmContentProps, ConfirmFooterRender, FooterOptions, ForegroundComponent, ModalBackground } from '../../types';
 interface ConfirmProps<B> {
+    group?: string;
     subtype?: 'info' | 'success' | 'warning' | 'error';
     title?: ReactNode;
     subtitle?: ReactNode;
@@ -13,5 +14,5 @@ interface ConfirmProps<B> {
     ForegroundComponent?: ForegroundComponent;
     BackgroundComponent?: BackgroundComponent;
 }
-export declare const confirm: <B = any>({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }: ConfirmProps<B>) => Promise<boolean>;
+export declare const confirm: <B = any>({ group, subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }: ConfirmProps<B>) => Promise<boolean>;
 export {};

package/dist/core/handle/prompt.d.ts

@@ -1,11 +1,12 @@
 import type { ComponentType, ReactNode } from 'react';
 import type { BackgroundComponent, FooterOptions, ForegroundComponent, ModalBackground, PromptContentProps, PromptFooterRender, PromptInputProps } from '../../types';
 interface PromptProps<T, B = any> {
+    group?: string;
     title?: ReactNode;
     subtitle?: ReactNode;
     content?: ReactNode | ComponentType<PromptContentProps>;
-    Input: (props: PromptInputProps<T>) => ReactNode;
     defaultValue?: T;
+    Input: (props: PromptInputProps<T>) => ReactNode;
     disabled?: (value: T) => boolean;
     returnOnCancel?: boolean;
     background?: ModalBackground<B>;
@@ -16,5 +17,5 @@ interface PromptProps<T, B = any> {
     ForegroundComponent?: ForegroundComponent;
     BackgroundComponent?: BackgroundComponent;
 }
-export declare const prompt: <T, B = any>({ defaultValue, title, subtitle, content, Input, disabled, returnOnCancel, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }: PromptProps<T, B>) => Promise<T>;
+export declare const prompt: <T, B = any>({ group, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }: PromptProps<T, B>) => Promise<T>;
 export {};

package/dist/core/node/ModalNode/AbstractNode.d.ts

@@ -5,6 +5,7 @@ type AbstractNodeProps<T, B> = BaseModal<T, B> & ManagedEntity;
 export declare abstract class AbstractNode<T, B> {
     #private;
     readonly id: number;
+    readonly group?: string;
     readonly initiator: string;
     readonly title?: ReactNode;
     readonly subtitle?: ReactNode;
@@ -16,7 +17,7 @@ export declare abstract class AbstractNode<T, B> {
     readonly BackgroundComponent?: BackgroundComponent;
     get alive(): boolean;
     get visible(): boolean;
-    constructor({ id, initiator, title, subtitle, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: AbstractNodeProps<T, B>);
+    constructor({ id, initiator, group, title, subtitle, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: AbstractNodeProps<T, B>);
     subscribe(listener: Fn): () => void;
     publish(): void;
     protected resolve(result: T | null): void;

package/dist/core/node/ModalNode/AlertNode.d.ts

@@ -7,7 +7,7 @@ export declare class AlertNode<B> extends AbstractNode<null, B> {
     readonly subtype?: 'info' | 'success' | 'warning' | 'error';
     readonly content?: ReactNode | ComponentType<AlertContentProps>;
     readonly footer?: AlertFooterRender | Pick<FooterOptions, 'confirm' | 'hideConfirm'> | false;
-    constructor({ id, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: AlertNodeProps<B>);
+    constructor({ id, group, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: AlertNodeProps<B>);
     onClose(): void;
     onConfirm(): void;
 }

package/dist/core/node/ModalNode/ConfirmNode.d.ts

@@ -7,7 +7,7 @@ export declare class ConfirmNode<B> extends AbstractNode<boolean, B> {
     readonly subtype?: 'info' | 'success' | 'warning' | 'error';
     readonly content?: ReactNode | ComponentType<ConfirmContentProps>;
     readonly footer?: ConfirmFooterRender | FooterOptions | false;
-    constructor({ id, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: ConfirmNodeProps<B>);
+    constructor({ id, group, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: ConfirmNodeProps<B>);
     onClose(): void;
     onConfirm(): void;
 }

package/dist/core/node/ModalNode/PromptNode.d.ts

@@ -11,7 +11,7 @@ export declare class PromptNode<T, B> extends AbstractNode<T, B> {
     readonly disabled?: (value: T) => boolean;
     readonly returnOnCancel?: boolean;
     readonly footer?: PromptFooterRender<T> | FooterOptions | false;
-    constructor({ id, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: PromptNodeProps<T, B>);
+    constructor({ id, group, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: PromptNodeProps<T, B>);
     onChange(value: T): void;
     onConfirm(): void;
     onClose(): void;

package/dist/hooks/useActiveModalCount.d.ts

@@ -1,3 +1,3 @@
 import type { Fn } from '../@aileron/declare';
 import type { ModalNode } from '../core';
-export declare const useActiveModalCount: (validate?: Fn<[ModalNode?], boolean | undefined>, refreshKey?: string | number) => number;
+export declare const useActiveModalCount: (validate?: Fn<[node?: ModalNode], boolean | undefined>, refreshKey?: string | number) => number;

package/dist/index.cjs

@@ -4,11 +4,14 @@ 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 hash = require('@winglet/common-utils/hash');
 const lib = require('@winglet/common-utils/lib');
-const css = require('@emotion/css');
+const compressCss = require('@winglet/style-utils/compressCss');
+const styleManager = require('@winglet/style-utils/styleManager');
 const reactDom = require('react-dom');
 const array = require('@winglet/common-utils/array');
 const hoc = require('@winglet/react-utils/hoc');
+const styleUtils = require('@winglet/style-utils');
 const filter = require('@winglet/common-utils/filter');
 const render = require('@winglet/react-utils/render');
 const console = require('@winglet/common-utils/console');
@@ -21,15 +24,15 @@ class ModalManager {
         return (ModalManager.#active = true);
     }
     static #anchor = null;
+    static #scope = `promise-modal-${lib.getRandomString(36)}`;
+    static #hash = hash.polynomialHash(ModalManager.#scope);
     static anchor(options) {
-        if (ModalManager.#anchor) {
-            const anchor = document.getElementById(ModalManager.#anchor.id);
-            if (anchor)
-                return anchor;
-        }
+        if (ModalManager.#anchor)
+            return ModalManager.#anchor;
         const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
         const node = document.createElement(tag);
-        node.setAttribute('id', `${prefix}-${lib.getRandomString(36)}`);
+        node.id = `${prefix}-${lib.getRandomString(36)}`;
+        node.className = ModalManager.#scope;
         root.appendChild(node);
         ModalManager.#anchor = node;
         return node;
@@ -46,22 +49,36 @@ class ModalManager {
     static get unanchored() {
         return !ModalManager.#anchor;
     }
+    static #styleManager = styleManager.styleManagerFactory(ModalManager.#scope);
+    static #styleSheetDefinition = new Map();
+    static defineStyleSheet(styleId, css) {
+        ModalManager.#styleSheetDefinition.set(styleId, compressCss.compressCss(css));
+    }
+    static applyStyleSheet() {
+        for (const [styleId, css] of ModalManager.#styleSheetDefinition)
+            ModalManager.#styleManager(styleId, css, true);
+    }
+    static getHashedClassNames(styleId) {
+        return `${styleId}-${ModalManager.#hash}`;
+    }
     static reset() {
         ModalManager.#active = false;
         ModalManager.#anchor = null;
         ModalManager.#prerenderList = [];
         ModalManager.#openHandler = (modal) => ModalManager.#prerenderList.push(modal);
+        styleManager.destroyScope(ModalManager.#scope);
     }
     static open(modal) {
         ModalManager.#openHandler(modal);
     }
 }
 
-const alert = ({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+const alert = ({ group, subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
     return new Promise((resolve, reject) => {
         try {
             ModalManager.open({
                 type: 'alert',
+                group,
                 subtype,
                 resolve: () => resolve(),
                 title,
@@ -82,11 +99,12 @@ const alert = ({ subtype, title, subtitle, content, background, footer, dimmed,
     });
 };
 
-const confirm = ({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+const confirm = ({ group, subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
     return new Promise((resolve, reject) => {
         try {
             ModalManager.open({
                 type: 'confirm',
+                group,
                 subtype,
                 resolve: (result) => resolve(result ?? false),
                 title,
@@ -107,11 +125,12 @@ const confirm = ({ subtype, title, subtitle, content, background, footer, dimmed
     });
 };
 
-const prompt = ({ defaultValue, title, subtitle, content, Input, disabled, returnOnCancel, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+const prompt = ({ group, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
     return new Promise((resolve, reject) => {
         try {
             ModalManager.open({
                 type: 'prompt',
+                group,
                 resolve: (result) => resolve(result),
                 title,
                 subtitle,
@@ -137,6 +156,7 @@ const prompt = ({ defaultValue, title, subtitle, content, Input, disabled, retur
 
 class AbstractNode {
     id;
+    group;
     initiator;
     title;
     subtitle;
@@ -156,8 +176,9 @@ class AbstractNode {
     }
     #resolve;
     #listeners = new Set();
-    constructor({ id, initiator, title, subtitle, background, dimmed = true, manualDestroy = false, closeOnBackdropClick = true, resolve, ForegroundComponent, BackgroundComponent, }) {
+    constructor({ id, initiator, group, title, subtitle, background, dimmed = true, manualDestroy = false, closeOnBackdropClick = true, resolve, ForegroundComponent, BackgroundComponent, }) {
         this.id = id;
+        this.group = group;
         this.initiator = initiator;
         this.title = title;
         this.subtitle = subtitle;
@@ -209,9 +230,10 @@ class AlertNode extends AbstractNode {
     subtype;
     content;
     footer;
-    constructor({ id, 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, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
+            group,
             initiator,
             title,
             subtitle,
@@ -241,9 +263,10 @@ class ConfirmNode extends AbstractNode {
     subtype;
     content;
     footer;
-    constructor({ id, 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, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
+            group,
             initiator,
             title,
             subtitle,
@@ -277,9 +300,10 @@ class PromptNode extends AbstractNode {
     returnOnCancel;
     footer;
     #value;
-    constructor({ id, 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, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
+            group,
             initiator,
             title,
             subtitle,
@@ -329,30 +353,16 @@ const nodeFactory = (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 });
+    return jsxRuntime.jsx("h2", { style: { margin: 'unset' }, children: children });
 };
 
 const FallbackSubtitle = ({ children }) => {
-    return jsxRuntime.jsx("h3", { className: fallback, children: children });
+    return jsxRuntime.jsx("h3", { style: { margin: 'unset' }, children: children });
 };
 
 const FallbackContent = ({ children }) => {
-    return jsxRuntime.jsx("div", { className: fallback, children: children });
+    return jsxRuntime.jsx("div", { style: { margin: 'unset' }, children: children });
 };
 
 const FallbackFooter = ({ confirmLabel, hideConfirm = false, cancelLabel, hideCancel = false, disabled, onConfirm, onCancel, }) => {
@@ -372,7 +382,8 @@ const useActiveModalCount = (validate = defaultValidate, refreshKey = 0) => {
     const { modalIds, getModalNode } = useModalManagerContext();
     return react.useMemo(() => {
         let count = 0;
-        for (const id of modalIds) {
+        for (let index = 0; index < modalIds.length; index++) {
+            const id = modalIds[index];
             if (validate(getModalNode(id)))
                 count++;
         }
@@ -392,10 +403,18 @@ const FallbackForegroundFrame = react.forwardRef(({ id, onChangeOrder, children
         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: {
+    return (jsxRuntime.jsx("div", { ref: ref, onClick: onChangeOrder, style: {
             marginBottom: `calc(25vh + ${level}px)`,
             marginLeft: `${level}px`,
             transform: `translate(${offset}px, ${offset}px)`,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'white',
+            padding: '20px 80px',
+            gap: '10px',
+            border: '1px solid black',
         }, children: children }));
 });
 
@@ -497,9 +516,6 @@ const ModalManagerContextProvider = react.memo(({ usePathname, children, }) => {
                 return [...aliveIds, modal.id];
             });
         };
-        return () => {
-            ModalManager.reset();
-        };
     });
     react.useLayoutEffect(() => {
         for (const id of modalIdsRef.current) {
@@ -622,24 +638,33 @@ const usePathname = () => {
     return { pathname };
 };
 
-const background = css.css `
+const background = ModalManager.getHashedClassNames('background');
+const active$1 = ModalManager.getHashedClassNames('background-active');
+const visible$1 = ModalManager.getHashedClassNames('background-visible');
+const style$3 = `
+.${background} {
   display: none;
   position: fixed;
   inset: 0;
   z-index: -999;
   pointer-events: none;
-  > * {
-    pointer-events: none;
-  }
-`;
-const active$1 = css.css `
+}
+
+.${background} > * {
+  pointer-events: none;
+}
+
+.${background}.${active$1} {
   pointer-events: all;
-`;
-const visible$1 = css.css `
+}
+
+.${background}.${visible$1} {
   display: flex;
   align-items: center;
   justify-content: center;
+}
 `;
+ModalManager.defineStyleSheet('background', style$3);
 
 const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     const { BackgroundComponent } = useConfigurationContext();
@@ -653,30 +678,12 @@ const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     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,
+    return (jsxRuntime.jsx("div", { className: styleUtils.cx(background, {
             [active$1]: modal.closeOnBackdropClick && modal.visible,
+            [visible$1]: modal.manualDestroy ? modal.alive : 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();
@@ -754,6 +761,30 @@ const PromptInner = react.memo(({ modal, handlers }) => {
                 })) : (jsxRuntime.jsx(FooterComponent, { disabled: disabled, onConfirm: handleConfirm, onCancel: handleClose, confirmLabel: footer?.confirm, cancelLabel: footer?.cancel, hideConfirm: footer?.hideConfirm, hideCancel: footer?.hideCancel, context: userDefinedContext })))] }));
 });
 
+const foreground = ModalManager.getHashedClassNames('foreground');
+const active = ModalManager.getHashedClassNames('foreground-active');
+const visible = ModalManager.getHashedClassNames('foreground-visible');
+const style$2 = `
+.${foreground} {
+  pointer-events: none;
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+}
+
+.${foreground}.${active} > * {
+  pointer-events: all;
+}
+
+.${foreground}.${visible} {
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+}
+`;
+ModalManager.defineStyleSheet('foreground', style$2);
+
 const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
     const { ForegroundComponent } = useConfigurationContext();
     const { context: userDefinedContext } = useUserDefinedContext();
@@ -761,9 +792,9 @@ const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
     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,
+    return (jsxRuntime.jsx("div", { className: styleUtils.cx(foreground, {
             [active]: modal.visible,
+            [visible]: modal.manualDestroy ? modal.alive : 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 } }))] }) }));
 };
 
@@ -778,12 +809,15 @@ const useSubscribeModal = (modal) => {
     return version;
 };
 
-const presenter = css.css `
+const presenter = ModalManager.getHashedClassNames('presenter');
+const style$1 = `
+.${presenter} {
   position: fixed;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
 `;
+ModalManager.defineStyleSheet('presenter', style$1);
 
 const { increment } = lib.counterFactory(1);
 const Presenter = react.memo(({ modalId }) => {
@@ -798,16 +832,19 @@ const Presenter = react.memo(({ modalId }) => {
     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 anchor = ModalManager.getHashedClassNames('anchor');
+const style = `
+.${anchor} {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   position: fixed;
+   inset: 0;
+   pointer-events: none;
+   z-index: 1000;
+   transition: background-color ease-in-out;
+}`;
+ModalManager.defineStyleSheet('anchor', style);
 
 const AnchorInner = () => {
     const [version, update] = hook.useVersion();
@@ -834,6 +871,7 @@ const useInitialize = () => {
     const handleInitialize = react.useCallback((root) => {
         if (permitted.current) {
             anchorRef.current = ModalManager.anchor({ root });
+            ModalManager.applyStyleSheet();
             update();
         }
         else
@@ -844,15 +882,19 @@ const useInitialize = () => {
                 info: 'Something is wrong with the ModalProvider initialization...',
             });
     }, [update]);
+    const handleReset = react.useCallback(() => {
+        ModalManager.reset();
+    }, []);
     return {
         anchorRef,
         handleInitialize,
+        handleReset,
     };
 };
 
 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();
+    const { anchorRef, handleInitialize, handleReset } = useInitialize();
     react.useImperativeHandle(handleRef, () => ({
         initialize: handleInitialize,
     }), [handleInitialize]);
@@ -862,6 +904,7 @@ const BootstrapProvider = react.forwardRef(({ usePathname: useExternalPathname,
         return () => {
             if (anchorRef.current)
                 anchorRef.current.remove();
+            handleReset();
         };
     });
     return (jsxRuntime.jsxs(react.Fragment, { children: [children, anchorRef.current &&

package/dist/index.mjs

@@ -2,11 +2,14 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, useContext, useMemo, forwardRef, memo, useRef, useState, useLayoutEffect, useCallback, Fragment, useEffect, useImperativeHandle } from 'react';
 import { convertMsFromDuration } from '@winglet/common-utils/convert';
 import { useReference, useOnMountLayout, useHandle, useVersion, useOnMount } from '@winglet/react-utils/hook';
+import { polynomialHash } from '@winglet/common-utils/hash';
 import { getRandomString, counterFactory } from '@winglet/common-utils/lib';
-import { css, cx } from '@emotion/css';
+import { compressCss } from '@winglet/style-utils/compressCss';
+import { styleManagerFactory, destroyScope } from '@winglet/style-utils/styleManager';
 import { createPortal } from 'react-dom';
 import { map } from '@winglet/common-utils/array';
 import { withErrorBoundary } from '@winglet/react-utils/hoc';
+import { cx } from '@winglet/style-utils';
 import { isString, isFunction } from '@winglet/common-utils/filter';
 import { renderComponent } from '@winglet/react-utils/render';
 import { printError } from '@winglet/common-utils/console';
@@ -19,15 +22,15 @@ class ModalManager {
         return (ModalManager.#active = true);
     }
     static #anchor = null;
+    static #scope = `promise-modal-${getRandomString(36)}`;
+    static #hash = polynomialHash(ModalManager.#scope);
     static anchor(options) {
-        if (ModalManager.#anchor) {
-            const anchor = document.getElementById(ModalManager.#anchor.id);
-            if (anchor)
-                return anchor;
-        }
+        if (ModalManager.#anchor)
+            return ModalManager.#anchor;
         const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
         const node = document.createElement(tag);
-        node.setAttribute('id', `${prefix}-${getRandomString(36)}`);
+        node.id = `${prefix}-${getRandomString(36)}`;
+        node.className = ModalManager.#scope;
         root.appendChild(node);
         ModalManager.#anchor = node;
         return node;
@@ -44,22 +47,36 @@ class ModalManager {
     static get unanchored() {
         return !ModalManager.#anchor;
     }
+    static #styleManager = styleManagerFactory(ModalManager.#scope);
+    static #styleSheetDefinition = new Map();
+    static defineStyleSheet(styleId, css) {
+        ModalManager.#styleSheetDefinition.set(styleId, compressCss(css));
+    }
+    static applyStyleSheet() {
+        for (const [styleId, css] of ModalManager.#styleSheetDefinition)
+            ModalManager.#styleManager(styleId, css, true);
+    }
+    static getHashedClassNames(styleId) {
+        return `${styleId}-${ModalManager.#hash}`;
+    }
     static reset() {
         ModalManager.#active = false;
         ModalManager.#anchor = null;
         ModalManager.#prerenderList = [];
         ModalManager.#openHandler = (modal) => ModalManager.#prerenderList.push(modal);
+        destroyScope(ModalManager.#scope);
     }
     static open(modal) {
         ModalManager.#openHandler(modal);
     }
 }
 
-const alert = ({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+const alert = ({ group, subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
     return new Promise((resolve, reject) => {
         try {
             ModalManager.open({
                 type: 'alert',
+                group,
                 subtype,
                 resolve: () => resolve(),
                 title,
@@ -80,11 +97,12 @@ const alert = ({ subtype, title, subtitle, content, background, footer, dimmed,
     });
 };
 
-const confirm = ({ subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+const confirm = ({ group, subtype, title, subtitle, content, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
     return new Promise((resolve, reject) => {
         try {
             ModalManager.open({
                 type: 'confirm',
+                group,
                 subtype,
                 resolve: (result) => resolve(result ?? false),
                 title,
@@ -105,11 +123,12 @@ const confirm = ({ subtype, title, subtitle, content, background, footer, dimmed
     });
 };
 
-const prompt = ({ defaultValue, title, subtitle, content, Input, disabled, returnOnCancel, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
+const prompt = ({ group, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, background, footer, dimmed, manualDestroy, closeOnBackdropClick, ForegroundComponent, BackgroundComponent, }) => {
     return new Promise((resolve, reject) => {
         try {
             ModalManager.open({
                 type: 'prompt',
+                group,
                 resolve: (result) => resolve(result),
                 title,
                 subtitle,
@@ -135,6 +154,7 @@ const prompt = ({ defaultValue, title, subtitle, content, Input, disabled, retur
 
 class AbstractNode {
     id;
+    group;
     initiator;
     title;
     subtitle;
@@ -154,8 +174,9 @@ class AbstractNode {
     }
     #resolve;
     #listeners = new Set();
-    constructor({ id, initiator, title, subtitle, background, dimmed = true, manualDestroy = false, closeOnBackdropClick = true, resolve, ForegroundComponent, BackgroundComponent, }) {
+    constructor({ id, initiator, group, title, subtitle, background, dimmed = true, manualDestroy = false, closeOnBackdropClick = true, resolve, ForegroundComponent, BackgroundComponent, }) {
         this.id = id;
+        this.group = group;
         this.initiator = initiator;
         this.title = title;
         this.subtitle = subtitle;
@@ -207,9 +228,10 @@ class AlertNode extends AbstractNode {
     subtype;
     content;
     footer;
-    constructor({ id, 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, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
+            group,
             initiator,
             title,
             subtitle,
@@ -239,9 +261,10 @@ class ConfirmNode extends AbstractNode {
     subtype;
     content;
     footer;
-    constructor({ id, 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, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
+            group,
             initiator,
             title,
             subtitle,
@@ -275,9 +298,10 @@ class PromptNode extends AbstractNode {
     returnOnCancel;
     footer;
     #value;
-    constructor({ id, 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, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
+            group,
             initiator,
             title,
             subtitle,
@@ -327,30 +351,16 @@ const nodeFactory = (modal) => {
 const DEFAULT_ANIMATION_DURATION = '300ms';
 const DEFAULT_BACKDROP_COLOR = 'rgba(0, 0, 0, 0.5)';
 
-const fallback = css `
-  margin: unset;
-`;
-const frame = 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 jsx("h2", { className: fallback, children: children });
+    return jsx("h2", { style: { margin: 'unset' }, children: children });
 };
 
 const FallbackSubtitle = ({ children }) => {
-    return jsx("h3", { className: fallback, children: children });
+    return jsx("h3", { style: { margin: 'unset' }, children: children });
 };
 
 const FallbackContent = ({ children }) => {
-    return jsx("div", { className: fallback, children: children });
+    return jsx("div", { style: { margin: 'unset' }, children: children });
 };
 
 const FallbackFooter = ({ confirmLabel, hideConfirm = false, cancelLabel, hideCancel = false, disabled, onConfirm, onCancel, }) => {
@@ -370,7 +380,8 @@ const useActiveModalCount = (validate = defaultValidate, refreshKey = 0) => {
     const { modalIds, getModalNode } = useModalManagerContext();
     return useMemo(() => {
         let count = 0;
-        for (const id of modalIds) {
+        for (let index = 0; index < modalIds.length; index++) {
+            const id = modalIds[index];
             if (validate(getModalNode(id)))
                 count++;
         }
@@ -390,10 +401,18 @@ const FallbackForegroundFrame = forwardRef(({ id, onChangeOrder, children }, ref
         const offset = stacked ? (id % MAX_MODAL_COUNT) * 35 : 0;
         return [level, offset];
     }, [activeCount, id]);
-    return (jsx("div", { ref: ref, className: frame, onClick: onChangeOrder, style: {
+    return (jsx("div", { ref: ref, onClick: onChangeOrder, style: {
             marginBottom: `calc(25vh + ${level}px)`,
             marginLeft: `${level}px`,
             transform: `translate(${offset}px, ${offset}px)`,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: 'white',
+            padding: '20px 80px',
+            gap: '10px',
+            border: '1px solid black',
         }, children: children }));
 });
 
@@ -495,9 +514,6 @@ const ModalManagerContextProvider = memo(({ usePathname, children, }) => {
                 return [...aliveIds, modal.id];
             });
         };
-        return () => {
-            ModalManager.reset();
-        };
     });
     useLayoutEffect(() => {
         for (const id of modalIdsRef.current) {
@@ -620,24 +636,33 @@ const usePathname = () => {
     return { pathname };
 };
 
-const background = css `
+const background = ModalManager.getHashedClassNames('background');
+const active$1 = ModalManager.getHashedClassNames('background-active');
+const visible$1 = ModalManager.getHashedClassNames('background-visible');
+const style$3 = `
+.${background} {
   display: none;
   position: fixed;
   inset: 0;
   z-index: -999;
   pointer-events: none;
-  > * {
-    pointer-events: none;
-  }
-`;
-const active$1 = css `
+}
+
+.${background} > * {
+  pointer-events: none;
+}
+
+.${background}.${active$1} {
   pointer-events: all;
-`;
-const visible$1 = css `
+}
+
+.${background}.${visible$1} {
   display: flex;
   align-items: center;
   justify-content: center;
+}
 `;
+ModalManager.defineStyleSheet('background', style$3);
 
 const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     const { BackgroundComponent } = useConfigurationContext();
@@ -652,29 +677,11 @@ const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     if (!modal)
         return null;
     return (jsx("div", { className: cx(background, {
-            [visible$1]: modal.manualDestroy ? modal.alive : modal.visible,
             [active$1]: modal.closeOnBackdropClick && modal.visible,
+            [visible$1]: modal.manualDestroy ? modal.alive : modal.visible,
         }), onClick: handleClose, children: Background && (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 `
-  pointer-events: none;
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 1;
-`;
-const active = css `
-  > * {
-    pointer-events: all;
-  }
-`;
-const visible = css `
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-`;
-
 const AlertInner = memo(({ modal, handlers }) => {
     const { title, subtitle, content, footer } = useMemo(() => modal, [modal]);
     const { context: userDefinedContext } = useUserDefinedContext();
@@ -752,6 +759,30 @@ const PromptInner = memo(({ modal, handlers }) => {
                 })) : (jsx(FooterComponent, { disabled: disabled, onConfirm: handleConfirm, onCancel: handleClose, confirmLabel: footer?.confirm, cancelLabel: footer?.cancel, hideConfirm: footer?.hideConfirm, hideCancel: footer?.hideCancel, context: userDefinedContext })))] }));
 });
 
+const foreground = ModalManager.getHashedClassNames('foreground');
+const active = ModalManager.getHashedClassNames('foreground-active');
+const visible = ModalManager.getHashedClassNames('foreground-visible');
+const style$2 = `
+.${foreground} {
+  pointer-events: none;
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+}
+
+.${foreground}.${active} > * {
+  pointer-events: all;
+}
+
+.${foreground}.${visible} {
+  display: flex !important;
+  justify-content: center;
+  align-items: center;
+}
+`;
+ModalManager.defineStyleSheet('foreground', style$2);
+
 const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
     const { ForegroundComponent } = useConfigurationContext();
     const { context: userDefinedContext } = useUserDefinedContext();
@@ -760,8 +791,8 @@ const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
     if (!modal)
         return null;
     return (jsx("div", { className: cx(foreground, {
-            [visible]: modal.manualDestroy ? modal.alive : modal.visible,
             [active]: modal.visible,
+            [visible]: modal.manualDestroy ? modal.alive : modal.visible,
         }), children: 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' && (jsx(AlertInner, { modal: modal, handlers: { onConfirm } })), modal.type === 'confirm' && (jsx(ConfirmInner, { modal: modal, handlers: { onConfirm, onClose } })), modal.type === 'prompt' && (jsx(PromptInner, { modal: modal, handlers: { onChange, onConfirm, onClose } }))] }) }));
 };
 
@@ -776,12 +807,15 @@ const useSubscribeModal = (modal) => {
     return version;
 };
 
-const presenter = css `
+const presenter = ModalManager.getHashedClassNames('presenter');
+const style$1 = `
+.${presenter} {
   position: fixed;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
 `;
+ModalManager.defineStyleSheet('presenter', style$1);
 
 const { increment } = counterFactory(1);
 const Presenter = memo(({ modalId }) => {
@@ -796,16 +830,19 @@ const Presenter = memo(({ modalId }) => {
     return (jsxs("div", { ref: ref, className: presenter, children: [jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
 });
 
-const anchor = 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 anchor = ModalManager.getHashedClassNames('anchor');
+const style = `
+.${anchor} {
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   position: fixed;
+   inset: 0;
+   pointer-events: none;
+   z-index: 1000;
+   transition: background-color ease-in-out;
+}`;
+ModalManager.defineStyleSheet('anchor', style);
 
 const AnchorInner = () => {
     const [version, update] = useVersion();
@@ -832,6 +869,7 @@ const useInitialize = () => {
     const handleInitialize = useCallback((root) => {
         if (permitted.current) {
             anchorRef.current = ModalManager.anchor({ root });
+            ModalManager.applyStyleSheet();
             update();
         }
         else
@@ -842,15 +880,19 @@ const useInitialize = () => {
                 info: 'Something is wrong with the ModalProvider initialization...',
             });
     }, [update]);
+    const handleReset = useCallback(() => {
+        ModalManager.reset();
+    }, []);
     return {
         anchorRef,
         handleInitialize,
+        handleReset,
     };
 };
 
 const BootstrapProvider = forwardRef(({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, children, }, handleRef) => {
     const usePathname$1 = useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);
-    const { anchorRef, handleInitialize } = useInitialize();
+    const { anchorRef, handleInitialize, handleReset } = useInitialize();
     useImperativeHandle(handleRef, () => ({
         initialize: handleInitialize,
     }), [handleInitialize]);
@@ -860,6 +902,7 @@ const BootstrapProvider = forwardRef(({ usePathname: useExternalPathname, Foregr
         return () => {
             if (anchorRef.current)
                 anchorRef.current.remove();
+            handleReset();
         };
     });
     return (jsxs(Fragment, { children: [children, anchorRef.current &&

package/dist/types/base.d.ts

@@ -3,6 +3,7 @@ import type { Dictionary } from '../@aileron/declare';
 import type { ModalBackground } from './background';
 import type { ModalFrameProps } from './modal';
 export interface BaseModal<T, B> {
+    group?: string;
     title?: ReactNode;
     subtitle?: ReactNode;
     background?: ModalBackground<B>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerx/promise-modal",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "Universal React modal utility that can be used outside React components with promise-based results for alert, confirm, and prompt modals",
   "keywords": [
     "react",
@@ -65,9 +65,9 @@
     "version:patch": "yarn version patch"
   },
   "dependencies": {
-    "@emotion/css": "^11.0.0",
-    "@winglet/common-utils": "^0.2.1",
-    "@winglet/react-utils": "^0.2.1"
+    "@winglet/common-utils": "^0.2.2",
+    "@winglet/react-utils": "^0.2.3",
+    "@winglet/style-utils": "^0.2.0"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",

package/dist/components/FallbackComponents/classNames.emotion.d.ts

@@ -1,2 +0,0 @@
-export declare const fallback: string;
-export declare const frame: string;