@lerx/promise-modal 0.8.2 → 0.8.4

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

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

package/dist/index.cjs

@@ -8,10 +8,10 @@ const hash = require('@winglet/common-utils/hash');
 const lib = require('@winglet/common-utils/lib');
 const styleManager = require('@winglet/style-utils/style-manager');
 const util = require('@winglet/style-utils/util');
+const filter = require('@winglet/common-utils/filter');
 const reactDom = require('react-dom');
 const array = require('@winglet/common-utils/array');
 const hoc = require('@winglet/react-utils/hoc');
-const filter = require('@winglet/common-utils/filter');
 const render = require('@winglet/react-utils/render');
 
 class ModalManager {
@@ -415,7 +415,7 @@ const ConfigurationContext = react.createContext({});
 const DEFAULT_OPTIONS = {
     zIndex: DEFAULT_Z_INDEX,
     duration: DEFAULT_ANIMATION_DURATION,
-    backdrop: DEFAULT_BACKDROP_COLOR,
+    backdrop: { backgroundColor: DEFAULT_BACKDROP_COLOR },
     closeOnBackdropClick: true,
     manualDestroy: false,
 };
@@ -429,20 +429,28 @@ const ConfigurationContextProvider = react.memo(({ ForegroundComponent, Backgrou
         FooterComponent: react.memo(FooterComponent || FallbackFooter),
     });
     const options = hook.useSnapshot(inputOptions);
-    const value = react.useMemo(() => ({
-        ForegroundComponent: constant.ForegroundComponent,
-        BackgroundComponent: constant.BackgroundComponent,
-        TitleComponent: constant.TitleComponent,
-        SubtitleComponent: constant.SubtitleComponent,
-        ContentComponent: constant.ContentComponent,
-        FooterComponent: constant.FooterComponent,
-        options: {
-            ...DEFAULT_OPTIONS,
-            ...options,
-        },
-    }), [constant, options]);
+    const value = react.useMemo(() => {
+        const { backdrop: defaultBackdrop, ...defaultOptions } = DEFAULT_OPTIONS;
+        const backdrop = getBackdropStyle(options?.backdrop, defaultBackdrop);
+        return {
+            ForegroundComponent: constant.ForegroundComponent,
+            BackgroundComponent: constant.BackgroundComponent,
+            TitleComponent: constant.TitleComponent,
+            SubtitleComponent: constant.SubtitleComponent,
+            ContentComponent: constant.ContentComponent,
+            FooterComponent: constant.FooterComponent,
+            options: { ...defaultOptions, ...options, backdrop },
+        };
+    }, [constant, options]);
     return (jsxRuntime.jsx(ConfigurationContext.Provider, { value: value, children: children }));
 });
+const getBackdropStyle = (backdrop, defaultBackdrop) => {
+    if (filter.isPlainObject(backdrop))
+        return backdrop;
+    if (filter.isString(backdrop))
+        return { backgroundColor: backdrop };
+    return defaultBackdrop;
+};
 
 const useConfigurationContext = () => react.useContext(ConfigurationContext);
 const useConfigurationOptions = () => {
@@ -842,9 +850,20 @@ const style = `
    inset: 0;
    pointer-events: none;
    z-index: var(--z-index);
-   transition: background-color ease-in-out;
+}`;
+const backdrop = ModalManager.getHashedClassNames('backdrop');
+const backdropStyle = `
+.${backdrop} {
+  position: fixed;
+  inset: 0;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease-in-out;
+  pointer-events: none;
 }`;
 ModalManager.defineStyleSheet('anchor', style);
+ModalManager.defineStyleSheet('backdrop', backdropStyle);
 
 const { getValue, increment, reset } = lib.counterFactory(0);
 const AnchorInner = () => {
@@ -857,11 +876,15 @@ const AnchorInner = () => {
     const dimmed = useActiveModalCount(validateDimmable, version);
     if (!dimmed)
         reset();
-    return (jsxRuntime.jsx("div", { className: anchor, style: {
-            '--z-index': options.zIndex,
-            transitionDuration: options.duration,
-            backgroundColor: dimmed ? options.backdrop : 'transparent',
-        }, children: array.map(modalIds, (id) => (jsxRuntime.jsx(Presenter, { modalId: id, getValue: getValue, increment: increment, reset: reset }, id))) }));
+    const anchorStyle = react.useMemo(() => ({
+        '--z-index': options.zIndex,
+        '--transition-duration': options.duration,
+    }), [options]);
+    const backdropStyle = react.useMemo(() => ({
+        ...options.backdrop,
+        opacity: dimmed ? 1 : 0,
+    }), [dimmed, options]);
+    return (jsxRuntime.jsxs("div", { className: anchor, style: anchorStyle, children: [jsxRuntime.jsx("div", { className: backdrop, style: backdropStyle }), array.map(modalIds, (id) => (jsxRuntime.jsx(Presenter, { modalId: id, getValue: getValue, increment: increment, reset: reset }, id)))] }));
 };
 const validateDimmable = (modal) => modal?.visible && modal.dimmed;
 const Anchor = react.memo(hoc.withErrorBoundary(AnchorInner));

package/dist/index.mjs

@@ -6,10 +6,10 @@ import { polynomialHash } from '@winglet/common-utils/hash';
 import { getRandomString, counterFactory } from '@winglet/common-utils/lib';
 import { styleManagerFactory, destroyScope } from '@winglet/style-utils/style-manager';
 import { compressCss, cxLite } from '@winglet/style-utils/util';
+import { isPlainObject, isString, isFunction } from '@winglet/common-utils/filter';
 import { createPortal } from 'react-dom';
 import { map } from '@winglet/common-utils/array';
 import { withErrorBoundary } from '@winglet/react-utils/hoc';
-import { isString, isFunction } from '@winglet/common-utils/filter';
 import { renderComponent } from '@winglet/react-utils/render';
 
 class ModalManager {
@@ -413,7 +413,7 @@ const ConfigurationContext = createContext({});
 const DEFAULT_OPTIONS = {
     zIndex: DEFAULT_Z_INDEX,
     duration: DEFAULT_ANIMATION_DURATION,
-    backdrop: DEFAULT_BACKDROP_COLOR,
+    backdrop: { backgroundColor: DEFAULT_BACKDROP_COLOR },
     closeOnBackdropClick: true,
     manualDestroy: false,
 };
@@ -427,20 +427,28 @@ const ConfigurationContextProvider = memo(({ ForegroundComponent, BackgroundComp
         FooterComponent: memo(FooterComponent || FallbackFooter),
     });
     const options = useSnapshot(inputOptions);
-    const value = useMemo(() => ({
-        ForegroundComponent: constant.ForegroundComponent,
-        BackgroundComponent: constant.BackgroundComponent,
-        TitleComponent: constant.TitleComponent,
-        SubtitleComponent: constant.SubtitleComponent,
-        ContentComponent: constant.ContentComponent,
-        FooterComponent: constant.FooterComponent,
-        options: {
-            ...DEFAULT_OPTIONS,
-            ...options,
-        },
-    }), [constant, options]);
+    const value = useMemo(() => {
+        const { backdrop: defaultBackdrop, ...defaultOptions } = DEFAULT_OPTIONS;
+        const backdrop = getBackdropStyle(options?.backdrop, defaultBackdrop);
+        return {
+            ForegroundComponent: constant.ForegroundComponent,
+            BackgroundComponent: constant.BackgroundComponent,
+            TitleComponent: constant.TitleComponent,
+            SubtitleComponent: constant.SubtitleComponent,
+            ContentComponent: constant.ContentComponent,
+            FooterComponent: constant.FooterComponent,
+            options: { ...defaultOptions, ...options, backdrop },
+        };
+    }, [constant, options]);
     return (jsx(ConfigurationContext.Provider, { value: value, children: children }));
 });
+const getBackdropStyle = (backdrop, defaultBackdrop) => {
+    if (isPlainObject(backdrop))
+        return backdrop;
+    if (isString(backdrop))
+        return { backgroundColor: backdrop };
+    return defaultBackdrop;
+};
 
 const useConfigurationContext = () => useContext(ConfigurationContext);
 const useConfigurationOptions = () => {
@@ -840,9 +848,20 @@ const style = `
    inset: 0;
    pointer-events: none;
    z-index: var(--z-index);
-   transition: background-color ease-in-out;
+}`;
+const backdrop = ModalManager.getHashedClassNames('backdrop');
+const backdropStyle = `
+.${backdrop} {
+  position: fixed;
+  inset: 0;
+  opacity: 0;
+  transition-property: opacity;
+  transition-duration: var(--transition-duration);
+  transition-timing-function: ease-in-out;
+  pointer-events: none;
 }`;
 ModalManager.defineStyleSheet('anchor', style);
+ModalManager.defineStyleSheet('backdrop', backdropStyle);
 
 const { getValue, increment, reset } = counterFactory(0);
 const AnchorInner = () => {
@@ -855,11 +874,15 @@ const AnchorInner = () => {
     const dimmed = useActiveModalCount(validateDimmable, version);
     if (!dimmed)
         reset();
-    return (jsx("div", { className: anchor, style: {
-            '--z-index': options.zIndex,
-            transitionDuration: options.duration,
-            backgroundColor: dimmed ? options.backdrop : 'transparent',
-        }, children: map(modalIds, (id) => (jsx(Presenter, { modalId: id, getValue: getValue, increment: increment, reset: reset }, id))) }));
+    const anchorStyle = useMemo(() => ({
+        '--z-index': options.zIndex,
+        '--transition-duration': options.duration,
+    }), [options]);
+    const backdropStyle = useMemo(() => ({
+        ...options.backdrop,
+        opacity: dimmed ? 1 : 0,
+    }), [dimmed, options]);
+    return (jsxs("div", { className: anchor, style: anchorStyle, children: [jsx("div", { className: backdrop, style: backdropStyle }), map(modalIds, (id) => (jsx(Presenter, { modalId: id, getValue: getValue, increment: increment, reset: reset }, id)))] }));
 };
 const validateDimmable = (modal) => modal?.visible && modal.dimmed;
 const Anchor = memo(withErrorBoundary(AnchorInner));

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

@@ -1,4 +1,4 @@
-import { type ComponentType } from 'react';
+import { type CSSProperties, type ComponentType } from 'react';
 import type { BackgroundComponent, FooterComponentProps, ForegroundComponent, ModalOptions, WrapperComponentProps } from '../../types';
 export interface ConfigurationContextProps {
     ForegroundComponent: ForegroundComponent;
@@ -7,6 +7,8 @@ export interface ConfigurationContextProps {
     SubtitleComponent: ComponentType<WrapperComponentProps>;
     ContentComponent: ComponentType<WrapperComponentProps>;
     FooterComponent: ComponentType<FooterComponentProps>;
-    options: Required<ModalOptions>;
+    options: Required<Omit<ModalOptions, 'backdrop'> & {
+        backdrop: CSSProperties;
+    }>;
 }
 export declare const ConfigurationContext: import("react").Context<ConfigurationContextProps>;

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

@@ -92,7 +92,9 @@ export declare const useConfigurationContext: () => import("./ConfigurationConte
  * }
  * ```
  */
-export declare const useConfigurationOptions: () => Required<import("../..").ModalOptions>;
+export declare const useConfigurationOptions: () => Required<Omit<import("../..").ModalOptions, "backdrop"> & {
+    backdrop: import("react").CSSProperties;
+}>;
 /**
  * Hook that provides modal animation duration in multiple formats.
  *
@@ -277,4 +279,4 @@ export declare const useConfigurationDuration: () => {
  * - Default backdrop is typically semi-transparent black
  * - Can be overridden at provider level or per-modal
  */
-export declare const useConfigurationBackdrop: () => import("../../@aileron/declare").Color;
+export declare const useConfigurationBackdrop: () => import("react").CSSProperties;

package/dist/types/option.d.ts

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 import type { Color, Duration } from '../@aileron/declare';
 export interface ModalOptions {
     /** Modal z-index */
@@ -5,7 +6,7 @@ export interface ModalOptions {
     /** Modal transition time(ms, s) */
     duration?: Duration;
     /** Modal backdrop color */
-    backdrop?: Color;
+    backdrop?: Color | CSSProperties;
     /** Whether to destroy the modal manually */
     manualDestroy?: boolean;
     /** Whether to close the modal when the backdrop is clicked */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerx/promise-modal",
-  "version": "0.8.2",
+  "version": "0.8.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",
@@ -58,7 +58,7 @@
     "size-limit": "size-limit",
     "start": "yarn build && yarn storybook",
     "storybook": "storybook dev -p 6006",
-    "test": "yarn build:chain && vitest",
+    "test": "vitest",
     "version:major": "yarn version major",
     "version:minor": "yarn version minor",
     "version:patch": "yarn version patch"
@@ -66,7 +66,7 @@
   "dependencies": {
     "@winglet/common-utils": "^0.8.1",
     "@winglet/react-utils": "^0.8.0",
-    "@winglet/style-utils": "^0.8.0"
+    "@winglet/style-utils": "^0.8.2"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",