@lerx/promise-modal 0.8.1 → 0.8.2

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

@@ -811,19 +811,24 @@ const style$1 = `
 `;
 ModalManager.defineStyleSheet('presenter', style$1);
 
-const { getValue, 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 = react.useCallback(() => {
+    hook.useOnMountLayout(() => {
         if (ref.current === null)
             return;
-        if (ref.current.style.zIndex === '' + options.zIndex + getValue())
+        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;
-        ref.current.style.zIndex = '' + options.zIndex + increment();
-    }, [options.zIndex]);
+        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 })] }));
 });
 
@@ -841,6 +846,7 @@ const style = `
 }`;
 ModalManager.defineStyleSheet('anchor', style);
 
+const { getValue, increment, reset } = lib.counterFactory(0);
 const AnchorInner = () => {
     const [version, update] = hook.useVersion();
     const { modalIds, setUpdater } = useModalManagerContext();
@@ -849,11 +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));

package/dist/index.mjs

@@ -809,19 +809,24 @@ const style$1 = `
 `;
 ModalManager.defineStyleSheet('presenter', style$1);
 
-const { getValue, 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 = useCallback(() => {
+    useOnMountLayout(() => {
         if (ref.current === null)
             return;
-        if (ref.current.style.zIndex === '' + options.zIndex + getValue())
+        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;
-        ref.current.style.zIndex = '' + options.zIndex + increment();
-    }, [options.zIndex]);
+        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 })] }));
 });
 
@@ -839,6 +844,7 @@ const style = `
 }`;
 ModalManager.defineStyleSheet('anchor', style);
 
+const { getValue, increment, reset } = counterFactory(0);
 const AnchorInner = () => {
     const [version, update] = useVersion();
     const { modalIds, setUpdater } = useModalManagerContext();
@@ -847,11 +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));

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/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.1",
+  "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",