@rio-cloud/rio-uikit 1.12.0 → 1.13.0

package/lib/es/hooks/useDebugInfo.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/28-useDebugInformation/useDebugInformation.js
-const react_1 = require("react");
-const useRenderCount_1 = tslib_1.__importDefault(require("./useRenderCount"));
-const logStyle = ['color: #4c5667', 'background-color: #e5ebf0', 'padding: 2px 4px', 'border-radius: 2px'].join(';');
-/**
- * Custom hook to log debug information about a component.
- *
- * @param componentName - The name of the component.
- * @param props - The props object of the component.
- *
- * @returns An object containing debug information.
- */
-const useDebugInfo = (componentName, props) => {
-    const renderCount = (0, useRenderCount_1.default)();
-    const changedProps = (0, react_1.useRef)({});
-    const previousProps = (0, react_1.useRef)(props);
-    const lastRenderTimestamp = (0, react_1.useRef)(Date.now());
-    // Extract prop keys from the current and previous props
-    const propKeys = Object.keys({ ...props, ...previousProps.current });
-    // Compare current props with previous props to find changed props
-    changedProps.current = propKeys.reduce((obj, key) => {
-        if (props[key] === previousProps.current[key]) {
-            return obj;
-        }
-        return {
-            ...obj,
-            [key]: {
-                previous: previousProps.current[key],
-                current: props[key],
-            },
-        };
-    }, {});
-    // Build debug information object
-    const info = {
-        renderCount,
-        changedProps: changedProps.current,
-        timeSinceLastRender: Date.now() - lastRenderTimestamp.current,
-        lastRenderTimestamp: lastRenderTimestamp.current,
-    };
-    // Log debug information on component update
-    (0, react_1.useEffect)(() => {
-        previousProps.current = props;
-        lastRenderTimestamp.current = Date.now();
-        // Log debug information to console
-        if (console) {
-            console.groupCollapsed(`%c[debug-info] ${componentName}`, logStyle);
-            console.log(info);
-            console.groupEnd();
-        }
-    });
-    return info;
-};
-exports.default = useDebugInfo;

package/lib/es/hooks/useDocumentTitle.d.ts

@@ -1,7 +0,0 @@
-/**
- * Custom hook to set the document title.
- *
- * @param title - The new title to set for the document.
- */
-declare const useDocumentTitle: (title: string) => void;
-export default useDocumentTitle;

package/lib/es/hooks/useDocumentTitle.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-/**
- * Custom hook to set the document title.
- *
- * @param title - The new title to set for the document.
- */
-const useDocumentTitle = (title) => {
-    (0, react_1.useEffect)(() => {
-        if (document) {
-            document.title = title;
-        }
-    }, [title]);
-};
-exports.default = useDocumentTitle;

package/lib/es/hooks/useEffectOnce.d.ts

@@ -1,3 +0,0 @@
-import { type EffectCallback } from 'react';
-declare const useEffectOnce: (callback: EffectCallback) => void;
-export default useEffectOnce;

package/lib/es/hooks/useEffectOnce.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-const useEffectOnce = (callback) => {
-    (0, react_1.useEffect)(callback, []);
-};
-exports.default = useEffectOnce;

package/lib/es/hooks/useElapsedTime.d.ts

@@ -1,26 +0,0 @@
-/**
- * Custom React hook to measure the elapsed time since a specified start time or the component's mount time.
- *
- * @param {number} [startTime=Date.now()] - The start time in milliseconds from which to measure the elapsed time.
- * @returns {Function} A function that returns the elapsed time in milliseconds since the specified start time
- * or the component's mount time.
- *
- * @example
- * import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';
- * import Button from '@rio-cloud/rio-uikit/Button';
- *
- * const MyComponent = () => {
- *   const getElapsedTime = useElapsedTime();
- *
- *   const handleClick = () => {
- *     const elapsedTime = getElapsedTime();
- *     console.log(`Elapsed time: ${elapsedTime} ms`);
- *   };
- *
- *   return (
- *       <Button onClick={handleClick}>Get elapsed time</Button>
- *   );
- * };
- */
-declare const useElapsedTime: (startTime?: number) => (() => number);
-export default useElapsedTime;

package/lib/es/hooks/useElapsedTime.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-/**
- * Custom React hook to measure the elapsed time since a specified start time or the component's mount time.
- *
- * @param {number} [startTime=Date.now()] - The start time in milliseconds from which to measure the elapsed time.
- * @returns {Function} A function that returns the elapsed time in milliseconds since the specified start time
- * or the component's mount time.
- *
- * @example
- * import useElapsedTime from '@rio-cloud/rio-uikit/useElapsedTime';
- * import Button from '@rio-cloud/rio-uikit/Button';
- *
- * const MyComponent = () => {
- *   const getElapsedTime = useElapsedTime();
- *
- *   const handleClick = () => {
- *     const elapsedTime = getElapsedTime();
- *     console.log(`Elapsed time: ${elapsedTime} ms`);
- *   };
- *
- *   return (
- *       <Button onClick={handleClick}>Get elapsed time</Button>
- *   );
- * };
- */
-const useElapsedTime = (startTime = Date.now()) => {
-    const startTimeRef = (0, react_1.useRef)(startTime);
-    const getElapsedTime = () => {
-        return Date.now() - startTimeRef.current;
-    };
-    (0, react_1.useEffect)(() => {
-        startTimeRef.current = startTime;
-    }, [startTime]);
-    return getElapsedTime;
-};
-exports.default = useElapsedTime;

package/lib/es/hooks/useElementSize.d.ts

@@ -1,9 +0,0 @@
-import { type RefObject } from 'react';
-/**
- * Custom hook to track the size of a DOM element.
- *
- * @param elementRef - Reference to the DOM element whose size is to be tracked.
- * @returns An array containing the width and height of the element.
- */
-declare const useElementSize: (elementRef: RefObject<HTMLElement>) => (number | undefined)[];
-export default useElementSize;

package/lib/es/hooks/useElementSize.js

@@ -1,31 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-/**
- * Custom hook to track the size of a DOM element.
- *
- * @param elementRef - Reference to the DOM element whose size is to be tracked.
- * @returns An array containing the width and height of the element.
- */
-const useElementSize = (elementRef) => {
-    const [width, setWidth] = (0, react_1.useState)();
-    const [height, setHeight] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        const resizeObserver = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                if (entry.contentRect) {
-                    setWidth(entry.contentRect.width);
-                    setHeight(entry.contentRect.height);
-                }
-            }
-        });
-        if (elementRef.current) {
-            resizeObserver.observe(elementRef.current);
-        }
-        return () => {
-            resizeObserver.disconnect();
-        };
-    }, [elementRef]);
-    return [width, height];
-};
-exports.default = useElementSize;

package/lib/es/hooks/useEsc.d.ts

@@ -1,7 +0,0 @@
-/**
- * Custom hook to execute a callback when the 'Escape' key is pressed.
- *
- * @param callback - The function to execute when the 'Escape' key is pressed.
- */
-declare const useEsc: (callback: (event: KeyboardEvent) => void) => void;
-export default useEsc;

package/lib/es/hooks/useEsc.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const useKey_1 = tslib_1.__importDefault(require("./useKey"));
-/**
- * Custom hook to execute a callback when the 'Escape' key is pressed.
- *
- * @param callback - The function to execute when the 'Escape' key is pressed.
- */
-const useEsc = (callback) => {
-    (0, useKey_1.default)(event => event.key === 'Escape' && callback(event));
-};
-exports.default = useEsc;

package/lib/es/hooks/useEvent.d.ts

@@ -1,18 +0,0 @@
-type WindowEventMapWithFullscreen = {
-    fullscreenchange: Event;
-    webkitfullscreenchange: Event;
-    mozfullscreenchange: Event;
-    fullscreenerror: Event;
-    webkitfullscreenerror: Event;
-    mozfullscreenerror: Event;
-};
-/**
- * Custom hook to add event listeners to the specified target.
- *
- * @param eventType - The type of event to listen for.
- * @param callback - The function to execute when the event occurs.
- * @param options - Optional. An object that specifies characteristics about the event listener.
- * @param target - Optional. The target element to which to attach the event listener.
- */
-declare const useEvent: <K extends keyof WindowEventMap, W extends keyof WindowEventMapWithFullscreen, T extends HTMLElement = HTMLDivElement>(eventType: K | W, callback: EventListener, options?: boolean | AddEventListenerOptions, target?: Document | Window | T | null) => void;
-export default useEvent;

package/lib/es/hooks/useEvent.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-/**
- * Custom hook to add event listeners to the specified target.
- *
- * @param eventType - The type of event to listen for.
- * @param callback - The function to execute when the event occurs.
- * @param options - Optional. An object that specifies characteristics about the event listener.
- * @param target - Optional. The target element to which to attach the event listener.
- */
-const useEvent = (eventType, callback, options = false, target = document) => {
-    (0, react_1.useEffect)(() => {
-        if (!target || !target.addEventListener) {
-            return;
-        }
-        target.addEventListener(eventType, callback, options);
-        return () => {
-            target.removeEventListener(eventType, callback, options);
-        };
-    }, [eventType, options, target]);
-};
-exports.default = useEvent;

package/lib/es/hooks/useEventListenerCount.d.ts

@@ -1,5 +0,0 @@
-declare const useEventListenerCount: () => {
-    counts: Record<string, number>;
-    total: number;
-};
-export default useEventListenerCount;

package/lib/es/hooks/useEventListenerCount.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const throttle_1 = tslib_1.__importDefault(require("lodash/fp/throttle"));
-const useEventListenerCount = () => {
-    const [listenerCounts, setListenerCounts] = (0, react_1.useState)({});
-    const [totalCount, setTotalCount] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        console.log('init useEventListener interceptor');
-        const eventListeners = new Set();
-        const originalAddEventListener = EventTarget.prototype.addEventListener;
-        const originalRemoveEventListener = EventTarget.prototype.removeEventListener;
-        const updateListeners = (0, throttle_1.default)(1000)(() => {
-            const counts = Array.from(eventListeners).reduce((acc, { type }) => {
-                acc[type] = (acc[type] || 0) + 1;
-                return acc;
-            }, {});
-            setListenerCounts(counts);
-            setTotalCount(eventListeners.size);
-        });
-        EventTarget.prototype.addEventListener = function (type, listener, options) {
-            if (listener) {
-                eventListeners.add({ type, listener });
-                updateListeners();
-            }
-            originalAddEventListener.call(this, type, listener, options);
-        };
-        EventTarget.prototype.removeEventListener = function (type, listener, options) {
-            eventListeners.forEach(item => {
-                if (item.type === type && item.listener === listener) {
-                    eventListeners.delete(item);
-                }
-            });
-            updateListeners();
-            originalRemoveEventListener.call(this, type, listener, options);
-        };
-        return () => {
-            EventTarget.prototype.addEventListener = originalAddEventListener;
-            EventTarget.prototype.removeEventListener = originalRemoveEventListener;
-        };
-    }, []);
-    return { counts: listenerCounts, total: totalCount };
-};
-exports.default = useEventListenerCount;

package/lib/es/hooks/useFocusTrap.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-/**
- * This custom hook allows to keep the focus inside a defined wrapper element.
- * This might be a dialog or a custom overlay.
- *
- * This hook can be used in two ways:
- * - When you have a external component that will be re-rendered after the overlay opens, you can use
- *   the built-in ref. This ref will be returned from this hook and can be set on the respective wrapper element.
- * - When you have an element that does not re-render, use a state setter function to set as the ref.
- *   This element can then be passed as a parameter to this hook and it will be used instead of the built-in ref.
- *
- * @param element Optional parameter to pass in the existing DOM reference. Use this instead of the built-in ref.
- * @returns
- */
-declare const useFocusTrap: <T extends HTMLElement>(element?: HTMLDivElement | null) => React.RefObject<HTMLDivElement>;
-export default useFocusTrap;

package/lib/es/hooks/useFocusTrap.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-/**
- * This custom hook allows to keep the focus inside a defined wrapper element.
- * This might be a dialog or a custom overlay.
- *
- * This hook can be used in two ways:
- * - When you have a external component that will be re-rendered after the overlay opens, you can use
- *   the built-in ref. This ref will be returned from this hook and can be set on the respective wrapper element.
- * - When you have an element that does not re-render, use a state setter function to set as the ref.
- *   This element can then be passed as a parameter to this hook and it will be used instead of the built-in ref.
- *
- * @param element Optional parameter to pass in the existing DOM reference. Use this instead of the built-in ref.
- * @returns
- */
-const useFocusTrap = (element) => {
-    const ref = (0, react_1.useRef)(null);
-    const handleFocus = (event) => {
-        const wrapper = element ?? ref.current;
-        const focusableElements = wrapper?.querySelectorAll([
-            'a[href]',
-            'button',
-            'textarea',
-            'input',
-            'input[type="text"]',
-            'input[type="radio"]',
-            'input[type="checkbox"]',
-            'select',
-        ].join(', '));
-        const firstFocusableEl = focusableElements?.[0];
-        const lastFocusableEl = focusableElements?.[focusableElements.length - 1];
-        const isTabPressed = event.key === 'Tab';
-        if (!isTabPressed) {
-            return;
-        }
-        // Handle: shift + tab
-        if (event.shiftKey) {
-            if (document.activeElement === firstFocusableEl) {
-                lastFocusableEl?.focus();
-                event.preventDefault();
-            }
-            return;
-        }
-        // Handle: tab
-        if (document.activeElement === lastFocusableEl) {
-            firstFocusableEl?.focus();
-            event.preventDefault();
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        const wrapper = element ?? ref.current;
-        if (wrapper) {
-            wrapper.addEventListener('keydown', handleFocus);
-        }
-        return () => {
-            if (wrapper) {
-                wrapper.removeEventListener('keydown', handleFocus);
-            }
-        };
-    }, [ref.current, element]);
-    return ref;
-};
-exports.default = useFocusTrap;

package/lib/es/hooks/useFullscreen.d.ts

@@ -1,31 +0,0 @@
-type EventCallback = (this: Document, event_: Event) => any;
-type OnChangeEventCallback = (this: Document, event_: Event, isOpen: boolean) => any;
-type RequestFullscreenOptions = {
-    navigationUI?: string | 'auto' | 'hide' | 'show';
-};
-type FullScreenOptions = {
-    element?: HTMLElement;
-    onChange?: OnChangeEventCallback;
-    onError?: EventCallback;
-    requestFullscreenOptions?: RequestFullscreenOptions;
-};
-type FullscreenApi = {
-    requestFullscreen: () => void | ((element?: any) => Promise<unknown>);
-    exitFullscreen: () => void | (() => Promise<unknown>);
-    toggleFullscreen: () => void | ((element?: HTMLElement) => Promise<unknown>);
-    isEnabled: boolean;
-    isFullscreen: boolean;
-};
-/**
- * Custom hook to manage fullscreen functionality.
- *
- * @param options - Options for managing fullscreen behavior.
- */
-declare const useFullscreen: (options?: FullScreenOptions) => FullscreenApi | {
-    requestFullscreen: (newTargetElement: any) => Promise<any>;
-    exitFullscreen: () => Promise<any>;
-    toggleFullscreen: (newTargetElement: any) => void;
-    isFullscreen: boolean;
-    isEnabled: boolean;
-};
-export default useFullscreen;

package/lib/es/hooks/useFullscreen.js

@@ -1,139 +0,0 @@
-"use strict";
-// inspired by https://github.com/imbhargav5/rooks/blob/main/src/hooks/useFullscreen.ts
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
-const useEvent_1 = tslib_1.__importDefault(require("./useEvent"));
-const defaultValue = {
-    requestFullscreen: noop_1.default,
-    exitFullscreen: noop_1.default,
-    toggleFullscreen: noop_1.default,
-    isFullscreen: false,
-    isEnabled: false,
-};
-const requestFunctions = [
-    'requestFullscreen',
-    'webkitRequestFullscreen',
-    'webkitRequestFullScreen',
-    'mozRequestFullScreen',
-];
-const exitFunctions = ['exitFullscreen', 'webkitExitFullscreen', 'webkitCancelFullScreen', 'mozCancelFullScreen'];
-const fullscreenElementFunctions = [
-    'fullscreenElement',
-    'webkitFullscreenElement',
-    'webkitCurrentFullScreenElement',
-    'mozFullScreenElement',
-];
-const isFullscreenEnabledFunctions = [
-    'fullscreenElement',
-    'webkitFullscreenEnabled',
-    'webkitCurrentFullScreenElement',
-    'mozFullScreenEnabled',
-];
-const getFnName = (fnMap, targetElement) => fnMap.find(fnName => {
-    if (fnName in targetElement) {
-        return fnName;
-    }
-});
-// Element centered fullscreen functions
-const getRequestFunctionName = (targetElement = document) => getFnName(requestFunctions, targetElement);
-// Document fullscreen functions
-const getExitFunctionName = () => getFnName(exitFunctions, document);
-const getFullscreenElementFunctionName = () => {
-    const fullscreenFunctionName = getFnName(fullscreenElementFunctions, document);
-    const initialFullscreenElement = fullscreenFunctionName
-        ? document[fullscreenFunctionName]
-        : null;
-    return initialFullscreenElement;
-};
-const getIsFullscreenEnabledFunctionName = () => getFnName(isFullscreenEnabledFunctions, document);
-/**
- * Custom hook to manage fullscreen functionality.
- *
- * @param options - Options for managing fullscreen behavior.
- */
-const useFullscreen = (options = {}) => {
-    if (typeof window === 'undefined') {
-        console.warn('useFullscreen: window is undefined.');
-        return defaultValue;
-    }
-    const { element, onChange, onError, requestFullscreenOptions = {} } = options;
-    // use either a defined target or when document is set, use the html element as in Chrome the
-    // document does not have a request function. It needs to be an element.
-    const defaultFullscreenElement = !element || !(element instanceof HTMLElement) ? document.querySelector('html') : element;
-    const initialFullscreenElement = getFullscreenElementFunctionName();
-    const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(Boolean(initialFullscreenElement));
-    const [fullscreenElement, setFullscreenElement] = (0, react_1.useState)(initialFullscreenElement);
-    // Request
-    const requestFullscreen = (0, react_1.useCallback)(async (newTargetElement) => {
-        // check whether the new target element is a real DOM node or just a function
-        const isHtmlElement = newTargetElement instanceof HTMLElement;
-        try {
-            const target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
-            const requestFunctionName = getRequestFunctionName(target);
-            if (requestFunctionName) {
-                return await target[requestFunctionName](requestFullscreenOptions);
-            }
-            else {
-                throw new Error('Request function not found');
-            }
-        }
-        catch (error) {
-            console.log(error);
-        }
-    }, []);
-    // Exit
-    const exitFullscreen = (0, react_1.useCallback)(async () => {
-        try {
-            const exitFunctionName = getExitFunctionName();
-            if (fullscreenElement && exitFunctionName) {
-                return await document[exitFunctionName]();
-            }
-        }
-        catch (error) {
-            console.warn(error);
-        }
-    }, [fullscreenElement]);
-    // Toggle
-    const toggleFullscreen = (0, react_1.useCallback)((newTargetElement) => {
-        if (fullscreenElement) {
-            exitFullscreen();
-        }
-        else {
-            requestFullscreen(newTargetElement);
-        }
-    }, [fullscreenElement]);
-    const handleChangeEvent = () => {
-        const currentFullscreenElement = getFullscreenElementFunctionName();
-        const isOpen = Boolean(currentFullscreenElement);
-        if (isOpen) {
-            // fullscreen was enabled
-            setIsFullscreen(true);
-            setFullscreenElement(currentFullscreenElement);
-        }
-        else {
-            // fullscreen was disabled
-            setIsFullscreen(false);
-            setFullscreenElement(null);
-        }
-        onChange?.call(document, event || new Event('default'), isOpen);
-    };
-    const handleErrorEvent = () => (event) => onError?.call(document, event);
-    (0, useEvent_1.default)('fullscreenchange', handleChangeEvent);
-    (0, useEvent_1.default)('webkitfullscreenchange', handleChangeEvent);
-    (0, useEvent_1.default)('mozfullscreenchange', handleChangeEvent);
-    (0, useEvent_1.default)('fullscreenerror', handleErrorEvent);
-    (0, useEvent_1.default)('webkitfullscreenerror', handleErrorEvent);
-    (0, useEvent_1.default)('mozfullscreenerror', handleErrorEvent);
-    const enabledFunctionName = getIsFullscreenEnabledFunctionName();
-    const isEnabled = enabledFunctionName ? Boolean(document[enabledFunctionName]) : false;
-    return {
-        requestFullscreen,
-        exitFullscreen,
-        toggleFullscreen,
-        isFullscreen,
-        isEnabled,
-    };
-};
-exports.default = useFullscreen;

package/lib/es/hooks/useHover.d.ts

@@ -1,9 +0,0 @@
-import { type RefObject } from 'react';
-/**
- * Custom hook to detect hover state for a given HTML element.
- *
- * @param elementRef - The reference to the HTML element.
- * @returns A boolean value representing whether the element is being hovered over or not.
- */
-declare const useHover: <T extends HTMLElement = HTMLElement>(elementRef: RefObject<T>) => boolean;
-export default useHover;

package/lib/es/hooks/useHover.js

@@ -1,36 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-/**
- * Custom hook to detect hover state for a given HTML element.
- *
- * @param elementRef - The reference to the HTML element.
- * @returns A boolean value representing whether the element is being hovered over or not.
- */
-const useHover = (elementRef) => {
-    const [value, setValue] = (0, react_1.useState)(false);
-    const handleMouseEnter = () => setValue(true);
-    const handleMouseLeave = () => setValue(false);
-    (0, react_1.useEffect)(() => {
-        if (elementRef.current) {
-            elementRef.current.addEventListener('mouseenter', handleMouseEnter);
-        }
-        return () => {
-            if (elementRef.current) {
-                elementRef.current.removeEventListener('mouseenter', handleMouseEnter);
-            }
-        };
-    }, [elementRef.current]);
-    (0, react_1.useEffect)(() => {
-        if (elementRef.current) {
-            elementRef.current.addEventListener('mouseleave', handleMouseLeave);
-        }
-        return () => {
-            if (elementRef.current) {
-                elementRef.current.removeEventListener('mouseleave', handleMouseLeave);
-            }
-        };
-    }, [elementRef.current]);
-    return value;
-};
-exports.default = useHover;

package/lib/es/hooks/useInterval.d.ts

@@ -1,10 +0,0 @@
-/**
- * Custom hook to execute a callback function at specified intervals.
- *
- * @param callback - The callback function to be executed.
- * @param delay - The interval duration in milliseconds. Set to null to stop the interval.
- *
- * @returns A mutable ref object that holds the interval ID.
- */
-declare const useInterval: (callback: () => void, delay: number | null) => React.MutableRefObject<number | null>;
-export default useInterval;

package/lib/es/hooks/useInterval.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = require("react");
-// See https://overreacted.io/making-setinterval-declarative-with-react-hooks/
-/**
- * Custom hook to execute a callback function at specified intervals.
- *
- * @param callback - The callback function to be executed.
- * @param delay - The interval duration in milliseconds. Set to null to stop the interval.
- *
- * @returns A mutable ref object that holds the interval ID.
- */
-const useInterval = (callback, delay) => {
-    const intervalRef = (0, react_1.useRef)(null);
-    const savedCallback = (0, react_1.useRef)(callback);
-    (0, react_1.useEffect)(() => {
-        savedCallback.current = callback;
-    }, [callback]);
-    (0, react_1.useEffect)(() => {
-        const tick = () => savedCallback.current();
-        if (typeof delay === 'number') {
-            intervalRef.current = window.setInterval(tick, delay);
-            return () => window.clearInterval(intervalRef.current ?? undefined);
-        }
-    }, [delay]);
-    return intervalRef;
-};
-exports.default = useInterval;