@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

package/hooks/useFullscreen.js

@@ -1,151 +1,151 @@
-// inspired by https://github.com/imbhargav5/rooks/blob/main/src/hooks/useFullscreen.ts
-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,
-    toggleFullscreen: noop,
-    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',
-    '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 = () => getFnName(fullscreenElementFunctions, document);
-const getIsFullscreenEnabledFunctionName = () => getFnName(isFullscreenEnabledFunctions, document);
-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 === document ? document.querySelector('html') : element;
-    const initialFullscreenElement = document[getFullscreenElementFunctionName()];
-    const [isFullscreen, setIsFullscreen] = useState(Boolean(initialFullscreenElement));
-    const [fullscreenElement, setFullscreenElement] = useState(initialFullscreenElement);
-    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
-        const isHtmlElement = newTargetElement instanceof HTMLElement;
-        try {
-            const target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
-            return yield target[getRequestFunctionName(target)](requestFullscreenOptions);
-        }
-        catch (error) {
-            console.log(error);
-        }
-    }), []);
-    const exitFullscreen = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        try {
-            if (fullscreenElement) {
-                return yield document[getExitFunctionName()]();
-            }
-        }
-        catch (error) {
-            console.warn(error);
-        }
-    }), [fullscreenElement]);
-    const toggleFullscreen = useCallback(newTargetElement => {
-        if (fullscreenElement) {
-            exitFullscreen();
-        }
-        else {
-            requestFullscreen(newTargetElement);
-        }
-    }, [fullscreenElement]);
-    const handleChangeEvent = () => {
-        const currentFullscreenElement = document[getFullscreenElementFunctionName()];
-        const isOpen = Boolean(currentFullscreenElement);
-        if (isOpen) {
-            // fullscreen was enabled
-            setIsFullscreen(true);
-            setFullscreenElement(currentFullscreenElement);
-        }
-        else {
-            // fullscreen was disabled
-            setIsFullscreen(false);
-            setFullscreenElement(null);
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange.call(document, event, isOpen);
-    };
-    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);
-    return {
-        requestFullscreen,
-        exitFullscreen,
-        toggleFullscreen,
-        isFullscreen,
-        isEnabled: Boolean(document[getIsFullscreenEnabledFunctionName(document)]),
-    };
-};
-export default useFullscreen;
+// inspired by https://github.com/imbhargav5/rooks/blob/main/src/hooks/useFullscreen.ts
+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,
+    toggleFullscreen: noop,
+    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',
+    '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 = () => getFnName(fullscreenElementFunctions, document);
+const getIsFullscreenEnabledFunctionName = () => getFnName(isFullscreenEnabledFunctions, document);
+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 === document ? document.querySelector('html') : element;
+    const initialFullscreenElement = document[getFullscreenElementFunctionName()];
+    const [isFullscreen, setIsFullscreen] = useState(Boolean(initialFullscreenElement));
+    const [fullscreenElement, setFullscreenElement] = useState(initialFullscreenElement);
+    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
+        const isHtmlElement = newTargetElement instanceof HTMLElement;
+        try {
+            const target = newTargetElement && isHtmlElement ? newTargetElement : defaultFullscreenElement;
+            return yield target[getRequestFunctionName(target)](requestFullscreenOptions);
+        }
+        catch (error) {
+            console.log(error);
+        }
+    }), []);
+    const exitFullscreen = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (fullscreenElement) {
+                return yield document[getExitFunctionName()]();
+            }
+        }
+        catch (error) {
+            console.warn(error);
+        }
+    }), [fullscreenElement]);
+    const toggleFullscreen = useCallback(newTargetElement => {
+        if (fullscreenElement) {
+            exitFullscreen();
+        }
+        else {
+            requestFullscreen(newTargetElement);
+        }
+    }, [fullscreenElement]);
+    const handleChangeEvent = () => {
+        const currentFullscreenElement = document[getFullscreenElementFunctionName()];
+        const isOpen = Boolean(currentFullscreenElement);
+        if (isOpen) {
+            // fullscreen was enabled
+            setIsFullscreen(true);
+            setFullscreenElement(currentFullscreenElement);
+        }
+        else {
+            // fullscreen was disabled
+            setIsFullscreen(false);
+            setFullscreenElement(null);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange.call(document, event, isOpen);
+    };
+    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);
+    return {
+        requestFullscreen,
+        exitFullscreen,
+        toggleFullscreen,
+        isFullscreen,
+        isEnabled: Boolean(document[getIsFullscreenEnabledFunctionName(document)]),
+    };
+};
+export default useFullscreen;

package/hooks/useHover.d.ts

@@ -0,0 +1,3 @@
+import React, { type RefObject } from 'react';
+declare const useHover: <T extends HTMLElement = HTMLElement>(elementRef: React.RefObject<T>) => boolean;
+export default useHover;

package/hooks/useHover.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import './useEvent';
+const useHover = (elementRef) => {
+    const [value, setValue] = useState(false);
+    const handleMouseEnter = () => setValue(true);
+    const handleMouseLeave = () => setValue(false);
+    useEffect(() => {
+        if (elementRef.current) {
+            elementRef.current.addEventListener('mouseenter', handleMouseEnter);
+        }
+        return () => {
+            if (elementRef.current) {
+                elementRef.current.removeEventListener('mouseenter', handleMouseEnter);
+            }
+        };
+    }, [elementRef.current]);
+    useEffect(() => {
+        if (elementRef.current) {
+            elementRef.current.addEventListener('mouseleave', handleMouseLeave);
+        }
+        return () => {
+            if (elementRef.current) {
+                elementRef.current.removeEventListener('mouseleave', handleMouseLeave);
+            }
+        };
+    }, [elementRef.current]);
+    return value;
+};
+export default useHover;

package/hooks/useInterval.d.ts

@@ -1 +1 @@
-export default function useInterval(callback: any, delay: any): import("react").MutableRefObject<null>;
+export default function useInterval(callback: any, delay: any): import("react").MutableRefObject<null>;

package/hooks/useInterval.js

@@ -1,17 +1,17 @@
-import { useEffect, useRef } from 'react';
-// See https://overreacted.io/making-setinterval-declarative-with-react-hooks/
-export default function useInterval(callback, delay) {
-    const intervalRef = useRef(null);
-    const savedCallback = useRef(callback);
-    useEffect(() => {
-        savedCallback.current = callback;
-    }, [callback]);
-    useEffect(() => {
-        const tick = () => savedCallback.current();
-        if (typeof delay === 'number') {
-            intervalRef.current = window.setInterval(tick, delay);
-            return () => window.clearInterval(intervalRef.current);
-        }
-    }, [delay]);
-    return intervalRef;
-}
+import { useEffect, useRef } from 'react';
+// See https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+export default function useInterval(callback, delay) {
+    const intervalRef = useRef(null);
+    const savedCallback = useRef(callback);
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    useEffect(() => {
+        const tick = () => savedCallback.current();
+        if (typeof delay === 'number') {
+            intervalRef.current = window.setInterval(tick, delay);
+            return () => window.clearInterval(intervalRef.current);
+        }
+    }, [delay]);
+    return intervalRef;
+}

package/hooks/useIsFirstRender.d.ts

@@ -0,0 +1,2 @@
+declare const useIsFirstRender: () => boolean;
+export default useIsFirstRender;

package/hooks/useIsFirstRender.js

@@ -0,0 +1,10 @@
+import { useRef } from 'react';
+const useIsFirstRender = () => {
+    const renderRef = useRef(true);
+    if (renderRef.current === true) {
+        renderRef.current = false;
+        return true;
+    }
+    return renderRef.current;
+};
+export default useIsFirstRender;

package/hooks/useKey.d.ts

@@ -1 +1,3 @@
-export default function useKey(callback: any, eventTypes?: string[], node?: Document): void;
+type KeyboardEventType = 'keyup' | 'keydown' | 'keypress';
+declare const useKey: (callback: (event: KeyboardEvent) => void, eventTypes?: KeyboardEventType[], node?: Document) => void;
+export default useKey;

package/hooks/useKey.js

@@ -1,9 +1,14 @@
-import { useEffect } from 'react';
-export default function useKey(callback, eventTypes = ['keydown'], node = document) {
-    useEffect(() => {
-        eventTypes.forEach(eventType => node.addEventListener(eventType, callback));
-        return () => {
-            eventTypes.forEach(eventType => node.removeEventListener(eventType, callback));
-        };
-    }, [callback]);
-}
+import { useEffect } from 'react';
+const useKey = (callback, eventTypes = ['keydown'], node = document) => {
+    useEffect(() => {
+        for (const eventType of eventTypes) {
+            node.addEventListener(eventType, callback);
+        }
+        return () => {
+            for (const eventType of eventTypes) {
+                node.removeEventListener(eventType, callback);
+            }
+        };
+    }, [callback]);
+};
+export default useKey;

package/hooks/useMergeRefs.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type ReactRef<T> = React.RefCallback<T> | React.MutableRefObject<T>;
+declare const useMergeRefs: <T>(...refs: (ReactRef<T> | null | undefined)[]) => (node: T | null) => void;
+export default useMergeRefs;

package/hooks/useMergeRefs.js

@@ -0,0 +1,28 @@
+// forked from https://github.com/chakra-ui/chakra-ui/blob/main/packages/hooks/use-merge-refs/src/index.ts
+import { useMemo } from 'react';
+const assignRef = (ref, value) => {
+    if (ref == null) {
+        return;
+    }
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    try {
+        ref.current = value;
+    }
+    catch (error) {
+        throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
+    }
+};
+const mergeRefs = (...refs) => {
+    return (node) => {
+        refs.forEach(ref => {
+            assignRef(ref, node);
+        });
+    };
+};
+const useMergeRefs = (...refs) => {
+    return useMemo(() => mergeRefs(...refs), refs);
+};
+export default useMergeRefs;

package/hooks/useMutationObserver.d.ts

@@ -1,6 +1,6 @@
-export default useMutationObserver;
-declare function useMutationObserver(target: any, callback?: () => void, options?: {
-    attributes: boolean;
-    childList: boolean;
-    subtree: boolean;
-}): void;
+export default useMutationObserver;
+declare function useMutationObserver(target: any, callback?: () => void, options?: {
+    attributes: boolean;
+    childList: boolean;
+    subtree: boolean;
+}): void;

package/hooks/useMutationObserver.js

@@ -1,21 +1,21 @@
-import { useRef, useLayoutEffect, useCallback } from 'react';
-const isRef = obj => obj !== null && typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current');
-const unRef = target => (isRef(target) ? target.current : target);
-// Options for the observer (which mutations to observe)
-const DEFAULT_OPTIONS = { attributes: true, childList: false, subtree: false };
-const useMutationObserver = (target, callback = () => { }, options = DEFAULT_OPTIONS) => {
-    const observer = useRef(null);
-    const disconnect = useCallback(() => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
-    const observe = useCallback(() => {
-        const targetElement = unRef(target);
-        observer.current = new MutationObserver(callback);
-        if (targetElement) {
-            observer.current.observe(targetElement, options);
-        }
-    }, [target]);
-    useLayoutEffect(() => {
-        observe();
-        return () => disconnect();
-    }, [disconnect, observe]);
-};
-export default useMutationObserver;
+import { useRef, useLayoutEffect, useCallback } from 'react';
+const isRef = obj => obj !== null && typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current');
+const unRef = target => (isRef(target) ? target.current : target);
+// Options for the observer (which mutations to observe)
+const DEFAULT_OPTIONS = { attributes: true, childList: false, subtree: false };
+const useMutationObserver = (target, callback = () => { }, options = DEFAULT_OPTIONS) => {
+    const observer = useRef(null);
+    const disconnect = useCallback(() => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
+    const observe = useCallback(() => {
+        const targetElement = unRef(target);
+        observer.current = new MutationObserver(callback);
+        if (targetElement) {
+            observer.current.observe(targetElement, options);
+        }
+    }, [target]);
+    useLayoutEffect(() => {
+        observe();
+        return () => disconnect();
+    }, [disconnect, observe]);
+};
+export default useMutationObserver;

package/hooks/useOnMount.d.ts

@@ -1 +1 @@
-export default function useOnMount(callback: any, deps: any): void;
+export default function useOnMount(callback: any, deps: any): void;

package/hooks/useOnMount.js

@@ -1,10 +1,10 @@
-import { useEffect, useRef } from 'react';
-export default function useOnMount(callback, deps) {
-    const componentJustMountedRef = useRef(true);
-    useEffect(() => {
-        if (componentJustMountedRef.current) {
-            return callback();
-        }
-        componentJustMountedRef.current = true;
-    }, deps);
-}
+import { useEffect, useRef } from 'react';
+export default function useOnMount(callback, deps) {
+    const componentJustMountedRef = useRef(true);
+    useEffect(() => {
+        if (componentJustMountedRef.current) {
+            return callback();
+        }
+        componentJustMountedRef.current = true;
+    }, deps);
+}

package/hooks/useOnScreen.d.ts

@@ -1,3 +1,3 @@
-export default function useOnScreen(ref: any, options?: {
-    rootMargin: string;
-}): boolean;
+export default function useOnScreen(ref: any, options?: {
+    rootMargin: string;
+}): boolean;

package/hooks/useOnScreen.js

@@ -1,19 +1,19 @@
-// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/14-useOnScreen/useOnScreen.js
-import { useEffect, useState } from 'react';
-export default function useOnScreen(ref, options = { rootMargin: '0px' }) {
-    const [isVisible, setIsVisible] = useState(false);
-    useEffect(() => {
-        if (!ref.current) {
-            return;
-        }
-        const observer = new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), options);
-        observer.observe(ref.current);
-        return () => {
-            if (!ref.current) {
-                return;
-            }
-            observer.unobserve(ref.current);
-        };
-    }, [ref.current, options]);
-    return isVisible;
-}
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/14-useOnScreen/useOnScreen.js
+import { useEffect, useState } from 'react';
+export default function useOnScreen(ref, options = { rootMargin: '0px' }) {
+    const [isVisible, setIsVisible] = useState(false);
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), options);
+        observer.observe(ref.current);
+        return () => {
+            if (!ref.current) {
+                return;
+            }
+            observer.unobserve(ref.current);
+        };
+    }, [ref.current, options]);
+    return isVisible;
+}

package/hooks/useOnlineStatus.d.ts

@@ -1 +1 @@
-export default function useOnlineStatus(): boolean;
+export default function useOnlineStatus(): boolean;

package/hooks/useOnlineStatus.js

@@ -1,9 +1,9 @@
-// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/26-useOnlineStatus/useOnlineStatus.js
-import { useState } from 'react';
-import useEvent from './useEvent';
-export default function useOnlineStatus() {
-    const [online, setOnline] = useState(navigator.onLine);
-    useEvent('online', () => setOnline(navigator.onLine), false, window);
-    useEvent('offline', () => setOnline(navigator.onLine), false, window);
-    return online;
-}
+// Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/26-useOnlineStatus/useOnlineStatus.js
+import { useState } from 'react';
+import useEvent from './useEvent';
+export default function useOnlineStatus() {
+    const [online, setOnline] = useState(navigator.onLine);
+    useEvent('online', () => setOnline(navigator.onLine), false, window);
+    useEvent('offline', () => setOnline(navigator.onLine), false, window);
+    return online;
+}

package/hooks/usePrevious.d.ts

@@ -1 +1,21 @@
-export default function usePrevious(state: any): any;
+/**
+ * The usePrevious hook allows to easily access state from previous component render.
+ * Instead of using a *React.ref* or a *useEffect*, this hook uses a *useState* internally to keep track of the
+ * previous state value.
+ *
+ * Quoting from the React documentation:
+ *
+ * *In most cases, you don’t need this:*
+ *
+ * - *If the value you need can be computed entirely from the current props or other state, remove*
+ * *that redundant state altogether. If you’re worried about recomputing too often, the useMemo Hook can help.*
+ * - *If you want to reset the entire component tree’s state, pass a different key to your component.*
+ * - *If you can, update all the relevant state in the event handlers.*
+ *
+ * @link https://react.dev/reference/react/useState#storing-information-from-previous-renders
+ *
+ * @param state The value of the current state to keep track of.
+ * @returns
+ */
+declare const usePrevious: <T>(state: T | null | undefined, isEqualFunc?: ((value: T | null | undefined, current: T | null | undefined) => any) | undefined) => T | null | undefined;
+export default usePrevious;