@lerx/promise-modal 0.2.2 → 0.2.4

package/dist/app/ModalManager.d.ts

@@ -13,6 +13,7 @@ export declare class ModalManager {
     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/components/Anchor/style.d.ts

@@ -1 +1 @@
-export declare const style = "\n[data-anchor] {\n   display: flex;\n   align-items: center;\n   justify-content: center;\n   position: fixed;\n   inset: 0;\n   pointer-events: none;\n   z-index: 1000;\n   transition: background-color ease-in-out;\n}";
+export declare const anchor: string;

package/dist/components/Background/style.d.ts

@@ -1 +1,3 @@
-export declare const style = "\n[data-background] {\n  display: none;\n  position: fixed;\n  inset: 0;\n  z-index: -999;\n  pointer-events: none;\n}\n\n[data-background] > * {\n  pointer-events: none;\n}\n\n[data-background][data-active] {\n  pointer-events: all;\n}\n\n[data-background][data-visible] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n";
+export declare const background: string;
+export declare const active: string;
+export declare const visible: string;

package/dist/components/Foreground/style.d.ts

@@ -1 +1,3 @@
-export declare const style = "\n[data-foreground] {\n  pointer-events: none;\n  display: none;\n  position: fixed;\n  inset: 0;\n  z-index: 1;\n}\n\n[data-foreground][data-active] > * {\n  pointer-events: all;\n}\n\n[data-foreground][data-visible] {\n  display: flex !important;\n  justify-content: center;\n  align-items: center;\n}\n";
+export declare const foreground: string;
+export declare const active: string;
+export declare const visible: string;

package/dist/components/Presenter/style.d.ts

@@ -1 +1 @@
-export declare const style = "\n[data-presenter] {\n  position: fixed;\n  inset: 0;\n  pointer-events: none;\n  overflow: hidden;\n";
+export declare const presenter: string;

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 styleManager = require('@winglet/react-utils/style-manager');
+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 classNames = require('@winglet/style-utils/classNames');
 const filter = require('@winglet/common-utils/filter');
 const render = require('@winglet/react-utils/render');
 const console = require('@winglet/common-utils/console');
@@ -22,13 +25,14 @@ class ModalManager {
     }
     static #anchor = null;
     static #scope = `promise-modal-${lib.getRandomString(36)}`;
+    static #hash = hash.polynomialHash(ModalManager.#scope);
     static anchor(options) {
         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.setAttribute('data-scope', ModalManager.#scope);
+        node.id = `${prefix}-${lib.getRandomString(36)}`;
+        node.className = ModalManager.#scope;
         root.appendChild(node);
         ModalManager.#anchor = node;
         return node;
@@ -48,12 +52,15 @@ class ModalManager {
     static #styleManager = styleManager.styleManagerFactory(ModalManager.#scope);
     static #styleSheetDefinition = new Map();
     static defineStyleSheet(styleId, css) {
-        ModalManager.#styleSheetDefinition.set(styleId, styleManager.compressCss(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;
@@ -66,11 +73,12 @@ class ModalManager {
     }
 }
 
-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,
@@ -91,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,
@@ -116,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,
@@ -146,6 +156,7 @@ const prompt = ({ defaultValue, title, subtitle, content, Input, disabled, retur
 
 class AbstractNode {
     id;
+    group;
     initiator;
     title;
     subtitle;
@@ -165,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;
@@ -218,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,
@@ -250,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,
@@ -286,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,
@@ -367,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++;
         }
@@ -622,8 +638,11 @@ const usePathname = () => {
     return { pathname };
 };
 
+const background = ModalManager.getHashedClassNames('background');
+const active$1 = ModalManager.getHashedClassNames('background-active');
+const visible$1 = ModalManager.getHashedClassNames('background-visible');
 const style$3 = `
-[data-background] {
+.${background} {
   display: none;
   position: fixed;
   inset: 0;
@@ -631,22 +650,22 @@ const style$3 = `
   pointer-events: none;
 }
 
-[data-background] > * {
+.${background} > * {
   pointer-events: none;
 }
 
-[data-background][data-active] {
+.${background}.${active$1} {
   pointer-events: all;
 }
 
-[data-background][data-visible] {
+.${background}.${visible$1} {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 `;
-
 ModalManager.defineStyleSheet('background', style$3);
+
 const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     const { BackgroundComponent } = useConfigurationContext();
     const { context: userDefinedContext } = useUserDefinedContext();
@@ -657,9 +676,15 @@ const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
         event.stopPropagation();
     }, [modal, onClose]);
     const Background = react.useMemo(() => modal?.BackgroundComponent || BackgroundComponent, [BackgroundComponent, modal]);
+    const className = react.useMemo(() => modal
+        ? classNames.cx(background, {
+            [active$1]: modal.closeOnBackdropClick && modal.visible,
+            [visible$1]: modal.manualDestroy ? modal.alive : modal.visible,
+        })
+        : undefined, [modal]);
     if (!modal)
         return null;
-    return (jsxRuntime.jsx("div", { "data-background": true, "data-active": styleManager.dataCondition(modal.closeOnBackdropClick && modal.visible), "data-visible": styleManager.dataCondition(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 })) }));
+    return (jsxRuntime.jsx("div", { className: className, 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 AlertInner = react.memo(({ modal, handlers }) => {
@@ -739,8 +764,11 @@ 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 = `
-[data-foreground] {
+.${foreground} {
   pointer-events: none;
   display: none;
   position: fixed;
@@ -748,26 +776,32 @@ const style$2 = `
   z-index: 1;
 }
 
-[data-foreground][data-active] > * {
+.${foreground}.${active} > * {
   pointer-events: all;
 }
 
-[data-foreground][data-visible] {
+.${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();
     const { modal, onChange, onConfirm, onClose, onDestroy } = useModal(modalId);
     const Foreground = react.useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
+    const className = react.useMemo(() => modal
+        ? classNames.cx(foreground, {
+            [active]: modal.visible,
+            [visible]: modal.manualDestroy ? modal.alive : modal.visible,
+        })
+        : undefined, [modal]);
     if (!modal)
         return null;
-    return (jsxRuntime.jsx("div", { "data-foreground": true, "data-active": styleManager.dataCondition(modal.visible), "data-visible": styleManager.dataCondition(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 } }))] }) }));
+    return (jsxRuntime.jsx("div", { className: className, 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) => {
@@ -781,15 +815,16 @@ const useSubscribeModal = (modal) => {
     return version;
 };
 
+const presenter = ModalManager.getHashedClassNames('presenter');
 const style$1 = `
-[data-presenter] {
+.${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 }) => {
     const ref = react.useRef(null);
@@ -800,11 +835,12 @@ const Presenter = react.memo(({ modalId }) => {
             ref.current.style.zIndex = `${increment()}`;
         }
     });
-    return (jsxRuntime.jsxs("div", { ref: ref, "data-presenter": true, children: [jsxRuntime.jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsxRuntime.jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
+    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 = ModalManager.getHashedClassNames('anchor');
 const style = `
-[data-anchor] {
+.${anchor} {
    display: flex;
    align-items: center;
    justify-content: center;
@@ -814,8 +850,8 @@ const style = `
    z-index: 1000;
    transition: background-color ease-in-out;
 }`;
-
 ModalManager.defineStyleSheet('anchor', style);
+
 const AnchorInner = () => {
     const [version, update] = hook.useVersion();
     const { modalIds, setUpdater } = useModalManagerContext();
@@ -824,7 +860,7 @@ const AnchorInner = () => {
     }, [setUpdater, update]);
     const options = useConfigurationOptions();
     const dimmed = useActiveModalCount(validateDimmable, version);
-    return (jsxRuntime.jsx("div", { "data-anchor": true, style: {
+    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))) }));

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 { styleManagerFactory, compressCss, destroyScope, dataCondition } from '@winglet/react-utils/style-manager';
+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/classNames';
 import { isString, isFunction } from '@winglet/common-utils/filter';
 import { renderComponent } from '@winglet/react-utils/render';
 import { printError } from '@winglet/common-utils/console';
@@ -20,13 +23,14 @@ class ModalManager {
     }
     static #anchor = null;
     static #scope = `promise-modal-${getRandomString(36)}`;
+    static #hash = polynomialHash(ModalManager.#scope);
     static anchor(options) {
         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.setAttribute('data-scope', ModalManager.#scope);
+        node.id = `${prefix}-${getRandomString(36)}`;
+        node.className = ModalManager.#scope;
         root.appendChild(node);
         ModalManager.#anchor = node;
         return node;
@@ -52,6 +56,9 @@ class ModalManager {
         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;
@@ -64,11 +71,12 @@ class ModalManager {
     }
 }
 
-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,
@@ -89,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,
@@ -114,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,
@@ -144,6 +154,7 @@ const prompt = ({ defaultValue, title, subtitle, content, Input, disabled, retur
 
 class AbstractNode {
     id;
+    group;
     initiator;
     title;
     subtitle;
@@ -163,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;
@@ -216,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,
@@ -248,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,
@@ -284,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,
@@ -365,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++;
         }
@@ -620,8 +636,11 @@ const usePathname = () => {
     return { pathname };
 };
 
+const background = ModalManager.getHashedClassNames('background');
+const active$1 = ModalManager.getHashedClassNames('background-active');
+const visible$1 = ModalManager.getHashedClassNames('background-visible');
 const style$3 = `
-[data-background] {
+.${background} {
   display: none;
   position: fixed;
   inset: 0;
@@ -629,22 +648,22 @@ const style$3 = `
   pointer-events: none;
 }
 
-[data-background] > * {
+.${background} > * {
   pointer-events: none;
 }
 
-[data-background][data-active] {
+.${background}.${active$1} {
   pointer-events: all;
 }
 
-[data-background][data-visible] {
+.${background}.${visible$1} {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 `;
-
 ModalManager.defineStyleSheet('background', style$3);
+
 const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     const { BackgroundComponent } = useConfigurationContext();
     const { context: userDefinedContext } = useUserDefinedContext();
@@ -655,9 +674,15 @@ const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
         event.stopPropagation();
     }, [modal, onClose]);
     const Background = useMemo(() => modal?.BackgroundComponent || BackgroundComponent, [BackgroundComponent, modal]);
+    const className = useMemo(() => modal
+        ? cx(background, {
+            [active$1]: modal.closeOnBackdropClick && modal.visible,
+            [visible$1]: modal.manualDestroy ? modal.alive : modal.visible,
+        })
+        : undefined, [modal]);
     if (!modal)
         return null;
-    return (jsx("div", { "data-background": true, "data-active": dataCondition(modal.closeOnBackdropClick && modal.visible), "data-visible": dataCondition(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 })) }));
+    return (jsx("div", { className: className, 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 AlertInner = memo(({ modal, handlers }) => {
@@ -737,8 +762,11 @@ 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 = `
-[data-foreground] {
+.${foreground} {
   pointer-events: none;
   display: none;
   position: fixed;
@@ -746,26 +774,32 @@ const style$2 = `
   z-index: 1;
 }
 
-[data-foreground][data-active] > * {
+.${foreground}.${active} > * {
   pointer-events: all;
 }
 
-[data-foreground][data-visible] {
+.${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();
     const { modal, onChange, onConfirm, onClose, onDestroy } = useModal(modalId);
     const Foreground = useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
+    const className = useMemo(() => modal
+        ? cx(foreground, {
+            [active]: modal.visible,
+            [visible]: modal.manualDestroy ? modal.alive : modal.visible,
+        })
+        : undefined, [modal]);
     if (!modal)
         return null;
-    return (jsx("div", { "data-foreground": true, "data-active": dataCondition(modal.visible), "data-visible": dataCondition(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 } }))] }) }));
+    return (jsx("div", { className: className, 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 } }))] }) }));
 };
 
 const useSubscribeModal = (modal) => {
@@ -779,15 +813,16 @@ const useSubscribeModal = (modal) => {
     return version;
 };
 
+const presenter = ModalManager.getHashedClassNames('presenter');
 const style$1 = `
-[data-presenter] {
+.${presenter} {
   position: fixed;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
 `;
-
 ModalManager.defineStyleSheet('presenter', style$1);
+
 const { increment } = counterFactory(1);
 const Presenter = memo(({ modalId }) => {
     const ref = useRef(null);
@@ -798,11 +833,12 @@ const Presenter = memo(({ modalId }) => {
             ref.current.style.zIndex = `${increment()}`;
         }
     });
-    return (jsxs("div", { ref: ref, "data-presenter": true, children: [jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
+    return (jsxs("div", { ref: ref, className: presenter, children: [jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
 });
 
+const anchor = ModalManager.getHashedClassNames('anchor');
 const style = `
-[data-anchor] {
+.${anchor} {
    display: flex;
    align-items: center;
    justify-content: center;
@@ -812,8 +848,8 @@ const style = `
    z-index: 1000;
    transition: background-color ease-in-out;
 }`;
-
 ModalManager.defineStyleSheet('anchor', style);
+
 const AnchorInner = () => {
     const [version, update] = useVersion();
     const { modalIds, setUpdater } = useModalManagerContext();
@@ -822,7 +858,7 @@ const AnchorInner = () => {
     }, [setUpdater, update]);
     const options = useConfigurationOptions();
     const dimmed = useActiveModalCount(validateDimmable, version);
-    return (jsx("div", { "data-anchor": true, style: {
+    return (jsx("div", { className: anchor, style: {
             transitionDuration: options.duration,
             backgroundColor: dimmed ? options.backdrop : 'transparent',
         }, children: map(modalIds, (id) => (jsx(Presenter, { modalId: id }, id))) }));

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.2",
+  "version": "0.2.4",
   "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,8 +65,9 @@
     "version:patch": "yarn version patch"
   },
   "dependencies": {
-    "@winglet/common-utils": "^0.2.1",
-    "@winglet/react-utils": "^0.2.2"
+    "@winglet/common-utils": "^0.2.2",
+    "@winglet/react-utils": "^0.2.4",
+    "@winglet/style-utils": "^0.2.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",