@moneyforward/mfui-components 2.48.1

package/dist/esm/src/utilities/dom/mergeRefs.d.ts

@@ -0,0 +1,8 @@
+/**
+ * This function merges multiple refs into a single ref.
+ *
+ * @param refs - The refs to merge.
+ *
+ * @returns A merged ref.
+ */
+export declare const mergeRefs: <T>(...refs: (React.RefObject<T> | React.RefCallback<T> | null | undefined)[]) => React.Ref<T>;

package/dist/esm/src/utilities/dom/mergeRefs.js

@@ -0,0 +1,24 @@
+/**
+ * This function merges multiple refs into a single ref.
+ *
+ * @param refs - The refs to merge.
+ *
+ * @returns A merged ref.
+ */
+export const mergeRefs = (...refs) => {
+    const nonNullableRefs = refs.filter((ref) => ref != null);
+    if (nonNullableRefs.length <= 1) {
+        return nonNullableRefs[0] ?? null;
+    }
+    return (value) => {
+        refs.forEach((ref) => {
+            const currentRef = ref;
+            if (typeof currentRef === 'function') {
+                currentRef(value);
+            }
+            else if (currentRef != null) {
+                currentRef.current = value;
+            }
+        });
+    };
+};

package/dist/esm/src/utilities/dom/observeRect.d.ts

@@ -0,0 +1,21 @@
+/**
+ * This file is inspired by Reach's `observeRect`
+ * I just copied the code and made some modifications to make it work with TypeScript and our codebase
+ *
+ * @see https://github.com/reach/observe-rect
+ */
+export type RectProps = {
+    rect: DOMRect | undefined;
+    callbacks: ((domRect: DOMRect | undefined) => void)[];
+};
+/**
+ * Observe the rect of the given node and run the callback when the rect changes
+ *
+ * @param node - The node to observe
+ *
+ * @param callback - The callback to run when the rect changes
+ */
+export declare function observeRect(node: Element, callback: (rect: DOMRect | undefined) => void): {
+    observe(): void;
+    unobserve(): void;
+};

package/dist/esm/src/utilities/dom/observeRect.js

@@ -0,0 +1,84 @@
+/**
+ * This file is inspired by Reach's `observeRect`
+ * I just copied the code and made some modifications to make it work with TypeScript and our codebase
+ *
+ * @see https://github.com/reach/observe-rect
+ */
+/**
+ * The properties of the DOMRect object
+ */
+const props = ['top', 'right', 'bottom', 'left', 'width', 'height'];
+/**
+ * Check if the rect has changed by shallow comparison
+ *
+ * @param a - The first rect
+ *
+ * @param b - The second rect
+ *
+ * @returns `true` if the rect has changed, `false` otherwise
+ */
+const rectChanged = (a = {}, b = {}) => props.some((prop) => a[prop] !== b[prop]);
+const observedNodes = new Map();
+let rafId;
+/**
+ * Set observed nodes and changed states, then run the callbacks for the changed states
+ * and request the next animation frame
+ */
+function run() {
+    const changedStates = [];
+    observedNodes.forEach((state, node) => {
+        const newRect = node.getBoundingClientRect();
+        if (rectChanged(newRect, state.rect)) {
+            // eslint-disable-next-line no-param-reassign -- Assign the new rect to the state
+            state.rect = newRect;
+            changedStates.push(state);
+        }
+    });
+    changedStates.forEach((state) => {
+        state.callbacks.forEach((callback) => {
+            callback(state.rect);
+        });
+    });
+    rafId = window.requestAnimationFrame(run);
+}
+/**
+ * Observe the rect of the given node and run the callback when the rect changes
+ *
+ * @param node - The node to observe
+ *
+ * @param callback - The callback to run when the rect changes
+ */
+export function observeRect(node, callback) {
+    return {
+        observe() {
+            const wasEmpty = observedNodes.size === 0;
+            const observedNode = observedNodes.get(node);
+            if (observedNode) {
+                observedNode.callbacks.push(callback);
+            }
+            else {
+                observedNodes.set(node, {
+                    rect: undefined,
+                    callbacks: [callback],
+                });
+            }
+            if (wasEmpty)
+                run();
+        },
+        unobserve() {
+            const state = observedNodes.get(node);
+            if (state) {
+                // Remove the callback
+                const index = state.callbacks.indexOf(callback);
+                if (index !== -1)
+                    state.callbacks.splice(index, 1);
+                // Remove the node reference
+                if (state.callbacks.length === 0)
+                    observedNodes.delete(node);
+                // Stop the loop
+                if (observedNodes.size === 0)
+                    cancelAnimationFrame(rafId);
+            }
+        },
+    };
+}

package/dist/esm/src/utilities/dom/useFixedColumns.d.ts

@@ -0,0 +1,47 @@
+type UseFixedColumnsProps = {
+    /**
+     * Whether the table rows are selectable.
+     * If `true`, the checkbox cell will be added to the first column of header and each row.
+     *
+     * @default false
+     */
+    enableRowSelection?: boolean;
+    /**
+     * The index of the column.
+     */
+    columnIndex?: number;
+    /**
+     * The index of the leftmost fixed column.
+     */
+    leftFixedColumnIndex?: number;
+    /**
+     * The index of the rightmost fixed column.
+     */
+    rightFixedColumnIndex?: number;
+};
+type UseFixedColumnsReturn = {
+    /**
+     * A ref to the cell element.
+     */
+    cellRef: React.RefObject<HTMLTableCellElement | null>;
+    /**
+     * Whether the column is fixed.
+     */
+    isFixedColumn: boolean;
+    /**
+     * Whether the column is an edge fixed column.
+     */
+    isEdgeFixedColumn?: 'left' | 'right';
+    /**
+     * The styles to apply to the cell.
+     */
+    fixedPositionStyles?: {
+        left?: number;
+        right?: number;
+    };
+};
+/**
+ * A hook to calculate the position of fixed columns in the DataGrid component.
+ */
+export declare const useFixedColumns: ({ enableRowSelection, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }: UseFixedColumnsProps) => UseFixedColumnsReturn;
+export {};

package/dist/esm/src/utilities/dom/useFixedColumns.js

@@ -0,0 +1,86 @@
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+/**
+ * A hook to calculate the position of fixed columns in the DataGrid component.
+ */
+export const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }) => {
+    const cellRef = useRef(null);
+    const [fixedPositionStyles, setFixedPositionStyles] = useState();
+    const isCheckboxColumn = enableRowSelection && columnIndex === 0;
+    // Adjust column index when row selection is enabled to account for the checkbox column
+    const actualColumnIndex = useMemo(() => {
+        if (columnIndex === undefined)
+            return;
+        return enableRowSelection && !isCheckboxColumn ? columnIndex - 1 : columnIndex;
+    }, [columnIndex, enableRowSelection, isCheckboxColumn]);
+    // Determine if this cell should be fixed
+    const fixedDirection = useMemo(() => {
+        if (columnIndex === undefined)
+            return;
+        // Fix checkbox column only when leftFixedColumnIndex is defined
+        if (isCheckboxColumn && leftFixedColumnIndex !== undefined)
+            return 'left';
+        if (leftFixedColumnIndex !== undefined &&
+            actualColumnIndex !== undefined &&
+            actualColumnIndex <= leftFixedColumnIndex)
+            return 'left';
+        if (rightFixedColumnIndex !== undefined &&
+            actualColumnIndex !== undefined &&
+            actualColumnIndex >= rightFixedColumnIndex)
+            return 'right';
+        // Without this, "Not all code paths return a value. ts(7030)" warning occurs.
+        // eslint-disable-next-line no-useless-return
+        return;
+    }, [columnIndex, actualColumnIndex, leftFixedColumnIndex, rightFixedColumnIndex, isCheckboxColumn]);
+    const [cellRect, setCellRect] = useState();
+    // Calculate the position of the cell in the fixed direction
+    useLayoutEffect(() => {
+        if (!cellRef.current)
+            return;
+        const cell = cellRef.current;
+        const table = cell.closest('table');
+        if (!table)
+            return;
+        const tableRect = table.getBoundingClientRect();
+        const cellRect = cell.getBoundingClientRect();
+        // Calculate distance from left edge
+        const leftPosition = cellRect.left - tableRect.left;
+        // Calculate distance from right edge
+        const rightPosition = tableRect.right - cellRect.right;
+        setCellRect({
+            left: leftPosition,
+            right: rightPosition,
+        });
+    }, []);
+    useLayoutEffect(() => {
+        if (isCheckboxColumn && leftFixedColumnIndex !== undefined) {
+            setFixedPositionStyles({
+                left: 0,
+            });
+            return;
+        }
+        if (!cellRect)
+            return;
+        setFixedPositionStyles({
+            left: fixedDirection === 'left' ? cellRect.left : undefined,
+            right: fixedDirection === 'right' ? cellRect.right : undefined,
+        });
+    }, [cellRect, fixedDirection, isCheckboxColumn, leftFixedColumnIndex]);
+    const isFixedColumn = useMemo(() => fixedDirection !== undefined, [fixedDirection]);
+    const isEdgeFixedColumn = useMemo(() => {
+        if (!isFixedColumn)
+            return;
+        if (leftFixedColumnIndex !== undefined && actualColumnIndex === leftFixedColumnIndex)
+            return 'left';
+        if (rightFixedColumnIndex !== undefined && actualColumnIndex === rightFixedColumnIndex)
+            return 'right';
+        // Without this, "Not all code paths return a value. ts(7030)" warning occurs.
+        // eslint-disable-next-line no-useless-return
+        return;
+    }, [actualColumnIndex, isFixedColumn, leftFixedColumnIndex, rightFixedColumnIndex]);
+    return {
+        cellRef,
+        isFixedColumn,
+        isEdgeFixedColumn,
+        fixedPositionStyles,
+    };
+};

package/dist/esm/src/utilities/dom/useFocusTrap.d.ts

@@ -0,0 +1,27 @@
+import type React from 'react';
+import { type KeyboardEventHandler } from 'react';
+type Options = {
+    /**
+     * Callback when the key is pressed on the container.
+     * This is called before the focus trap logic, useful when you need to handle some key events before the focus trap.
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    /**
+     * Callback when the Tab key is pressed on a not-focusable element.
+     * Usually used when you need to handle Focus Trap with elements which are focused manually by arrow keys or mouse clicks;
+     *
+     * @param event - The keyboard event.
+     */
+    onPressingTabOnNotFocusableElement?: (event: React.KeyboardEvent) => void;
+};
+/**
+ * Hook to trap focus within a container.
+ *
+ * @param options - The options for the focus trap.
+ *
+ * @returns The props for the focus trap.
+ */
+export declare function useFocusTrap({ onKeyDown, onPressingTabOnNotFocusableElement }?: Options): {
+    handleOnKeyDown: React.KeyboardEventHandler<HTMLElement>;
+};
+export {};

package/dist/esm/src/utilities/dom/useFocusTrap.js

@@ -0,0 +1,43 @@
+import { useCallback } from 'react';
+import { getFocusableNodes } from './getFocusableNodes';
+/**
+ * Hook to trap focus within a container.
+ *
+ * @param options - The options for the focus trap.
+ *
+ * @returns The props for the focus trap.
+ */
+export function useFocusTrap({ onKeyDown, onPressingTabOnNotFocusableElement } = {}) {
+    const handler = useCallback((event) => {
+        onKeyDown?.(event);
+        // If prevented by user, we should not do anything
+        if (event.defaultPrevented)
+            return;
+        if (event.key !== 'Tab')
+            return;
+        const wrapper = event.currentTarget;
+        const focusingElement = wrapper.ownerDocument.activeElement;
+        const focusableNodes = getFocusableNodes(wrapper);
+        const firstFocusableNode = focusableNodes[0];
+        const lastFocusableNode = focusableNodes.at(-1);
+        const focusingOnFirstNode = focusingElement === firstFocusableNode;
+        const focusingOnLastNode = focusingElement === lastFocusableNode;
+        if (event.shiftKey && focusingOnFirstNode) {
+            event.preventDefault();
+            lastFocusableNode?.focus();
+            return;
+        }
+        if (!event.shiftKey && focusingOnLastNode) {
+            event.preventDefault();
+            firstFocusableNode?.focus();
+            return;
+        }
+        const isFocusingOnNotFocusableElement = !focusableNodes.includes(focusingElement);
+        if (isFocusingOnNotFocusableElement) {
+            onPressingTabOnNotFocusableElement?.(event);
+        }
+    }, [onKeyDown, onPressingTabOnNotFocusableElement]);
+    return {
+        handleOnKeyDown: handler,
+    };
+}

package/dist/esm/src/utilities/dom/useIsTextOverflowed.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+/**
+ * Hook to check if text is overflowing a container.
+ *
+ * @param text - The text to check.
+ *
+ * @param ref - The ref of the container.
+ *
+ * @param subtractWidth - The width to subtract from the container width.
+ */
+export declare const useIsTextOverflowed: (text: string, ref: RefObject<HTMLSpanElement | null>, subtractWidth?: number) => boolean;

package/dist/esm/src/utilities/dom/useIsTextOverflowed.js

@@ -0,0 +1,53 @@
+import { useLayoutEffect, useState, useRef } from 'react';
+/**
+ * Hook to check if text is overflowing a container.
+ *
+ * @param text - The text to check.
+ *
+ * @param ref - The ref of the container.
+ *
+ * @param subtractWidth - The width to subtract from the container width.
+ */
+export const useIsTextOverflowed = (text, ref, subtractWidth = 0) => {
+    const [isTextOverflowed, setIsTextOverflowed] = useState(false);
+    const resizeObserverRef = useRef(null);
+    useLayoutEffect(() => {
+        const measureTextWidth = () => {
+            if (!ref.current || !text)
+                return;
+            // Create a temporary span for measurement
+            const measurementSpan = document.createElement('span');
+            measurementSpan.style.visibility = 'hidden';
+            measurementSpan.style.position = 'absolute';
+            measurementSpan.style.whiteSpace = 'nowrap';
+            // Copy the computed styles from the actual span
+            const computedStyle = window.getComputedStyle(ref.current);
+            measurementSpan.style.font = computedStyle.font;
+            measurementSpan.style.letterSpacing = computedStyle.letterSpacing;
+            measurementSpan.textContent = text;
+            document.body.append(measurementSpan);
+            const textWidth = measurementSpan.offsetWidth;
+            measurementSpan.remove();
+            // Get container width
+            const containerWidth = ref.current.parentElement?.offsetWidth ?? 0;
+            const availableWidth = containerWidth - subtractWidth;
+            setIsTextOverflowed(textWidth > availableWidth);
+        };
+        // Initial measurement
+        measureTextWidth();
+        // Set up ResizeObserver to handle container size changes
+        if (ref.current?.parentElement) {
+            resizeObserverRef.current = new ResizeObserver(() => {
+                measureTextWidth();
+            });
+            resizeObserverRef.current.observe(ref.current.parentElement);
+        }
+        // Clean up
+        return () => {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+        };
+    }, [ref, text, subtractWidth]);
+    return isTextOverflowed;
+};

package/dist/esm/src/utilities/dom/useIsTouchDevice.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Hook to detect if the current device is a touch device.
+ * Uses the CSS media query `(pointer: coarse)` to detect coarse pointer devices (typically touch screens).
+ *
+ * Note: To avoid hydration mismatches in SSR environments (e.g., Next.js),
+ * this hook always returns `false` on the initial render (both server and client).
+ * The correct value is set after the first client-side render via useEffect.
+ *
+ * @returns true if the device has a coarse pointer (touch device), false otherwise
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isTouchDevice = useIsTouchDevice();
+ *
+ *   return (
+ *     <div>
+ *       {isTouchDevice ? 'Touch Device' : 'Desktop Device'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useIsTouchDevice(): boolean;

package/dist/esm/src/utilities/dom/useIsTouchDevice.js

@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+/**
+ * Hook to detect if the current device is a touch device.
+ * Uses the CSS media query `(pointer: coarse)` to detect coarse pointer devices (typically touch screens).
+ *
+ * Note: To avoid hydration mismatches in SSR environments (e.g., Next.js),
+ * this hook always returns `false` on the initial render (both server and client).
+ * The correct value is set after the first client-side render via useEffect.
+ *
+ * @returns true if the device has a coarse pointer (touch device), false otherwise
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isTouchDevice = useIsTouchDevice();
+ *
+ *   return (
+ *     <div>
+ *       {isTouchDevice ? 'Touch Device' : 'Desktop Device'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export function useIsTouchDevice() {
+    const [isTouchDevice, setIsTouchDevice] = useState(false);
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            setIsTouchDevice(window.matchMedia('(pointer: coarse)').matches);
+        }
+    }, []);
+    return isTouchDevice;
+}

package/dist/esm/src/utilities/dom/useMiddleTruncatedText.d.ts

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+/**
+ * Hook to return a middle-truncated string that fits within the available width of the span's container.
+ * Truncation respects grapheme cluster boundaries when possible (via Intl.Segmenter),
+ * and falls back to iterating over code points where Segmenter is not available.
+ *
+ * The available width is computed as parentElement.offsetWidth - subtractWidth.
+ * Measurement is done by creating an offscreen span copying relevant computed font styles
+ * from the referenced span to ensure accurate width measurement.
+ *
+ * @param text - The text to truncate.
+ *
+ * @param ref - The ref to the span element.
+ *
+ * @param subtractWidth - The width to subtract from the available width.
+ *
+ * @param ellipsis - The ellipsis to use when truncating.
+ *
+ * @returns The truncated text.
+ */
+export declare const useMiddleTruncatedText: (text: string, ref: RefObject<HTMLSpanElement | null>, subtractWidth?: number, ellipsis?: string) => string;

package/dist/esm/src/utilities/dom/useMiddleTruncatedText.js

@@ -0,0 +1,145 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+let cachedMeasurementSpan = null;
+const getOrCreateMeasurementSpan = () => {
+    if (typeof document === 'undefined')
+        return null;
+    if (cachedMeasurementSpan?.isConnected)
+        return cachedMeasurementSpan;
+    const span = document.createElement('span');
+    span.style.visibility = 'hidden';
+    span.style.position = 'absolute';
+    span.style.whiteSpace = 'nowrap';
+    span.style.left = '-9999px';
+    span.style.top = '0';
+    document.body.append(span);
+    cachedMeasurementSpan = span;
+    return cachedMeasurementSpan;
+};
+/**
+ * Hook to return a middle-truncated string that fits within the available width of the span's container.
+ * Truncation respects grapheme cluster boundaries when possible (via Intl.Segmenter),
+ * and falls back to iterating over code points where Segmenter is not available.
+ *
+ * The available width is computed as parentElement.offsetWidth - subtractWidth.
+ * Measurement is done by creating an offscreen span copying relevant computed font styles
+ * from the referenced span to ensure accurate width measurement.
+ *
+ * @param text - The text to truncate.
+ *
+ * @param ref - The ref to the span element.
+ *
+ * @param subtractWidth - The width to subtract from the available width.
+ *
+ * @param ellipsis - The ellipsis to use when truncating.
+ *
+ * @returns The truncated text.
+ */
+export const useMiddleTruncatedText = (text, ref, subtractWidth = 0, ellipsis = '…') => {
+    const [truncated, setTruncated] = useState(text);
+    const resizeObserverRef = useRef(null);
+    useLayoutEffect(() => {
+        // Type guard to check if Intl.Segmenter is available
+        const hasIntlSegmenter = () => 'Segmenter' in Intl && typeof Intl['Segmenter'] === 'function';
+        const splitIntoGraphemes = (input) => {
+            // Prefer Intl.Segmenter when available for grapheme cluster segmentation
+            if (hasIntlSegmenter()) {
+                const SegmenterConstructor = Intl['Segmenter'];
+                if (SegmenterConstructor) {
+                    const segmenter = new SegmenterConstructor(undefined, { granularity: 'grapheme' });
+                    const segments = [];
+                    for (const { segment } of segmenter.segment(input)) {
+                        segments.push(segment);
+                    }
+                    return segments;
+                }
+            }
+            // Fallback: iterate code points
+            // eslint-disable-next-line unicorn/prefer-spread
+            return Array.from(input);
+        };
+        const measureCandidateWidth = (candidate) => {
+            if (!ref.current)
+                return Number.POSITIVE_INFINITY;
+            const measurementSpan = getOrCreateMeasurementSpan();
+            if (!measurementSpan)
+                return Number.POSITIVE_INFINITY;
+            const target = ref.current;
+            const computedStyle = window.getComputedStyle(target);
+            measurementSpan.style.font = computedStyle.font;
+            measurementSpan.style.letterSpacing = computedStyle.letterSpacing;
+            measurementSpan.style.fontKerning = computedStyle.fontKerning;
+            measurementSpan.style.fontFeatureSettings = computedStyle.fontFeatureSettings;
+            measurementSpan.textContent = candidate;
+            const width = measurementSpan.offsetWidth;
+            return width;
+        };
+        const recompute = () => {
+            if (!ref.current) {
+                setTruncated(text);
+                return;
+            }
+            const parentWidth = ref.current.parentElement?.offsetWidth ?? 0;
+            const availableWidth = Math.max(parentWidth - subtractWidth, 0);
+            // If layout width is unavailable (e.g., SSR/jsdom offsetWidth=0), show full text instead of ellipsis
+            if (availableWidth <= 0) {
+                setTruncated(text);
+                return;
+            }
+            if (!text) {
+                setTruncated('');
+                return;
+            }
+            // Heuristic: avoid truncation for short names to prevent over-aggressive ellipsis
+            if (text.length <= 10) {
+                setTruncated(text);
+                return;
+            }
+            // Early exit: text fits already
+            const fullWidth = measureCandidateWidth(text);
+            if (fullWidth <= availableWidth) {
+                setTruncated(text);
+                return;
+            }
+            const graphemes = splitIntoGraphemes(text);
+            // Binary search for the maximum number of edge graphemes we can keep combined
+            let low = 0;
+            let high = graphemes.length; // inclusive search over count of kept graphemes
+            let best = ellipsis; // default to ellipsis if nothing fits
+            while (low <= high) {
+                const mid = Math.floor((low + high) / 2); // total kept graphemes on both sides
+                const leftCount = Math.ceil(mid / 2);
+                const rightCount = Math.floor(mid / 2);
+                const candidate = graphemes.slice(0, leftCount).join('') + ellipsis + graphemes.slice(graphemes.length - rightCount).join('');
+                const width = measureCandidateWidth(candidate);
+                if (width <= availableWidth) {
+                    best = candidate;
+                    low = mid + 1; // try keeping more
+                }
+                else {
+                    high = mid - 1; // keep fewer
+                }
+            }
+            // If even the computed best does not fit, fall back to ellipsis
+            if (measureCandidateWidth(best) > availableWidth) {
+                setTruncated(ellipsis);
+                return;
+            }
+            setTruncated(best);
+        };
+        // Initial compute
+        recompute();
+        // Observe container size changes
+        if (ref.current?.parentElement) {
+            resizeObserverRef.current = new ResizeObserver(() => {
+                recompute();
+            });
+            resizeObserverRef.current.observe(ref.current.parentElement);
+        }
+        return () => {
+            if (resizeObserverRef.current) {
+                resizeObserverRef.current.disconnect();
+            }
+        };
+    }, [ellipsis, ref, subtractWidth, text]);
+    return truncated;
+};

package/dist/esm/src/utilities/dom/useOnClickOutside.d.ts

@@ -0,0 +1,24 @@
+import { type RefObject } from 'react';
+type UseOnClickOutsideOptions = {
+    /**
+     * Whether or not a click outside the element can be performed
+     */
+    ignoreRefs?: RefObject<HTMLElement | null>[];
+    /**
+     * Elements to Ignore Determination
+     */
+    disabled?: boolean;
+};
+/**
+ * Hooks to detect clicks outside the element specified by ref
+ *
+ * {@link https://usehooks.com/useOnClickOutside/}
+ *
+ * @param ref - target element
+ *
+ * @param handler - Function to be executed when a click is detected
+ *
+ * @param options - An object of the following properties: ignoreRefs, disabled
+ */
+export declare const useOnClickOutside: (ref: RefObject<HTMLElement | null>, handler: EventListener, options?: UseOnClickOutsideOptions) => void;
+export {};