wenay-react2 1.0.1

package/lib/common/src/logs/logs3.js

@@ -0,0 +1,245 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { AgGridReact } from 'ag-grid-react';
+/** -----------------------------
+ *  2. Функция staticGetAdd —
+ *     загружает/сохраняет данные в localStorage.
+ * -----------------------------
+ */
+function staticGetAdd(key, defaultValue) {
+    try {
+        const stored = localStorage.getItem(key);
+        // Если в localStorage ничего нет, то записываем defaultValue
+        if (!stored) {
+            localStorage.setItem(key, JSON.stringify(defaultValue));
+            return defaultValue;
+        }
+        // Если что-то нашли, пытаемся объединить с defaultValue
+        // (на случай, если в defaultValue появились новые поля)
+        const parsed = JSON.parse(stored);
+        return { ...defaultValue, ...parsed };
+    }
+    catch (error) {
+        console.error("Ошибка чтения localStorage:", error);
+        return defaultValue;
+    }
+}
+/** -----------------------------
+ *  4. Создаём сам контекст
+ *     и провайдер для логов + настроек
+ * -----------------------------
+ */
+const LogsContext = createContext(null);
+export function LogsProvider({ children }) {
+    // 4.1. Загружаем настройки из localStorage через staticGetAdd
+    const savedSettings = staticGetAdd("logSettings", {
+        minVarLogs: 0,
+        minVarMessage: 0,
+        timeShow: 2,
+        showMessages: true
+    });
+    // 4.2. Список логов в памяти (не сохраняем логи в localStorage,
+    //      только настройки — но можно и логи, если нужно)
+    const [logs, setLogs] = useState([]);
+    const counterRef = useRef(0);
+    // 4.3. Сами настройки (инициализируем тем, что вернул staticGetAdd)
+    const [minVarLogs, setMinVarLogs] = useState(savedSettings.minVarLogs);
+    const [minVarMessage, setMinVarMessage] = useState(savedSettings.minVarMessage);
+    const [timeShow, setTimeShow] = useState(savedSettings.timeShow);
+    const [showMessages, setShowMessages] = useState(savedSettings.showMessages);
+    // 4.4. Следим за изменениями настроек и сохраняем их обратно в localStorage
+    useEffect(() => {
+        const toSave = {
+            minVarLogs,
+            minVarMessage,
+            timeShow,
+            showMessages
+        };
+        localStorage.setItem("logSettings", JSON.stringify(toSave));
+    }, [minVarLogs, minVarMessage, timeShow, showMessages]);
+    // 4.5. Функция добавления лога (генерируем поле num автоматически)
+    const addLog = useCallback((input) => {
+        counterRef.current += 1;
+        const num = counterRef.current;
+        setLogs((prevLogs) => {
+            const newLog = { ...input, num };
+            // ограничимся 500 логами (можно менять)
+            return [newLog, ...prevLogs].slice(0, 500);
+        });
+    }, []);
+    // 4.6. Возвращаем провайдер контекста
+    return (_jsx(LogsContext.Provider, { value: {
+            logs,
+            addLog,
+            minVarLogs,
+            setMinVarLogs,
+            minVarMessage,
+            setMinVarMessage,
+            timeShow,
+            setTimeShow,
+            showMessages,
+            setShowMessages,
+        }, children: children }));
+}
+/** -----------------------------
+ *  5. Хук для удобного доступа к контексту
+ * -----------------------------
+ */
+export function useLogsContext() {
+    const ctx = useContext(LogsContext);
+    if (!ctx) {
+        throw new Error('useLogsContext must be used within LogsProvider');
+    }
+    return ctx;
+}
+/** -----------------------------
+ *  6. Компонент LogsTable
+ *     (аналог PageLogs)
+ * -----------------------------
+ */
+export function LogsTable() {
+    const { logs, minVarLogs } = useLogsContext();
+    const gridRef = useRef(null);
+    // Определения колонок
+    const columnDefs = useMemo(() => [
+        {
+            field: 'time',
+            headerName: 'Время',
+            sort: 'desc',
+            valueFormatter: (params) => {
+                const dateObj = params.value;
+                if (!dateObj)
+                    return '';
+                return new Date(dateObj).toLocaleTimeString();
+            },
+            width: 120,
+        },
+        { field: 'id', headerName: 'ID', width: 80 },
+        { field: 'var', headerName: 'Важность', width: 90 },
+        {
+            field: 'txt',
+            headerName: 'Сообщение',
+            flex: 1,
+            wrapText: true,
+            autoHeight: true
+        }
+    ], []);
+    const defaultColDef = useMemo(() => ({
+        resizable: true,
+        sortable: true,
+        filter: true,
+        wrapText: true,
+    }), []);
+    // Следим за minVarLogs и настраиваем фильтр AG Grid
+    useEffect(() => {
+        if (gridRef.current?.api) {
+            if (minVarLogs > 0) {
+                gridRef.current.api.setFilterModel({
+                    var: {
+                        filterType: 'number',
+                        type: 'greaterThanOrEqual',
+                        filter: minVarLogs
+                    }
+                });
+            }
+            else {
+                gridRef.current.api.setFilterModel(null);
+            }
+        }
+    }, [minVarLogs]);
+    return (
+    // <div className="ag-theme-alpine-dark" style={{ width: '100%', height: '100%' }}>
+    _jsx("div", { style: { width: '100%', height: '100%' }, children: _jsx(AgGridReact, { ref: gridRef, onGridReady: (params) => {
+                gridRef.current = params;
+                params.api.sizeColumnsToFit();
+            }, rowData: logs, columnDefs: columnDefs, defaultColDef: defaultColDef, headerHeight: 30, rowHeight: 26 }) }));
+}
+export function LogsNotifications() {
+    const { logs, minVarMessage, timeShow, showMessages, setShowMessages } = useLogsContext();
+    const [notifications, setNotifications] = useState([]);
+    const counterRef = useRef(0);
+    useEffect(() => {
+        if (logs.length === 0)
+            return;
+        const newestLog = logs[0];
+        if ((newestLog.var ?? 0) < minVarMessage)
+            return;
+        counterRef.current += 1;
+        const newItem = { id: counterRef.current, log: newestLog };
+        setNotifications((prev) => [newItem, ...prev]);
+        // убираем нотификацию через timeShow секунд
+        const timer = setTimeout(() => {
+            setNotifications((prev) => prev.filter((item) => item.id !== newItem.id));
+        }, timeShow * 1000);
+        return () => clearTimeout(timer);
+    }, [logs, minVarMessage, timeShow]);
+    if (!showMessages) {
+        // Если скрыли всплывашки, показываем только "log"
+        return (_jsx("div", { style: { position: 'absolute', right: 10, top: 10, zIndex: 999 }, children: _jsx("div", { style: {
+                    background: 'rgb(144,60,60)',
+                    padding: '6px 10px',
+                    cursor: 'pointer'
+                }, onClick: () => setShowMessages(true), children: "log" }) }));
+    }
+    // Иначе выводим список текущих нотификаций
+    return (_jsxs("div", { style: { position: 'absolute', right: 10, top: 10, zIndex: 999 }, children: [_jsx("div", { style: {
+                    background: 'rgb(58,58,58)',
+                    fontSize: '20px',
+                    padding: '6px 10px',
+                    cursor: 'pointer'
+                }, onClick: () => setShowMessages(false), children: "X" }), _jsx("div", { children: notifications.slice(0, 10).map(({ id, log }) => {
+                    let red = (log.var ?? 0) * 10;
+                    if (red > 255)
+                        red = 255;
+                    return (_jsxs("div", { className: "testAnime example-exit", style: {
+                            width: 200,
+                            color: 'white',
+                            marginTop: 10,
+                            borderRight: '5px solid #5D9FFA',
+                            backgroundColor: `rgb(${red},73,35)`,
+                            padding: 8,
+                            wordWrap: 'break-word'
+                        }, children: [_jsx("p", { style: { textAlign: 'center', fontSize: 10, marginBottom: 1 }, children: "\u043E\u043F\u043E\u0432\u0435\u0449\u0435\u043D\u0438\u0435" }), _jsx("hr", { style: {
+                                    backgroundImage: 'linear-gradient(to right, transparent, rgba(255, 255, 255, 1), transparent)',
+                                    border: 0,
+                                    height: 1,
+                                    margin: 0
+                                } }), _jsx("div", { style: { textAlign: 'right', marginRight: 10 }, children: typeof log.txt === 'object' ? JSON.stringify(log.txt) : log.txt }), _jsx("p", { style: { textAlign: 'right', marginRight: 10 }, children: log.time.toLocaleDateString() })] }, id));
+                }) })] }));
+}
+/** -----------------------------
+ *  8. Компонент LogsSettings
+ *     (аналог InputSettingLogs)
+ * -----------------------------
+ */
+export function LogsSettings() {
+    const { minVarLogs, setMinVarLogs, minVarMessage, setMinVarMessage, timeShow, setTimeShow, showMessages, setShowMessages } = useLogsContext();
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, padding: 10 }, children: [_jsxs("label", { children: ["\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u0430\u0436\u043D\u043E\u0441\u0442\u044C \u0434\u043B\u044F ", _jsx("b", { children: "\u0442\u0430\u0431\u043B\u0438\u0446\u044B" }), " (minVarLogs):", _jsx("input", { type: "number", value: minVarLogs, onChange: (e) => setMinVarLogs(Number(e.target.value)), style: { marginLeft: 8 } })] }), _jsxs("label", { children: ["\u041C\u0438\u043D\u0438\u043C\u0430\u043B\u044C\u043D\u0430\u044F \u0432\u0430\u0436\u043D\u043E\u0441\u0442\u044C \u0434\u043B\u044F ", _jsx("b", { children: "\u043E\u043F\u043E\u0432\u0435\u0449\u0435\u043D\u0438\u0439" }), " (minVarMessage):", _jsx("input", { type: "number", value: minVarMessage, onChange: (e) => setMinVarMessage(Number(e.target.value)), style: { marginLeft: 8 } })] }), _jsxs("label", { children: ["\u0412\u0440\u0435\u043C\u044F \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u044F (\u0441\u0435\u043A) (timeShow):", _jsx("input", { type: "number", value: timeShow, onChange: (e) => setTimeShow(Number(e.target.value)), style: { marginLeft: 8 } })] }), _jsxs("label", { children: ["\u041E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0442\u044C \u0432\u0441\u043F\u043B\u044B\u0432\u0430\u0448\u043A\u0438 (showMessages):", _jsx("input", { type: "checkbox", checked: showMessages, onChange: (e) => setShowMessages(e.target.checked), style: { marginLeft: 8 } })] })] }));
+}
+/** -----------------------------
+ *  9. MainPage — вкладки (Таблица / Настройки)
+ * -----------------------------
+ */
+export function MainPage() {
+    const [currentTab, setCurrentTab] = useState('table');
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsxs("div", { style: { display: 'flex', gap: 8, padding: 10, background: '#333' }, children: [_jsx("button", { onClick: () => setCurrentTab('table'), style: {
+                            backgroundColor: currentTab === 'table' ? '#666' : '#444',
+                            color: 'white',
+                            border: 'none',
+                            padding: '8px',
+                            cursor: 'pointer'
+                        }, children: "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u043B\u043E\u0433\u043E\u0432" }), _jsx("button", { onClick: () => setCurrentTab('settings'), style: {
+                            backgroundColor: currentTab === 'settings' ? '#666' : '#444',
+                            color: 'white',
+                            border: 'none',
+                            padding: '8px',
+                            cursor: 'pointer'
+                        }, children: "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438" })] }), _jsxs("div", { style: { flex: 1, position: 'relative' }, children: [currentTab === 'table' && _jsx(LogsTable, {}), currentTab === 'settings' && _jsx(LogsSettings, {})] })] }));
+}
+/** -----------------------------
+ *  10. Корневой компонент App
+ * -----------------------------
+ */
+export default function AppLogs() {
+    return (_jsx(LogsProvider, { children: _jsxs("div", { style: { position: 'relative', width: '100%', height: '100vh' }, children: [_jsx(MainPage, {}), _jsx(LogsNotifications, {})] }) }));
+}

package/lib/common/src/logs/miniLogs.d.ts

@@ -0,0 +1,5 @@
+import { CellMouseDownEvent } from "ag-grid-community";
+export declare function MiniLogs({ data, onClick }: {
+    data: any[];
+    onClick?: (e: CellMouseDownEvent<any, any>) => any;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/common/src/logs/miniLogs.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { timeLocalToStr_hhmmss } from "wenay-common2";
+import { AgGridReact } from "ag-grid-react";
+import { useRef } from "react";
+export function MiniLogs({ data, onClick }) {
+    const apiGrid = useRef(null);
+    const columns = [
+        {
+            field: "time",
+            sort: "desc",
+            width: 50,
+            valueFormatter: (e) => e.value.time ? timeLocalToStr_hhmmss(e.value.time) : e.value.time
+        },
+        {
+            field: "id",
+            width: 20,
+        },
+        {
+            field: "var",
+            width: 50,
+        },
+        {
+            field: "txt",
+            wrapText: true,
+            autoHeight: true,
+            width: 350
+        },
+        {
+            field: "address",
+            width: 150,
+        },
+    ];
+    return _jsx("div", { className: "maxSize", children: _jsx(AgGridReact
+        // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
+        , { 
+            // className = "ag-theme-alpine-dark ag-theme-alpine2" // ag-theme-alpine-dark3
+            suppressCellFocus: true, onGridReady: (a) => {
+                apiGrid.current = a; //as GridReadyEvent<tColum>
+                apiGrid.current.api.sizeColumnsToFit();
+            }, defaultColDef: {
+                headerClass: () => ("gridTable-header"),
+                resizable: true,
+                cellStyle: { textAlign: "center" },
+                sortable: true,
+                filter: true,
+                wrapText: true,
+            }, headerHeight: 30, rowHeight: 26, autoSizePadding: 1, rowData: data, columnDefs: columns, onCellMouseDown: (e) => {
+                // @ts-ignore
+                onClick?.(e);
+            } }) });
+}

package/lib/common/src/menu/menu.d.ts

@@ -0,0 +1,72 @@
+import React, { ReactElement } from 'react';
+/*******************************************************
+ * Типы данных для меню
+ *******************************************************/
+export type tMenuReactStrictly<T = any> = {
+    name: string | ((status?: T) => string);
+    getStatus?: (() => T) | null;
+    onClick?: ((e: any) => void | undefined | null | ((void | undefined | null | Promise<any> | (() => Promise<any>))[]) | Promise<any>) | null;
+    active?: (() => boolean) | null;
+    status?: boolean;
+    next?: (() => (tMenuReact<any> | false)[] | Promise<(tMenuReact<any> | false)[]>) | null;
+    func?: (() => React.ReactElement | Promise<React.ReactElement>) | null;
+    onFocus?: (() => tMenuReact<any>[] | Promise<tMenuReact<any>[]>) | null;
+    menuElement?: typeof MenuElement;
+};
+export type tMenuReact<T = any> = tMenuReactStrictly<T> | false | null | undefined;
+/*******************************************************
+ * Вспомогательный тип
+ *******************************************************/
+type tCounters = {
+    ok?: number;
+    error?: number;
+    count?: number;
+};
+/*******************************************************
+ * Отображает счётчик/прогресс (анимация, кол-во ok/error)
+ *******************************************************/
+declare function TimeNum({ data }: {
+    data: tCounters;
+}): ReactElement;
+/*******************************************************
+ * Основной элемент меню (пункт с onClick, счётчиками и т.д.)
+ *******************************************************/
+declare function MenuElement({ data: item, toLeft, className, update, }: {
+    data: Pick<tMenuReactStrictly, "onClick" | "active" | "name" | "getStatus">;
+    toLeft: boolean;
+    className?: (active?: boolean) => string;
+    update: () => void;
+}): ReactElement;
+/*******************************************************
+ * Компонент MenuBase отвечает за отрисовку всплывающего меню с поддержкой
+ * вложенных подменю и управления их состоянием.
+ *
+ * @param {Object} props - Пропсы компонента.
+ * @param {Object} [props.coordinate] - Координаты и параметры отображения меню.
+ * @param {number} props.coordinate.x - Координата X для размещения меню.
+ * @param {number} props.coordinate.y - Координата Y для размещения меню.
+ * @param {boolean} [props.coordinate.toLeft=false] - Указывает, должно ли меню быть смещено влево.
+ * @param {number} [props.coordinate.left=0] - Дополнительное смещение влево, если меню отображается с вложенными элементами.
+ * @param {tMenuReactStrictly[]} props.data - Массив объектов, описывающих элементы меню.
+ * @param {number} [props.zIndex] - Z-index меню для управления видимостью при перекрытии.
+ * @param {Function} [props.menu] - Функция, которая генерирует кастомный React элемент для отображения всего меню.
+ * @param {Function} [props.menuElement] - Функция для генерации кастомного React элемента для отображения отдельного элемента меню.
+ * @param {Function} [props.className] - Функция для задания CSS-классов для элементов меню.
+ *
+ * @returns {ReactElement} Визуальный элемент меню.
+ */
+type MenuBaseProps = {
+    menu?: (arr: tMenuReact[]) => ReactElement;
+    menuElement?: (item: tMenuReact) => ReactElement;
+    data: tMenuReact[];
+    zIndex?: number;
+    className?: (active?: boolean) => string;
+    coordinate?: {
+        x: number;
+        y: number;
+        toLeft?: boolean;
+        left?: number;
+    };
+};
+export declare function MenuBase({ coordinate, data, zIndex, menu, className, menuElement, }: MenuBaseProps): ReactElement;
+export { TimeNum, MenuElement };

package/lib/common/src/menu/menu.js

@@ -0,0 +1,230 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { PromiseArrayListen, sleepAsync } from "wenay-common2";
+/*******************************************************
+ * Отображает счётчик/прогресс (анимация, кол-во ok/error)
+ *******************************************************/
+function TimeNum({ data }) {
+    const refCounter = useRef(0);
+    const [count, setCount] = useState(refCounter.current);
+    refCounter.current = count;
+    const formatLabel = () => {
+        if (!data.ok && !data.error)
+            return count;
+        const txtOk = data.ok ? "ok " + data.ok : "";
+        const txtEr = data.error ? " er " + (data.error > 1 ? data.error : "") : "";
+        const txtCount = data.count ? "/" + data.count : "";
+        return txtOk + txtCount + txtEr;
+    };
+    useEffect(() => {
+        let local = 0;
+        const timer = setInterval(() => setCount(++local), 30);
+        return () => clearInterval(timer);
+    }, []);
+    return (_jsx("div", { style: {
+            float: "right",
+            opacity: count < 45 ? count / 45 : 1,
+            width: count < 25 ? count * 3 : 75,
+            textAlign: "right",
+        }, children: formatLabel() }));
+}
+/*******************************************************
+ * Основной элемент меню (пункт с onClick, счётчиками и т.д.)
+ *******************************************************/
+function MenuElement({ data: item, toLeft, className, update, }) {
+    const unsubOk = useRef(null);
+    const unsubErr = useRef(null);
+    useEffect(() => {
+        // При размонтировании отписываемся
+        return () => {
+            unsubOk.current?.();
+            unsubErr.current?.();
+            unsubOk.current = null;
+            unsubErr.current = null;
+        };
+    }, []);
+    const [progress, setProgress] = useState(null);
+    return (_jsx("div", { className: className?.(item.active?.()) ||
+            "MenuR " + (item.active?.() ? "toButtonA" : "toButton"), style: { float: toLeft ? "left" : "right" }, onClick: () => {
+            if (!item.onClick)
+                return;
+            const result = item?.onClick?.(item);
+            if (!result) {
+                update();
+                return;
+            }
+            // Если это массив "задач" (промисов или функций)
+            if (Array.isArray(result)) {
+                const tasks = result.filter(Boolean);
+                const pa = PromiseArrayListen(tasks); // Допустим, внешняя функция
+                setProgress({});
+                unsubOk.current?.();
+                unsubErr.current?.();
+                unsubOk.current = pa.listenOk((data, i, countOk, countError, count) => setProgress({ ok: countOk, error: countError, count }));
+                unsubErr.current = pa.listenError((error, i, countOk, countError, count) => setProgress({ ok: countOk, error: countError, count }));
+            }
+            // Если это один промис
+            else if (result instanceof Promise) {
+                setProgress({});
+                result
+                    .then(async (val) => {
+                    if (Array.isArray(val) && val.length) {
+                        // Если вернулся массив из Promise.allSettled
+                        // Считаем кол-во ok/error
+                        if (val[0]?.status === "fulfilled" || val[0]?.status === "rejected") {
+                            const t = { ok: 0, error: 0 };
+                            val.forEach((res) => {
+                                if (res?.status === "fulfilled")
+                                    t.ok++;
+                                if (res?.status === "rejected")
+                                    t.error++;
+                            });
+                            setProgress(t);
+                        }
+                    }
+                    else {
+                        setProgress({ ok: 1 });
+                        await sleepAsync(0);
+                    }
+                })
+                    .finally(async () => {
+                    await sleepAsync(500);
+                    setProgress(null);
+                });
+            }
+            else {
+                update();
+            }
+        }, children: _jsxs("div", { className: "toLine", children: [typeof item.name === "string"
+                    ? item.name
+                    : item.name(item.getStatus?.()), progress && _jsx(TimeNum, { data: progress })] }) }));
+}
+const MenuItemWrapper = ({ item, index, update, className, isLeftAligned, leftPos, menuElement, fullArray, }) => {
+    const [childMenu, setChildMenu] = useState([]);
+    const [asyncFuncElement, setAsyncFuncElement] = useState(null);
+    const [onFocusMenu, setOnFocusMenu] = useState([]);
+    useEffect(() => {
+        if (item.status && item.next) {
+            const result = item.next();
+            if (result instanceof Promise) {
+                result.then((val) => {
+                    setChildMenu(val.filter(Boolean));
+                });
+            }
+            else {
+                setChildMenu(result.filter(Boolean));
+            }
+        }
+        else {
+            setChildMenu([]);
+        }
+    }, [item.status, item.next]);
+    useEffect(() => {
+        if (item.status && item.func) {
+            const result = item.func();
+            if (result instanceof Promise) {
+                result.then((val) => {
+                    setAsyncFuncElement(val);
+                });
+            }
+            else {
+                setAsyncFuncElement(result);
+            }
+        }
+        else {
+            setAsyncFuncElement(null);
+        }
+    }, [item.status, item.func]);
+    useEffect(() => {
+        if (item.status && item.onFocus) {
+            const result = item.onFocus();
+            if (result instanceof Promise) {
+                result.then((val) => {
+                    setOnFocusMenu(val.filter(Boolean));
+                });
+            }
+            else {
+                setOnFocusMenu(result.filter(Boolean));
+            }
+        }
+        else {
+            setOnFocusMenu([]);
+        }
+    }, [item.status, item.onFocus]);
+    const onMouseEnter = () => {
+        if (item.status)
+            return;
+        fullArray.forEach((it, j) => {
+            it.status = j === index;
+        });
+        update();
+    };
+    return (_jsxs("div", { className: "toLine", onMouseEnter: onMouseEnter, children: [menuElement
+                ? menuElement(item)
+                : item.menuElement?.({
+                    toLeft: isLeftAligned,
+                    data: item,
+                    className,
+                    update,
+                }) ?? (_jsx(MenuElement, { toLeft: isLeftAligned, data: item, className: className, update: update })), _jsxs("div", { children: [item.status && childMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(MenuBase, { data: childMenu, coordinate: {
+                                x: 3,
+                                y: 0,
+                                toLeft: isLeftAligned,
+                                left: leftPos,
+                            } }) })), item.status && asyncFuncElement && (_jsx("div", { style: { position: "relative" }, children: _jsx(MenuBase, { menu: () => asyncFuncElement, data: [], coordinate: {
+                                x: 3,
+                                y: 0,
+                                toLeft: isLeftAligned,
+                                left: leftPos,
+                            } }) })), item.status && onFocusMenu.length > 0 && (_jsx("div", { style: { position: "relative" }, children: _jsx(MenuBase, { data: onFocusMenu, coordinate: {
+                                x: 3,
+                                y: 0,
+                                toLeft: isLeftAligned,
+                                left: leftPos,
+                            } }) }))] })] }));
+};
+export function MenuBase({ coordinate = { x: 0, y: 0, toLeft: false, left: 0 }, data, zIndex, menu, className, menuElement, }) {
+    const [_, forceUpdate] = useState(false);
+    const update = () => forceUpdate((p) => !p);
+    const refMenu = useRef(null);
+    const dataMemo = useMemo(() => data.filter((e) => e), [data, data.length]);
+    const [top, setTop] = useState(coordinate.y);
+    const [leftPos, setLeftPos] = useState(coordinate.x);
+    const [menuWidth, setMenuWidth] = useState(0);
+    const [isLeftAligned, setIsLeftAligned] = useState(!!coordinate.toLeft);
+    const [xOffset, setXOffset] = useState(0);
+    useLayoutEffect(() => {
+        if (!refMenu.current)
+            return;
+        const rect = refMenu.current.getBoundingClientRect();
+        const w = window.innerWidth, h = window.innerHeight;
+        if (h - rect.bottom < 8)
+            setTop((prev) => prev + (h - rect.bottom));
+        setLeftPos(rect.x);
+        setMenuWidth(rect.width);
+        if (!coordinate.toLeft && w - rect.right < 8 && rect.width < (coordinate.left ?? 0)) {
+            setXOffset(rect.x - (coordinate.left ?? 0));
+            setIsLeftAligned(true);
+        }
+        if (coordinate.toLeft) {
+            setXOffset((coordinate.left ?? 0) - rect.x - 4);
+        }
+    }, [coordinate.x, coordinate.y, coordinate.toLeft, coordinate.left]);
+    const alignStyle = isLeftAligned
+        ? { display: "flex", flexDirection: "column-reverse", alignItems: "flex-end" }
+        : {};
+    return (_jsx("div", { ref: (el) => {
+            if (el)
+                refMenu.current = el;
+        }, style: {
+            position: "absolute",
+            zIndex,
+            paddingLeft: 3,
+            left: (isLeftAligned ? -1 * (menuWidth + 3 + xOffset) : coordinate.x) - 3,
+            top,
+            ...alignStyle,
+        }, children: menu
+            ? menu(dataMemo)
+            : dataMemo.map((item, i, arr) => (_jsx(MenuItemWrapper, { item: item, index: i, update: update, className: className, isLeftAligned: isLeftAligned, leftPos: leftPos, menuElement: menuElement, fullArray: dataMemo }, i))) }));
+}
+export { TimeNum, MenuElement };

package/lib/common/src/menu/menuMouse.d.ts

@@ -0,0 +1,21 @@
+import { MenuBase, tMenuReact } from "./menu";
+export declare const mouseMenuApi: {
+    bb: (b?: boolean) => boolean | undefined;
+    readonly map: Map<string, tMenuReact[]>;
+    readonly menuMouse: {
+        name: string;
+        readonly value: {
+            status: boolean;
+            clicks: number;
+        };
+    };
+    ReactMouse: (agr: Parameters<({ children, other, statusOn, onUnClick, zIndex, className }: {
+        children: React.ReactElement;
+        zIndex?: number;
+        other?: () => (tMenuReact)[];
+        statusOn?: boolean;
+        onUnClick?: (e: boolean) => void;
+        className?: (active?: boolean) => string;
+    }) => import("react/jsx-runtime").JSX.Element>[0]) => import("react/jsx-runtime").JSX.Element;
+    ReactMenu: typeof MenuBase;
+};

package/lib/common/src/menu/menuMouse.js

@@ -0,0 +1,32 @@
+import { GetMenuR } from "./menuR";
+import { MenuBase } from "./menu";
+function GetMouseMenuApi(data) {
+    const { name = "mouse" } = data ?? {};
+    const { MenuR, bb } = GetMenuR();
+    const value = {
+        status: true,
+        clicks: 0
+    };
+    const menuMouse = {
+        name,
+        get value() { return value; }
+    };
+    const map = new Map;
+    function other() {
+        if (map.has("only"))
+            return map.get("only");
+        const t = [];
+        map.forEach(e => { t.unshift(...e); });
+        return t;
+    }
+    function ReactMouse(agr) {
+        const datum = menuMouse.value; //staticGetAdd(menuMouse.name, menuMouse.value
+        return MenuR({ ...(agr ?? {}), other: agr.other ? agr.other : other, statusOn: datum.status, onUnClick: () => {
+                map.clear();
+            } });
+    }
+    return {
+        bb, get map() { return map; }, get menuMouse() { return menuMouse; }, ReactMouse, ReactMenu: MenuBase
+    };
+}
+export const mouseMenuApi = GetMouseMenuApi();