wenay-react2 1.0.19 → 1.0.21

package/lib/common/src/components/Menu/StickerMenu.js

@@ -1,65 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
 const StickerMenu = () => {
-    // Флаг состояния: открыто меню или закрыто
+    // State flag: menu is open or closed
     const [isOpen, setIsOpen] = useState(false);
-    // Сдвиг по X в процессе перетаскивания
+    // X offset during dragging; duplicated in a ref so document listeners
+    // subscribe once instead of on every drag tick
     const [dragX, setDragX] = useState(0);
-    // Рефы для отслеживания начала перетаскивания и самого процесса
+    const dragXRef = useRef(0);
+    const setDrag = (v) => {
+        dragXRef.current = v;
+        setDragX(v);
+    };
+    // Refs for tracking drag start and dragging itself
     const startXRef = useRef(null);
     const draggingRef = useRef(false);
-    // Настройки размеров: общая ширина меню и ширина видимой части (стикер) при закрытом состоянии
-    const menuWidth = 250; // общая ширина открытого меню
-    const stickerWidth = 50; // ширина видимой части при закрытом меню
-    // Начало перетаскивания (мышь)
+    const movedRef = useRef(false);
+    // Size settings: total menu width and visible sticker width when closed
+    const menuWidth = 250; // total width of the open menu
+    const stickerWidth = 50; // width of the visible part when the menu is closed
+    // Start dragging with mouse
     const handleMouseDown = (e) => {
         draggingRef.current = true;
         startXRef.current = e.clientX;
     };
-    // Начало перетаскивания (касание)
+    // Start dragging with touch
     const handleTouchStart = (e) => {
         draggingRef.current = true;
         startXRef.current = e.touches[0].clientX;
     };
-    // Обработка движения мыши
+    // Handle mouse movement
     const handleMouseMove = (e) => {
         if (!draggingRef.current || startXRef.current === null)
             return;
         const deltaX = e.clientX - startXRef.current;
-        setDragX(deltaX);
+        setDrag(deltaX);
     };
-    // Обработка движения при касании
+    // Handle touch movement
     const handleTouchMove = (e) => {
         if (!draggingRef.current || startXRef.current === null)
             return;
         const deltaX = e.touches[0].clientX - startXRef.current;
-        setDragX(deltaX);
+        setDrag(deltaX);
     };
-    // Завершение перетаскивания (мышь)
+    // Finish dragging with mouse
     const handleMouseUp = () => {
         if (!draggingRef.current)
             return;
         finishDrag();
     };
-    // Завершение перетаскивания (касание)
+    // Finish dragging with touch
     const handleTouchEnd = () => {
         if (!draggingRef.current)
             return;
         finishDrag();
     };
-    // Функция завершения перетаскивания: если сдвиг больше половины ширины меню — переключаем состояние
+    // Finish dragging: switch state if offset is greater than half of the menu width
     const finishDrag = () => {
         draggingRef.current = false;
-        if (dragX < -menuWidth / 2) {
+        const delta = dragXRef.current;
+        if (delta < -menuWidth / 2) {
             setIsOpen(true);
+            movedRef.current = true; // suppress the click that follows mouseup, it would toggle back
         }
-        else if (dragX > menuWidth / 2) {
+        else if (delta > menuWidth / 2) {
             setIsOpen(false);
+            movedRef.current = true;
         }
-        setDragX(0);
+        setDrag(0);
         startXRef.current = null;
     };
-    // Подписываемся на глобальные события движения и завершения перетаскивания
+    // Subscribe to global movement and drag-finish events
     useEffect(() => {
         document.addEventListener('mousemove', handleMouseMove);
         document.addEventListener('touchmove', handleTouchMove);
@@ -71,25 +81,29 @@ const StickerMenu = () => {
             document.removeEventListener('mouseup', handleMouseUp);
             document.removeEventListener('touchend', handleTouchEnd);
         };
-    }, [dragX]);
-    // Переключение состояния меню по клику
+    }, []);
+    // Toggle menu state on click
     const handleClick = () => {
+        if (movedRef.current) {
+            movedRef.current = false;
+            return;
+        }
         setIsOpen(!isOpen);
     };
     /*
-      Вычисляем итоговый сдвиг по X:
-      - Когда меню закрыто, сдвигаем его влево так, чтобы виден был только стикер.
-      - При перетаскивании корректируем позицию относительно текущего сдвига.
+      Calculate the final X offset:
+      - When the menu is closed, shift it left so only the sticker is visible.
+      - During dragging, adjust the position relative to the current offset.
     */
     let translateX = 0;
     if (dragX !== 0) {
-        // Если меню открыто, перетаскиваем вправо (открытие) только в отрицательном направлении
-        // Если закрыто — перетаскиваем влево (открытие) только в положительном направлении
+        // If the menu is open, drag right only in the negative direction
+        // If closed, drag left only in the positive direction
         translateX = isOpen ? Math.min(0, dragX) : Math.max(0, dragX);
     }
     const baseTranslate = isOpen ? 0 : -(menuWidth - stickerWidth);
     const finalTranslate = baseTranslate + translateX;
-    // Стили для контейнера меню
+    // Menu container styles
     const containerStyle = {
         position: 'fixed',
         top: '50%',
@@ -105,6 +119,6 @@ const StickerMenu = () => {
         userSelect: 'none',
         overflow: 'hidden'
     };
-    return (_jsx("div", { style: containerStyle, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onClick: handleClick, children: _jsxs("div", { style: { padding: '10px' }, children: [_jsx("h3", { children: "\u041C\u0435\u043D\u044E" }), isOpen && (_jsxs("ul", { style: { listStyle: 'none', padding: 0 }, children: [_jsx("li", { children: "\u041F\u0443\u043D\u043A\u0442 1" }), _jsx("li", { children: "\u041F\u0443\u043D\u043A\u0442 2" }), _jsx("li", { children: "\u041F\u0443\u043D\u043A\u0442 3" })] }))] }) }));
+    return (_jsx("div", { style: containerStyle, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, onClick: handleClick, children: _jsxs("div", { style: { padding: '10px' }, children: [_jsx("h3", { children: "Menu" }), isOpen && (_jsxs("ul", { style: { listStyle: 'none', padding: 0 }, children: [_jsx("li", { children: "Item 1" }), _jsx("li", { children: "Item 2" }), _jsx("li", { children: "Item 3" })] }))] }) }));
 };
 export default StickerMenu;

package/lib/common/src/components/Menu/index.d.ts

@@ -1,2 +1,2 @@
-export * from './StickerMenu';
+export { default as StickerMenu } from './StickerMenu';
 export * from './RightMenu';

package/lib/common/src/components/Menu/index.js

@@ -1,2 +1,2 @@
-export * from './StickerMenu';
+export { default as StickerMenu } from './StickerMenu';
 export * from './RightMenu';

package/lib/common/src/components/Modal/LeftModal.d.ts

@@ -19,18 +19,19 @@ export declare function getApiLeftMenu(): {
         set(jsx: React.JSX.Element | null): void;
         JSX: React.JSX.Element | null;
         Render(): React.JSX.Element | null;
-        addJSX(jsx: React.JSX.Element): React.JSX.Element;
-        dellBy(jsx: React.JSX.Element): void;
-        readonly arrJSX: import("react/jsx-runtime").JSX.Element[];
-        RenderArr(): import("react/jsx-runtime").JSX.Element[];
+        addJSX<A extends React.JSX.Element | null>(jsx: A): A;
+        dellBy(jsx: React.JSX.Element | null): void;
+        readonly arrJSX: (import("react/jsx-runtime").JSX.Element | null)[];
+        RenderArr(): (import("react/jsx-runtime").JSX.Element | null)[];
     };
     renderBy(): void;
     getMenu: () => Map<string, MenuItem[]>;
     setMenu: (items: (MenuItemPartial | MenuItem)[], key?: string) => void;
-    Modal2: ({ menu, zIndex, zIndex0, key }: {
+    Modal2: ({ menu, zIndex, zIndex0, menuKey }: {
         zIndex: number;
         zIndex0?: number;
-        key?: string;
+        /** Store key for this menu; the former `key` prop never worked (React strips it from props). */
+        menuKey?: string;
         menu?: (MenuItemPartial | MenuItem)[];
     }) => import("react/jsx-runtime").JSX.Element;
 };
@@ -39,18 +40,19 @@ export declare const ApiLeftMenu: {
         set(jsx: React.JSX.Element | null): void;
         JSX: React.JSX.Element | null;
         Render(): React.JSX.Element | null;
-        addJSX(jsx: React.JSX.Element): React.JSX.Element;
-        dellBy(jsx: React.JSX.Element): void;
-        readonly arrJSX: import("react/jsx-runtime").JSX.Element[];
-        RenderArr(): import("react/jsx-runtime").JSX.Element[];
+        addJSX<A extends React.JSX.Element | null>(jsx: A): A;
+        dellBy(jsx: React.JSX.Element | null): void;
+        readonly arrJSX: (import("react/jsx-runtime").JSX.Element | null)[];
+        RenderArr(): (import("react/jsx-runtime").JSX.Element | null)[];
     };
     renderBy(): void;
     getMenu: () => Map<string, MenuItem[]>;
     setMenu: (items: (MenuItemPartial | MenuItem)[], key?: string) => void;
-    Modal2: ({ menu, zIndex, zIndex0, key }: {
+    Modal2: ({ menu, zIndex, zIndex0, menuKey }: {
         zIndex: number;
         zIndex0?: number;
-        key?: string;
+        /** Store key for this menu; the former `key` prop never worked (React strips it from props). */
+        menuKey?: string;
         menu?: (MenuItemPartial | MenuItem)[];
     }) => import("react/jsx-runtime").JSX.Element;
 };

package/lib/common/src/components/Modal/LeftModal.js

@@ -13,38 +13,6 @@ function useViewport() {
     }, []);
     return { width };
 }
-// Custom hook for smooth snap scrolling animation
-function useSmoothSnapScroll() {
-    const animationState = useRef({ isAnimating: false });
-    const currentPosition = useRef({ x: 0, y: 0 });
-    const animateTo = async (target, onUpdate, onComplete) => {
-        animationState.current.isAnimating = true;
-        const step = 40;
-        const animate = async () => {
-            if (!animationState.current.isAnimating || currentPosition.current.x === target) {
-                return;
-            }
-            const direction = target > currentPosition.current.x ? 1 : -1;
-            await sleepAsync(10);
-            const nextPosition = currentPosition.current.x + direction * step;
-            if (Math.abs(target - nextPosition) < step) {
-                animationState.current.isAnimating = false;
-                currentPosition.current.x = target;
-                onUpdate(target);
-                onComplete?.();
-                return;
-            }
-            currentPosition.current.x = nextPosition;
-            onUpdate(nextPosition);
-            animate();
-        };
-        await animate();
-    };
-    const stopAnimation = () => {
-        animationState.current.isAnimating = false;
-    };
-    return { animateTo, stopAnimation, currentPosition };
-}
 const MENU_WIDTH_RATIO = 0.8;
 // Main sidebar menu component with snap scrolling behavior
 function SidebarMenuComponent({ y_, x_, api, arr, zIndex }) {
@@ -74,17 +42,21 @@ function SidebarMenuComponent({ y_, x_, api, arr, zIndex }) {
                 textDecoration: "inherit",
                 cursor: "default",
             }, children: e[0] }) }, i)));
-    // Smooth animation function to target position
+    const mountedRef = useRef(true);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => { mountedRef.current = false; };
+    }, []);
+    // Smooth animation function to target position; cancels on unmount,
+    // and the returned promise now resolves at the end (recursion was not awaited)
     const animateToPosition = async (target) => {
         lastPosition.current.auto = true;
         const step = 40;
-        if (!lastPosition.current.auto)
-            return;
-        const animate = async () => {
-            if (!lastPosition.current.auto || currentPosition.current.x === target)
-                return;
+        while (lastPosition.current.auto && currentPosition.current.x !== target) {
             const direction = target > currentPosition.current.x ? 1 : -1;
             await sleepAsync(10);
+            if (!mountedRef.current || !lastPosition.current.auto)
+                return;
             const nextPos = currentPosition.current.x + direction * step;
             if (Math.abs(target - nextPos) < step) {
                 lastPosition.current.auto = false;
@@ -96,9 +68,7 @@ function SidebarMenuComponent({ y_, x_, api, arr, zIndex }) {
             }
             currentPosition.current.x = nextPos;
             setX(nextPos);
-            animate();
-        };
-        await animate();
+        }
     };
     useEffect(() => {
         const menuApi = {
@@ -235,11 +205,11 @@ export function getApiLeftMenu() {
                         color: "rgba(255,255,255,0.1)"
                     }, children: textB })), children()] }));
     };
-    let menuApi = null;
     const menuStore = new Map();
     const setMenu = (items, key = "base") => {
         const colorGen = colorGenerator2({ min: 0, max: 90 });
-        const currentMenuLength = getAllMenuItems().length;
+        // exclude this key's old items, otherwise a repeated setMenu shifts default colors
+        const currentMenuLength = getAllMenuItems().length - (menuStore.get(key)?.length ?? 0);
         const baseColors = [];
         for (let i = 0; i < currentMenuLength + items.length; i++) {
             const colorResult = colorGen.next();
@@ -259,11 +229,23 @@ export function getApiLeftMenu() {
     function getAllMenuItems() {
         return [...menuStore.values()].flat();
     }
-    function Modal2({ menu, zIndex, zIndex0, key }) {
-        if (menu)
-            setMenu(menu, key);
+    function Modal2({ menu, zIndex, zIndex0, menuKey }) {
+        const lastSet = useRef(null);
+        // Set in an effect, not during render: otherwise StrictMode sets twice and every render has a side effect.
+        useEffect(() => {
+            if (!menu)
+                return;
+            const prev = lastSet.current;
+            // shallow compare: skip the store rewrite when an inline array has the same items
+            if (prev && prev.menuKey === menuKey && prev.menu.length === menu.length
+                && prev.menu.every((el, i) => el === menu[i]))
+                return;
+            lastSet.current = { menu, menuKey };
+            setMenu(menu, menuKey);
+            renderBy(menuStore);
+        }, [menu, menuKey]);
         updateBy(menuStore);
-        return (_jsxs("div", { className: "maxSize", style: { position: "absolute", zIndex: zIndex0 }, children: [_jsx(modal.Render, {}), _jsx(LeftMenuComponent, { zIndex: zIndex, api: a => menuApi = a, menu: getAllMenuItems() })] }));
+        return (_jsxs("div", { className: "maxSize", style: { position: "absolute", zIndex: zIndex0 }, children: [_jsx(modal.Render, {}), _jsx(LeftMenuComponent, { zIndex: zIndex, api: () => { }, menu: getAllMenuItems() })] }));
     }
     const modal = GetModalJSX();
     return {
@@ -275,10 +257,10 @@ export function getApiLeftMenu() {
     };
 }
 export const ApiLeftMenu = getApiLeftMenu();
-ApiLeftMenu.setMenu([
-    { button: _jsx("div", { style: { width: 200, height: 50, background: "rgb(92,50,213)" }, children: "1" }), el: () => _jsx("div", { children: "1" }), color: "rgb(92,50,213)" },
-    { button: _jsx("div", { style: { width: 200, height: 50, background: "rgb(98,149,58)" }, children: "2" }), el: () => _jsx("div", { children: "2" }) },
-], "test");
 export function TestLeft333() {
-    return _jsx(ApiLeftMenu.Modal2, { zIndex: 20 });
+    // Test menu moved here from module scope; previously ApiLeftMenu.setMenu(...) ran on import and leaked to all consumers.
+    return _jsx(ApiLeftMenu.Modal2, { zIndex: 20, menu: [
+            { button: _jsx("div", { style: { width: 200, height: 50, background: "rgb(92,50,213)" }, children: "1" }), el: () => _jsx("div", { children: "1" }), color: "rgb(92,50,213)" },
+            { button: _jsx("div", { style: { width: 200, height: 50, background: "rgb(98,149,58)" }, children: "2" }), el: () => _jsx("div", { children: "2" }) },
+        ] });
 }

package/lib/common/src/components/Modal/Modal.d.ts

@@ -1,30 +1,44 @@
 import React from "react";
+import type { ModalApi } from "./ModalContextProvider";
+type LegacyModalSetter = (jsx: React.ReactNode | null) => void;
+type ModalTarget = LegacyModalSetter | ModalApi;
 export declare function inputModal({ setModalJSX, func, name, txt }: {
     txt?: string;
     name?: string;
-    setModalJSX: React.Dispatch<React.SetStateAction<React.JSX.Element | null>>;
+    /** Any modal setter: setState/useModal or ModalApi from useModal */
+    setModalJSX: ModalTarget;
     func: (txt: string) => void;
 }): void;
-export declare function confirmModal({ setModalJSX, func }: {
-    setModalJSX: React.Dispatch<React.SetStateAction<React.JSX.Element | null>>;
+export declare function confirmModal({ setModalJSX, func, password }: {
+    /** Any modal setter: setState/useModal or ModalApi from useModal */
+    setModalJSX: ModalTarget;
     func: () => any;
+    /** Confirmation code word. Default "111" is kept for compatibility; pass your own. */
+    password?: string;
 }): void;
+/**
+ * @deprecated Imperative JSX storage based on updateBy/renderBy.
+ * Use `ModalProvider`/`useModal` (ModalContextProvider): context plus portal.
+ */
 export declare function GetModalJSX(): {
     set(jsx: React.JSX.Element | null): void;
     JSX: React.JSX.Element | null;
     Render(): React.JSX.Element | null;
-    addJSX(jsx: React.JSX.Element): React.JSX.Element;
-    dellBy(jsx: React.JSX.Element): void;
-    readonly arrJSX: import("react/jsx-runtime").JSX.Element[];
-    RenderArr(): import("react/jsx-runtime").JSX.Element[];
+    addJSX<A extends React.JSX.Element | null>(jsx: A): A;
+    dellBy(jsx: React.JSX.Element | null): void;
+    readonly arrJSX: (import("react/jsx-runtime").JSX.Element | null)[];
+    RenderArr(): (import("react/jsx-runtime").JSX.Element | null)[];
 };
-type t1 = (() => React.JSX.Element | null) | null;
+/**
+ * @deprecated Imperative JSX storage based on updateBy/renderBy.
+ * Use `ModalProvider`/`useModal` (ModalContextProvider): context plus portal.
+ */
 export declare function GetModalFuncJSX(): {
-    set(jsx: t1): void;
-    JSX: t1;
+    set(jsx: (() => React.JSX.Element | null) | null): void;
+    JSX: (() => React.JSX.Element | null) | null;
     Render(): React.JSX.Element | null;
-    addJSX(jsx: t1): t1;
-    dellBy(jsx: t1): void;
+    addJSX<A extends (() => React.JSX.Element | null) | null>(jsx: A): A;
+    dellBy(jsx: (() => React.JSX.Element | null) | null): void;
     readonly arrJSX: (import("react/jsx-runtime").JSX.Element | null)[];
     RenderArr(): (import("react/jsx-runtime").JSX.Element | null)[];
 };

package/lib/common/src/components/Modal/Modal.js

@@ -1,104 +1,81 @@
 import { jsx as _jsx_1 } from "react/jsx-runtime";
 import { renderBy, updateBy } from "../../../updateBy";
 import { InputPageModal } from "../Input";
+function setModalTarget(target, jsx) {
+    if (typeof target == "function")
+        target(jsx);
+    else
+        target.replace(jsx);
+}
 export function inputModal({ setModalJSX, func, name, txt }) {
-    setModalJSX(_jsx_1(InputPageModal, { callback: txt => {
+    setModalTarget(setModalJSX, _jsx_1(InputPageModal, { callback: txt => {
             func(txt);
-            setModalJSX(null);
-        }, outClick: () => setModalJSX(null), name: name ?? "name", txt: txt }));
+            setModalTarget(setModalJSX, null);
+        }, outClick: () => setModalTarget(setModalJSX, null), name: name ?? "name", txt: txt }));
 }
-export function confirmModal({ setModalJSX, func }) {
-    setModalJSX(_jsx_1(InputPageModal, { callback: txt => {
-            if (txt == "111")
+export function confirmModal({ setModalJSX, func, password = "111" }) {
+    // Do not expose custom passwords in the hint; show the legacy default as before.
+    const hint = password == "111" ? "password 111" : "password";
+    setModalTarget(setModalJSX, _jsx_1(InputPageModal, { callback: txt => {
+            if (txt == password)
                 func();
-            setModalJSX(null);
-        }, outClick: () => setModalJSX(null), name: "password 111" }));
+            setModalTarget(setModalJSX, null);
+        }, outClick: () => setModalTarget(setModalJSX, null), name: hint }));
 }
-export function GetModalJSX() {
-    const data = (() => {
-        let _jsx = null;
-        let _jsxArr = [];
-        let key = 0;
-        const check = (jsx) => _jsxArr.findIndex(e => e.jsx == jsx);
-        return {
-            set(jsx) {
-                _jsx = jsx;
+// Shared store for GetModalJSX/GetModalFuncJSX: identical logic, the only
+// difference is how a stored value turns into an element (renderItem)
+function createJsxStore(renderItem) {
+    let _jsx = null;
+    let _jsxArr = [];
+    let key = 0;
+    const check = (jsx) => _jsxArr.findIndex(e => e.jsx == jsx);
+    const data = {
+        set(jsx) {
+            _jsx = jsx;
+            renderBy(data);
+        },
+        set JSX(jsx) {
+            _jsx = jsx;
+            renderBy(data);
+        },
+        get JSX() { return _jsx; },
+        Render() {
+            updateBy(data);
+            return _jsx && renderItem(_jsx);
+        },
+        addJSX(jsx) {
+            if (check(jsx) == -1) {
+                _jsxArr.push({ jsx, key: key++ });
                 renderBy(data);
-            },
-            set JSX(jsx) {
-                _jsx = jsx;
+            }
+            return jsx;
+        },
+        dellBy(jsx) {
+            const c = check(jsx);
+            if (c != -1) {
+                _jsxArr.splice(c, 1);
                 renderBy(data);
-            },
-            get JSX() { return _jsx; },
-            Render() {
-                updateBy(data);
-                return _jsx;
-            },
-            addJSX(jsx) {
-                const c = check(jsx);
-                if (c == -1) {
-                    _jsxArr.push({ jsx, key: key++ });
-                    renderBy(data);
-                }
-                return jsx;
-            },
-            dellBy(jsx) {
-                const c = check(jsx);
-                if (c != -1) {
-                    _jsxArr.splice(c, 1);
-                    renderBy(data);
-                }
-            },
-            get arrJSX() { return _jsxArr.map(e => _jsx_1("div", { children: e.jsx }, e.key)); },
-            RenderArr() {
-                updateBy(data);
-                return _jsxArr.map(e => _jsx_1("div", { children: e.jsx }, e.key));
             }
-        };
-    })();
+        },
+        get arrJSX() { return _jsxArr.map(e => e.jsx && _jsx_1("div", { children: renderItem(e.jsx) }, e.key)); },
+        RenderArr() {
+            updateBy(data);
+            return data.arrJSX;
+        }
+    };
     return data;
 }
+/**
+ * @deprecated Imperative JSX storage based on updateBy/renderBy.
+ * Use `ModalProvider`/`useModal` (ModalContextProvider): context plus portal.
+ */
+export function GetModalJSX() {
+    return createJsxStore(jsx => jsx);
+}
+/**
+ * @deprecated Imperative JSX storage based on updateBy/renderBy.
+ * Use `ModalProvider`/`useModal` (ModalContextProvider): context plus portal.
+ */
 export function GetModalFuncJSX() {
-    const data = (() => {
-        let _jsx = null;
-        let _jsxArr = [];
-        let key = 0;
-        const check = (jsx) => _jsxArr.findIndex(e => e.jsx == jsx);
-        return {
-            set(jsx) {
-                _jsx = jsx;
-                renderBy(data);
-            },
-            set JSX(jsx) {
-                _jsx = jsx;
-                renderBy(data);
-            },
-            get JSX() { return _jsx; },
-            Render() {
-                updateBy(data);
-                return _jsx ? _jsx() : null;
-            },
-            addJSX(jsx) {
-                const c = check(jsx);
-                if (c == -1) {
-                    _jsxArr.push({ jsx, key: key++ });
-                    renderBy(data);
-                }
-                return jsx;
-            },
-            dellBy(jsx) {
-                const c = check(jsx);
-                if (c != -1) {
-                    _jsxArr.splice(c, 1);
-                    renderBy(data);
-                }
-            },
-            get arrJSX() { return _jsxArr.map(e => e.jsx && _jsx_1("div", { children: e.jsx() }, e.key)); },
-            RenderArr() {
-                updateBy(data);
-                return _jsxArr.map(e => e.jsx && _jsx_1("div", { children: e.jsx() }, e.key));
-            }
-        };
-    })();
-    return data;
+    return createJsxStore(f => f());
 }

package/lib/common/src/components/Modal/ModalContextProvider.d.ts

@@ -1,5 +1,22 @@
 import { ReactNode } from 'react';
-export declare const ModalProvider: ({ children }: {
+export type ModalApi = {
+    show(node: ReactNode): void;
+    open(node: ReactNode): void;
+    close(): void;
+    replace(node: ReactNode | null): void;
+    set(node: ReactNode | null): void;
+};
+export type ModalController = ((jsx: ReactNode | null) => void) & ModalApi;
+export type ModalProviderProps = {
     children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const useModal: () => (jsx: ReactNode | null) => void;
+    /** Close on click outside the modal. Defaults to true for legacy behavior. */
+    closeOnOutsideClick?: boolean;
+    /** Close on Escape. Defaults to true. */
+    closeOnEscape?: boolean;
+};
+export declare const ModalProvider: ({ children, closeOnOutsideClick, closeOnEscape }: ModalProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useModal: () => ModalController;
+/** @deprecated Use `useModal()`; it is callable and also has show/open/close/set methods. */
+export declare const useModalOld: () => ModalController;
+/** @deprecated Use `useModal()` directly. */
+export declare function useModalApi(): ModalApi;

package/lib/common/src/components/Modal/ModalContextProvider.js

@@ -1,16 +1,43 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { DivOutsideClick } from "../../hooks/useOutside";
-// Контекст хранит только функцию setModal
-const ModalContext = createContext(() => { });
-export const ModalProvider = ({ children }) => {
+import { tokens } from "../../styles/tokens";
+const noopModal = Object.assign(() => { }, { show() { }, open() { }, close() { }, replace() { }, set() { } });
+const ModalContext = createContext(noopModal);
+export const ModalProvider = ({ children, closeOnOutsideClick = true, closeOnEscape = true }) => {
     const [modal, setModal] = useState(null);
-    return (_jsxs(ModalContext.Provider, { value: setModal, children: [children, modal && createPortal(_jsx("div", { style: {
-                    position: 'fixed', inset: 0, zIndex: 9999,
+    const modalApi = useMemo(() => {
+        const api = ((node) => setModal(node));
+        api.show = (node) => setModal(node);
+        api.open = api.show;
+        api.close = () => setModal(null);
+        api.replace = (node) => setModal(node);
+        api.set = api.replace;
+        return api;
+    }, []);
+    useEffect(() => {
+        if (!modal || !closeOnEscape)
+            return;
+        const onKeyDown = (e) => {
+            if (e.key == 'Escape')
+                setModal(null);
+        };
+        document.addEventListener('keydown', onKeyDown);
+        return () => document.removeEventListener('keydown', onKeyDown);
+    }, [modal, closeOnEscape]);
+    return (_jsxs(ModalContext.Provider, { value: modalApi, children: [children, modal && createPortal(_jsx("div", { style: {
+                    position: 'fixed', inset: 0, zIndex: tokens.zIndex.modal,
                     display: 'flex', alignItems: 'center', justifyContent: 'center',
                     backgroundColor: 'rgba(0,0,0,0.5)'
-                }, children: _jsx(DivOutsideClick, { outsideClick: () => setModal(null), status: true, children: modal }) }), document.body)] }));
+                }, children: _jsx(DivOutsideClick, { outsideClick: () => { if (closeOnOutsideClick)
+                        setModal(null); }, status: true, children: modal }) }), document.body)] }));
 };
-// Тот самый компактный хук
+// Callable for legacy code, controller-style for new code.
 export const useModal = () => useContext(ModalContext);
+/** @deprecated Use `useModal()`; it is callable and also has show/open/close/set methods. */
+export const useModalOld = () => useContext(ModalContext);
+/** @deprecated Use `useModal()` directly. */
+export function useModalApi() {
+    return useContext(ModalContext);
+}