wenay-react2 1.0.20 → 1.0.22

package/lib/common/src/grid/agGrid4/core.js

@@ -0,0 +1,127 @@
+// Layer 1 (core): pure buffer logic, implemented as a closure factory. No React, no ag-grid.
+// Buffer = the last known row state by id (a memory point). All race handling is here.
+//
+// Differences from agGrid2/3 (optimizations):
+//  - dependencies (getId, buffer, api) are captured by the factory once: one entry point,
+//    updateData, instead of duplicating buffer/grid branching in the hook;
+//  - in-place row merge (Object.assign), with no new object allocated for each update
+//    (important on streams: less garbage for GC);
+//  - add vs update is decided by a Set of delivered ids, without api.getRowNode per row.
+/**
+ * Table core: buffer + delivery to the grid. Lifecycle:
+ *  1. updateData at any time: the buffer is always updated, the grid only if attached;
+ *  2. attach(api) on onGridReady: sync catches up with everything that arrived earlier;
+ *  3. detach() on grid destroy: the core accumulates in the buffer again until the next attach.
+ */
+export function createGridBuffer(deps) {
+    const { getId } = deps;
+    const buf = deps.externalBuffer ?? {};
+    const inGrid = new Set(); // ids already delivered to the grid
+    let api = null;
+    // --- Buffer ----------------------------------------------------------------
+    function upsert(rows) {
+        for (const row of rows) {
+            const id = getId(row);
+            buf[id] = Object.assign(buf[id] ?? {}, row);
+        }
+    }
+    // --- Grid delivery ---------------------------------------------------------
+    /** Main entry point: push data any time; the buffer decides whether it reaches the grid. */
+    function updateData(args) {
+        const { newData, removeData, onlyMemo, option } = args;
+        if (newData)
+            upsert(newData);
+        if (removeData)
+            for (const row of removeData)
+                delete buf[getId(row)];
+        if (onlyMemo || !api)
+            return;
+        const opt = { add: true, update: true, sync: false, ...option };
+        const toAdd = [];
+        const toUpdate = [];
+        for (const row of newData ?? []) {
+            const id = getId(row);
+            const merged = buf[id];
+            if (inGrid.has(id))
+                toUpdate.push(merged);
+            else
+                toAdd.push(merged);
+        }
+        const add = opt.add ? toAdd : [];
+        const update = opt.update ? toUpdate : [];
+        // Mark as delivered only the rows that are actually sent to the grid.
+        for (const row of add)
+            inGrid.add(getId(row));
+        // ag-grid finds rows for remove through getRowId, so partial data is enough.
+        const remove = removeData?.filter(row => inGrid.delete(getId(row)));
+        if (opt.sync) {
+            api.applyTransaction({ add, update, remove });
+            return;
+        }
+        if (add.length || remove?.length)
+            api.applyTransaction({ add, remove });
+        // Let the grid itself batch updates (asyncTransactionWaitMillis).
+        if (update.length)
+            api.applyTransactionAsync({ update });
+    }
+    /**
+     * Bring the whole grid in line with the buffer (the buffer is the source of truth).
+     * Missing from the buffer -> remove; missing from the grid -> add; everything else -> update.
+     */
+    function sync() {
+        if (!api)
+            return;
+        const add = [];
+        const update = [];
+        const remove = [];
+        const gridIds = new Set();
+        api.forEachNode(function classify(node) {
+            if (!node.data)
+                return;
+            const id = getId(node.data);
+            gridIds.add(id);
+            if (buf[id])
+                update.push(buf[id]);
+            else
+                remove.push(node.data);
+        });
+        inGrid.clear();
+        for (const id in buf) {
+            inGrid.add(id);
+            if (!gridIds.has(id))
+                add.push(buf[id]);
+        }
+        if (add.length || update.length || remove.length)
+            api.applyTransaction({ add, update, remove });
+    }
+    // --- Lifecycle -------------------------------------------------------------
+    function attach(gridApi) {
+        api = gridApi;
+        sync(); // catch up with the race: data may have arrived before onGridReady
+    }
+    function detach() {
+        api = null;
+        inGrid.clear();
+    }
+    return {
+        // for the React binding (or another grid owner)
+        control: { attach, detach },
+        // public consumer api
+        api: { updateData, sync, getId, buffer: buf },
+    };
+}
+/** Column comparator: numbers as numbers, empty/NaN values last (respecting inversion). */
+export function numericComparator(map) {
+    return (a1, b1, _nodeA, _nodeB, inv) => {
+        const [a, b] = map ? map(a1, b1) : [a1, b1];
+        const aNum = typeof a == 'number' && !Number.isNaN(a);
+        const bNum = typeof b == 'number' && !Number.isNaN(b);
+        if (aNum && bNum)
+            return a - b;
+        if (a == b)
+            return 0;
+        if (!Number.isNaN(b) && b != null)
+            return inv ? -1 : 1;
+        return inv ? 1 : -1;
+    };
+}

package/lib/common/src/grid/agGrid4/index.d.ts

@@ -0,0 +1,6 @@
+export { createGridBuffer, numericComparator } from './core';
+export type { BufferTable, GetId, GridApiLike, GridBufferCore, GridTransaction, NumberPair, PushOptions, RowId, UpdateArgs, } from './core';
+export { useAgGrid, AgGridMy } from './agGrid4';
+export type { AgGridController, AgGridMyProps, UseAgGridOptions } from './agGrid4';
+export { useAgGridTheme, buildAgTheme } from './theme';
+export type { tThemeMode } from './theme';

package/lib/common/src/grid/agGrid4/index.js

@@ -0,0 +1,3 @@
+export { createGridBuffer, numericComparator } from './core';
+export { useAgGrid, AgGridMy } from './agGrid4';
+export { useAgGridTheme, buildAgTheme } from './theme';

package/lib/common/src/grid/agGrid4/theme.d.ts

@@ -0,0 +1,7 @@
+export type tThemeMode = 'light' | 'dark';
+/** Pure ag-grid theme builder from mode. No React. Cached per mode: one shared
+ *  theme object across all grids instead of one per component instance.
+ *  dark uses the same parts and params as legacy GridStyleDefault for a consistent grid look. */
+export declare function buildAgTheme(mode: tThemeMode): import("ag-grid-community").Theme<import("ag-grid-community").ThemeDefaultParams>;
+/** Application theme; default is dark, as in production. */
+export declare function useAgGridTheme(mode?: tThemeMode): import("ag-grid-community").Theme<import("ag-grid-community").ThemeDefaultParams>;

package/lib/common/src/grid/agGrid4/theme.js

@@ -0,0 +1,18 @@
+// ag-grid theme. Pure builder + hook. Self-contained (no ThemeProvider in this project yet;
+// when one appears, useAgGridTheme will start reading mode from it without a signature change).
+import { colorSchemeDarkBlue, colorSchemeLight, iconSetMaterial, themeAlpine } from 'ag-grid-community';
+import { tokens } from '../../styles/tokens';
+const themeCache = {};
+/** Pure ag-grid theme builder from mode. No React. Cached per mode: one shared
+ *  theme object across all grids instead of one per component instance.
+ *  dark uses the same parts and params as legacy GridStyleDefault for a consistent grid look. */
+export function buildAgTheme(mode) {
+    return themeCache[mode] ??= themeAlpine
+        .withPart(mode == 'dark' ? colorSchemeDarkBlue : colorSchemeLight)
+        .withPart(iconSetMaterial)
+        .withParams({ ...tokens.grid, browserColorScheme: mode });
+}
+/** Application theme; default is dark, as in production. */
+export function useAgGridTheme(mode = 'dark') {
+    return buildAgTheme(mode);
+}

package/lib/common/src/hooks/useAddDownAnyKey.d.ts

@@ -1,5 +1,24 @@
 export declare const KeyDown: {
     key: string;
 };
-export declare function useAddDownAnyKey(): void;
-export declare function addDownAnyKey(): void;
+export type AnyKeyDownApi = {
+    readonly key: string;
+    getKey(): string;
+    get(): string;
+    clear(): void;
+    reset(): void;
+    subscribe(listener: (key: string, event?: KeyboardEvent) => void): () => void;
+    on(listener: (key: string, event?: KeyboardEvent) => void): () => void;
+};
+export declare const keyDownApi: AnyKeyDownApi;
+export declare function useAddDownAnyKey(options?: {
+    enabled?: boolean;
+    target?: Document | HTMLElement;
+    onKeyDown?: (key: string, event: KeyboardEvent) => void;
+}): AnyKeyDownApi;
+export declare const useKeyDown: typeof useAddDownAnyKey;
+export declare const useAnyKey: typeof useAddDownAnyKey;
+/** @deprecated Use `useKeyDown(options)` or `useAnyKey(options)`. */
+export declare function addDownAnyKey(): AnyKeyDownApi;
+/** @deprecated Use `useKeyDown(options)` or `useAnyKey(options)`. */
+export declare const useAddDownAnyKeyOld: typeof useAddDownAnyKey;

package/lib/common/src/hooks/useAddDownAnyKey.js

@@ -1,21 +1,59 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { renderBy } from "../../updateBy";
+import { UseListen } from "wenay-common2";
 export const KeyDown = {
     key: ""
 };
-export function useAddDownAnyKey() {
+const [emitKeyDown, keyDownListen] = UseListen();
+export const keyDownApi = {
+    get key() { return KeyDown.key; },
+    getKey() { return KeyDown.key; },
+    get() { return KeyDown.key; },
+    clear() {
+        KeyDown.key = "";
+        renderBy(KeyDown);
+        emitKeyDown("", undefined);
+    },
+    reset() {
+        keyDownApi.clear();
+    },
+    subscribe(listener) {
+        return keyDownListen.on(listener);
+    },
+    on(listener) {
+        return keyDownListen.on(listener);
+    }
+};
+export function useAddDownAnyKey(options = {}) {
+    const { enabled = true, target } = options;
+    const onKeyDownRef = useRef(options.onKeyDown);
+    onKeyDownRef.current = options.onKeyDown;
     useEffect(() => {
-        const func = (ev) => {
-            KeyDown.key = ev.key;
+        if (!enabled)
+            return;
+        const currentTarget = target ?? (typeof document !== "undefined" ? document : null);
+        if (!currentTarget)
+            return;
+        const func = (event) => {
+            if (!(event instanceof KeyboardEvent))
+                return;
+            KeyDown.key = event.key;
             renderBy(KeyDown);
+            emitKeyDown(event.key, event);
+            onKeyDownRef.current?.(event.key, event);
         };
-        document.addEventListener("keydown", func);
+        currentTarget.addEventListener("keydown", func);
         return () => {
-            document.removeEventListener("keydown", func);
+            currentTarget.removeEventListener("keydown", func);
         };
-    }, []);
+    }, [enabled, target]);
+    return keyDownApi;
 }
-// Backward-compatible name.
+export const useKeyDown = useAddDownAnyKey;
+export const useAnyKey = useAddDownAnyKey;
+/** @deprecated Use `useKeyDown(options)` or `useAnyKey(options)`. */
 export function addDownAnyKey() {
     return useAddDownAnyKey();
 }
+/** @deprecated Use `useKeyDown(options)` or `useAnyKey(options)`. */
+export const useAddDownAnyKeyOld = useAddDownAnyKey;

package/lib/common/src/hooks/useDraggable.d.ts

@@ -1,15 +1,33 @@
+import React from "react";
 export interface Position {
     x: number;
     y: number;
 }
+export type UseDraggableOptions = {
+    initialPosition?: Position;
+    holdMs?: number;
+    onDragEnd?: DragEndCallback;
+    onDragStart?: DragStartCallback;
+};
 export interface UseDraggableReturn {
-    position: Position;
+    readonly position: Position;
     dragProps: {
         onMouseDown: React.MouseEventHandler<HTMLDivElement>;
         onTouchStart: React.TouchEventHandler<HTMLDivElement>;
     };
 }
+export interface UseDraggableApi extends UseDraggableReturn {
+    props: UseDraggableReturn["dragProps"];
+    bind: UseDraggableReturn["dragProps"];
+    readonly positionRef: React.RefObject<Position>;
+    readonly isDragging: boolean;
+    getPosition(): Position;
+    setPosition(position: Position): void;
+    resetPosition(): void;
+    cancelDrag(): void;
+}
 type DragEndCallback = (finalPosition: Position) => void;
 type DragStartCallback = () => void;
-export declare function useDraggable(initialX?: number, initialY?: number, timeOut?: number, onDragEnd?: DragEndCallback, onDragStart?: DragStartCallback): UseDraggableReturn;
+export declare function useDraggableApi(options?: UseDraggableOptions): UseDraggableApi;
+export declare function useDraggable(initialX?: number, initialY?: number, timeOut?: number, onDragEnd?: DragEndCallback, onDragStart?: DragStartCallback): UseDraggableApi;
 export {};

package/lib/common/src/hooks/useDraggable.js

@@ -1,134 +1,165 @@
-import { useRef, useState, useEffect } from "react";
-export function useDraggable(initialX = 0, initialY = 0, timeOut = 500, onDragEnd, onDragStart) {
-    const [position, setPosition] = useState({ x: initialX, y: initialY });
+import { useEffect, useMemo, useRef, useState } from "react";
+export function useDraggableApi(options = {}) {
+    const { initialPosition = { x: 0, y: 0 }, holdMs = 500, onDragEnd, onDragStart } = options;
+    const [position, setPositionState] = useState(initialPosition);
+    const positionRef = useRef(position);
+    const holdMsRef = useRef(holdMs);
     const offsetMouse = useRef({ x: 0, y: 0 });
     const offsetTouch = useRef(null);
     const [draggingMouse, setDraggingMouse] = useState(false);
     const [draggingTouch, setDraggingTouch] = useState(false);
-    // Таймеры для определения длинного нажатия
+    const draggingRef = useRef(false);
+    const onDragEndRef = useRef(onDragEnd);
+    const onDragStartRef = useRef(onDragStart);
     const holdTimerMouse = useRef(null);
     const holdTimerTouch = useRef(null);
-    const cancelMouseHold = () => {
-        if (holdTimerMouse.current) {
+    const setPos = (p) => {
+        positionRef.current = p;
+        setPositionState(p);
+    };
+    holdMsRef.current = holdMs;
+    draggingRef.current = draggingMouse || draggingTouch;
+    useEffect(() => {
+        onDragEndRef.current = onDragEnd;
+        onDragStartRef.current = onDragStart;
+    });
+    const cancelMouseHold = useMemo(() => function cancelMouseHold() {
+        if (holdTimerMouse.current != null) {
             clearTimeout(holdTimerMouse.current);
             holdTimerMouse.current = null;
         }
-        document.removeEventListener("mouseup", handleMouseUpForHold);
-    };
-    const handleMouseUpForHold = () => {
-        cancelMouseHold();
-    };
-    const handleMouseDown = (e) => {
-        e.preventDefault();
-        offsetMouse.current = {
-            x: e.clientX,
-            y: e.clientY,
-        };
-        if (timeOut) {
-            holdTimerMouse.current = window.setTimeout(() => {
-                setDraggingMouse(true);
-                holdTimerMouse.current = null;
-                document.removeEventListener("mouseup", handleMouseUpForHold);
-            }, timeOut);
-            document.addEventListener("mouseup", handleMouseUpForHold);
-        }
-        onDragStart?.();
-    };
-    const cancelTouchHold = () => {
-        if (holdTimerTouch.current) {
+        document.removeEventListener("mouseup", cancelMouseHold);
+    }, []);
+    const cancelTouchHold = useMemo(() => function cancelTouchHold() {
+        if (holdTimerTouch.current != null) {
             clearTimeout(holdTimerTouch.current);
             holdTimerTouch.current = null;
         }
-        document.removeEventListener("touchend", handleTouchEndForHold);
-    };
-    const handleTouchEndForHold = () => {
-        cancelTouchHold();
-    };
-    const handleTouchStart = (e) => {
-        const touch = e.changedTouches[0];
-        if (!touch)
-            return;
-        offsetTouch.current = {
-            x: touch.clientX,
-            y: touch.clientY,
-            id: touch.identifier,
-        };
-        if (timeOut) {
-            holdTimerTouch.current = window.setTimeout(() => {
+        document.removeEventListener("touchend", cancelTouchHold);
+    }, []);
+    const bind = useMemo(() => ({
+        onMouseDown(e) {
+            e.preventDefault();
+            offsetMouse.current = { x: e.clientX, y: e.clientY };
+            if (holdMsRef.current > 0) {
+                holdTimerMouse.current = window.setTimeout(() => {
+                    holdTimerMouse.current = null;
+                    document.removeEventListener("mouseup", cancelMouseHold);
+                    setDraggingMouse(true);
+                }, holdMsRef.current);
+                document.addEventListener("mouseup", cancelMouseHold);
+            }
+            else {
+                setDraggingMouse(true);
+            }
+            onDragStartRef.current?.();
+        },
+        onTouchStart(e) {
+            const touch = e.changedTouches[0];
+            if (!touch)
+                return;
+            offsetTouch.current = { x: touch.clientX, y: touch.clientY, id: touch.identifier };
+            if (holdMsRef.current > 0) {
+                holdTimerTouch.current = window.setTimeout(() => {
+                    holdTimerTouch.current = null;
+                    document.removeEventListener("touchend", cancelTouchHold);
+                    setDraggingTouch(true);
+                }, holdMsRef.current);
+                document.addEventListener("touchend", cancelTouchHold);
+            }
+            else {
                 setDraggingTouch(true);
-                holdTimerTouch.current = null;
-                document.removeEventListener("touchend", handleTouchEndForHold);
-            }, timeOut);
-            document.addEventListener("touchend", handleTouchEndForHold);
-        }
-    };
+            }
+            onDragStartRef.current?.();
+        },
+    }), [cancelMouseHold, cancelTouchHold]);
     useEffect(() => {
-        if (draggingMouse) {
-            const handleMouseMove = (e) => {
-                const newX = e.clientX - offsetMouse.current.x;
-                const newY = e.clientY - offsetMouse.current.y;
-                setPosition({ x: newX, y: newY });
-            };
-            const handleMouseUp = (e) => {
-                setPosition({ x: 0, y: 0 });
-                // Остальные действия по завершению перетаскивания мышью
-                document.removeEventListener("mousemove", handleMouseMove);
-                document.removeEventListener("mouseup", handleMouseUp);
-                setDraggingMouse(false);
-                if (onDragEnd) {
-                    onDragEnd({ ...position });
-                }
-                // Сбрасываем смещение
-                offsetMouse.current = { x: 0, y: 0 };
-            };
-            document.addEventListener("mousemove", handleMouseMove);
-            document.addEventListener("mouseup", handleMouseUp);
-            return () => {
-                document.removeEventListener("mousemove", handleMouseMove);
-                document.removeEventListener("mouseup", handleMouseUp);
-            };
-        }
-    }, [draggingMouse, onDragEnd, position]);
+        if (!draggingMouse)
+            return;
+        const handleMouseMove = (e) => {
+            setPos({ x: e.clientX - offsetMouse.current.x, y: e.clientY - offsetMouse.current.y });
+        };
+        const handleMouseUp = () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+            const final = { ...positionRef.current };
+            setPos({ x: 0, y: 0 });
+            setDraggingMouse(false);
+            onDragEndRef.current?.(final);
+            offsetMouse.current = { x: 0, y: 0 };
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+            document.removeEventListener("mouseup", handleMouseUp);
+        };
+    }, [draggingMouse]);
     useEffect(() => {
-        if (draggingTouch) {
-            const handleTouchMove = (e) => {
-                if (!offsetTouch.current)
-                    return;
-                const theTouch = Array.from(e.changedTouches).find((t) => t.identifier === offsetTouch.current?.id);
-                if (!theTouch)
-                    return;
-                const newX = theTouch.clientX - offsetTouch.current.x;
-                const newY = theTouch.clientY - offsetTouch.current.y;
-                setPosition({ x: newX, y: newY });
-            };
-            const handleTouchEnd = (e) => {
-                if (!offsetTouch.current)
-                    return;
-                const ended = Array.from(e.changedTouches).find((t) => t.identifier === offsetTouch.current?.id);
-                if (ended) {
-                    setPosition({ x: 0, y: 0 });
-                    document.removeEventListener("touchmove", handleTouchMove);
-                    document.removeEventListener("touchend", handleTouchEnd);
-                    setDraggingTouch(false);
-                    if (onDragEnd) {
-                        onDragEnd({ ...position });
-                    }
-                    offsetTouch.current = null;
-                }
-            };
-            document.addEventListener("touchmove", handleTouchMove);
-            document.addEventListener("touchend", handleTouchEnd);
-            return () => {
+        if (!draggingTouch)
+            return;
+        const handleTouchMove = (e) => {
+            if (!offsetTouch.current)
+                return;
+            const theTouch = Array.from(e.changedTouches).find((t) => t.identifier === offsetTouch.current?.id);
+            if (!theTouch)
+                return;
+            setPos({ x: theTouch.clientX - offsetTouch.current.x, y: theTouch.clientY - offsetTouch.current.y });
+        };
+        const handleTouchEnd = (e) => {
+            if (!offsetTouch.current)
+                return;
+            const ended = Array.from(e.changedTouches).find((t) => t.identifier === offsetTouch.current?.id);
+            if (ended) {
                 document.removeEventListener("touchmove", handleTouchMove);
                 document.removeEventListener("touchend", handleTouchEnd);
-            };
-        }
-    }, [draggingTouch, onDragEnd, position]);
-    return {
-        position,
-        dragProps: {
-            onMouseDown: handleMouseDown,
-            onTouchStart: handleTouchStart,
+                const final = { ...positionRef.current };
+                setPos({ x: 0, y: 0 });
+                setDraggingTouch(false);
+                onDragEndRef.current?.(final);
+                offsetTouch.current = null;
+            }
+        };
+        document.addEventListener("touchmove", handleTouchMove);
+        document.addEventListener("touchend", handleTouchEnd);
+        return () => {
+            document.removeEventListener("touchmove", handleTouchMove);
+            document.removeEventListener("touchend", handleTouchEnd);
+        };
+    }, [draggingTouch]);
+    useEffect(() => () => {
+        if (holdTimerMouse.current != null)
+            clearTimeout(holdTimerMouse.current);
+        if (holdTimerTouch.current != null)
+            clearTimeout(holdTimerTouch.current);
+        document.removeEventListener("mouseup", cancelMouseHold);
+        document.removeEventListener("touchend", cancelTouchHold);
+    }, [cancelMouseHold, cancelTouchHold]);
+    return useMemo(() => ({
+        get position() { return positionRef.current; },
+        get positionRef() { return positionRef; },
+        get isDragging() { return draggingRef.current; },
+        props: bind,
+        bind,
+        dragProps: bind,
+        getPosition() { return { ...positionRef.current }; },
+        setPosition: setPos,
+        resetPosition() { setPos({ x: 0, y: 0 }); },
+        cancelDrag() {
+            cancelMouseHold();
+            cancelTouchHold();
+            offsetTouch.current = null;
+            setDraggingMouse(false);
+            setDraggingTouch(false);
+            setPos({ x: 0, y: 0 });
         },
-    };
+    }), [bind, cancelMouseHold, cancelTouchHold]);
+}
+export function useDraggable(initialX = 0, initialY = 0, timeOut = 500, onDragEnd, onDragStart) {
+    return useDraggableApi({
+        initialPosition: { x: initialX, y: initialY },
+        holdMs: timeOut,
+        onDragEnd,
+        onDragStart,
+    });
 }

package/lib/common/src/hooks/useOutside.d.ts

@@ -1,11 +1,31 @@
 import React, { ReactElement } from "react";
 export declare const StyleOtherRow: React.CSSProperties;
 export declare const StyleOtherColum: React.CSSProperties;
-export declare function useOutside({ outsideClick, ref, status }: {
-    ref?: React.RefObject<HTMLDivElement | null>;
-    outsideClick: () => void;
+export type UseOutsideOptions<T extends HTMLElement = HTMLDivElement> = {
+    ref?: React.RefObject<T | null>;
+    outsideClick?: () => void;
+    onOutside?: () => void;
     status?: boolean;
-}): React.RefObject<HTMLDivElement | null>;
+    enabled?: boolean;
+};
+export type UseOutsideApi<T extends HTMLElement = HTMLDivElement> = {
+    current: T | null;
+    ref: React.RefObject<T | null>;
+    props: {
+        ref: React.Ref<T>;
+    };
+    bind: {
+        ref: React.Ref<T>;
+    };
+    contains(target: EventTarget | null): boolean;
+    enable(): void;
+    disable(): void;
+    readonly enabled: boolean;
+};
+export declare function useOutsideApi<T extends HTMLElement = HTMLDivElement>(options: UseOutsideOptions<T>): UseOutsideApi<T>;
+export declare function useOutside<T extends HTMLElement = HTMLDivElement>(options: UseOutsideOptions<T>): UseOutsideApi<T>;
+/** @deprecated Use `useOutside(options)` and read `api.ref`, `api.props`, or `api.current`. */
+export declare function useOutsideOld<T extends HTMLElement = HTMLDivElement>(options: UseOutsideOptions<T>): React.RefObject<T | null>;
 type tChildrenFunc = (api: {
     onClose: () => void;
 }) => ReactElement | React.JSX.Element;