wenay-react2 1.0.38 → 1.0.40

package/lib/common/src/components/Dnd/FloatingWindow.d.ts

@@ -1,16 +1,17 @@
 import React, { ReactNode } from "react";
+import { type RndResizeCallback } from "react-rnd";
 import { ObservableMap } from "../../utils/observableMap";
-type tPosition = {
+export type FloatingWindowPosition = {
     x: number;
     y: number;
 };
-type tSize = {
+export type FloatingWindowSize = {
     height: number | string;
     width: number | string;
 };
-type tRND = {
-    position: tPosition;
-    size: tSize;
+export type FloatingWindowSavedGeometry = {
+    position: FloatingWindowPosition;
+    size: FloatingWindowSize;
 };
 export type FloatingWindowUpdate = {
     e: MouseEvent | TouchEvent;
@@ -20,15 +21,15 @@ export type FloatingWindowUpdate = {
         width: number;
         height: number;
     };
-    position: tPosition;
+    position: FloatingWindowPosition;
 };
-type tDivRndBase = {
+export type FloatingWindowProps = {
     zIndex?: number;
     disableDragging?: () => boolean;
     keyForSave?: string;
     onUpdate?: (data: FloatingWindowUpdate) => void;
-    position?: tPosition;
-    size?: tSize;
+    position?: FloatingWindowPosition;
+    size?: FloatingWindowSize;
     moveOnlyHeader?: boolean;
     onCLickClose?: () => void;
     header?: React.ReactElement | boolean;
@@ -47,13 +48,30 @@ type tDivRndBase = {
     children: React.ReactElement | ((update: number) => React.ReactElement);
     className?: string;
 };
-export declare const floatingWindowMap: ObservableMap<string, tRND>;
+export type FloatingWindowControllerOptions = Omit<FloatingWindowProps, "children" | "className" | "header" | "moveOnlyHeader" | "overflow" | "onCLickClose">;
+export type FloatingWindowController = {
+    position: FloatingWindowPosition;
+    size: FloatingWindowSize;
+    update: number;
+    stackIndex: number;
+    zIndex: number;
+    overlayZIndex: number;
+    dragging: boolean;
+    headerRef: React.RefObject<HTMLDivElement | null>;
+    onHeaderTouchStart: React.TouchEventHandler<HTMLDivElement>;
+    onHeaderMouseDown: React.MouseEventHandler<HTMLDivElement>;
+    onWindowMouseDown: React.MouseEventHandler<HTMLDivElement>;
+    onResize: RndResizeCallback;
+    onResizeStop: RndResizeCallback;
+};
+export declare const floatingWindowMap: ObservableMap<string, FloatingWindowSavedGeometry>;
 export declare const FloatingWindow: typeof FloatingWindowBase;
+export declare function useFloatingWindowController({ keyForSave: ks, position, size, zIndex, onUpdate, limit, sizeByWindow }?: FloatingWindowControllerOptions): FloatingWindowController;
 /**
  * Wrapper component around react-rnd.
  * Provides dragging and resizing, an optional header, and a close button.
  */
-export declare function FloatingWindowBase({ children, keyForSave: ks, position, size, overflow, zIndex, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, sizeByWindow }: tDivRndBase): import("react/jsx-runtime").JSX.Element;
+export declare function FloatingWindowBase({ children, keyForSave: ks, position, size, overflow, zIndex, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, sizeByWindow }: FloatingWindowProps): import("react/jsx-runtime").JSX.Element;
 export type DragBoxProps = {
     /** Child element that should be draggable */
     children: ReactNode;
@@ -89,4 +107,3 @@ export type DragBoxProps = {
  * Returns the distance traveled when moving the child element.
  */
 export declare function DragBox({ children, onX, onY, x, y, right, last, dragging, onStart, onStop }: DragBoxProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/lib/common/src/components/Dnd/FloatingWindow.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Rnd } from "react-rnd";
-import { renderBy, updateBy } from "../../../updateBy";
+import { createUpdateApi } from "../../../updateBy";
 import { ObservableMap } from "../../utils/observableMap";
 // Map of all popup window sizes; observable - memoryCache marks itself dirty on its mutations
 export const floatingWindowMap = new ObservableMap();
 // limit={{x:{min:0}, y:{min:0}}}
 let k = 0;
 const openWindows = { ar: [] };
+const openWindowsApi = createUpdateApi(openWindows);
 // Freezes the subtree until update changes (intentionally ignores render closure changes) -
 // the previous useMemo-in-callback semantics, but without calling a hook from an arbitrary place
 const MemoChild = React.memo(({ update, render }) => render(update), (prev, next) => prev.update === next.update);
@@ -17,25 +18,15 @@ export const FloatingWindow = (a) => {
     const ff = (update) => _jsx(MemoChild, { update: isFunc ? update : 0, render: renderChild });
     return _jsx(FloatingWindowBase, { ...a, children: ff });
 };
-/**
- * Wrapper component around react-rnd.
- * Provides dragging and resizing, an optional header, and a close button.
- */
-export function FloatingWindowBase({ children, keyForSave: ks, position, size, overflow = true, zIndex = 9, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, sizeByWindow = true }) {
-    // NOTE: no implicit limit for onCLickClose windows. `limit` is parent-relative,
-    // so {y:{min:0}} pinned windows to their DOM parent's top: a window opened from a
-    // centered wrapper (ModalProvider / ModalWrapper at top:50%) could not be dragged
-    // above mid-screen. Keeping the window on screen is already handled by the
-    // viewport clamp below (header rect vs viewport in useLayoutEffect).
+export function useFloatingWindowController({ keyForSave: ks, position, size, zIndex = 9, onUpdate, limit, sizeByWindow = true } = {}) {
     const positionDef = { x: 0, y: 0, ...(position ?? {}) };
     const sizeDef = { height: 0, width: 0, ...(size ?? {}) };
-    // If there is a key, store position and size data in the map
     let map;
     if (ks) {
         map = floatingWindowMap.get(ks) ?? floatingWindowMap.set(ks, { size: sizeDef, position: positionDef }).get(ks);
     }
-    position = map?.position ?? positionDef;
-    size = map?.size ?? sizeDef;
+    const savedPosition = map?.position ?? positionDef;
+    const savedSize = map?.size ?? sizeDef;
     const id2 = useRef({ k: k++ });
     const id = id2.current;
     const [zIndexX, setZIndexX] = useState(0);
@@ -43,32 +34,24 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
     const lastT = useRef(null);
     const [a, setA] = useState(false);
     const [b, setB] = useState(false);
-    const [x, setX] = useState(position.x);
-    const [y, setY] = useState(position.y);
-    const [width, setWidth] = useState(size.width);
-    const [height, setHeight] = useState(size.height);
+    const [x, setX] = useState(savedPosition.x);
+    const [y, setY] = useState(savedPosition.y);
+    const [width, setWidth] = useState(savedSize.width);
+    const [height, setHeight] = useState(savedSize.height);
     const [update, setUpdate] = useState(0);
     const zindex = useRef(zIndexX);
     zindex.current = zIndexX;
-    // Update the window zIndex if it was brought to the top
-    updateBy(openWindows, () => {
+    openWindowsApi.use(() => {
         const z = openWindows.ar.findIndex((v) => v.k === id.k);
         if (z >= 0 && z !== zindex.current) {
             setZIndexX(z);
         }
     });
-    // limit via ref: an inline object in props must not resubscribe document listeners on every render
     const limitRef = useRef(limit);
     useLayoutEffect(() => { limitRef.current = limit; });
-    /**
-     * Hook for mouse dragging (a) and touch-device dragging (b).
-     * Remove subscriptions on unmount and when dependencies change (a/b).
-     */
     useEffect(() => {
-        // Mouse
         const mouseMoveHandler = (e) => {
             e.stopPropagation();
-            // mousedown always sets lastC before this subscription exists
             if (lastC.current == null)
                 return;
             const data = lastC.current;
@@ -98,12 +81,9 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
             document.removeEventListener("mousemove", mouseMoveHandler);
             lastC.current = null;
             setA(false);
-            // drag end commits geometry mutated in place - invisible to the map, so announce
-            // it; a no-move click also lands here, the save-side diff turns that into a no-op
             if (ks)
                 floatingWindowMap.touch(ks);
         };
-        // Touch
         const touchMoveHandler = (e) => {
             const data = lastT.current;
             if (!data)
@@ -150,17 +130,14 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
                     floatingWindowMap.touch(ks);
             }
         };
-        // If mouse dragging mode is active
         if (a) {
             document.addEventListener("mousemove", mouseMoveHandler);
             document.addEventListener("mouseup", mouseUpHandler);
         }
-        // If touch-event dragging mode is active
         if (b) {
             document.addEventListener("touchmove", touchMoveHandler);
             document.addEventListener("touchend", touchEndHandler);
         }
-        // Return the cleanup function for unmount and a/b changes:
         return () => {
             document.removeEventListener("mousemove", mouseMoveHandler);
             document.removeEventListener("mouseup", mouseUpHandler);
@@ -168,30 +145,22 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
             document.removeEventListener("touchend", touchEndHandler);
         };
     }, [a, b]);
-    // On the first render, add the window to the array; remove it on unmount
     useEffect(() => {
         openWindows.ar.push(id);
-        renderBy(openWindows);
+        openWindowsApi.render();
         return () => {
             const z = openWindows.ar.findIndex((v) => v.k === id.k);
             if (z >= 0) {
                 openWindows.ar.splice(z, 1);
-                renderBy(openWindows);
+                openWindowsApi.render();
             }
         };
     }, []);
-    // Update coordinates and size in the map if keyForSave is set
-    if (size) {
-        size.height = height;
-        size.width = width;
-    }
-    if (position) {
-        position.x = x;
-        position.y = y;
-    }
+    savedSize.height = height;
+    savedSize.width = width;
+    savedPosition.x = x;
+    savedPosition.y = y;
     const headerRef = useRef(null);
-    // clamp to the viewport in a layout effect: an inline ref-callback ran twice per render
-    // (null + element) with a forced reflow from getBoundingClientRect on each call
     useLayoutEffect(() => {
         const el = headerRef.current;
         if (!el || !sizeByWindow)
@@ -208,39 +177,88 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
             setHeight(window.innerHeight);
         }
     }, [x, y, width, height, sizeByWindow]);
-    const headerD = (_jsx("div", { ref: headerRef, className: "wenayWndHeader", onTouchStart: (e) => {
-            const t = e.changedTouches[0];
-            if (t) {
-                lastT.current = {
-                    x: x - t.clientX,
-                    y: y - t.clientY,
-                    id: t.identifier
-                };
-            }
-            setB(true);
-        }, onMouseDown: (e) => {
-            lastC.current = {
-                x: x - e.clientX,
-                y: y - e.clientY
+    const onHeaderTouchStart = (e) => {
+        const t = e.changedTouches[0];
+        if (t) {
+            lastT.current = {
+                x: x - t.clientX,
+                y: y - t.clientY,
+                id: t.identifier
             };
-            setA(true);
-        }, children: header ?? _jsx("div", { className: "wenayWndHeaderDef" }) }));
+        }
+        setB(true);
+    };
+    const onHeaderMouseDown = (e) => {
+        lastC.current = {
+            x: x - e.clientX,
+            y: y - e.clientY
+        };
+        setA(true);
+    };
+    const onWindowMouseDown = () => {
+        const z = openWindows.ar.findIndex((v) => v === id);
+        if (z !== openWindows.ar.length - 1 || zindex.current !== z) {
+            const buf = openWindows.ar[z];
+            openWindows.ar.splice(z, 1);
+            openWindows.ar.push(buf);
+            openWindowsApi.render();
+        }
+    };
+    const onResizeStop = (e, dir, elementRef, delta, { x: nx, y: ny }) => {
+        setX(nx);
+        setY(ny);
+        setHeight(elementRef.offsetHeight);
+        setWidth(elementRef.offsetWidth);
+        setUpdate(update + 1);
+        if (ks)
+            floatingWindowMap.touch(ks);
+    };
+    const onResize = (e, dir, elementRef, delta, pos) => {
+        onUpdate?.({ e, dir, elementRef, delta, position: pos });
+    };
+    const windowZIndex = zIndexX * 2 + zIndex;
+    return {
+        position: { x, y },
+        size: { width, height },
+        update,
+        stackIndex: zIndexX,
+        zIndex: windowZIndex,
+        overlayZIndex: windowZIndex + 1,
+        dragging: a || b,
+        headerRef,
+        onHeaderTouchStart,
+        onHeaderMouseDown,
+        onWindowMouseDown,
+        onResize,
+        onResizeStop,
+    };
+}
+/**
+ * Wrapper component around react-rnd.
+ * Provides dragging and resizing, an optional header, and a close button.
+ */
+export function FloatingWindowBase({ children, keyForSave: ks, position, size, overflow = true, zIndex = 9, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, sizeByWindow = true }) {
+    // NOTE: no implicit limit for onCLickClose windows. `limit` is parent-relative,
+    // so {y:{min:0}} pinned windows to their DOM parent's top: a window opened from a
+    // centered wrapper (ModalProvider / ModalWrapper at top:50%) could not be dragged
+    // above mid-screen. Keeping the window on screen is already handled by the
+    // viewport clamp below (header rect vs viewport in useLayoutEffect).
+    const controller = useFloatingWindowController({
+        keyForSave: ks,
+        position,
+        size,
+        zIndex,
+        onUpdate,
+        disableDragging,
+        limit,
+        sizeByWindow,
+    });
+    const headerD = (_jsx("div", { ref: controller.headerRef, className: "wenayWndHeader", onTouchStart: controller.onHeaderTouchStart, onMouseDown: controller.onHeaderMouseDown, children: header ?? _jsx("div", { className: "wenayWndHeaderDef" }) }));
     return (_jsx(Rnd, { disableDragging: true, style: {
-            zIndex: zIndexX * 2 + zIndex
-        }, className: className, onResizeStop: (e, dir, elementRef, delta, { x: nx, y: ny }) => {
-            setX(nx);
-            setY(ny);
-            // actual element size: `+height + delta.height` gave NaN for string sizes like "100%"
-            setHeight(elementRef.offsetHeight);
-            setWidth(elementRef.offsetWidth);
-            setUpdate(update + 1);
-            if (ks)
-                floatingWindowMap.touch(ks);
-        }, onResize: (e, dir, elementRef, delta, pos) => {
-            onUpdate?.({ e, dir, elementRef, delta, position: pos });
-        }, position: { x, y }, size: { width, height }, default: {
-            ...position,
-            ...size
+            zIndex: controller.zIndex
+        }, className: className, onResizeStop: controller.onResizeStop, onResize: controller.onResize, position: controller.position, size: controller.size, default: {
+            ...controller.position,
+            ...controller.size
         }, children: _jsxs("div", { className: "wenayWnd", style: {
                 width: "100%",
                 height: "100%",
@@ -248,20 +266,11 @@ export function FloatingWindowBase({ children, keyForSave: ks, position, size, o
                 flexDirection: "column",
                 position: "relative",
                 flex: "auto"
-            }, onMouseDown: () => {
-                // Bring the window to the top
-                const z = openWindows.ar.findIndex((v) => v === id);
-                if (z !== openWindows.ar.length - 1 || zindex.current !== z) {
-                    const buf = openWindows.ar[z];
-                    openWindows.ar.splice(z, 1);
-                    openWindows.ar.push(buf);
-                    renderBy(openWindows);
-                }
-            }, children: [moveOnlyHeader || header ? headerD : null, _jsxs("div", { className: "maxSize", style: { overflow: overflow ? "auto" : undefined }, children: [(a || b) && (_jsx("div", { className: "maxSize", style: {
+            }, onMouseDown: controller.onWindowMouseDown, children: [moveOnlyHeader || header ? headerD : null, _jsxs("div", { className: "maxSize", style: { overflow: overflow ? "auto" : undefined }, children: [controller.dragging && (_jsx("div", { className: "maxSize", style: {
                                 position: "absolute",
-                                zIndex: zIndexX * 2 + zIndex + 1
-                            } })), typeof children === "function" ? children(update) : children] }), onCLickClose && (_jsx("div", { className: "wenayCloseBtn wenayWndClose", title: "Close", style: {
-                        zIndex: zIndexX * 2 + zIndex + 1
+                                zIndex: controller.overlayZIndex
+                            } })), typeof children === "function" ? children(controller.update) : children] }), onCLickClose && (_jsx("div", { className: "wenayCloseBtn wenayWndClose", title: "Close", style: {
+                        zIndex: controller.overlayZIndex
                     }, onClick: onCLickClose, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", "aria-hidden": "true", children: _jsx("path", { d: "M2 2 L10 10 M10 2 L2 10", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }) }) }, "323"))] }) }));
 }
 /**

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

@@ -1,21 +1,40 @@
 import React from "react";
-export declare function TextInputPanel({ callback, name, txt }: {
+export type TextInputPanelProps = {
     callback: (txt: string) => void;
     name?: string;
     txt?: string;
-}): import("react/jsx-runtime").JSX.Element;
-export declare function TextInputModal({ callback, name, outClick, keyForSave, txt }: Parameters<typeof TextInputPanel>[0] & {
+};
+export declare function useTextInputPanel({ callback, txt }: Pick<TextInputPanelProps, "callback" | "txt">): {
+    getValue: () => string;
+    setValue: (next: string) => void;
+    submit: () => void;
+    inputProps: {
+        defaultValue: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+};
+export declare function TextInputPanel({ callback, name, txt }: TextInputPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextInputModal({ callback, name, outClick, keyForSave, txt }: TextInputPanelProps & {
     outClick: () => any;
     keyForSave?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function FileInputModal({ callback, name, outClick, keyForSave }: Parameters<typeof FileInputPanel>[0] & {
+export declare function FileInputModal({ callback, name, outClick, keyForSave }: FileInputPanelProps & {
     outClick: () => any;
     keyForSave?: string;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function FileInputPanel({ callback, name }: {
+export type FileInputPanelProps = {
     callback: (file: File | null) => void;
     name?: string;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare function useFileInputPanel({ callback }: Pick<FileInputPanelProps, "callback">): {
+    getFile: () => File | null;
+    setFile: (next: File | null) => void;
+    submit: () => void;
+    inputProps: {
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+};
+export declare function FileInputPanel({ callback, name }: FileInputPanelProps): import("react/jsx-runtime").JSX.Element;
 export declare function FreeModal({ outClick, children, zIndex, size, keyForSave }: {
     zIndex?: number;
     outClick: () => any;

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

@@ -7,11 +7,21 @@ function ModalWrapper({ outClick, children, zIndex, size = { height: 150, width:
     const defaultPosition = position ?? { y: -(size.height / 2), x: -(size.width / 2) };
     return _jsx(OutsideClickArea, { outsideClick: outClick, style: { position: "absolute", top: "50%", left: "50%" }, children: _jsx(FloatingWindow, { keyForSave: keyForSave, size: size, zIndex: zIndex, position: defaultPosition, className: "fon border fonLight", moveOnlyHeader: true, children: children }) });
 }
-export function TextInputPanel({ callback, name = "", txt = "" }) {
+export function useTextInputPanel({ callback, txt = "" }) {
     const txtName = useRef(txt);
-    return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "text", style: { width: "100%" }, defaultValue: txtName.current, onChange: (e) => {
-                    txtName.current = e.target.value;
-                } }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: () => { callback(txtName.current); }, children: "send" })] });
+    return {
+        getValue: () => txtName.current,
+        setValue: (next) => { txtName.current = next; },
+        submit: () => callback(txtName.current),
+        inputProps: {
+            defaultValue: txtName.current,
+            onChange: (e) => { txtName.current = e.target.value; },
+        },
+    };
+}
+export function TextInputPanel({ callback, name = "", txt = "" }) {
+    const input = useTextInputPanel({ callback, txt });
+    return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "text", style: { width: "100%" }, ...input.inputProps }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: input.submit, children: "send" })] });
 }
 export function TextInputModal({ callback, name, outClick, keyForSave = "TextInputModal", txt }) {
     return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: { height: 150, width: 300 }, position: { y: -150, x: -250 }, children: _jsx(TextInputPanel, { callback: callback, name: name, txt: txt }) });
@@ -19,11 +29,20 @@ export function TextInputModal({ callback, name, outClick, keyForSave = "TextInp
 export function FileInputModal({ callback, name, outClick, keyForSave = "FileInputModal" }) {
     return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: { height: 150, width: 300 }, position: { y: -150, x: -250 }, children: _jsx(FileInputPanel, { callback: callback, name: name }) });
 }
-export function FileInputPanel({ callback, name = "" }) {
+export function useFileInputPanel({ callback }) {
     const file = useRef(null);
-    return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "file", style: { width: "100%" }, onChange: (e) => {
-                    file.current = e.target.files?.[0] ?? null;
-                } }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: () => { callback(file.current); }, children: "send" })] });
+    return {
+        getFile: () => file.current,
+        setFile: (next) => { file.current = next; },
+        submit: () => callback(file.current),
+        inputProps: {
+            onChange: (e) => { file.current = e.target.files?.[0] ?? null; },
+        },
+    };
+}
+export function FileInputPanel({ callback, name = "" }) {
+    const input = useFileInputPanel({ callback });
+    return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "file", style: { width: "100%" }, ...input.inputProps }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: input.submit, children: "send" })] });
 }
 export function FreeModal({ outClick, children, zIndex, size = { height: 150, width: 300 }, keyForSave = "FreeModal" }) {
     return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: size, zIndex: zIndex, children: children });

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

@@ -1,4 +1,5 @@
 import React, { JSX } from 'react';
+import { useDraggable } from "../../hooks/useDraggable";
 import { type MenuRightPosition, type MenuRightVerticalPosition } from "./RightMenuStore";
 export type MenuElement = {
     label: string;
@@ -32,7 +33,33 @@ export type DropdownMenuProps = {
     keyForSave?: string;
 };
 export type MenuRightRenderProps = Omit<DropdownMenuProps, 'elements'>;
-export declare function DropdownMenu({ elements, style, styles, classNames, trigger, position: initialPosition, verticalPosition: initialVerticalPosition, keyForSave }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export type UseRightMenuControllerOptions = Pick<DropdownMenuProps, 'elements' | 'style' | 'styles' | 'position' | 'verticalPosition' | 'keyForSave'>;
+export type RightMenuController = {
+    elements: MenuElement[];
+    isOpen: boolean;
+    isFixed: boolean;
+    select: number | null;
+    position: MenuRightPosition;
+    isTop: boolean;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    dragProps: ReturnType<typeof useDraggable>['dragProps'];
+    triggerState: MenuRightTriggerState;
+    containerStyle: React.CSSProperties;
+    flyoutStyle: React.CSSProperties;
+    submenuRender: React.ReactElement;
+    hasSubmenu: boolean;
+    open(): void;
+    close(): void;
+    toggleFixed(): void;
+    setOpen(open: boolean): void;
+    selectItem(item: MenuElement, index: number): void;
+    contentMouseEnter(): void;
+    contentMouseLeave(): Promise<void>;
+    submenuMouseEnter(): void;
+    submenuMouseLeave(): Promise<void>;
+};
+export declare function useRightMenuController({ elements, style, styles, position: initialPosition, verticalPosition: initialVerticalPosition, keyForSave }: UseRightMenuControllerOptions): RightMenuController;
+export declare function DropdownMenu({ elements, style, styles, classNames, trigger, position, verticalPosition, keyForSave }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 export declare function createRightMenuController(): {
     set(array: MenuElement[]): void;
     delete(array: MenuElement[]): void;