@lerx/promise-modal 0.2.1 → 0.2.2

package/dist/app/ModalManager.d.ts

@@ -11,6 +11,8 @@ 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 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/components/Anchor/style.d.ts

@@ -0,0 +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}";

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

@@ -0,0 +1 @@
+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";

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

@@ -0,0 +1 @@
+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";

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

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

package/dist/index.cjs

@@ -5,7 +5,7 @@ const react = require('react');
 const convert = require('@winglet/common-utils/convert');
 const hook = require('@winglet/react-utils/hook');
 const lib = require('@winglet/common-utils/lib');
-const css = require('@emotion/css');
+const styleManager = require('@winglet/react-utils/style-manager');
 const reactDom = require('react-dom');
 const array = require('@winglet/common-utils/array');
 const hoc = require('@winglet/react-utils/hoc');
@@ -21,15 +21,14 @@ class ModalManager {
         return (ModalManager.#active = true);
     }
     static #anchor = null;
+    static #scope = `promise-modal-${lib.getRandomString(36)}`;
     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.setAttribute('data-scope', ModalManager.#scope);
         root.appendChild(node);
         ModalManager.#anchor = node;
         return node;
@@ -46,11 +45,21 @@ 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, styleManager.compressCss(css));
+    }
+    static applyStyleSheet() {
+        for (const [styleId, css] of ModalManager.#styleSheetDefinition)
+            ModalManager.#styleManager(styleId, css, true);
+    }
     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);
@@ -329,30 +338,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, }) => {
@@ -392,10 +387,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 +500,6 @@ const ModalManagerContextProvider = react.memo(({ usePathname, children, }) => {
                 return [...aliveIds, modal.id];
             });
         };
-        return () => {
-            ModalManager.reset();
-        };
     });
     react.useLayoutEffect(() => {
         for (const id of modalIdsRef.current) {
@@ -622,25 +622,31 @@ const usePathname = () => {
     return { pathname };
 };
 
-const background = css.css `
+const style$3 = `
+[data-background] {
   display: none;
   position: fixed;
   inset: 0;
   z-index: -999;
   pointer-events: none;
-  > * {
-    pointer-events: none;
-  }
-`;
-const active$1 = css.css `
+}
+
+[data-background] > * {
+  pointer-events: none;
+}
+
+[data-background][data-active] {
   pointer-events: all;
-`;
-const visible$1 = css.css `
+}
+
+[data-background][data-visible] {
   display: flex;
   align-items: center;
   justify-content: center;
+}
 `;
 
+ModalManager.defineStyleSheet('background', style$3);
 const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     const { BackgroundComponent } = useConfigurationContext();
     const { context: userDefinedContext } = useUserDefinedContext();
@@ -653,30 +659,9 @@ 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,
-            [active$1]: modal.closeOnBackdropClick && modal.visible,
-        }), onClick: handleClose, children: Background && (jsxRuntime.jsx(Background, { id: modal.id, type: modal.type, alive: modal.alive, visible: modal.visible, initiator: modal.initiator, manualDestroy: modal.manualDestroy, closeOnBackdropClick: modal.closeOnBackdropClick, background: modal.background, onChange: onChange, onConfirm: onConfirm, onClose: onClose, onDestroy: onDestroy, onChangeOrder: onChangeOrder, context: userDefinedContext })) }));
+    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 })) }));
 };
 
-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 +739,27 @@ 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 style$2 = `
+[data-foreground] {
+  pointer-events: none;
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+}
+
+[data-foreground][data-active] > * {
+  pointer-events: all;
+}
+
+[data-foreground][data-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,10 +767,7 @@ 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,
-            [active]: modal.visible,
-        }), children: jsxRuntime.jsxs(Foreground, { id: modal.id, type: modal.type, alive: modal.alive, visible: modal.visible, initiator: modal.initiator, manualDestroy: modal.manualDestroy, closeOnBackdropClick: modal.closeOnBackdropClick, background: modal.background, onChange: onChange, onConfirm: onConfirm, onClose: onClose, onDestroy: onDestroy, onChangeOrder: onChangeOrder, context: userDefinedContext, children: [modal.type === 'alert' && (jsxRuntime.jsx(AlertInner, { modal: modal, handlers: { onConfirm } })), modal.type === 'confirm' && (jsxRuntime.jsx(ConfirmInner, { modal: modal, handlers: { onConfirm, onClose } })), modal.type === 'prompt' && (jsxRuntime.jsx(PromptInner, { modal: modal, handlers: { onChange, onConfirm, onClose } }))] }) }));
+    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 } }))] }) }));
 };
 
 const useSubscribeModal = (modal) => {
@@ -778,13 +781,15 @@ const useSubscribeModal = (modal) => {
     return version;
 };
 
-const presenter = css.css `
+const style$1 = `
+[data-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);
@@ -795,20 +800,22 @@ const Presenter = react.memo(({ modalId }) => {
             ref.current.style.zIndex = `${increment()}`;
         }
     });
-    return (jsxRuntime.jsxs("div", { ref: ref, className: presenter, children: [jsxRuntime.jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsxRuntime.jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, "data-presenter": true, 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 style = `
+[data-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();
     const { modalIds, setUpdater } = useModalManagerContext();
@@ -817,7 +824,7 @@ const AnchorInner = () => {
     }, [setUpdater, update]);
     const options = useConfigurationOptions();
     const dimmed = useActiveModalCount(validateDimmable, version);
-    return (jsxRuntime.jsx("div", { className: anchor, style: {
+    return (jsxRuntime.jsx("div", { "data-anchor": true, style: {
             transitionDuration: options.duration,
             backgroundColor: dimmed ? options.backdrop : 'transparent',
         }, children: array.map(modalIds, (id) => (jsxRuntime.jsx(Presenter, { modalId: id }, id))) }));
@@ -834,6 +841,7 @@ const useInitialize = () => {
     const handleInitialize = react.useCallback((root) => {
         if (permitted.current) {
             anchorRef.current = ModalManager.anchor({ root });
+            ModalManager.applyStyleSheet();
             update();
         }
         else
@@ -844,15 +852,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 +874,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

@@ -3,7 +3,7 @@ import { createContext, useContext, useMemo, forwardRef, memo, useRef, useState,
 import { convertMsFromDuration } from '@winglet/common-utils/convert';
 import { useReference, useOnMountLayout, useHandle, useVersion, useOnMount } from '@winglet/react-utils/hook';
 import { getRandomString, counterFactory } from '@winglet/common-utils/lib';
-import { css, cx } from '@emotion/css';
+import { styleManagerFactory, compressCss, destroyScope, dataCondition } from '@winglet/react-utils/style-manager';
 import { createPortal } from 'react-dom';
 import { map } from '@winglet/common-utils/array';
 import { withErrorBoundary } from '@winglet/react-utils/hoc';
@@ -19,15 +19,14 @@ class ModalManager {
         return (ModalManager.#active = true);
     }
     static #anchor = null;
+    static #scope = `promise-modal-${getRandomString(36)}`;
     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.setAttribute('data-scope', ModalManager.#scope);
         root.appendChild(node);
         ModalManager.#anchor = node;
         return node;
@@ -44,11 +43,21 @@ 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 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);
@@ -327,30 +336,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, }) => {
@@ -390,10 +385,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 +498,6 @@ const ModalManagerContextProvider = memo(({ usePathname, children, }) => {
                 return [...aliveIds, modal.id];
             });
         };
-        return () => {
-            ModalManager.reset();
-        };
     });
     useLayoutEffect(() => {
         for (const id of modalIdsRef.current) {
@@ -620,25 +620,31 @@ const usePathname = () => {
     return { pathname };
 };
 
-const background = css `
+const style$3 = `
+[data-background] {
   display: none;
   position: fixed;
   inset: 0;
   z-index: -999;
   pointer-events: none;
-  > * {
-    pointer-events: none;
-  }
-`;
-const active$1 = css `
+}
+
+[data-background] > * {
+  pointer-events: none;
+}
+
+[data-background][data-active] {
   pointer-events: all;
-`;
-const visible$1 = css `
+}
+
+[data-background][data-visible] {
   display: flex;
   align-items: center;
   justify-content: center;
+}
 `;
 
+ModalManager.defineStyleSheet('background', style$3);
 const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     const { BackgroundComponent } = useConfigurationContext();
     const { context: userDefinedContext } = useUserDefinedContext();
@@ -651,30 +657,9 @@ const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     const Background = useMemo(() => modal?.BackgroundComponent || BackgroundComponent, [BackgroundComponent, modal]);
     if (!modal)
         return null;
-    return (jsx("div", { className: cx(background, {
-            [visible$1]: modal.manualDestroy ? modal.alive : modal.visible,
-            [active$1]: modal.closeOnBackdropClick && 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", { "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 })) }));
 };
 
-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 +737,27 @@ 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 style$2 = `
+[data-foreground] {
+  pointer-events: none;
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 1;
+}
+
+[data-foreground][data-active] > * {
+  pointer-events: all;
+}
+
+[data-foreground][data-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();
@@ -759,10 +765,7 @@ const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
     const Foreground = useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
     if (!modal)
         return null;
-    return (jsx("div", { className: cx(foreground, {
-            [visible]: modal.manualDestroy ? modal.alive : modal.visible,
-            [active]: 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", { "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 } }))] }) }));
 };
 
 const useSubscribeModal = (modal) => {
@@ -776,13 +779,15 @@ const useSubscribeModal = (modal) => {
     return version;
 };
 
-const presenter = css `
+const style$1 = `
+[data-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);
@@ -793,20 +798,22 @@ const Presenter = memo(({ modalId }) => {
             ref.current.style.zIndex = `${increment()}`;
         }
     });
-    return (jsxs("div", { ref: ref, className: presenter, children: [jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
+    return (jsxs("div", { ref: ref, "data-presenter": true, 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 style = `
+[data-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();
     const { modalIds, setUpdater } = useModalManagerContext();
@@ -815,7 +822,7 @@ const AnchorInner = () => {
     }, [setUpdater, update]);
     const options = useConfigurationOptions();
     const dimmed = useActiveModalCount(validateDimmable, version);
-    return (jsx("div", { className: anchor, style: {
+    return (jsx("div", { "data-anchor": true, style: {
             transitionDuration: options.duration,
             backgroundColor: dimmed ? options.backdrop : 'transparent',
         }, children: map(modalIds, (id) => (jsx(Presenter, { modalId: id }, id))) }));
@@ -832,6 +839,7 @@ const useInitialize = () => {
     const handleInitialize = useCallback((root) => {
         if (permitted.current) {
             anchorRef.current = ModalManager.anchor({ root });
+            ModalManager.applyStyleSheet();
             update();
         }
         else
@@ -842,15 +850,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 +872,7 @@ const BootstrapProvider = forwardRef(({ usePathname: useExternalPathname, Foregr
         return () => {
             if (anchorRef.current)
                 anchorRef.current.remove();
+            handleReset();
         };
     });
     return (jsxs(Fragment, { children: [children, anchorRef.current &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerx/promise-modal",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "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,8 @@
     "version:patch": "yarn version patch"
   },
   "dependencies": {
-    "@emotion/css": "^11.0.0",
     "@winglet/common-utils": "^0.2.1",
-    "@winglet/react-utils": "^0.2.1"
+    "@winglet/react-utils": "^0.2.2"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",

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

@@ -1 +0,0 @@
-export declare const anchor: string;

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

@@ -1,3 +0,0 @@
-export declare const background: string;
-export declare const active: string;
-export declare const visible: string;

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

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

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

@@ -1,3 +0,0 @@
-export declare const foreground: string;
-export declare const active: string;
-export declare const visible: string;

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

@@ -1 +0,0 @@
-export declare const presenter: string;