@antscorp/antsomi-ui 1.3.3 → 1.3.5-alpha.1

package/es/constants/variables.d.ts

@@ -0,0 +1,53 @@
+export declare const OBJECT_TYPES: {
+    readonly DASHBOARD: 1;
+    readonly JOURNEY_OVERVIEW: 2;
+    readonly SEGMENT: 3;
+    readonly BUSINESS_OBJECT: 4;
+    readonly VIEW: 5;
+    readonly DESTINATION: 6;
+    readonly EXPLORATION: 7;
+    readonly MEDIA_TEMPLATE: 8;
+    readonly EMAIL_TEMPLATE: 9;
+    readonly JOURNEY_TEMPLATE: 10;
+    readonly RICH_MENU_TEMPLATE: 11;
+};
+export declare const GET_LIST_TYPE: {
+    readonly OWNER: 1;
+    readonly SHARE_WITH_ME: 2;
+    readonly HAVE_ACCESS: 3;
+    readonly SELECTOR: 4;
+};
+export declare const APP_CODES: {
+    DATAFLOWS: string;
+    APP_ANTALYSER: string;
+};
+export declare const PORTALS_IDS: {
+    SANDBOX: number;
+    SANDBOX_76753: number;
+};
+export declare const UI_SIZE: {
+    SMALL: string;
+    MEDIUM: string;
+    LARGE: string;
+};
+export declare const METRIC_TYPE: {
+    NUMBER: string;
+    STRING: string;
+    SUGGESTION: string;
+    TEXT: string;
+    DATE_TIME: string;
+    DATE: string;
+    OBJECT_ID: string;
+    ARRAY: string;
+    ARRAY_NUMBER: string;
+    ARRAY_STRING: string;
+    ARRAY_DATE_TIME: string;
+    ARRAY_TEXT: string;
+    UNIQUE: string;
+    BOOLEAN: string;
+    OBJECT: string;
+};
+export declare const ENDPOINT: {
+    toolkitV2: string;
+};
+export declare const UOGS_PREFIX = "uogs_";

package/es/constants/variables.js

@@ -0,0 +1,56 @@
+export const OBJECT_TYPES = {
+    DASHBOARD: 1,
+    JOURNEY_OVERVIEW: 2,
+    SEGMENT: 3,
+    BUSINESS_OBJECT: 4,
+    VIEW: 5,
+    DESTINATION: 6,
+    EXPLORATION: 7,
+    MEDIA_TEMPLATE: 8,
+    EMAIL_TEMPLATE: 9,
+    JOURNEY_TEMPLATE: 10,
+    RICH_MENU_TEMPLATE: 11,
+};
+export const GET_LIST_TYPE = {
+    OWNER: 1,
+    SHARE_WITH_ME: 2,
+    HAVE_ACCESS: 3,
+    SELECTOR: 4,
+};
+/* APP_CODES */
+export const APP_CODES = {
+    DATAFLOWS: 'DATAFLOWS',
+    APP_ANTALYSER: 'APP_ANTALYSER',
+};
+export const PORTALS_IDS = {
+    SANDBOX: 33167,
+    SANDBOX_76753: 76753,
+};
+export const UI_SIZE = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+/* Filter */
+export const METRIC_TYPE = {
+    NUMBER: 'number',
+    STRING: 'string',
+    SUGGESTION: 'suggestion',
+    TEXT: 'text',
+    DATE_TIME: 'datetime',
+    DATE: 'date',
+    OBJECT_ID: 'object_id',
+    ARRAY: 'array',
+    ARRAY_NUMBER: 'array_number',
+    ARRAY_STRING: 'array_string',
+    ARRAY_DATE_TIME: 'array_datetime',
+    ARRAY_TEXT: 'array_text',
+    UNIQUE: 'unique',
+    BOOLEAN: 'boolean',
+    OBJECT: 'object',
+};
+const TOOLKIT_API_VERSION = '2.0';
+export const ENDPOINT = {
+    toolkitV2: `toolkit/v${TOOLKIT_API_VERSION}`,
+};
+export const UOGS_PREFIX = 'uogs_';

package/es/hooks/createEffectWithTarget .d.ts

@@ -0,0 +1,3 @@
+import type { DependencyList, EffectCallback, useEffect, useLayoutEffect } from 'react';
+import { BasicTarget } from '../utils/domTarget';
+export declare const createEffectWithTarget: (useEffectType: typeof useEffect | typeof useLayoutEffect) => (effect: EffectCallback, deps: DependencyList, target: BasicTarget<any> | BasicTarget<any>[]) => void;

package/es/hooks/createEffectWithTarget .js

@@ -0,0 +1,47 @@
+import { useRef } from 'react';
+// Hooks
+import { useUnmount } from './useUnmount';
+// Utils
+import { getTargetElement, depsAreSame } from '../utils/domTarget';
+export const createEffectWithTarget = (useEffectType) => {
+    /**
+     *
+     * @param effect
+     * @param deps
+     * @param target target should compare ref.current vs ref.current, dom vs dom, ()=>dom vs ()=>dom
+     */
+    const useEffectWithTarget = (effect, deps, target) => {
+        const hasInitRef = useRef(false);
+        const lastElementRef = useRef([]);
+        const lastDepsRef = useRef([]);
+        const unLoadRef = useRef();
+        useEffectType(() => {
+            var _a;
+            const targets = Array.isArray(target) ? target : [target];
+            const els = targets.map(item => getTargetElement(item));
+            // init run
+            if (!hasInitRef.current) {
+                hasInitRef.current = true;
+                lastElementRef.current = els;
+                lastDepsRef.current = deps;
+                unLoadRef.current = effect();
+                return;
+            }
+            if (els.length !== lastElementRef.current.length ||
+                !depsAreSame(lastElementRef.current, els) ||
+                !depsAreSame(lastDepsRef.current, deps)) {
+                (_a = unLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(unLoadRef);
+                lastElementRef.current = els;
+                lastDepsRef.current = deps;
+                unLoadRef.current = effect();
+            }
+        });
+        useUnmount(() => {
+            var _a;
+            (_a = unLoadRef.current) === null || _a === void 0 ? void 0 : _a.call(unLoadRef);
+            // for react-refresh
+            hasInitRef.current = false;
+        });
+    };
+    return useEffectWithTarget;
+};

package/es/hooks/index.d.ts

@@ -1,2 +1,26 @@
 /// <reference types="react" />
 export declare function useDeepCompareEffect(callback: React.EffectCallback, dependencies: React.DependencyList | undefined): void;
+export { useDeepCompareMemo } from './useDeepCompareMemo';
+export * from './useIntersectionObserver';
+export * from './useEffectOnlyOnce';
+export * from './useForceUpdate';
+export * from './useListingItemResize';
+export * from './useKeyEventCanvas';
+export * from './useDragEvent';
+export * from './useDropFile';
+export * from './useToggle';
+export * from './useIsFirstRender';
+export * from './useEffectDebugger';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';
+export * from './useLatest';
+export * from './useDeepCompareEffectWithTarget';
+export * from './useUnmount';
+export * from './createEffectWithTarget ';
+export * from './useEffectWithTarget';
+export * from './useMutationObserver';
+export * from './useEventListener';
+export * from './useDebounceCallback';
+export * from './useWindowSize';
+export * from './useCustomRouter';
+export * from './useUpdateEffect';

package/es/hooks/index.js

@@ -19,3 +19,27 @@ export function useDeepCompareEffect(callback, dependencies) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     useEffect(callback, dependencies === null || dependencies === void 0 ? void 0 : dependencies.map(useDeepCompareMemoize));
 }
+export { useDeepCompareMemo } from './useDeepCompareMemo';
+export * from './useIntersectionObserver';
+export * from './useEffectOnlyOnce';
+export * from './useForceUpdate';
+export * from './useListingItemResize';
+export * from './useKeyEventCanvas';
+export * from './useDragEvent';
+export * from './useDropFile';
+export * from './useToggle';
+export * from './useIsFirstRender';
+export * from './useEffectDebugger';
+export * from './useIsomorphicLayoutEffect';
+export * from './useMediaQuery';
+export * from './useLatest';
+export * from './useDeepCompareEffectWithTarget';
+export * from './useUnmount';
+export * from './createEffectWithTarget ';
+export * from './useEffectWithTarget';
+export * from './useMutationObserver';
+export * from './useEventListener';
+export * from './useDebounceCallback';
+export * from './useWindowSize';
+export * from './useCustomRouter';
+export * from './useUpdateEffect';

package/es/hooks/useCustomRouter.d.ts

@@ -0,0 +1,33 @@
+import { To } from 'react-router-dom';
+/**
+ * Custom hook to handle navigation in React applications supporting both react-router v5 and v6.
+ *
+ * This hook tries to use `useNavigate` from `react-router-dom` for v6. If it fails, it falls back to
+ * `useHistory` for v5.
+ *
+ * @returns {Object} An object containing the `navigate` and `replace` functions.
+ *
+ * @returns {Function} return.navigate - Function to navigate to a specified route.
+ * @param {string | object} return.navigate.to - The target route path or location object.
+ * @param {Object} [return.navigate.options] - Optional navigation options.
+ *
+ * @returns {Function} return.replace - Function to replace the current route with a specified route.
+ * @param {string | object} return.replace.to - The target route path or location object.
+ * @param {Object} [return.replace.options] - Optional navigation options.
+ *
+ * @example
+ * const { navigate, replace } = useCustomRouter();
+ *
+ * // Navigate to a route
+ * navigate('/home');
+ *
+ * // Navigate with options
+ * navigate('/profile', { state: { userId: 1 } });
+ *
+ * // Replace current route
+ * replace('/login');
+ */
+export declare const useCustomRouter: () => {
+    navigate: (to: To, options?: any) => void;
+    replace: (to: To, options?: any) => void;
+};

package/es/hooks/useCustomRouter.js

@@ -0,0 +1,62 @@
+/* eslint-disable global-require */
+/* eslint-disable react-hooks/rules-of-hooks */
+// Libraries
+import { useCallback } from 'react';
+/**
+ * Custom hook to handle navigation in React applications supporting both react-router v5 and v6.
+ *
+ * This hook tries to use `useNavigate` from `react-router-dom` for v6. If it fails, it falls back to
+ * `useHistory` for v5.
+ *
+ * @returns {Object} An object containing the `navigate` and `replace` functions.
+ *
+ * @returns {Function} return.navigate - Function to navigate to a specified route.
+ * @param {string | object} return.navigate.to - The target route path or location object.
+ * @param {Object} [return.navigate.options] - Optional navigation options.
+ *
+ * @returns {Function} return.replace - Function to replace the current route with a specified route.
+ * @param {string | object} return.replace.to - The target route path or location object.
+ * @param {Object} [return.replace.options] - Optional navigation options.
+ *
+ * @example
+ * const { navigate, replace } = useCustomRouter();
+ *
+ * // Navigate to a route
+ * navigate('/home');
+ *
+ * // Navigate with options
+ * navigate('/profile', { state: { userId: 1 } });
+ *
+ * // Replace current route
+ * replace('/login');
+ */
+export const useCustomRouter = () => {
+    try {
+        const { useNavigate } = require('react-router-dom');
+        const navigateV6 = useNavigate();
+        const navigate = useCallback((to, options) => {
+            navigateV6(to, options);
+        }, [navigateV6]);
+        const replace = useCallback((to, options) => {
+            navigateV6(to, Object.assign({ replace: true }, options));
+        }, [navigateV6]);
+        return {
+            navigate,
+            replace,
+        };
+    }
+    catch (error) {
+        const { useHistory } = require('react-router-dom');
+        const history = useHistory();
+        const navigate = useCallback((to, options) => {
+            history.push(to, options);
+        }, [history]);
+        const replace = useCallback((to, options) => {
+            history.replace(to, options);
+        }, [history]);
+        return {
+            navigate,
+            replace,
+        };
+    }
+};

package/es/hooks/useDebounceCallback.d.ts

@@ -0,0 +1 @@
+export declare function useDebounceCallback<T extends (...args: any[]) => any>(callback: T, delay?: number): T;

package/es/hooks/useDebounceCallback.js

@@ -0,0 +1,5 @@
+import { useDebounce } from './useDebounceV2';
+export function useDebounceCallback(callback, delay = 500) {
+    const debouncedCallback = useDebounce(callback, delay);
+    return debouncedCallback;
+}

package/es/hooks/useDebounceV2.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/es/hooks/useDebounceV2.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from 'react';
+export function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [value, delay]);
+    return debouncedValue;
+}

package/es/hooks/useDeepCompareEffect.d.ts

@@ -0,0 +1 @@
+export declare function useDeepCompareEffect(callback: any, dependencies: any): void;

package/es/hooks/useDeepCompareEffect.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+function deepCompareEquals(a, b) {
+    // TODO: implement deep comparison here
+    // something like lodash
+    // return _.isEqual(a, b);
+    return isEqual(a, b);
+}
+function useDeepCompareMemoize(value) {
+    const ref = useRef();
+    // it can be done by using useMemo as well
+    // but useRef is rather cleaner and easier
+    if (!deepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+export function useDeepCompareEffect(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(callback, dependencies.map(useDeepCompareMemoize));
+}

package/es/hooks/useDeepCompareEffectWithTarget.d.ts

@@ -0,0 +1,3 @@
+import type { DependencyList, EffectCallback } from 'react';
+import { BasicTarget } from '../utils/domTarget';
+export declare const useDeepCompareEffectWithTarget: (effect: EffectCallback, deps: DependencyList, target: BasicTarget<any> | BasicTarget<any>[]) => void;

package/es/hooks/useDeepCompareEffectWithTarget.js

@@ -0,0 +1,14 @@
+// Libraries
+import { useRef } from 'react';
+import isEqual from 'react-fast-compare';
+// Hooks
+import { useEffectWithTarget } from './useEffectWithTarget';
+export const useDeepCompareEffectWithTarget = (effect, deps, target) => {
+    const ref = useRef();
+    const signalRef = useRef(0);
+    if (!isEqual(deps, ref.current)) {
+        ref.current = deps;
+        signalRef.current += 1;
+    }
+    useEffectWithTarget(effect, [signalRef.current], target);
+};

package/es/hooks/useDeepCompareMemo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function useDeepCompareMemo<T>(callback: () => T, dependencies: React.DependencyList | undefined): T;

package/es/hooks/useDeepCompareMemo.js

@@ -0,0 +1,21 @@
+import { useMemo, useRef } from 'react';
+import isEqual from 'react-fast-compare';
+function deepCompareEquals(a, b) {
+    // TODO: implement deep comparison here
+    // something like lodash
+    // return _.isEqual(a, b);
+    return isEqual(a, b);
+}
+function useDeepCompareMemoize(value) {
+    const ref = useRef();
+    // it can be done by using useMemo as well
+    // but useRef is rather cleaner and easier
+    if (!deepCompareEquals(value, ref.current)) {
+        ref.current = value;
+    }
+    return ref.current;
+}
+export function useDeepCompareMemo(callback, dependencies) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return useMemo(callback, dependencies === null || dependencies === void 0 ? void 0 : dependencies.map(useDeepCompareMemoize));
+}

package/es/hooks/useDragEvent.d.ts

@@ -0,0 +1 @@
+export declare const useDragEvent: (keyEvent: 'dragenter' | 'dragexit' | 'dragover' | 'drop', selector: string, callback: (event: DragEvent) => void) => void;

package/es/hooks/useDragEvent.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+export const useDragEvent = (keyEvent, selector, callback) => {
+    useEffect(() => {
+        var _a;
+        const handleDragEvent = (event) => {
+            callback(event);
+        };
+        (_a = document.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.addEventListener(keyEvent, handleDragEvent);
+        return () => {
+            var _a;
+            (_a = document.querySelector(selector)) === null || _a === void 0 ? void 0 : _a.removeEventListener(keyEvent, handleDragEvent);
+        };
+    }, [keyEvent, selector, callback]);
+};

package/es/hooks/useDropFile.d.ts

@@ -0,0 +1 @@
+export declare const useDropFile: (selector: string, callback: (event: DragEvent) => void) => void;

package/es/hooks/useDropFile.js

@@ -0,0 +1,20 @@
+import { useDragEvent } from './useDragEvent';
+export const useDropFile = (selector, callback) => {
+    useDragEvent('dragenter', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    useDragEvent('dragover', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    useDragEvent('dragexit', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+    });
+    useDragEvent('drop', selector, e => {
+        e.stopPropagation();
+        e.preventDefault();
+        callback(e);
+    });
+};

package/es/hooks/useEffectDebugger.d.ts

@@ -0,0 +1,20 @@
+/**
+ *
+ * @param effectHook
+ * @param dependencies
+ * @param dependencyNames
+ *
+ * Example:
+    useEffectDebugger(() => {
+      // useEffect code here...
+    }, [dep1, dep2, dep3]);
+ *
+ * Output:
+    {
+      dep2: {
+        before: 'foo',
+        after: 'bar'
+      }
+    }
+ */
+export declare const useEffectDebugger: (effectHook: any, dependencies: any, dependencyNames?: never[]) => void;

package/es/hooks/useEffectDebugger.js

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import usePrevious from './usePrevious';
+/**
+ *
+ * @param effectHook
+ * @param dependencies
+ * @param dependencyNames
+ *
+ * Example:
+    useEffectDebugger(() => {
+      // useEffect code here...
+    }, [dep1, dep2, dep3]);
+ *
+ * Output:
+    {
+      dep2: {
+        before: 'foo',
+        after: 'bar'
+      }
+    }
+ */
+export const useEffectDebugger = (effectHook, dependencies, dependencyNames = []) => {
+    const previousDeps = usePrevious(dependencies);
+    const changedDeps = dependencies.reduce((accum, dependency, index) => {
+        if (dependency !== (previousDeps === null || previousDeps === void 0 ? void 0 : previousDeps[index])) {
+            const keyName = dependencyNames[index] || index;
+            return Object.assign(Object.assign({}, accum), { [keyName]: {
+                    before: previousDeps === null || previousDeps === void 0 ? void 0 : previousDeps[index],
+                    after: dependency,
+                } });
+        }
+        return accum;
+    }, {});
+    if (Object.keys(changedDeps).length) {
+        // eslint-disable-next-line no-console
+        console.log('[use-effect-debugger] ', changedDeps);
+    }
+    useEffect(effectHook, [effectHook, dependencies]);
+};

package/es/hooks/useEffectOnlyOnce.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList } from 'react';
+export declare const useEffectOnlyOnce: (fn: Function, dependencies: DependencyList) => void;

package/es/hooks/useEffectOnlyOnce.js

@@ -0,0 +1,12 @@
+// Libraries
+import { useEffect, useState } from 'react';
+export const useEffectOnlyOnce = (fn, dependencies) => {
+    const [didLoad, setDidLoad] = useState(false);
+    useEffect(() => {
+        if (!didLoad) {
+            fn();
+            setDidLoad(true);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [...dependencies]);
+};

package/es/hooks/useEffectWithTarget.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useEffectWithTarget: (effect: import("react").EffectCallback, deps: import("react").DependencyList, target: any) => void;

package/es/hooks/useEffectWithTarget.js

@@ -0,0 +1,5 @@
+// Libraries
+import { useEffect } from 'react';
+// Hooks
+import { createEffectWithTarget } from './createEffectWithTarget ';
+export const useEffectWithTarget = createEffectWithTarget(useEffect);

package/es/hooks/useEventListener.d.ts

@@ -0,0 +1,6 @@
+import type { RefObject } from 'react';
+declare function useEventListener<K extends keyof MediaQueryListEventMap>(eventName: K, handler: (event: MediaQueryListEventMap[K]) => void, element: RefObject<MediaQueryList>, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof HTMLElementEventMap & keyof SVGElementEventMap, T extends Element = K extends keyof HTMLElementEventMap ? HTMLDivElement : SVGElement>(eventName: K, handler: ((event: HTMLElementEventMap[K]) => void) | ((event: SVGElementEventMap[K]) => void), element: RefObject<T>, options?: boolean | AddEventListenerOptions): void;
+declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: RefObject<Document>, options?: boolean | AddEventListenerOptions): void;
+export { useEventListener };

package/es/hooks/useEventListener.js

@@ -0,0 +1,28 @@
+// Libraries
+import { useEffect, useRef } from 'react';
+// Hooks
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+function useEventListener(eventName, handler, element, options) {
+    // Create a ref that stores handler
+    const savedHandler = useRef(handler);
+    useIsomorphicLayoutEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        var _a;
+        // Define the listening target
+        const targetElement = (_a = element === null || element === void 0 ? void 0 : element.current) !== null && _a !== void 0 ? _a : window;
+        if (!(targetElement && targetElement.addEventListener))
+            return;
+        // Create event listener that calls handler function stored in ref
+        const listener = event => {
+            savedHandler.current(event);
+        };
+        targetElement.addEventListener(eventName, listener, options);
+        // Remove event listener on cleanup
+        return () => {
+            targetElement.removeEventListener(eventName, listener, options);
+        };
+    }, [eventName, element, options]);
+}
+export { useEventListener };

package/es/hooks/useForceUpdate.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

package/es/hooks/useForceUpdate.js

@@ -0,0 +1,5 @@
+import { useCallback, useState } from 'react';
+export const useForceUpdate = () => {
+    const [, updateState] = useState();
+    return useCallback(() => updateState({}), []);
+};

package/es/hooks/useIntersectionObserver.d.ts

@@ -0,0 +1,57 @@
+import type { RefObject } from 'react';
+type ObserverCallback = (isIntersecting: boolean, entry: IntersectionObserverEntry) => void;
+/**
+ * Represents the options for configuring the Intersection Observer.
+ * @interface IntersectionObserverOptions
+ * @property {number | number[]} [threshold=0] - A threshold indicating the percentage of the target's visibility needed to trigger the callback.
+ * @property {Element | Document | null} [root=null] - The element that is used as the viewport for checking visibility of the target.
+ * @property {string} [rootMargin='0%'] - A margin around the root.
+ * @property {boolean} [freezeOnceVisible=false] - If true, freezes the intersection state once the element becomes visible.
+ * @property {ObserverCallback} [onChange] - A callback function to be invoked when the intersection state changes.
+ * @property {boolean} [initialIsIntersecting=false] - The initial state of the intersection.
+ */
+interface IntersectionObserverOptions extends IntersectionObserverInit {
+    freezeOnceVisible?: boolean;
+    onChange?: ObserverCallback;
+    initialIsIntersecting?: boolean;
+}
+/** Supports both array and object destructing */
+type IntersectionResult = [
+    (node?: Element | null) => void,
+    boolean,
+    IntersectionObserverEntry | undefined
+] & {
+    ref: (node?: Element | null) => void;
+    isIntersecting: boolean;
+    entry?: IntersectionObserverEntry;
+};
+/**
+ * Custom hook for tracking the intersection of a DOM element with its containing element or the viewport.
+ * @param {IntersectionObserverOptions} options - The options for the Intersection Observer.
+ * @returns {IntersectionResult} The ref callback, a boolean indicating if the element is intersecting, and the intersection observer entry.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
+ * @see [MDN Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * @example
+ * // Example 1
+ * const [ref, isIntersecting, entry] = useIntersectionObserver({ threshold: 0.5 });
+ *
+ * // Example 2
+ * const { ref, isIntersecting, entry } = useIntersectionObserver({ threshold: 0.5 });
+ */
+export declare function useIntersectionObserver(options: IntersectionObserverOptions): IntersectionResult;
+/**
+ * @deprecated Use the new signature with an unique option object instead.
+ * Custom hook for tracking the intersection of a DOM element with its containing element or the viewport.
+ * @param {RefObject<Element>} elementRef - The ref object for the DOM element to observe.
+ * @param {IntersectionObserverOptions} [options] - The options for the Intersection Observer (optional).
+ * @returns {IntersectionObserverEntry | undefined} The intersection observer entry representing the state of the intersection.
+ * @see [Documentation](https://usehooks-ts.com/react-hook/use-intersection-observer)
+ * @see [MDN Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * @example
+ * const targetRef = useRef<HTMLDivElement>(null);
+ * const options = { threshold: 0.5 };
+ * const entry = useIntersectionObserver(targetRef, options);
+ * // Access the intersection details from the entry variable.
+ */
+export declare function useIntersectionObserver(elementRef: RefObject<Element>, legacyOptions: IntersectionObserverOptions): IntersectionObserverEntry | undefined;
+export {};