@nu-art/thunderstorm-frontend 0.400.5

package/component-modules/ModuleFE_Toaster.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Module } from '@nu-art/ts-common';
+export type Toast_Model = {
+    duration: number;
+    content: React.ReactNode;
+};
+export interface ToastListener {
+    __showToast(toast?: Toast_Model): void;
+}
+export declare class ToastBuilder {
+    private duration;
+    private content;
+    setContent(content: React.ReactNode): this;
+    setDuration(duration: number): this;
+    show(): void;
+}
+export declare class ModuleFE_Toaster_Class extends Module<{}> {
+    constructor();
+    protected init(): void;
+    toastError(errorMessage: string, interval?: number): void;
+    toastSuccess(successMessage: string, interval?: number): void;
+    toastInfo(infoMessage: string, interval?: number): void;
+    private toast;
+    adjustStringMessage: (_message: string) => string;
+    hideToast: (toast?: Toast_Model) => void;
+    private toastImpl;
+}
+export declare const ModuleFE_Toaster: ModuleFE_Toaster_Class;

package/component-modules/ModuleFE_Toaster.js

@@ -0,0 +1,97 @@
+/*
+ * Thunderstorm is a full web app framework!
+ *
+ * Typescript & Express backend infrastructure that natively runs on firebase function
+ * Typescript & React frontend infrastructure
+ *
+ * Copyright (C) 2020 Adam van der Kruk aka TacB0sS
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Module, Second } from '@nu-art/ts-common';
+import { ThunderDispatcher } from '../core/thunder-dispatcher.js';
+import { TS_Toast } from '../components/TS_Toaster/TS_Toast.js';
+const Interval_DefaultToast = 6 * Second;
+export class ToastBuilder {
+    duration = Interval_DefaultToast;
+    content = 'NO CONTENT';
+    setContent(content) {
+        this.content = content;
+        return this;
+    }
+    setDuration(duration) {
+        this.duration = duration;
+        return this;
+    }
+    show() {
+        const toast = {
+            duration: this.duration,
+            content: this.content
+        };
+        // @ts-ignore
+        ModuleFE_Toaster.toastImpl(toast);
+    }
+}
+const dispatch_showToast = new ThunderDispatcher('__showToast');
+export class ModuleFE_Toaster_Class extends Module {
+    constructor() {
+        super();
+    }
+    init() {
+    }
+    toastError(errorMessage, interval = Interval_DefaultToast) {
+        this.toast(TS_Toast(errorMessage, 'error'), interval);
+    }
+    toastSuccess(successMessage, interval = Interval_DefaultToast) {
+        this.toast(TS_Toast(successMessage, 'success'), interval);
+    }
+    toastInfo(infoMessage, interval = Interval_DefaultToast) {
+        this.toast(TS_Toast(infoMessage, 'info'), interval);
+    }
+    toast(_message, interval = Interval_DefaultToast) {
+        let content = _message;
+        if (typeof _message === 'string')
+            content = ModuleFE_Toaster.adjustStringMessage(_message);
+        new ToastBuilder().setContent(content).setDuration(interval).show();
+    }
+    adjustStringMessage = (_message) => {
+        let message = _message;
+        message = message.replace(/\n#### (.*?)\n/g, '\n<h4>$1</h4>\n');
+        message = message.replace(/\n### (.*?)\n/g, '\n<h3>$1</h3>\n');
+        message = message.replace(/\n## (.*?)\n/g, '\n<h2>$1</h2>\n');
+        message = message.replace(/\n# (.*?)\n/g, '\n<h1>$1</h1>\n');
+        message = message.replace(/(<\/?.*?>)\n/g, '$1');
+        message = message.replace(/([^>]?)\n/g, '$1<br/> ');
+        const ignore = message.match(/`(.*?)`/g);
+        if (ignore && ignore.length > 0)
+            message = ignore.reduce((input, toEscape) => {
+                const replaceValue = toEscape.substring(1, toEscape.length - 1)
+                    .replace(/([^\\]?)_/g, '$1\\_')
+                    .replace(/([^\\]?)\*/g, '$1\\*');
+                return input.replace(toEscape, replaceValue);
+            }, message);
+        message = message.replace(/([^\\]?)_(.*?)([^\\])_/g, '$1<i>$2$3</i>');
+        message = message.replace(/([^\\]?)\*(.*?)([^\\])\*/g, '$1<b>$2$3</b>');
+        message = message.replace(/\\_/g, '_');
+        message = message.replace(/\\\*/g, '*');
+        return message;
+    };
+    hideToast = (toast) => {
+        // in the future we can add more than one toast and manage a stack of them!!
+        dispatch_showToast.dispatchUI();
+    };
+    toastImpl(toast) {
+        dispatch_showToast.dispatchUI(toast);
+    }
+}
+export const ModuleFE_Toaster = new ModuleFE_Toaster_Class();

package/component-modules/mouse-interactivity/ModuleFE_MouseInteractivity.d.ts

@@ -0,0 +1,9 @@
+import { Module } from '@nu-art/ts-common';
+import { Model_Menu, Model_PopUp, Model_ToolTip, MouseInteractivityType } from './types.js';
+export declare class ModuleFE_MouseInteractivity_Class extends Module<{}> {
+    showMenu: (model: Model_Menu) => void;
+    showContent: (model: Model_PopUp) => void;
+    showTooltip: (model: Model_ToolTip) => void;
+    hide: (type: MouseInteractivityType) => void;
+}
+export declare const ModuleFE_MouseInteractivity: ModuleFE_MouseInteractivity_Class;

package/component-modules/mouse-interactivity/ModuleFE_MouseInteractivity.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { generateHex, Module } from '@nu-art/ts-common';
+import { ThunderDispatcher } from '../../core/thunder-dispatcher.js';
+import { TS_Tree } from '../../components/TS_Tree/index.js';
+const showPopUp = new ThunderDispatcher('__onPopUpDisplay');
+const showToolTip = new ThunderDispatcher('__onToolTipDisplay');
+export class ModuleFE_MouseInteractivity_Class extends Module {
+    showMenu = (model) => {
+        const content = _jsx(TS_Tree, { className: 'ts-popup__content__menu', id: generateHex(8), adapter: model.adapter, onNodeClicked: model.onNodeClicked });
+        this.showContent({
+            id: model.id,
+            content,
+            originPos: model.originPos,
+            modalPos: model.modalPos,
+            offset: model.offset,
+        });
+    };
+    showContent = (model) => {
+        showPopUp.dispatchUI(model);
+    };
+    showTooltip = (model) => {
+        showToolTip.dispatchUI(model);
+    };
+    hide = (type) => {
+        switch (type) {
+            case 'pop-up':
+                showPopUp.dispatchUI();
+                break;
+            case 'tool-tip':
+                showToolTip.dispatchUI();
+                break;
+        }
+    };
+}
+export const ModuleFE_MouseInteractivity = new ModuleFE_MouseInteractivity_Class();

package/component-modules/mouse-interactivity/helper-functions.d.ts

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { Adapter } from '../../components/adapter/Adapter.js';
+import { Coordinates, Model_ToolTip } from './types.js';
+import { ResolvableContent } from '@nu-art/ts-common';
+export declare const resolveRealPosition: (button: HTMLImageElement) => {
+    y: number;
+    x: number;
+};
+export declare function calculateCenterPosition(el: Element): Coordinates;
+export declare const getElementCenterPos: typeof calculateCenterPosition;
+export declare class MenuBuilder {
+    private readonly adapter;
+    private readonly originPos;
+    private readonly modalPos;
+    private id;
+    private offset;
+    private onNodeClicked?;
+    private onNodeDoubleClicked?;
+    constructor(menu: Adapter, originPos: Coordinates, modalPos: Coordinates);
+    show(): void;
+    setId(id: string): this;
+    setOffset(offset: Coordinates): this;
+    setOnClick(func: (path: string, item: any) => void): this;
+    setOnDoubleClick(func: Function): this;
+}
+type OpenPopUpParams = {
+    id: string;
+    content: ResolvableContent<React.ReactNode, [VoidFunction]>;
+    offset?: number;
+    event?: 'onClick' | 'onContextMenu';
+};
+type ToolTipConfig = {
+    contentHoverDelay?: number;
+    overlayClass?: string;
+    offset?: number;
+    xAxisAnchor?: 'left' | 'right';
+    yAxisAnchor?: 'top' | 'bottom';
+};
+export declare const openContent: {
+    popUp: {
+        left: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, offset?: number) => {
+            [x: string]: (e: React.MouseEvent<HTMLElement>) => void;
+        };
+        right: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, offset?: number) => {
+            [x: string]: (e: React.MouseEvent<HTMLElement>) => void;
+        };
+        top: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, offset?: number) => {
+            [x: string]: (e: React.MouseEvent<HTMLElement>) => void;
+        };
+        bottom: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, offset?: number) => {
+            [x: string]: (e: React.MouseEvent<HTMLElement>) => void;
+        };
+        center: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, offset?: number) => {
+            [x: string]: (e: React.MouseEvent<HTMLElement>) => void;
+        };
+    };
+    popUpV2: {
+        left: (props: OpenPopUpParams) => {
+            [x: string]: (e: React.MouseEvent<HTMLElement>) => void;
+        };
+        right: (props: OpenPopUpParams) => {
+            [x: string]: (e: React.MouseEvent<HTMLElement>) => void;
+        };
+        top: (props: OpenPopUpParams) => {
+            [x: string]: (e: React.MouseEvent<HTMLElement>) => void;
+        };
+        bottom: (props: OpenPopUpParams) => {
+            [x: string]: (e: React.MouseEvent<HTMLElement>) => void;
+        };
+        center: (props: OpenPopUpParams) => {
+            [x: string]: (e: React.MouseEvent<HTMLElement>) => void;
+        };
+    };
+    tooltip: {
+        left: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, config?: ToolTipConfig) => {
+            onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
+            onMouseLeave: () => void;
+        };
+        right: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, config?: ToolTipConfig) => {
+            onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
+            onMouseLeave: () => void;
+        };
+        top: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, config?: ToolTipConfig) => {
+            onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
+            onMouseLeave: () => void;
+        };
+        bottom: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, config?: ToolTipConfig) => {
+            onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
+            onMouseLeave: () => void;
+        };
+        center: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, config?: ToolTipConfig) => {
+            onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
+            onMouseLeave: () => void;
+        };
+        custom: (id: string, content: ResolvableContent<React.ReactNode, [VoidFunction]>, config: (e: React.MouseEvent<HTMLElement>) => Omit<Model_ToolTip, "id" | "content">) => {
+            onMouseEnter: (e: React.MouseEvent<HTMLElement>) => void;
+            onMouseLeave: () => void;
+        };
+    };
+    menu: {
+        left: (e: React.MouseEvent, content: Adapter) => MenuBuilder;
+        right: (e: React.MouseEvent, content: Adapter) => MenuBuilder;
+        top: (e: React.MouseEvent, content: Adapter) => MenuBuilder;
+        bottom: (e: React.MouseEvent, content: Adapter) => MenuBuilder;
+        center: (e: React.MouseEvent, content: Adapter) => MenuBuilder;
+    };
+};
+export {};

package/component-modules/mouse-interactivity/helper-functions.js

@@ -0,0 +1,339 @@
+import { ModuleFE_MouseInteractivity } from './ModuleFE_MouseInteractivity.js';
+import { mouseInteractivity_ToolTip } from './types.js';
+import { generateHex, resolveContent } from '@nu-art/ts-common';
+import { stopPropagation } from '../../utils/tools.js';
+// ######################### General Helpers #########################
+export const resolveRealPosition = (button) => {
+    const pos = button.getBoundingClientRect();
+    return { y: pos.top + button.offsetHeight, x: pos.left };
+};
+export function calculateCenterPosition(el) {
+    const rect = el.getBoundingClientRect();
+    return {
+        y: rect.y + (rect.height / 2),
+        x: rect.x + (rect.width / 2),
+    };
+}
+export const getElementCenterPos = calculateCenterPosition;
+function calculatePosition(e) {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = rect.x + (rect.width / 2);
+    const y = rect.y + (rect.height / 2);
+    const vMargin = (rect.height / 2);
+    const hMargin = (rect.width / 2);
+    return { x, y, vMargin, hMargin };
+}
+export class MenuBuilder {
+    adapter;
+    originPos;
+    modalPos;
+    id = generateHex(8);
+    offset = { x: 0, y: 0 };
+    onNodeClicked;
+    onNodeDoubleClicked;
+    constructor(menu, originPos, modalPos) {
+        this.adapter = menu;
+        this.originPos = originPos;
+        this.modalPos = modalPos;
+    }
+    show() {
+        const model = {
+            id: this.id,
+            adapter: this.adapter,
+            originPos: this.originPos,
+            modalPos: this.modalPos,
+            onNodeClicked: this.onNodeClicked,
+            onNodeDoubleClicked: this.onNodeDoubleClicked,
+            offset: this.offset
+        };
+        ModuleFE_MouseInteractivity.showMenu(model);
+    }
+    setId(id) {
+        this.id = id;
+        return this;
+    }
+    setOffset(offset) {
+        this.offset = offset;
+        return this;
+    }
+    setOnClick(func) {
+        this.onNodeClicked = func;
+        return this;
+    }
+    setOnDoubleClick(func) {
+        this.onNodeDoubleClicked = func;
+        return this;
+    }
+}
+const OpenPopUpAtLeft = (id, content, offset) => {
+    return OpenPopUpAtLeftV2({ id, content, offset, event: 'onClick' });
+};
+const OpenPopUpAtCenter = (id, content, offset) => {
+    return OpenPopUpAtCenterV2({ id, content, offset, event: 'onClick' });
+};
+const OpenPopUpAtRight = (id, content, offset) => {
+    return OpenPopUpAtRightV2({ id, content, offset, event: 'onClick' });
+};
+const OpenPopUpAtBottom = (id, content, offset) => {
+    return OpenPopUpAtBottomV2({ id, content, offset, event: 'onClick' });
+};
+const OpenPopUpAtTop = (id, content, offset) => {
+    return OpenPopUpAtTopV2({ id, content, offset, event: 'onClick' });
+};
+const OpenPopUpAtCenterV2 = (props) => {
+    const { id, content, event } = props;
+    const _event = event ?? 'onClick';
+    return {
+        [_event]: (e) => {
+            stopPropagation(e);
+            const { x, y } = calculatePosition(e);
+            const model = {
+                id,
+                content,
+                originPos: { x, y },
+                modalPos: { x: 0, y: 0 },
+            };
+            ModuleFE_MouseInteractivity.showContent(model);
+        }
+    };
+};
+const OpenPopUpAtLeftV2 = (props) => {
+    const { id, content, offset, event } = props;
+    const _event = event ?? 'onClick';
+    return {
+        [_event]: (e) => {
+            stopPropagation(e);
+            const { x, y, hMargin } = calculatePosition(e);
+            const model = {
+                id,
+                content,
+                originPos: { x, y },
+                modalPos: { x: -1, y: 0 },
+                offset: { x: -hMargin + (offset ?? 0), y: 0 }
+            };
+            ModuleFE_MouseInteractivity.showContent(model);
+        }
+    };
+};
+const OpenPopUpAtRightV2 = (props) => {
+    const { id, content, offset, event } = props;
+    const _event = event ?? 'onClick';
+    return {
+        [_event]: (e) => {
+            stopPropagation(e);
+            const { x, y, hMargin } = calculatePosition(e);
+            const model = {
+                id,
+                content,
+                originPos: { x, y },
+                modalPos: { x: 1, y: 0 },
+                offset: { x: hMargin + (offset ?? 0), y: 0 }
+            };
+            ModuleFE_MouseInteractivity.showContent(model);
+        }
+    };
+};
+const OpenPopUpAtBottomV2 = (props) => {
+    const { id, content, offset, event } = props;
+    const _event = event ?? 'onClick';
+    return {
+        [_event]: (e) => {
+            stopPropagation(e);
+            const { x, y, vMargin } = calculatePosition(e);
+            const model = {
+                id,
+                content,
+                originPos: { x, y },
+                modalPos: { x: 0, y: 1 },
+                offset: { x: 0, y: vMargin + (offset ?? 0) }
+            };
+            ModuleFE_MouseInteractivity.showContent(model);
+        }
+    };
+};
+const OpenPopUpAtTopV2 = (props) => {
+    const { id, content, offset, event } = props;
+    const _event = event ?? 'onClick';
+    return {
+        [_event]: (e) => {
+            stopPropagation(e);
+            const { x, y, vMargin } = calculatePosition(e);
+            const model = {
+                id,
+                content,
+                originPos: { x, y },
+                modalPos: { x: 0, y: -1 },
+                offset: { x: 0, y: -vMargin + (offset ?? 0) }
+            };
+            ModuleFE_MouseInteractivity.showContent(model);
+        }
+    };
+};
+const OpenToolTipAtCenter = (id, content, config) => {
+    return {
+        onMouseEnter: (e) => {
+            const model = {
+                id,
+                content,
+                originPos: calculateCenterPosition(e.currentTarget),
+                modalPos: { x: 0, y: 0 },
+                contentHoverDelay: config?.contentHoverDelay,
+                overlayClass: config?.overlayClass,
+                xAxisAnchor: config?.xAxisAnchor,
+                yAxisAnchor: config?.yAxisAnchor,
+            };
+            ModuleFE_MouseInteractivity.showTooltip(model);
+        },
+        onMouseLeave: () => {
+            ModuleFE_MouseInteractivity.hide(mouseInteractivity_ToolTip);
+        }
+    };
+};
+const OpenToolTipAtLeft = (id, content, config) => {
+    return {
+        onMouseEnter: (e) => {
+            const margin = (e.currentTarget.getBoundingClientRect().width / 2);
+            const model = {
+                id,
+                content,
+                originPos: calculateCenterPosition(e.currentTarget),
+                modalPos: { x: -1, y: 0 },
+                offset: { x: -margin + (-(config?.offset ?? 0)), y: 0 },
+                contentHoverDelay: config?.contentHoverDelay,
+                overlayClass: config?.overlayClass,
+                xAxisAnchor: config?.xAxisAnchor,
+                yAxisAnchor: config?.yAxisAnchor,
+            };
+            ModuleFE_MouseInteractivity.showTooltip(model);
+        },
+        onMouseLeave: () => {
+            ModuleFE_MouseInteractivity.hide(mouseInteractivity_ToolTip);
+        }
+    };
+};
+const OpenToolTipAtRight = (id, content, config) => {
+    return {
+        onMouseEnter: (e) => {
+            const margin = (e.currentTarget.getBoundingClientRect().width / 2);
+            const model = {
+                id,
+                content,
+                originPos: calculateCenterPosition(e.currentTarget),
+                modalPos: { x: 1, y: 0 },
+                offset: { x: margin + (config?.offset ?? 0), y: 0 },
+                contentHoverDelay: config?.contentHoverDelay,
+                overlayClass: config?.overlayClass,
+                xAxisAnchor: config?.xAxisAnchor,
+                yAxisAnchor: config?.yAxisAnchor,
+            };
+            ModuleFE_MouseInteractivity.showTooltip(model);
+        },
+        onMouseLeave: () => {
+            ModuleFE_MouseInteractivity.hide(mouseInteractivity_ToolTip);
+        }
+    };
+};
+const OpenToolTipAtBottom = (id, content, config) => {
+    return {
+        onMouseEnter: (e) => {
+            const margin = (e.currentTarget.getBoundingClientRect().height / 2);
+            const model = {
+                id,
+                content,
+                originPos: calculateCenterPosition(e.currentTarget),
+                modalPos: { x: 0, y: 1 },
+                offset: { x: 0, y: margin + (config?.offset ?? 0) },
+                contentHoverDelay: config?.contentHoverDelay,
+                overlayClass: config?.overlayClass,
+                xAxisAnchor: config?.xAxisAnchor,
+                yAxisAnchor: config?.yAxisAnchor,
+            };
+            ModuleFE_MouseInteractivity.showTooltip(model);
+        },
+        onMouseLeave: () => {
+            ModuleFE_MouseInteractivity.hide(mouseInteractivity_ToolTip);
+        }
+    };
+};
+const OpenToolTipAtTop = (id, content, config) => {
+    return {
+        onMouseEnter: (e) => {
+            const margin = (e.currentTarget.getBoundingClientRect().height / 2);
+            const model = {
+                id,
+                content,
+                originPos: calculateCenterPosition(e.currentTarget),
+                modalPos: { x: 0, y: -1 },
+                offset: { x: 0, y: -margin + (-(config?.offset ?? 0)) },
+                contentHoverDelay: config?.contentHoverDelay,
+                overlayClass: config?.overlayClass,
+                xAxisAnchor: config?.xAxisAnchor,
+                yAxisAnchor: config?.yAxisAnchor,
+            };
+            ModuleFE_MouseInteractivity.showTooltip(model);
+        },
+        onMouseLeave: () => {
+            ModuleFE_MouseInteractivity.hide(mouseInteractivity_ToolTip);
+        }
+    };
+};
+const OpenToolTipCustom = (id, content, config) => {
+    return {
+        onMouseEnter: (e) => {
+            const model = {
+                id,
+                content,
+                ...resolveContent(config?.(e)),
+            };
+            ModuleFE_MouseInteractivity.showTooltip(model);
+        },
+        onMouseLeave: () => ModuleFE_MouseInteractivity.hide(mouseInteractivity_ToolTip),
+    };
+};
+// ######################### Menu Helpers #########################
+const openMenuAtLeft = (e, content) => {
+    return new MenuBuilder(content, calculateCenterPosition(e.currentTarget), { x: -1, y: 0 });
+};
+const openMenuAtRight = (e, content) => {
+    return new MenuBuilder(content, calculateCenterPosition(e.currentTarget), { x: 1, y: 0 });
+};
+const openMenuAtTop = (e, content) => {
+    return new MenuBuilder(content, calculateCenterPosition(e.currentTarget), { x: 0, y: -1 });
+};
+const openMenuAtBottom = (e, content) => {
+    return new MenuBuilder(content, calculateCenterPosition(e.currentTarget), { x: 0, y: 1 });
+};
+const openMenuAtCenter = (e, content) => {
+    return new MenuBuilder(content, calculateCenterPosition(e.currentTarget), { x: 0, y: 0 });
+};
+export const openContent = {
+    popUp: {
+        left: OpenPopUpAtLeft,
+        right: OpenPopUpAtRight,
+        top: OpenPopUpAtTop,
+        bottom: OpenPopUpAtBottom,
+        center: OpenPopUpAtCenter,
+    },
+    popUpV2: {
+        left: OpenPopUpAtLeftV2,
+        right: OpenPopUpAtRightV2,
+        top: OpenPopUpAtTopV2,
+        bottom: OpenPopUpAtBottomV2,
+        center: OpenPopUpAtCenterV2,
+    },
+    tooltip: {
+        left: OpenToolTipAtLeft,
+        right: OpenToolTipAtRight,
+        top: OpenToolTipAtTop,
+        bottom: OpenToolTipAtBottom,
+        center: OpenToolTipAtCenter,
+        custom: OpenToolTipCustom,
+    },
+    menu: {
+        left: openMenuAtLeft,
+        right: openMenuAtRight,
+        top: openMenuAtTop,
+        bottom: openMenuAtBottom,
+        center: openMenuAtCenter,
+    }
+};

package/component-modules/mouse-interactivity/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ModuleFE_MouseInteractivity.js';
+export * from './helper-functions.js';
+export * from './types.js';

package/component-modules/mouse-interactivity/index.js

@@ -0,0 +1,3 @@
+export * from './ModuleFE_MouseInteractivity.js';
+export * from './helper-functions.js';
+export * from './types.js';

package/component-modules/mouse-interactivity/types.d.ts

@@ -0,0 +1,37 @@
+import { Adapter } from '../../components/adapter/Adapter.js';
+import * as React from 'react';
+import { ResolvableContent } from '@nu-art/ts-common';
+export type MouseInteractivityType = 'pop-up' | 'tool-tip';
+export declare const mouseInteractivity_PopUp: MouseInteractivityType;
+export declare const mouseInteractivity_ToolTip: MouseInteractivityType;
+export type Coordinates = {
+    x: number;
+    y: number;
+};
+export type MouseInteractivity_Model = {
+    id: string;
+    modalPos: Coordinates;
+    originPos: Coordinates;
+    offset?: Partial<Coordinates>;
+    overlayClass?: string;
+    content: ResolvableContent<React.ReactNode, [VoidFunction]>;
+    xAxisAnchor?: 'left' | 'right';
+    yAxisAnchor?: 'top' | 'bottom';
+};
+export type Model_Menu = Omit<MouseInteractivity_Model, 'content'> & {
+    adapter: Adapter;
+    onNodeClicked?: (path: string, item: any) => void;
+    onNodeDoubleClicked?: Function;
+};
+export type Model_PopUp = MouseInteractivity_Model & {
+    ignoreOverlayClick?: ResolvableContent<boolean>;
+};
+export type Model_ToolTip = MouseInteractivity_Model & {
+    contentHoverDelay?: number;
+};
+export interface PopUpListener {
+    __onPopUpDisplay: (content?: Model_PopUp) => void;
+}
+export interface ToolTipListener {
+    __onToolTipDisplay: (content?: Model_ToolTip) => void;
+}

package/component-modules/mouse-interactivity/types.js

@@ -0,0 +1,2 @@
+export const mouseInteractivity_PopUp = 'pop-up';
+export const mouseInteractivity_ToolTip = 'tool-tip';

package/components/ActionButton.d.ts

@@ -0,0 +1,7 @@
+export declare const ActionButton: (props: {
+    action: string | (() => void);
+    icon: string;
+    classCss?: string | {
+        [key: string]: any;
+    };
+}) => import("react/jsx-runtime").JSX.Element;