@lerx/promise-modal 0.9.1 → 0.10.0

package/README.md

@@ -35,10 +35,6 @@ npm install @lerx/promise-modal
 
 ## Compatibility
 
-`@lerx/promise-modal` is built with ECMAScript 2022 (ES2022) syntax.
-
-If you're using a JavaScript environment that doesn't support ES2022, you'll need to include this package in your transpilation process.
-
 **Supported environments:**
 
 - Node.js 16.11.0 or later

package/dist/app/ModalManager.d.ts

@@ -2,15 +2,22 @@ import type { Fn } from '../@aileron/declare';
 import type { ModalNode } from '../core';
 import type { Modal } from '../types';
 export declare class ModalManager {
-    #private;
+    private static __anchor__;
+    private static __scope__;
+    private static __hash__;
+    private static __styleManager__;
+    private static __styleSheetDefinition__;
     static anchor(options?: {
         tag?: string;
         prefix?: string;
         root?: HTMLElement;
     }): HTMLElement;
     static get anchored(): boolean;
+    private static __prerenderList__;
     static get prerender(): Modal[];
+    private static __openHandler__;
     static set openHandler(handler: Fn<[Modal], ModalNode>);
+    private static __refreshHandler__?;
     static set refreshHandler(handler: Fn<[], void>);
     static refresh(): void;
     static defineStyleSheet(styleId: string, css: string): void;

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

@@ -3,7 +3,6 @@ import type { Fn } from '../../../@aileron/declare';
 import type { BackgroundComponent, BaseModal, ForegroundComponent, ManagedEntity, ModalBackground } from '../../../types';
 type AbstractNodeProps<T, B> = BaseModal<T, B> & ManagedEntity;
 export declare abstract class AbstractNode<T, B> {
-    #private;
     readonly id: number;
     readonly group?: string;
     readonly initiator: string;
@@ -16,9 +15,13 @@ export declare abstract class AbstractNode<T, B> {
     readonly closeOnBackdropClick: boolean;
     readonly ForegroundComponent?: ForegroundComponent;
     readonly BackgroundComponent?: BackgroundComponent;
+    private __alive__;
     get alive(): boolean;
+    private __visible__;
     get visible(): boolean;
+    private __handleResolve__?;
     set handleResolve(handleResolve: Fn<[result: T | null]>);
+    private __listeners__;
     constructor({ id, initiator, group, title, subtitle, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }: AbstractNodeProps<T, B>);
     abstract onClose(): void;
     abstract onConfirm(): void;

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

@@ -4,7 +4,6 @@ import type { FooterOptions, ManagedEntity, PromptContentProps, PromptFooterRend
 import { AbstractNode } from './AbstractNode';
 type PromptNodeProps<T, B> = PromptModal<T, B> & ManagedEntity;
 export declare class PromptNode<T = any, B = any> extends AbstractNode<T, B> {
-    #private;
     readonly type: 'prompt';
     readonly content?: ReactNode | ComponentType<PromptContentProps>;
     readonly defaultValue: T | undefined;
@@ -12,6 +11,7 @@ export declare class PromptNode<T = any, B = any> extends AbstractNode<T, B> {
     readonly disabled?: Fn<[value: T], boolean>;
     readonly returnOnCancel?: boolean;
     readonly footer?: PromptFooterRender<T> | FooterOptions | false;
+    private __value__;
     constructor({ id, group, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }: PromptNodeProps<T, B>);
     onChange(value: T): void;
     onConfirm(): void;

package/dist/index.cjs

@@ -15,66 +15,65 @@ const hoc = require('@winglet/react-utils/hoc');
 const render = require('@winglet/react-utils/render');
 
 class ModalManager {
-    static #anchor = null;
-    static #scope = `promise-modal-${lib.getRandomString(36)}`;
-    static #hash = hash.polynomialHash(ModalManager.#scope);
-    static #styleManager = styleManager.styleManagerFactory(ModalManager.#scope);
-    static #styleSheetDefinition = new Map();
     static anchor(options) {
-        if (ModalManager.#anchor !== null)
-            return ModalManager.#anchor;
+        if (ModalManager.__anchor__ !== null)
+            return ModalManager.__anchor__;
         const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
         const node = document.createElement(tag);
         node.id = `${prefix}-${lib.getRandomString(36)}`;
-        node.className = ModalManager.#scope;
+        node.className = ModalManager.__scope__;
         root.appendChild(node);
-        ModalManager.#anchor = node;
+        ModalManager.__anchor__ = node;
         return node;
     }
     static get anchored() {
-        return ModalManager.#anchor !== null;
+        return ModalManager.__anchor__ !== null;
     }
-    static #prerenderList = [];
     static get prerender() {
-        return ModalManager.#prerenderList;
+        return ModalManager.__prerenderList__;
     }
-    static #openHandler = ((modal) => {
-        ModalManager.#prerenderList.push(modal);
-    });
     static set openHandler(handler) {
-        ModalManager.#openHandler = handler;
-        ModalManager.#prerenderList = [];
+        ModalManager.__openHandler__ = handler;
+        ModalManager.__prerenderList__ = [];
     }
-    static #refreshHandler;
     static set refreshHandler(handler) {
-        ModalManager.#refreshHandler = handler;
+        ModalManager.__refreshHandler__ = handler;
     }
     static refresh() {
-        ModalManager.#refreshHandler?.();
+        ModalManager.__refreshHandler__?.();
     }
     static defineStyleSheet(styleId, css) {
-        ModalManager.#styleSheetDefinition.set(styleId, util.compressCss(css));
+        ModalManager.__styleSheetDefinition__.set(styleId, util.compressCss(css));
     }
     static applyStyleSheet() {
-        for (const [styleId, css] of ModalManager.#styleSheetDefinition)
-            ModalManager.#styleManager(styleId, css, true);
+        for (const [styleId, css] of ModalManager.__styleSheetDefinition__)
+            ModalManager.__styleManager__(styleId, css, true);
     }
     static getHashedClassNames(styleId) {
-        return `${styleId}-${ModalManager.#hash}`;
+        return `${styleId}-${ModalManager.__hash__}`;
     }
     static reset() {
-        ModalManager.#anchor = null;
-        ModalManager.#prerenderList = [];
-        ModalManager.#openHandler = ((modal) => {
-            ModalManager.#prerenderList.push(modal);
+        ModalManager.__anchor__ = null;
+        ModalManager.__prerenderList__ = [];
+        ModalManager.__openHandler__ = ((modal) => {
+            ModalManager.__prerenderList__.push(modal);
         });
-        ModalManager.#refreshHandler = undefined;
-        styleManager.destroyScope(ModalManager.#scope);
+        ModalManager.__refreshHandler__ = undefined;
+        styleManager.destroyScope(ModalManager.__scope__);
     }
     static open(modal) {
-        return ModalManager.#openHandler(modal);
+        return ModalManager.__openHandler__(modal);
     }
 }
+ModalManager.__anchor__ = null;
+ModalManager.__scope__ = `promise-modal-${lib.getRandomString(36)}`;
+ModalManager.__hash__ = hash.polynomialHash(ModalManager.__scope__);
+ModalManager.__styleManager__ = styleManager.styleManagerFactory(ModalManager.__scope__);
+ModalManager.__styleSheetDefinition__ = new Map();
+ModalManager.__prerenderList__ = [];
+ModalManager.__openHandler__ = ((modal) => {
+    ModalManager.__prerenderList__.push(modal);
+});
 
 const closeModal = (modalNode, refresh = true) => {
     if (modalNode.visible === false)
@@ -173,32 +172,17 @@ const confirm = (args) => confirmHandler(args).promiseHandler;
 const prompt = (args) => promptHandler(args).promiseHandler;
 
 class AbstractNode {
-    id;
-    group;
-    initiator;
-    title;
-    subtitle;
-    background;
-    dimmed;
-    duration;
-    manualDestroy;
-    closeOnBackdropClick;
-    ForegroundComponent;
-    BackgroundComponent;
-    #alive;
     get alive() {
-        return this.#alive;
+        return this.__alive__;
     }
-    #visible;
     get visible() {
-        return this.#visible;
+        return this.__visible__;
     }
-    #handleResolve;
     set handleResolve(handleResolve) {
-        this.#handleResolve = handleResolve;
+        this.__handleResolve__ = handleResolve;
     }
-    #listeners = new Set();
     constructor({ id, initiator, group, title, subtitle, background, dimmed = true, duration = 0, manualDestroy = false, closeOnBackdropClick = true, handleResolve, ForegroundComponent, BackgroundComponent, }) {
+        this.__listeners__ = new Set();
         this.id = id;
         this.group = group;
         this.initiator = initiator;
@@ -211,48 +195,44 @@ class AbstractNode {
         this.closeOnBackdropClick = closeOnBackdropClick;
         this.ForegroundComponent = ForegroundComponent;
         this.BackgroundComponent = BackgroundComponent;
-        this.#alive = true;
-        this.#visible = true;
-        this.#handleResolve = handleResolve;
+        this.__alive__ = true;
+        this.__visible__ = true;
+        this.__handleResolve__ = handleResolve;
     }
     onResolve(result) {
-        this.#handleResolve?.(result);
+        this.__handleResolve__?.(result);
     }
     subscribe(listener) {
-        this.#listeners.add(listener);
+        this.__listeners__.add(listener);
         return () => {
-            this.#listeners.delete(listener);
+            this.__listeners__.delete(listener);
         };
     }
     publish() {
-        for (const listener of this.#listeners)
+        for (const listener of this.__listeners__)
             listener();
     }
     onDestroy() {
-        const needPublish = this.#alive === true;
-        this.#alive = false;
+        const needPublish = this.__alive__ === true;
+        this.__alive__ = false;
         if (this.manualDestroy && needPublish)
             this.publish();
     }
     onShow() {
-        const needPublish = this.#visible === false;
-        this.#visible = true;
+        const needPublish = this.__visible__ === false;
+        this.__visible__ = true;
         if (needPublish)
             this.publish();
     }
     onHide() {
-        const needPublish = this.#visible === true;
-        this.#visible = false;
+        const needPublish = this.__visible__ === true;
+        this.__visible__ = false;
         if (needPublish)
             this.publish();
     }
 }
 
 class AlertNode extends AbstractNode {
-    type;
-    subtype;
-    content;
-    footer;
     constructor({ id, group, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
@@ -283,10 +263,6 @@ class AlertNode extends AbstractNode {
 }
 
 class ConfirmNode extends AbstractNode {
-    type;
-    subtype;
-    content;
-    footer;
     constructor({ id, group, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
@@ -317,14 +293,6 @@ class ConfirmNode extends AbstractNode {
 }
 
 class PromptNode extends AbstractNode {
-    type;
-    content;
-    defaultValue;
-    Input;
-    disabled;
-    returnOnCancel;
-    footer;
-    #value;
     constructor({ id, group, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
@@ -345,20 +313,20 @@ class PromptNode extends AbstractNode {
         this.content = content;
         this.Input = Input;
         this.defaultValue = defaultValue;
-        this.#value = defaultValue;
+        this.__value__ = defaultValue;
         this.disabled = disabled;
         this.returnOnCancel = returnOnCancel;
         this.footer = footer;
     }
     onChange(value) {
-        this.#value = value;
+        this.__value__ = value;
     }
     onConfirm() {
-        this.onResolve(this.#value ?? null);
+        this.onResolve(this.__value__ ?? null);
     }
     onClose() {
         if (this.returnOnCancel)
-            this.onResolve(this.#value ?? null);
+            this.onResolve(this.__value__ ?? null);
         else
             this.onResolve(null);
     }

package/dist/index.mjs

@@ -13,66 +13,65 @@ import { withErrorBoundary } from '@winglet/react-utils/hoc';
 import { renderComponent } from '@winglet/react-utils/render';
 
 class ModalManager {
-    static #anchor = null;
-    static #scope = `promise-modal-${getRandomString(36)}`;
-    static #hash = polynomialHash(ModalManager.#scope);
-    static #styleManager = styleManagerFactory(ModalManager.#scope);
-    static #styleSheetDefinition = new Map();
     static anchor(options) {
-        if (ModalManager.#anchor !== null)
-            return ModalManager.#anchor;
+        if (ModalManager.__anchor__ !== null)
+            return ModalManager.__anchor__;
         const { tag = 'div', prefix = 'promise-modal', root = document.body, } = options || {};
         const node = document.createElement(tag);
         node.id = `${prefix}-${getRandomString(36)}`;
-        node.className = ModalManager.#scope;
+        node.className = ModalManager.__scope__;
         root.appendChild(node);
-        ModalManager.#anchor = node;
+        ModalManager.__anchor__ = node;
         return node;
     }
     static get anchored() {
-        return ModalManager.#anchor !== null;
+        return ModalManager.__anchor__ !== null;
     }
-    static #prerenderList = [];
     static get prerender() {
-        return ModalManager.#prerenderList;
+        return ModalManager.__prerenderList__;
     }
-    static #openHandler = ((modal) => {
-        ModalManager.#prerenderList.push(modal);
-    });
     static set openHandler(handler) {
-        ModalManager.#openHandler = handler;
-        ModalManager.#prerenderList = [];
+        ModalManager.__openHandler__ = handler;
+        ModalManager.__prerenderList__ = [];
     }
-    static #refreshHandler;
     static set refreshHandler(handler) {
-        ModalManager.#refreshHandler = handler;
+        ModalManager.__refreshHandler__ = handler;
     }
     static refresh() {
-        ModalManager.#refreshHandler?.();
+        ModalManager.__refreshHandler__?.();
     }
     static defineStyleSheet(styleId, css) {
-        ModalManager.#styleSheetDefinition.set(styleId, compressCss(css));
+        ModalManager.__styleSheetDefinition__.set(styleId, compressCss(css));
     }
     static applyStyleSheet() {
-        for (const [styleId, css] of ModalManager.#styleSheetDefinition)
-            ModalManager.#styleManager(styleId, css, true);
+        for (const [styleId, css] of ModalManager.__styleSheetDefinition__)
+            ModalManager.__styleManager__(styleId, css, true);
     }
     static getHashedClassNames(styleId) {
-        return `${styleId}-${ModalManager.#hash}`;
+        return `${styleId}-${ModalManager.__hash__}`;
     }
     static reset() {
-        ModalManager.#anchor = null;
-        ModalManager.#prerenderList = [];
-        ModalManager.#openHandler = ((modal) => {
-            ModalManager.#prerenderList.push(modal);
+        ModalManager.__anchor__ = null;
+        ModalManager.__prerenderList__ = [];
+        ModalManager.__openHandler__ = ((modal) => {
+            ModalManager.__prerenderList__.push(modal);
         });
-        ModalManager.#refreshHandler = undefined;
-        destroyScope(ModalManager.#scope);
+        ModalManager.__refreshHandler__ = undefined;
+        destroyScope(ModalManager.__scope__);
     }
     static open(modal) {
-        return ModalManager.#openHandler(modal);
+        return ModalManager.__openHandler__(modal);
     }
 }
+ModalManager.__anchor__ = null;
+ModalManager.__scope__ = `promise-modal-${getRandomString(36)}`;
+ModalManager.__hash__ = polynomialHash(ModalManager.__scope__);
+ModalManager.__styleManager__ = styleManagerFactory(ModalManager.__scope__);
+ModalManager.__styleSheetDefinition__ = new Map();
+ModalManager.__prerenderList__ = [];
+ModalManager.__openHandler__ = ((modal) => {
+    ModalManager.__prerenderList__.push(modal);
+});
 
 const closeModal = (modalNode, refresh = true) => {
     if (modalNode.visible === false)
@@ -171,32 +170,17 @@ const confirm = (args) => confirmHandler(args).promiseHandler;
 const prompt = (args) => promptHandler(args).promiseHandler;
 
 class AbstractNode {
-    id;
-    group;
-    initiator;
-    title;
-    subtitle;
-    background;
-    dimmed;
-    duration;
-    manualDestroy;
-    closeOnBackdropClick;
-    ForegroundComponent;
-    BackgroundComponent;
-    #alive;
     get alive() {
-        return this.#alive;
+        return this.__alive__;
     }
-    #visible;
     get visible() {
-        return this.#visible;
+        return this.__visible__;
     }
-    #handleResolve;
     set handleResolve(handleResolve) {
-        this.#handleResolve = handleResolve;
+        this.__handleResolve__ = handleResolve;
     }
-    #listeners = new Set();
     constructor({ id, initiator, group, title, subtitle, background, dimmed = true, duration = 0, manualDestroy = false, closeOnBackdropClick = true, handleResolve, ForegroundComponent, BackgroundComponent, }) {
+        this.__listeners__ = new Set();
         this.id = id;
         this.group = group;
         this.initiator = initiator;
@@ -209,48 +193,44 @@ class AbstractNode {
         this.closeOnBackdropClick = closeOnBackdropClick;
         this.ForegroundComponent = ForegroundComponent;
         this.BackgroundComponent = BackgroundComponent;
-        this.#alive = true;
-        this.#visible = true;
-        this.#handleResolve = handleResolve;
+        this.__alive__ = true;
+        this.__visible__ = true;
+        this.__handleResolve__ = handleResolve;
     }
     onResolve(result) {
-        this.#handleResolve?.(result);
+        this.__handleResolve__?.(result);
     }
     subscribe(listener) {
-        this.#listeners.add(listener);
+        this.__listeners__.add(listener);
         return () => {
-            this.#listeners.delete(listener);
+            this.__listeners__.delete(listener);
         };
     }
     publish() {
-        for (const listener of this.#listeners)
+        for (const listener of this.__listeners__)
             listener();
     }
     onDestroy() {
-        const needPublish = this.#alive === true;
-        this.#alive = false;
+        const needPublish = this.__alive__ === true;
+        this.__alive__ = false;
         if (this.manualDestroy && needPublish)
             this.publish();
     }
     onShow() {
-        const needPublish = this.#visible === false;
-        this.#visible = true;
+        const needPublish = this.__visible__ === false;
+        this.__visible__ = true;
         if (needPublish)
             this.publish();
     }
     onHide() {
-        const needPublish = this.#visible === true;
-        this.#visible = false;
+        const needPublish = this.__visible__ === true;
+        this.__visible__ = false;
         if (needPublish)
             this.publish();
     }
 }
 
 class AlertNode extends AbstractNode {
-    type;
-    subtype;
-    content;
-    footer;
     constructor({ id, group, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
@@ -281,10 +261,6 @@ class AlertNode extends AbstractNode {
 }
 
 class ConfirmNode extends AbstractNode {
-    type;
-    subtype;
-    content;
-    footer;
     constructor({ id, group, initiator, type, subtype, title, subtitle, content, footer, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
@@ -315,14 +291,6 @@ class ConfirmNode extends AbstractNode {
 }
 
 class PromptNode extends AbstractNode {
-    type;
-    content;
-    defaultValue;
-    Input;
-    disabled;
-    returnOnCancel;
-    footer;
-    #value;
     constructor({ id, group, initiator, type, title, subtitle, content, defaultValue, Input, disabled, returnOnCancel, footer, background, dimmed, duration, manualDestroy, closeOnBackdropClick, handleResolve, ForegroundComponent, BackgroundComponent, }) {
         super({
             id,
@@ -343,20 +311,20 @@ class PromptNode extends AbstractNode {
         this.content = content;
         this.Input = Input;
         this.defaultValue = defaultValue;
-        this.#value = defaultValue;
+        this.__value__ = defaultValue;
         this.disabled = disabled;
         this.returnOnCancel = returnOnCancel;
         this.footer = footer;
     }
     onChange(value) {
-        this.#value = value;
+        this.__value__ = value;
     }
     onConfirm() {
-        this.onResolve(this.#value ?? null);
+        this.onResolve(this.__value__ ?? null);
     }
     onClose() {
         if (this.returnOnCancel)
-            this.onResolve(this.#value ?? null);
+            this.onResolve(this.__value__ ?? null);
         else
             this.onResolve(null);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lerx/promise-modal",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "description": "Universal React modal utility that can be used outside React components with promise-based results for alert, confirm, and prompt modals",
   "keywords": [
     "react",
@@ -33,8 +33,8 @@
   "type": "module",
   "exports": {
     ".": {
-      "source": "./src/index.ts",
       "types": "./dist/index.d.ts",
+      "source": "./src/index.ts",
       "import": "./dist/index.mjs",
       "require": "./dist/index.cjs"
     }
@@ -48,9 +48,9 @@
   ],
   "scripts": {
     "build": "rollup -c && yarn build:types",
-    "build-storybook": "storybook build",
     "build:publish:npm": "yarn build && yarn publish:npm",
     "build:types": "tsc -p ./tsconfig.declarations.json && tsc-alias -p ./tsconfig.declarations.json",
+    "build-storybook": "storybook build",
     "format": "prettier --write \"src/**/*.{ts,tsx}\"",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "make-dependency-graph": "npx depcruise src --config .dependency-cruiser.js --output-type dot > dependency-graph.dot && dot -Tpng dependency-graph.dot -o dependency-graph.png",
@@ -64,9 +64,9 @@
     "version:patch": "yarn version patch"
   },
   "dependencies": {
-    "@winglet/common-utils": "^0.9.0",
-    "@winglet/react-utils": "^0.9.0",
-    "@winglet/style-utils": "^0.9.0"
+    "@winglet/common-utils": "^0.10.0",
+    "@winglet/react-utils": "^0.10.0",
+    "@winglet/style-utils": "^0.10.0"
   },
   "devDependencies": {
     "@types/react": "^19.0.0",