@lerx/promise-modal 0.8.0 → 0.8.2

package/dist/app/ModalManager.d.ts

@@ -2,15 +2,14 @@ import type { Fn } from '../@aileron/declare';
 import type { Modal } from '../types';
 export declare class ModalManager {
     #private;
-    static initialize(): boolean;
     static anchor(options?: {
         tag?: string;
         prefix?: string;
         root?: HTMLElement;
     }): HTMLElement;
+    static get anchored(): boolean;
     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 getHashedClassNames(styleId: string): string;

package/dist/app/constant.d.ts

@@ -1,3 +1,4 @@
 import type { Color, Duration } from '../@aileron/declare';
+export declare const DEFAULT_Z_INDEX: number;
 export declare const DEFAULT_ANIMATION_DURATION: Duration;
 export declare const DEFAULT_BACKDROP_COLOR: Color;

package/dist/bootstrap/BootstrapProvider/BootstrapProvider.d.ts

@@ -114,7 +114,7 @@ import type { BootstrapProviderHandle } from './type';
  * - All modals created within this provider share the same configuration
  * - The provider creates a portal for rendering modals outside the React tree
  */
-export declare const BootstrapProvider: import("react").ForwardRefExoticComponent<{
+export declare const BootstrapProvider: import("react").NamedExoticComponent<{
     usePathname?: import("../../@aileron/declare").Fn<[], {
         pathname: string;
     }>;

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

@@ -1,2 +1,2 @@
-import type { ModalIdProps } from '../../types';
-export declare const Presenter: import("react").MemoExoticComponent<({ modalId }: ModalIdProps) => import("react/jsx-runtime").JSX.Element>;
+import type { PresenterProps } from '../../types';
+export declare const Presenter: import("react").MemoExoticComponent<({ modalId, getValue, increment }: PresenterProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/core/handle/prompt.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactNode } from 'react';
+import type { Fn } from '../../@aileron/declare';
 import type { BackgroundComponent, FooterOptions, ForegroundComponent, ModalBackground, PromptContentProps, PromptFooterRender, PromptInputProps } from '../../types';
 interface PromptProps<InputValue, BackgroundValue = any> {
     group?: string;
@@ -6,8 +7,8 @@ interface PromptProps<InputValue, BackgroundValue = any> {
     subtitle?: ReactNode;
     content?: ReactNode | ComponentType<PromptContentProps>;
     defaultValue?: InputValue;
-    Input: (props: PromptInputProps<InputValue>) => ReactNode;
-    disabled?: (value: InputValue) => boolean;
+    Input: Fn<[props: PromptInputProps<InputValue>], ReactNode>;
+    disabled?: Fn<[value: InputValue], boolean>;
     returnOnCancel?: boolean;
     background?: ModalBackground<BackgroundValue>;
     footer?: PromptFooterRender<InputValue> | FooterOptions | false;

package/dist/core/node/ModalNode/PromptNode.d.ts

@@ -1,4 +1,5 @@
 import type { ComponentType, ReactNode } from 'react';
+import type { Fn } from '../../../@aileron/declare';
 import type { FooterOptions, ManagedEntity, PromptContentProps, PromptFooterRender, PromptInputProps, PromptModal } from '../../../types';
 import { AbstractNode } from './AbstractNode';
 type PromptNodeProps<T, B> = PromptModal<T, B> & ManagedEntity;
@@ -7,8 +8,8 @@ export declare class PromptNode<T, B> extends AbstractNode<T, B> {
     readonly type: 'prompt';
     readonly content?: ReactNode | ComponentType<PromptContentProps>;
     readonly defaultValue: T | undefined;
-    readonly Input: (props: PromptInputProps<T>) => ReactNode;
-    readonly disabled?: (value: T) => boolean;
+    readonly Input: Fn<[props: PromptInputProps<T>], ReactNode>;
+    readonly disabled?: Fn<[value: T], boolean>;
     readonly returnOnCancel?: boolean;
     readonly footer?: PromptFooterRender<T> | FooterOptions | false;
     constructor({ id, group, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, manualDestroy, closeOnBackdropClick, resolve, ForegroundComponent, BackgroundComponent, }: PromptNodeProps<T, B>);

package/dist/index.cjs

@@ -13,20 +13,13 @@ 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');
-const console = require('@winglet/common-utils/console');
 
 class ModalManager {
-    static #initialized = false;
-    static initialize() {
-        if (ModalManager.#initialized)
-            return false;
-        return (ModalManager.#initialized = true);
-    }
     static #anchor = null;
     static #scope = `promise-modal-${lib.getRandomString(36)}`;
     static #hash = hash.polynomialHash(ModalManager.#scope);
     static anchor(options) {
-        if (ModalManager.#anchor)
+        if (ModalManager.#anchor !== null)
             return ModalManager.#anchor;
         const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
         const node = document.createElement(tag);
@@ -36,6 +29,9 @@ class ModalManager {
         ModalManager.#anchor = node;
         return node;
     }
+    static get anchored() {
+        return ModalManager.#anchor !== null;
+    }
     static #prerenderList = [];
     static get prerender() {
         return ModalManager.#prerenderList;
@@ -45,9 +41,6 @@ class ModalManager {
         ModalManager.#openHandler = handler;
         ModalManager.#prerenderList = [];
     }
-    static get unanchored() {
-        return !ModalManager.#anchor;
-    }
     static #styleManager = styleManager.styleManagerFactory(ModalManager.#scope);
     static #styleSheetDefinition = new Map();
     static defineStyleSheet(styleId, css) {
@@ -61,7 +54,6 @@ class ModalManager {
         return `${styleId}-${ModalManager.#hash}`;
     }
     static reset() {
-        ModalManager.#initialized = false;
         ModalManager.#anchor = null;
         ModalManager.#prerenderList = [];
         ModalManager.#openHandler = (modal) => ModalManager.#prerenderList.push(modal);
@@ -349,6 +341,7 @@ const nodeFactory = (modal) => {
     throw new Error(`Unknown modal: ${modal.type}`, { modal });
 };
 
+const DEFAULT_Z_INDEX = 1000;
 const DEFAULT_ANIMATION_DURATION = '300ms';
 const DEFAULT_BACKDROP_COLOR = 'rgba(0, 0, 0, 0.5)';
 
@@ -420,6 +413,7 @@ const FallbackForegroundFrame = react.forwardRef(({ id, onChangeOrder, children
 const ConfigurationContext = react.createContext({});
 
 const DEFAULT_OPTIONS = {
+    zIndex: DEFAULT_Z_INDEX,
     duration: DEFAULT_ANIMATION_DURATION,
     backdrop: DEFAULT_BACKDROP_COLOR,
     closeOnBackdropClick: true,
@@ -811,21 +805,30 @@ const style$1 = `
 .${presenter} {
   position: fixed;
   inset: 0;
+  z-index: var(--z-index);
   pointer-events: none;
   overflow: hidden;
 `;
 ModalManager.defineStyleSheet('presenter', style$1);
 
-const { increment } = lib.counterFactory(1);
-const Presenter = react.memo(({ modalId }) => {
+const Presenter = react.memo(({ modalId, getValue, increment }) => {
     const ref = react.useRef(null);
+    const options = useConfigurationOptions();
     const { modal } = useModal(modalId);
     useSubscribeModal(modal);
-    const handleChangeOrder = hook.useHandle(() => {
-        if (ref.current) {
-            ref.current.style.zIndex = `${increment()}`;
-        }
+    hook.useOnMountLayout(() => {
+        if (ref.current === null)
+            return;
+        ref.current.style.zIndex = '' + (options.zIndex + increment());
     });
+    const handleChangeOrder = react.useCallback(() => {
+        const element = ref.current;
+        if (element === null)
+            return;
+        if (element.style.zIndex === '' + (options.zIndex + getValue()))
+            return;
+        element.style.zIndex = '' + (options.zIndex + increment());
+    }, [getValue, increment, options.zIndex]);
     return (jsxRuntime.jsxs("div", { ref: ref, className: presenter, children: [jsxRuntime.jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsxRuntime.jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
 });
 
@@ -838,11 +841,12 @@ const style = `
    position: fixed;
    inset: 0;
    pointer-events: none;
-   z-index: 1000;
+   z-index: var(--z-index);
    transition: background-color ease-in-out;
 }`;
 ModalManager.defineStyleSheet('anchor', style);
 
+const { getValue, increment, reset } = lib.counterFactory(0);
 const AnchorInner = () => {
     const [version, update] = hook.useVersion();
     const { modalIds, setUpdater } = useModalManagerContext();
@@ -851,10 +855,13 @@ const AnchorInner = () => {
     }, [setUpdater, update]);
     const options = useConfigurationOptions();
     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 }, id))) }));
+        }, children: 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));
@@ -862,42 +869,33 @@ const Anchor = react.memo(hoc.withErrorBoundary(AnchorInner));
 const bootstrap = ({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, usePathname, options, context, anchor, }) => reactDom.createPortal(jsxRuntime.jsx(UserDefinedContextProvider, { context: context, children: jsxRuntime.jsx(ConfigurationContextProvider, { ForegroundComponent: ForegroundComponent, BackgroundComponent: BackgroundComponent, TitleComponent: TitleComponent, SubtitleComponent: SubtitleComponent, ContentComponent: ContentComponent, FooterComponent: FooterComponent, options: options, children: jsxRuntime.jsx(ModalManagerContextProvider, { usePathname: usePathname, children: jsxRuntime.jsx(Anchor, {}) }) }) }), anchor);
 
 const useInitialize = () => {
-    const permitted = react.useRef(ModalManager.initialize());
-    const anchorRef = react.useRef(null);
     const [, update] = hook.useVersion();
-    const handleInitialize = react.useCallback((root) => {
-        if (permitted.current) {
-            anchorRef.current = ModalManager.anchor({ root });
-            ModalManager.applyStyleSheet();
-            update();
-        }
-        else
-            console.printError('ModalProvider is already initialized', [
-                'ModalProvider can only be initialized once.',
-                'Nesting ModalProvider will be ignored...',
-            ], {
-                info: 'Something is wrong with the ModalProvider initialization...',
-            });
-    }, [update]);
-    const handleReset = react.useCallback(() => {
-        ModalManager.reset();
-    }, []);
+    const anchorRef = react.useRef(null);
+    const handleInitialize = react.useRef((root) => {
+        if (ModalManager.anchored)
+            return;
+        anchorRef.current = ModalManager.anchor({ root });
+        ModalManager.applyStyleSheet();
+        update();
+    });
+    const handleReset = react.useRef(() => ModalManager.reset());
     return {
         anchorRef,
-        handleInitialize,
-        handleReset,
+        handleInitialize: handleInitialize.current,
+        handleReset: handleReset.current,
     };
 };
 
-const BootstrapProvider = react.forwardRef(({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, children, }, handleRef) => {
+const BootstrapProvider = react.memo(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, handleReset } = useInitialize();
     react.useImperativeHandle(handleRef, () => ({
         initialize: handleInitialize,
     }), [handleInitialize]);
     hook.useOnMount(() => {
-        if (handleRef === null)
-            handleInitialize();
+        if (handleRef !== null)
+            return;
+        handleInitialize();
         return () => {
             if (anchorRef.current)
                 anchorRef.current.remove();
@@ -917,7 +915,7 @@ const BootstrapProvider = react.forwardRef(({ usePathname: useExternalPathname,
                     context,
                     anchor: anchorRef.current,
                 })] }));
-});
+}));
 
 const useBootstrap = ({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, mode = 'auto', } = {}) => {
     const usePathname$1 = react.useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);

package/dist/index.mjs

@@ -11,20 +11,13 @@ 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';
-import { printError } from '@winglet/common-utils/console';
 
 class ModalManager {
-    static #initialized = false;
-    static initialize() {
-        if (ModalManager.#initialized)
-            return false;
-        return (ModalManager.#initialized = true);
-    }
     static #anchor = null;
     static #scope = `promise-modal-${getRandomString(36)}`;
     static #hash = polynomialHash(ModalManager.#scope);
     static anchor(options) {
-        if (ModalManager.#anchor)
+        if (ModalManager.#anchor !== null)
             return ModalManager.#anchor;
         const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
         const node = document.createElement(tag);
@@ -34,6 +27,9 @@ class ModalManager {
         ModalManager.#anchor = node;
         return node;
     }
+    static get anchored() {
+        return ModalManager.#anchor !== null;
+    }
     static #prerenderList = [];
     static get prerender() {
         return ModalManager.#prerenderList;
@@ -43,9 +39,6 @@ class ModalManager {
         ModalManager.#openHandler = handler;
         ModalManager.#prerenderList = [];
     }
-    static get unanchored() {
-        return !ModalManager.#anchor;
-    }
     static #styleManager = styleManagerFactory(ModalManager.#scope);
     static #styleSheetDefinition = new Map();
     static defineStyleSheet(styleId, css) {
@@ -59,7 +52,6 @@ class ModalManager {
         return `${styleId}-${ModalManager.#hash}`;
     }
     static reset() {
-        ModalManager.#initialized = false;
         ModalManager.#anchor = null;
         ModalManager.#prerenderList = [];
         ModalManager.#openHandler = (modal) => ModalManager.#prerenderList.push(modal);
@@ -347,6 +339,7 @@ const nodeFactory = (modal) => {
     throw new Error(`Unknown modal: ${modal.type}`, { modal });
 };
 
+const DEFAULT_Z_INDEX = 1000;
 const DEFAULT_ANIMATION_DURATION = '300ms';
 const DEFAULT_BACKDROP_COLOR = 'rgba(0, 0, 0, 0.5)';
 
@@ -418,6 +411,7 @@ const FallbackForegroundFrame = forwardRef(({ id, onChangeOrder, children }, ref
 const ConfigurationContext = createContext({});
 
 const DEFAULT_OPTIONS = {
+    zIndex: DEFAULT_Z_INDEX,
     duration: DEFAULT_ANIMATION_DURATION,
     backdrop: DEFAULT_BACKDROP_COLOR,
     closeOnBackdropClick: true,
@@ -809,21 +803,30 @@ const style$1 = `
 .${presenter} {
   position: fixed;
   inset: 0;
+  z-index: var(--z-index);
   pointer-events: none;
   overflow: hidden;
 `;
 ModalManager.defineStyleSheet('presenter', style$1);
 
-const { increment } = counterFactory(1);
-const Presenter = memo(({ modalId }) => {
+const Presenter = memo(({ modalId, getValue, increment }) => {
     const ref = useRef(null);
+    const options = useConfigurationOptions();
     const { modal } = useModal(modalId);
     useSubscribeModal(modal);
-    const handleChangeOrder = useHandle(() => {
-        if (ref.current) {
-            ref.current.style.zIndex = `${increment()}`;
-        }
+    useOnMountLayout(() => {
+        if (ref.current === null)
+            return;
+        ref.current.style.zIndex = '' + (options.zIndex + increment());
     });
+    const handleChangeOrder = useCallback(() => {
+        const element = ref.current;
+        if (element === null)
+            return;
+        if (element.style.zIndex === '' + (options.zIndex + getValue()))
+            return;
+        element.style.zIndex = '' + (options.zIndex + increment());
+    }, [getValue, increment, options.zIndex]);
     return (jsxs("div", { ref: ref, className: presenter, children: [jsx(BackgroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder }), jsx(ForegroundFrame, { modalId: modalId, onChangeOrder: handleChangeOrder })] }));
 });
 
@@ -836,11 +839,12 @@ const style = `
    position: fixed;
    inset: 0;
    pointer-events: none;
-   z-index: 1000;
+   z-index: var(--z-index);
    transition: background-color ease-in-out;
 }`;
 ModalManager.defineStyleSheet('anchor', style);
 
+const { getValue, increment, reset } = counterFactory(0);
 const AnchorInner = () => {
     const [version, update] = useVersion();
     const { modalIds, setUpdater } = useModalManagerContext();
@@ -849,10 +853,13 @@ const AnchorInner = () => {
     }, [setUpdater, update]);
     const options = useConfigurationOptions();
     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 }, id))) }));
+        }, children: 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));
@@ -860,42 +867,33 @@ const Anchor = memo(withErrorBoundary(AnchorInner));
 const bootstrap = ({ ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, usePathname, options, context, anchor, }) => createPortal(jsx(UserDefinedContextProvider, { context: context, children: jsx(ConfigurationContextProvider, { ForegroundComponent: ForegroundComponent, BackgroundComponent: BackgroundComponent, TitleComponent: TitleComponent, SubtitleComponent: SubtitleComponent, ContentComponent: ContentComponent, FooterComponent: FooterComponent, options: options, children: jsx(ModalManagerContextProvider, { usePathname: usePathname, children: jsx(Anchor, {}) }) }) }), anchor);
 
 const useInitialize = () => {
-    const permitted = useRef(ModalManager.initialize());
-    const anchorRef = useRef(null);
     const [, update] = useVersion();
-    const handleInitialize = useCallback((root) => {
-        if (permitted.current) {
-            anchorRef.current = ModalManager.anchor({ root });
-            ModalManager.applyStyleSheet();
-            update();
-        }
-        else
-            printError('ModalProvider is already initialized', [
-                'ModalProvider can only be initialized once.',
-                'Nesting ModalProvider will be ignored...',
-            ], {
-                info: 'Something is wrong with the ModalProvider initialization...',
-            });
-    }, [update]);
-    const handleReset = useCallback(() => {
-        ModalManager.reset();
-    }, []);
+    const anchorRef = useRef(null);
+    const handleInitialize = useRef((root) => {
+        if (ModalManager.anchored)
+            return;
+        anchorRef.current = ModalManager.anchor({ root });
+        ModalManager.applyStyleSheet();
+        update();
+    });
+    const handleReset = useRef(() => ModalManager.reset());
     return {
         anchorRef,
-        handleInitialize,
-        handleReset,
+        handleInitialize: handleInitialize.current,
+        handleReset: handleReset.current,
     };
 };
 
-const BootstrapProvider = forwardRef(({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, children, }, handleRef) => {
+const BootstrapProvider = memo(forwardRef(({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, children, }, handleRef) => {
     const usePathname$1 = useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);
     const { anchorRef, handleInitialize, handleReset } = useInitialize();
     useImperativeHandle(handleRef, () => ({
         initialize: handleInitialize,
     }), [handleInitialize]);
     useOnMount(() => {
-        if (handleRef === null)
-            handleInitialize();
+        if (handleRef !== null)
+            return;
+        handleInitialize();
         return () => {
             if (anchorRef.current)
                 anchorRef.current.remove();
@@ -915,7 +913,7 @@ const BootstrapProvider = forwardRef(({ usePathname: useExternalPathname, Foregr
                     context,
                     anchor: anchorRef.current,
                 })] }));
-});
+}));
 
 const useBootstrap = ({ usePathname: useExternalPathname, ForegroundComponent, BackgroundComponent, TitleComponent, SubtitleComponent, ContentComponent, FooterComponent, options, context, mode = 'auto', } = {}) => {
     const usePathname$1 = useMemo(() => useExternalPathname || usePathname, [useExternalPathname]);

package/dist/types/alert.d.ts

@@ -1,10 +1,12 @@
 import type { ComponentType, ReactNode } from 'react';
-import type { Dictionary } from '../@aileron/declare';
+import type { Dictionary, Fn } from '../@aileron/declare';
 import type { BaseModal, ContentComponentProps, FooterOptions } from './base';
-export type AlertFooterRender<Context extends Dictionary = object> = (props: {
-    onConfirm: VoidFunction;
-    context: Context;
-}) => ReactNode;
+export type AlertFooterRender<Context extends Dictionary = object> = Fn<[
+    props: {
+        onConfirm: Fn;
+        context: Context;
+    }
+], ReactNode>;
 export type AlertContentProps<Context extends Dictionary = object> = Pick<ContentComponentProps<Context>, 'onConfirm'>;
 export interface AlertModal<B = any, Context extends Dictionary = object> extends BaseModal<void, B> {
     type: 'alert';

package/dist/types/base.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentType, PropsWithChildren, ReactNode } from 'react';
-import type { Dictionary } from '../@aileron/declare';
+import type { Dictionary, Fn } from '../@aileron/declare';
 import type { ModalBackground } from './background';
 import type { ModalFrameProps } from './modal';
 export interface BaseModal<T, B> {
@@ -10,15 +10,15 @@ export interface BaseModal<T, B> {
     dimmed?: boolean;
     manualDestroy?: boolean;
     closeOnBackdropClick?: boolean;
-    resolve: (result: T | null) => void;
+    resolve: Fn<[result: T | null]>;
     ForegroundComponent?: ForegroundComponent;
     BackgroundComponent?: BackgroundComponent;
 }
 export type ForegroundComponent = ComponentType<PropsWithChildren<ModalFrameProps>>;
 export type BackgroundComponent = ComponentType<ModalFrameProps>;
 export interface ContentComponentProps<Context extends Dictionary = object> {
-    onConfirm: VoidFunction;
-    onCancel: VoidFunction;
+    onConfirm: Fn;
+    onCancel: Fn;
     context: Context;
 }
 export type WrapperComponentProps<Context extends Dictionary = object> = PropsWithChildren<{
@@ -36,7 +36,7 @@ export type FooterComponentProps<Context extends Dictionary = object> = {
     cancelLabel?: ReactNode;
     hideCancel?: boolean;
     disabled?: boolean;
-    onConfirm: VoidFunction;
-    onCancel?: VoidFunction;
+    onConfirm: Fn;
+    onCancel?: Fn;
     context: Context;
 };

package/dist/types/confirm.d.ts

@@ -1,11 +1,13 @@
 import type { ComponentType, ReactNode } from 'react';
-import type { Dictionary } from '../@aileron/declare';
+import type { Dictionary, Fn } from '../@aileron/declare';
 import type { BaseModal, ContentComponentProps, FooterOptions } from './base';
-export type ConfirmFooterRender<Context extends Dictionary = object> = (props: {
-    onConfirm: VoidFunction;
-    onCancel: VoidFunction;
-    context: Context;
-}) => ReactNode;
+export type ConfirmFooterRender<Context extends Dictionary = object> = Fn<[
+    props: {
+        onConfirm: Fn;
+        onCancel: Fn;
+        context: Context;
+    }
+], ReactNode>;
 export type ConfirmContentProps<Context extends Dictionary = object> = ContentComponentProps<Context>;
 export interface ConfirmModal<B = any, Context extends Dictionary = object> extends BaseModal<boolean, B> {
     type: 'confirm';

package/dist/types/modal.d.ts

@@ -19,29 +19,35 @@ export type ModalFrameProps<Context extends Dictionary = object, B = any> = {
     manualDestroy: boolean;
     closeOnBackdropClick: boolean;
     background?: ModalBackground<B>;
-    onConfirm: () => void;
-    onClose: () => void;
-    onChange: (value: any) => void;
-    onDestroy: () => void;
+    onConfirm: Fn;
+    onClose: Fn;
+    onChange: Fn<[value: any]>;
+    onDestroy: Fn;
     onChangeOrder: Fn;
     context: Context;
 };
-export interface ModalIdProps {
+interface ModalIdProps {
     modalId: ModalNode['id'];
 }
+export interface PresenterProps extends ModalIdProps {
+    getValue: Fn<[], number>;
+    increment: Fn<[], number>;
+    reset: Fn<[], number>;
+}
 export interface ModalLayerProps extends ModalIdProps {
     onChangeOrder: Fn;
 }
 export interface ModalHandlersWithId {
-    onConfirm: (modalId: ModalNode['id']) => void;
-    onClose: (modalId: ModalNode['id']) => void;
-    onChange: (modalId: ModalNode['id'], value: any) => void;
-    onDestroy: (modalId: ModalNode['id']) => void;
+    onConfirm: Fn<[modalId: ModalNode['id']]>;
+    onClose: Fn<[modalId: ModalNode['id']]>;
+    onChange: Fn<[modalId: ModalNode['id'], value: any]>;
+    onDestroy: Fn<[modalId: ModalNode['id']]>;
 }
 export type ModalActions = {
     modal: ModalNode | undefined;
-    onConfirm: () => void;
-    onClose: () => void;
-    onChange: (value: any) => void;
-    onDestroy: () => void;
+    onConfirm: Fn;
+    onClose: Fn;
+    onChange: Fn<[value: any]>;
+    onDestroy: Fn;
 };
+export {};

package/dist/types/option.d.ts

@@ -1,5 +1,7 @@
 import type { Color, Duration } from '../@aileron/declare';
 export interface ModalOptions {
+    /** Modal z-index */
+    zIndex?: number;
     /** Modal transition time(ms, s) */
     duration?: Duration;
     /** Modal backdrop color */

package/dist/types/prompt.d.ts

@@ -1,20 +1,22 @@
 import type { ComponentType, ReactNode } from 'react';
-import type { Dictionary, SetStateFn } from '../@aileron/declare';
+import type { Dictionary, Fn, SetStateFn } from '../@aileron/declare';
 import type { BaseModal, ContentComponentProps, FooterOptions } from './base';
-export type PromptFooterRender<T, Context extends Dictionary = object> = (props: {
-    value: T | undefined;
-    onChange: SetStateFn<T | undefined>;
-    onConfirm: VoidFunction;
-    onCancel: VoidFunction;
-    disabled: boolean;
-    context: Context;
-}) => ReactNode;
+export type PromptFooterRender<T, Context extends Dictionary = object> = Fn<[
+    props: {
+        value: T | undefined;
+        onChange: SetStateFn<T | undefined>;
+        onConfirm: Fn;
+        onCancel: Fn;
+        disabled: boolean;
+        context: Context;
+    }
+], ReactNode>;
 export interface PromptInputProps<T, Context extends Dictionary = object> {
     value?: T;
     defaultValue?: T;
     onChange: SetStateFn<T | undefined>;
-    onConfirm: VoidFunction;
-    onCancel: VoidFunction;
+    onConfirm: Fn;
+    onCancel: Fn;
     context: Context;
 }
 export type PromptContentProps<Context extends Dictionary = object> = ContentComponentProps<Context>;
@@ -22,8 +24,8 @@ export interface PromptModal<T = any, B = any, Context extends Dictionary = obje
     type: 'prompt';
     content?: ReactNode | ComponentType<PromptContentProps<Context>>;
     defaultValue?: T;
-    Input: (props: PromptInputProps<T, Context>) => ReactNode;
-    disabled?: (value: T | undefined) => boolean;
+    Input: Fn<[props: PromptInputProps<T, Context>], ReactNode>;
+    disabled?: Fn<[value: T | undefined], boolean>;
     returnOnCancel?: boolean;
     footer?: PromptFooterRender<T, Context> | FooterOptions | false;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerx/promise-modal",
-  "version": "0.8.0",
+  "version": "0.8.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",
@@ -64,7 +64,7 @@
     "version:patch": "yarn version patch"
   },
   "dependencies": {
-    "@winglet/common-utils": "^0.8.0",
+    "@winglet/common-utils": "^0.8.1",
     "@winglet/react-utils": "^0.8.0",
     "@winglet/style-utils": "^0.8.0"
   },