@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.1.0

package/hooks/useAfterMount.d.ts

@@ -4,5 +4,5 @@
  * @param callback The effect callback function to be used after the component has been mounted.
  * @param deps The deps of the callback (the same as if you were using useCallback or useEffect).
  */
-declare const useAfterMount: (callback: VoidFunction, deps: unknown[]) => void;
+declare const useAfterMount: (callback: VoidFunction, deps?: unknown[]) => void;
 export default useAfterMount;

package/hooks/useClickOutside.d.ts

@@ -1 +1,12 @@
-export default function useClickOutside(callback: any, eventTypes?: string[]): import("react").MutableRefObject<null>;
+/// <reference types="react" />
+export type EventListenerType = keyof DocumentEventMap;
+/**
+ * Custom hook to detect clicks outside a specified element.
+ *
+ * @param callback - The callback function to be called when a click outside the element is detected.
+ * @param events - Array of event types to listen for.
+ *
+ * @returns A mutable ref object representing the target element.
+ */
+declare const useClickOutside: <T extends HTMLElement = any>(callback: (event: MouseEvent | TouchEvent) => void, events?: EventListenerType[]) => import("react").MutableRefObject<T>;
+export default useClickOutside;

package/hooks/useClickOutside.js

@@ -2,18 +2,30 @@
 // eslint-disable-next-line max-len
 // Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
 import { useEffect, useRef } from 'react';
-export default function useClickOutside(callback, eventTypes = ['mousedown', 'touchstart']) {
+/**
+ * Custom hook to detect clicks outside a specified element.
+ *
+ * @param callback - The callback function to be called when a click outside the element is detected.
+ * @param events - Array of event types to listen for.
+ *
+ * @returns A mutable ref object representing the target element.
+ */
+const useClickOutside = (callback, events = ['mousedown', 'touchstart']) => {
     const targetRef = useRef(null);
     useEffect(() => {
-        const listener = event => {
+        // Event listener function to check if the click is outside the target element
+        const listener = (event) => {
             if (targetRef.current && !targetRef.current.contains(event.target)) {
                 callback(event);
             }
         };
-        eventTypes.forEach(eventType => document.addEventListener(eventType, listener));
+        // Add event listeners for each specified event type
+        events.forEach(eventType => document.addEventListener(eventType, listener));
+        // Cleanup function to remove event listeners
         return () => {
-            eventTypes.forEach(eventType => document.removeEventListener(eventType, listener));
+            events.forEach(eventType => document.removeEventListener(eventType, listener));
         };
-    }, [targetRef, callback]);
+    }, [targetRef, callback, events]);
     return targetRef;
-}
+};
+export default useClickOutside;

package/hooks/useClipboard.d.ts

@@ -1,8 +1,15 @@
-export default function useClipboard({ timeout }?: {
-    timeout?: number | undefined;
-}): {
-    copy: (valueToCopy: any) => void;
+/**
+ * Custom hook to interact with the clipboard.
+ *
+ * @param options - Options object for configuring the hook behavior.
+ * @returns An object containing functions and state related to clipboard operations.
+ */
+declare const useClipboard: (options?: {
+    timeout: number;
+}) => {
+    copy: (valueToCopy: string) => void;
     reset: () => void;
-    error: null;
+    error: Error | null;
     copied: boolean;
 };
+export default useClipboard;

package/hooks/useClipboard.js

@@ -1,30 +1,45 @@
 // Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-clipboard/use-clipboard.ts
 import { useState } from 'react';
 import isNil from 'lodash/fp/isNil';
-export default function useClipboard({ timeout = 2000 } = {}) {
+/**
+ * Custom hook to interact with the clipboard.
+ *
+ * @param options - Options object for configuring the hook behavior.
+ * @returns An object containing functions and state related to clipboard operations.
+ */
+const useClipboard = (options) => {
+    const { timeout = 2000 } = options !== null && options !== void 0 ? options : {};
     const [error, setError] = useState(null);
     const [copied, setCopied] = useState(false);
     const [copyTimeout, setCopyTimeout] = useState(null);
-    const handleCopyResult = value => {
-        clearTimeout(copyTimeout);
+    // Function to handle copy result and set copied status
+    const handleCopyResult = (value) => {
+        if (copyTimeout) {
+            clearTimeout(copyTimeout);
+        }
         setCopyTimeout(setTimeout(() => setCopied(false), timeout));
         setCopied(value);
     };
-    const copy = valueToCopy => {
+    // Function to copy text to clipboard
+    const copy = (valueToCopy) => {
         if (!isNil(navigator.clipboard)) {
             navigator.clipboard
                 .writeText(valueToCopy)
                 .then(() => handleCopyResult(true))
-                .catch(error => setError(error));
+                .catch(writeError => setError(writeError));
         }
         else {
             setError(new Error('useClipboard: navigator.clipboard is not supported'));
         }
     };
+    // Function to reset copied status and clear errors
     const reset = () => {
         setCopied(false);
         setError(null);
-        clearTimeout(copyTimeout);
+        if (copyTimeout) {
+            clearTimeout(copyTimeout);
+        }
     };
     return { copy, reset, error, copied };
-}
+};
+export default useClipboard;

package/hooks/useDarkMode.d.ts

@@ -1,2 +1,7 @@
+/**
+ * Custom hook to detect if dark mode is enabled.
+ *
+ * @returns A boolean indicating whether dark mode is enabled.
+ */
+declare const useDarkMode: () => boolean;
 export default useDarkMode;
-declare function useDarkMode(): boolean;

package/hooks/useDarkMode.js

@@ -1,20 +1,33 @@
-import { useCallback, useEffect, useState } from 'react';
-import { THEME_DARK, THEME_DATA_ATTRIBUTE } from './../utils/colorScheme';
+import { useCallback, useState } from 'react';
+import { THEME_DARK, THEME_DATA_ATTRIBUTE } from '../utils/colorScheme';
+import useEffectOnce from './useEffectOnce';
 import useMutationObserver from './useMutationObserver';
+/**
+ * Custom hook to detect if dark mode is enabled.
+ *
+ * @returns A boolean indicating whether dark mode is enabled.
+ */
 const useDarkMode = () => {
     const [isDarkMode, setIsDarkMode] = useState(false);
-    const handleMutation = useCallback(mutationList => {
-        mutationList.map(mutation => {
-            var _a;
+    // Check if dark mode is enabled on initial render
+    useEffectOnce(() => {
+        const html = document.documentElement;
+        // Check if the HTML element has the dark mode theme attribute
+        if (html.getAttribute(THEME_DATA_ATTRIBUTE) === THEME_DARK) {
+            setIsDarkMode(true);
+        }
+    });
+    const handleMutation = useCallback((mutationList) => {
+        mutationList.map((mutation) => {
+            // Check if the mutation is related to the theme attribute
             if (mutation.type === 'attributes' && mutation.attributeName === THEME_DATA_ATTRIBUTE) {
-                const scheme = (_a = mutation.target.attributes[THEME_DATA_ATTRIBUTE]) === null || _a === void 0 ? void 0 : _a.value;
+                const scheme = mutation.target.getAttribute(THEME_DATA_ATTRIBUTE);
+                // Update dark mode status based on the theme attribute value
                 setIsDarkMode(scheme === THEME_DARK);
             }
-            // if (mutation.type === 'classList') {
-            //     console.log({ classList: mutation });
-            // }
         });
     }, []);
+    // Observe mutations in the theme attribute using MutationObserver
     useMutationObserver(document.documentElement, handleMutation, {
         attributes: true,
         childList: false,

package/hooks/useDebugInfo.d.ts

@@ -1,6 +1,18 @@
-export default function useDebugInfo(componentName: any, props: any): {
+type Props = {
+    [key: string]: any;
+};
+/**
+ * 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.
+ */
+declare const useDebugInfo: (componentName: string, props: Props) => {
     renderCount: number;
-    changedProps: {};
+    changedProps: Props;
     timeSinceLastRender: number;
     lastRenderTimestamp: number;
 };
+export default useDebugInfo;

package/hooks/useDebugInfo.js

@@ -2,12 +2,22 @@
 import { useEffect, useRef } from 'react';
 import useRenderCount from './useRenderCount';
 const logStyle = ['color: #4c5667', 'background-color: #e5ebf0', 'padding: 2px 4px', 'border-radius: 2px'].join(';');
-export default function useDebugInfo(componentName, props) {
+/**
+ * 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 = useRenderCount();
     const changedProps = useRef({});
     const previousProps = useRef(props);
     const lastRenderTimestamp = useRef(Date.now());
-    const propKeys = Object.keys(Object.assign(Object.assign({}, props), previousProps));
+    // Extract prop keys from the current and previous props
+    const propKeys = Object.keys(Object.assign(Object.assign({}, 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;
@@ -17,15 +27,18 @@ export default function useDebugInfo(componentName, props) {
                 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
     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);
@@ -33,4 +46,5 @@ export default function useDebugInfo(componentName, props) {
         }
     });
     return info;
-}
+};
+export default useDebugInfo;

package/hooks/useDocumentTitle.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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/hooks/useDocumentTitle.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+/**
+ * Custom hook to set the document title.
+ *
+ * @param title - The new title to set for the document.
+ */
+const useDocumentTitle = (title) => {
+    useEffect(() => {
+        if (document) {
+            document.title = title;
+        }
+    }, [title]);
+};
+export default useDocumentTitle;

package/hooks/useEffectOnce.d.ts

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

package/hooks/useEffectOnce.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
-export default function useEffectOnce(callback) {
+const useEffectOnce = (callback) => {
     useEffect(callback, []);
-}
+};
+export default useEffectOnce;

package/hooks/useElementSize.d.ts

@@ -1 +1,9 @@
-export default function useElementSize(elementRef: any): undefined[];
+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/hooks/useElementSize.js

@@ -1,20 +1,29 @@
 import { useEffect, useState } from 'react';
-export default function useElementSize(elementRef) {
+/**
+ * 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] = useState();
     const [height, setHeight] = useState();
     useEffect(() => {
         const resizeObserver = new ResizeObserver(entries => {
-            for (let entry of entries) {
+            for (const entry of entries) {
                 if (entry.contentRect) {
                     setWidth(entry.contentRect.width);
                     setHeight(entry.contentRect.height);
                 }
             }
         });
-        resizeObserver.observe(elementRef.current);
+        if (elementRef.current) {
+            resizeObserver.observe(elementRef.current);
+        }
         return () => {
             resizeObserver.disconnect();
         };
     }, [elementRef]);
     return [width, height];
-}
+};
+export default useElementSize;

package/hooks/useEsc.d.ts

@@ -1,2 +1,7 @@
+/**
+ * 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/hooks/useEsc.js

@@ -1,4 +1,9 @@
 import useKey from './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) => {
     useKey(event => event.key === 'Escape' && callback(event));
 };

package/hooks/useEvent.d.ts

@@ -1,2 +1,18 @@
-declare const useEvent: <K extends keyof WindowEventMap, T extends HTMLElement = HTMLDivElement>(eventType: K, callback: EventListener, options?: boolean | AddEventListenerOptions, target?: Document | HTMLElement | null) => void;
+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?: Window | Document | T | null) => void;
 export default useEvent;

package/hooks/useEvent.js

@@ -1,4 +1,12 @@
 import { useEffect } from '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) => {
     useEffect(() => {
         if (!target || !target.addEventListener) {

package/hooks/useFullscreen.d.ts

@@ -1,8 +1,31 @@
-export default useFullscreen;
-declare function useFullscreen(options?: {}): {
-    requestFullscreen: import("lodash/fp").LodashNoop;
-    exitFullscreen: import("lodash/fp").LodashNoop;
-    toggleFullscreen: import("lodash/fp").LodashNoop;
+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/hooks/useFullscreen.js

@@ -3,34 +3,6 @@ import { __awaiter } from "tslib";
 import { useState, useCallback } from 'react';
 import noop from 'lodash/fp/noop';
 import useEvent from './useEvent';
-// Note old Internet Explorer 11 is skipped here as it is not supported anymore
-// New WebKit:
-//     'webkitRequestFullscreen',
-//     'webkitExitFullscreen',
-//     'webkitFullscreenElement',
-//     'webkitFullscreenEnabled',
-//     'webkitfullscreenchange',
-//     'webkitfullscreenerror',
-//
-// // Old WebKit:
-//     'webkitRequestFullScreen',
-//     'webkitCancelFullScreen',
-//     'webkitCurrentFullScreenElement',
-//     'webkitCancelFullScreen',
-//     'webkitfullscreenchange',
-//     'webkitfullscreenerror',
-// type FullscreenApi = {
-//   isEnabled: boolean;
-//   toggle: NoopFunction | ((element?: HTMLElement) => Promise<unknown>); // toggle
-//   /** @deprecated Please use useFullScreen({onChange : function() {}}) instead. */
-//   onChange: NoopFunction | ((callback: OnChangeEventCallback) => void); // onchange
-//   /** @deprecated Please use useFullScreen({onError : function() {}}) instead. */
-//   onError: NoopFunction | ((callback: EventCallback) => void); // onerror
-//   request: NoopFunction | ((element?: HTMLElement) => Promise<unknown>); // request
-//   exit: NoopFunction | (() => Promise<unknown>); // exit
-//   isFullscreen: boolean; // isFullscreen
-//   element: HTMLElement | null | undefined;
-// };
 const defaultValue = {
     requestFullscreen: noop,
     exitFullscreen: noop,
@@ -38,15 +10,6 @@ const defaultValue = {
     isFullscreen: false,
     isEnabled: false,
 };
-// type RequestFullscreenOptions = {
-//   // string will help to ease type casting
-//   navigationUI?: string | 'auto' | 'hide' | 'show';
-// };
-// type FullScreenOptions = {
-//   onChange?: OnChangeEventCallback;
-//   onError?: EventCallback;
-//   requestFullscreenOptions?: RequestFullscreenOptions;
-// };
 const requestFunctions = [
     'requestFullscreen',
     'webkitRequestFullscreen',
@@ -75,8 +38,19 @@ const getFnName = (fnMap, targetElement) => fnMap.find(fnName => {
 const getRequestFunctionName = (targetElement = document) => getFnName(requestFunctions, targetElement);
 // Document fullscreen functions
 const getExitFunctionName = () => getFnName(exitFunctions, document);
-const getFullscreenElementFunctionName = () => getFnName(fullscreenElementFunctions, 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.');
@@ -85,32 +59,42 @@ const useFullscreen = (options = {}) => {
     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 === document ? document.querySelector('html') : element;
-    const initialFullscreenElement = document[getFullscreenElementFunctionName()];
+    const defaultFullscreenElement = !element || !(element instanceof HTMLElement) ? document.querySelector('html') : element;
+    const initialFullscreenElement = getFullscreenElementFunctionName();
     const [isFullscreen, setIsFullscreen] = useState(Boolean(initialFullscreenElement));
     const [fullscreenElement, setFullscreenElement] = useState(initialFullscreenElement);
+    // Request
     const requestFullscreen = useCallback((newTargetElement) => __awaiter(void 0, void 0, void 0, function* () {
-        // check whether the new target element is a real DOm node or just a function
+        // 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;
-            return yield target[getRequestFunctionName(target)](requestFullscreenOptions);
+            const requestFunctionName = getRequestFunctionName(target);
+            if (requestFunctionName) {
+                return yield target[requestFunctionName](requestFullscreenOptions);
+            }
+            else {
+                throw new Error('Request function not found');
+            }
         }
         catch (error) {
             console.log(error);
         }
     }), []);
+    // Exit
     const exitFullscreen = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
         try {
-            if (fullscreenElement) {
-                return yield document[getExitFunctionName()]();
+            const exitFunctionName = getExitFunctionName();
+            if (fullscreenElement && exitFunctionName) {
+                return yield document[exitFunctionName]();
             }
         }
         catch (error) {
             console.warn(error);
         }
     }), [fullscreenElement]);
-    const toggleFullscreen = useCallback(newTargetElement => {
+    // Toggle
+    const toggleFullscreen = useCallback((newTargetElement) => {
         if (fullscreenElement) {
             exitFullscreen();
         }
@@ -119,7 +103,7 @@ const useFullscreen = (options = {}) => {
         }
     }, [fullscreenElement]);
     const handleChangeEvent = () => {
-        const currentFullscreenElement = document[getFullscreenElementFunctionName()];
+        const currentFullscreenElement = getFullscreenElementFunctionName();
         const isOpen = Boolean(currentFullscreenElement);
         if (isOpen) {
             // fullscreen was enabled
@@ -131,21 +115,23 @@ const useFullscreen = (options = {}) => {
             setIsFullscreen(false);
             setFullscreenElement(null);
         }
-        onChange === null || onChange === void 0 ? void 0 : onChange.call(document, event, isOpen);
+        onChange === null || onChange === void 0 ? void 0 : onChange.call(document, event || new Event('default'), isOpen);
     };
-    const handleErrorEvent = () => event => onError === null || onError === void 0 ? void 0 : onError.call(document, event);
+    const handleErrorEvent = () => (event) => onError === null || onError === void 0 ? void 0 : onError.call(document, event);
     useEvent('fullscreenchange', handleChangeEvent);
     useEvent('webkitfullscreenchange', handleChangeEvent);
     useEvent('mozfullscreenchange', handleChangeEvent);
     useEvent('fullscreenerror', handleErrorEvent);
     useEvent('webkitfullscreenerror', handleErrorEvent);
     useEvent('mozfullscreenerror', handleErrorEvent);
+    const enabledFunctionName = getIsFullscreenEnabledFunctionName();
+    const isEnabled = enabledFunctionName ? Boolean(document[enabledFunctionName]) : false;
     return {
         requestFullscreen,
         exitFullscreen,
         toggleFullscreen,
         isFullscreen,
-        isEnabled: Boolean(document[getIsFullscreenEnabledFunctionName(document)]),
+        isEnabled,
     };
 };
 export default useFullscreen;

package/hooks/useHover.d.ts

@@ -1,3 +1,9 @@
 import React, { 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: React.RefObject<T>) => boolean;
 export default useHover;

package/hooks/useHover.js

@@ -1,5 +1,10 @@
 import { useEffect, useState } from 'react';
-import './useEvent';
+/**
+ * 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] = useState(false);
     const handleMouseEnter = () => setValue(true);

package/hooks/useInterval.d.ts

@@ -1 +1,10 @@
-export default function useInterval(callback: any, delay: any): import("react").MutableRefObject<null>;
+/**
+ * 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;