@lerx/promise-modal 0.2.3 → 0.2.4

package/dist/index.cjs

@@ -11,7 +11,7 @@ const styleManager = require('@winglet/style-utils/styleManager');
 const reactDom = require('react-dom');
 const array = require('@winglet/common-utils/array');
 const hoc = require('@winglet/react-utils/hoc');
-const styleUtils = require('@winglet/style-utils');
+const 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');
@@ -676,12 +676,15 @@ const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
         event.stopPropagation();
     }, [modal, onClose]);
     const Background = react.useMemo(() => modal?.BackgroundComponent || BackgroundComponent, [BackgroundComponent, modal]);
-    if (!modal)
-        return null;
-    return (jsxRuntime.jsx("div", { className: styleUtils.cx(background, {
+    const className = react.useMemo(() => modal
+        ? 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 })) }));
+        })
+        : undefined, [modal]);
+    if (!modal)
+        return null;
+    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 }) => {
@@ -790,12 +793,15 @@ const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
     const { context: userDefinedContext } = useUserDefinedContext();
     const { modal, onChange, onConfirm, onClose, onDestroy } = useModal(modalId);
     const Foreground = react.useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
-    if (!modal)
-        return null;
-    return (jsxRuntime.jsx("div", { className: styleUtils.cx(foreground, {
+    const className = react.useMemo(() => modal
+        ? 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 } }))] }) }));
+        })
+        : undefined, [modal]);
+    if (!modal)
+        return null;
+    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) => {

package/dist/index.mjs

@@ -9,7 +9,7 @@ import { styleManagerFactory, destroyScope } from '@winglet/style-utils/styleMan
 import { createPortal } from 'react-dom';
 import { map } from '@winglet/common-utils/array';
 import { withErrorBoundary } from '@winglet/react-utils/hoc';
-import { cx } from '@winglet/style-utils';
+import { 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';
@@ -674,12 +674,15 @@ const BackgroundFrame = ({ modalId, onChangeOrder, }) => {
         event.stopPropagation();
     }, [modal, onClose]);
     const Background = useMemo(() => modal?.BackgroundComponent || BackgroundComponent, [BackgroundComponent, modal]);
-    if (!modal)
-        return null;
-    return (jsx("div", { className: cx(background, {
+    const className = useMemo(() => modal
+        ? 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 })) }));
+        })
+        : undefined, [modal]);
+    if (!modal)
+        return null;
+    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 }) => {
@@ -788,12 +791,15 @@ const ForegroundFrame = ({ modalId, onChangeOrder, }) => {
     const { context: userDefinedContext } = useUserDefinedContext();
     const { modal, onChange, onConfirm, onClose, onDestroy } = useModal(modalId);
     const Foreground = useMemo(() => modal?.ForegroundComponent || ForegroundComponent, [ForegroundComponent, modal]);
-    if (!modal)
-        return null;
-    return (jsx("div", { className: cx(foreground, {
+    const className = useMemo(() => modal
+        ? 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 } }))] }) }));
+        })
+        : undefined, [modal]);
+    if (!modal)
+        return null;
+    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) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerx/promise-modal",
-  "version": "0.2.3",
+  "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",
@@ -66,8 +66,8 @@
   },
   "dependencies": {
     "@winglet/common-utils": "^0.2.2",
-    "@winglet/react-utils": "^0.2.3",
-    "@winglet/style-utils": "^0.2.0"
+    "@winglet/react-utils": "^0.2.4",
+    "@winglet/style-utils": "^0.2.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.6",