@lerx/promise-modal 0.2.5 → 0.2.7

package/dist/index.cjs

@@ -6,12 +6,11 @@ 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 compressCss = require('@winglet/style-utils/compressCss');
-const styleManager = require('@winglet/style-utils/styleManager');
+const styleManager = require('@winglet/style-utils/style-manager');
+const util = require('@winglet/style-utils/util');
 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');
@@ -52,7 +51,7 @@ class ModalManager {
     static #styleManager = styleManager.styleManagerFactory(ModalManager.#scope);
     static #styleSheetDefinition = new Map();
     static defineStyleSheet(styleId, css) {
-        ModalManager.#styleSheetDefinition.set(styleId, compressCss.compressCss(css));
+        ModalManager.#styleSheetDefinition.set(styleId, util.compressCss(css));
     }
     static applyStyleSheet() {
         for (const [styleId, css] of ModalManager.#styleSheetDefinition)
@@ -420,30 +419,34 @@ const FallbackForegroundFrame = react.forwardRef(({ id, onChangeOrder, children
 
 const ConfigurationContext = react.createContext({});
 
-const ConfigurationContextProvider = react.memo(({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, children, }) => {
-    const value = react.useMemo(() => ({
+const DEFAULT_OPTIONS = {
+    duration: DEFAULT_ANIMATION_DURATION,
+    backdrop: DEFAULT_BACKDROP_COLOR,
+    closeOnBackdropClick: true,
+    manualDestroy: false,
+};
+const ConfigurationContextProvider = react.memo(({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options: inputOptions, children, }) => {
+    const memoized = hook.useMemorize({
         BackgroundComponent,
         ForegroundComponent: ForegroundComponent || FallbackForegroundFrame,
         TitleComponent: TitleComponent || FallbackTitle,
         SubtitleComponent: SubtitleComponent || FallbackSubtitle,
         ContentComponent: react.memo(ContentComponent || FallbackContent),
         FooterComponent: react.memo(FooterComponent || FallbackFooter),
+    });
+    const options = hook.useSnapshot(inputOptions);
+    const value = react.useMemo(() => ({
+        ForegroundComponent: memoized.ForegroundComponent,
+        BackgroundComponent: memoized.BackgroundComponent,
+        TitleComponent: memoized.TitleComponent,
+        SubtitleComponent: memoized.SubtitleComponent,
+        ContentComponent: memoized.ContentComponent,
+        FooterComponent: memoized.FooterComponent,
         options: {
-            duration: DEFAULT_ANIMATION_DURATION,
-            backdrop: DEFAULT_BACKDROP_COLOR,
-            closeOnBackdropClick: true,
-            manualDestroy: false,
+            ...DEFAULT_OPTIONS,
             ...options,
         },
-    }), [
-        ForegroundComponent,
-        BackgroundComponent,
-        ContentComponent,
-        FooterComponent,
-        SubtitleComponent,
-        TitleComponent,
-        options,
-    ]);
+    }), [memoized, options]);
     return (jsxRuntime.jsx(ConfigurationContext.Provider, { value: value, children: children }));
 });
 
@@ -678,10 +681,7 @@ const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     const Background = react.useMemo(() => modal?.BackgroundComponent || BackgroundComponent, [BackgroundComponent, modal]);
     if (!modal)
         return null;
-    return (jsxRuntime.jsx("div", { className: classNames.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 })) }));
+    return (jsxRuntime.jsx("div", { className: util.cxLite(background, modal.closeOnBackdropClick && modal.visible && active$1, (modal.manualDestroy ? modal.alive : modal.visible) && visible$1), 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 }) => {
@@ -792,10 +792,7 @@ const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
     const Foreground = react.useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
     if (!modal)
         return null;
-    return (jsxRuntime.jsx("div", { className: classNames.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 } }))] }) }));
+    return (jsxRuntime.jsx("div", { className: util.cxLite(foreground, modal.visible && active, (modal.manualDestroy ? modal.alive : modal.visible) && 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) => {

package/dist/index.mjs

@@ -1,15 +1,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 { useMemorize, useSnapshot, 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 { compressCss } from '@winglet/style-utils/compressCss';
-import { styleManagerFactory, destroyScope } from '@winglet/style-utils/styleManager';
+import { styleManagerFactory, destroyScope } from '@winglet/style-utils/style-manager';
+import { compressCss, cxLite } from '@winglet/style-utils/util';
 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';
@@ -418,30 +417,34 @@ const FallbackForegroundFrame = forwardRef(({ id, onChangeOrder, children }, ref
 
 const ConfigurationContext = createContext({});
 
-const ConfigurationContextProvider = memo(({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, children, }) => {
-    const value = useMemo(() => ({
+const DEFAULT_OPTIONS = {
+    duration: DEFAULT_ANIMATION_DURATION,
+    backdrop: DEFAULT_BACKDROP_COLOR,
+    closeOnBackdropClick: true,
+    manualDestroy: false,
+};
+const ConfigurationContextProvider = memo(({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options: inputOptions, children, }) => {
+    const memoized = useMemorize({
         BackgroundComponent,
         ForegroundComponent: ForegroundComponent || FallbackForegroundFrame,
         TitleComponent: TitleComponent || FallbackTitle,
         SubtitleComponent: SubtitleComponent || FallbackSubtitle,
         ContentComponent: memo(ContentComponent || FallbackContent),
         FooterComponent: memo(FooterComponent || FallbackFooter),
+    });
+    const options = useSnapshot(inputOptions);
+    const value = useMemo(() => ({
+        ForegroundComponent: memoized.ForegroundComponent,
+        BackgroundComponent: memoized.BackgroundComponent,
+        TitleComponent: memoized.TitleComponent,
+        SubtitleComponent: memoized.SubtitleComponent,
+        ContentComponent: memoized.ContentComponent,
+        FooterComponent: memoized.FooterComponent,
         options: {
-            duration: DEFAULT_ANIMATION_DURATION,
-            backdrop: DEFAULT_BACKDROP_COLOR,
-            closeOnBackdropClick: true,
-            manualDestroy: false,
+            ...DEFAULT_OPTIONS,
             ...options,
         },
-    }), [
-        ForegroundComponent,
-        BackgroundComponent,
-        ContentComponent,
-        FooterComponent,
-        SubtitleComponent,
-        TitleComponent,
-        options,
-    ]);
+    }), [memoized, options]);
     return (jsx(ConfigurationContext.Provider, { value: value, children: children }));
 });
 
@@ -676,10 +679,7 @@ const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
     const Background = useMemo(() => modal?.BackgroundComponent || BackgroundComponent, [BackgroundComponent, modal]);
     if (!modal)
         return null;
-    return (jsx("div", { className: cx(background, {
-            [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 })) }));
+    return (jsx("div", { className: cxLite(background, modal.closeOnBackdropClick && modal.visible && active$1, (modal.manualDestroy ? modal.alive : modal.visible) && visible$1), 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 }) => {
@@ -790,10 +790,7 @@ const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
     const Foreground = useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
     if (!modal)
         return null;
-    return (jsx("div", { className: cx(foreground, {
-            [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 } }))] }) }));
+    return (jsx("div", { className: cxLite(foreground, modal.visible && active, (modal.manualDestroy ? modal.alive : modal.visible) && 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) => {

package/dist/providers/ConfigurationContext/ConfigurationContextProvider.d.ts

@@ -19,4 +19,4 @@ export interface ConfigurationContextProviderProps {
         closeOnBackdropClick?: boolean;
     };
 }
-export declare const ConfigurationContextProvider: import("react").MemoExoticComponent<({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, children, }: PropsWithChildren<ConfigurationContextProviderProps>) => import("react/jsx-runtime").JSX.Element>;
+export declare const ConfigurationContextProvider: import("react").MemoExoticComponent<({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options: inputOptions, children, }: PropsWithChildren<ConfigurationContextProviderProps>) => import("react/jsx-runtime").JSX.Element>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerx/promise-modal",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "Universal React modal utility that can be used outside React components with promise-based results for alert, confirm, and prompt modals",
   "keywords": [
     "react",
@@ -66,11 +66,11 @@
   },
   "dependencies": {
     "@winglet/common-utils": "^0.2.2",
-    "@winglet/react-utils": "^0.2.4",
-    "@winglet/style-utils": "^0.2.1"
+    "@winglet/react-utils": "^0.2.6",
+    "@winglet/style-utils": "^0.2.2"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.6",
+    "@chromatic-com/storybook": "^4.0.1",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
@@ -78,12 +78,8 @@
     "@size-limit/preset-app": "^11.1.6",
     "@size-limit/preset-big-lib": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.1.6",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.14",
+    "@storybook/addon-docs": "^9.0.14",
+    "@storybook/react-vite": "^9.0.14",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -102,7 +98,7 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-visualizer": "^5.12.0",
     "size-limit": "^11.2.0",
-    "storybook": "^8.6.14",
+    "storybook": "^9.0.14",
     "tsc-alias": "^1.8.16",
     "typescript": "^5.7.2",
     "vite": "^6.3.5",