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

package/hooks/useInterval.js

@@ -1,6 +1,14 @@
 import { useEffect, useRef } from 'react';
 // See https://overreacted.io/making-setinterval-declarative-with-react-hooks/
-export default function useInterval(callback, delay) {
+/**
+ * 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 = useRef(null);
     const savedCallback = useRef(callback);
     useEffect(() => {
@@ -10,8 +18,9 @@ export default function useInterval(callback, delay) {
         const tick = () => savedCallback.current();
         if (typeof delay === 'number') {
             intervalRef.current = window.setInterval(tick, delay);
-            return () => window.clearInterval(intervalRef.current);
+            return () => { var _a; return window.clearInterval((_a = intervalRef.current) !== null && _a !== void 0 ? _a : undefined); };
         }
     }, [delay]);
     return intervalRef;
-}
+};
+export default useInterval;

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,3 +1,10 @@
 type KeyboardEventType = 'keyup' | 'keydown' | 'keypress';
+/**
+ * Custom hook to handle keyboard events.
+ *
+ * @param callback - The callback function to be executed when a keyboard event occurs.
+ * @param [eventTypes=['keydown']] - The types of keyboard events to listen for.
+ * @param [node=document] - The DOM node to attach the event listener to (defaults to document).
+ */
 declare const useKey: (callback: (event: KeyboardEvent) => void, eventTypes?: KeyboardEventType[], node?: Document) => void;
 export default useKey;

package/hooks/useKey.js

@@ -1,4 +1,11 @@
 import { useEffect } from 'react';
+/**
+ * Custom hook to handle keyboard events.
+ *
+ * @param callback - The callback function to be executed when a keyboard event occurs.
+ * @param [eventTypes=['keydown']] - The types of keyboard events to listen for.
+ * @param [node=document] - The DOM node to attach the event listener to (defaults to document).
+ */
 const useKey = (callback, eventTypes = ['keydown'], node = document) => {
     useEffect(() => {
         for (const eventType of eventTypes) {

package/hooks/useMergeRefs.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type ReactRef<T> = React.RefCallback<T> | React.MutableRefObject<T>;
+/**
+ * Custom hook to merge multiple React references into a single callback ref.
+ *
+ * @param refs - The React references to merge.
+ * @returns A memoized callback function to assign the merged references to a node.
+ */
+declare const useMergeRefs: <T>(...refs: (ReactRef<T> | null | undefined)[]) => (node: T | null) => void;
+export default useMergeRefs;

package/hooks/useMergeRefs.js

@@ -0,0 +1,46 @@
+// forked from https://github.com/chakra-ui/chakra-ui/blob/main/packages/hooks/use-merge-refs/src/index.ts
+import { useMemo } from 'react';
+/**
+ * Assigns a value to a React reference.
+ *
+ * @param ref - The React reference to assign the value to.
+ * @param value - The value to assign to the reference.
+ */
+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}'`);
+    }
+};
+/**
+ * Merges multiple React references into a single callback ref.
+ *
+ * @param refs - The React references to merge.
+ * @returns A callback function to assign the merged references to a node.
+ */
+const mergeRefs = (...refs) => {
+    return (node) => {
+        refs.forEach(ref => {
+            assignRef(ref, node);
+        });
+    };
+};
+/**
+ * Custom hook to merge multiple React references into a single callback ref.
+ *
+ * @param refs - The React references to merge.
+ * @returns A memoized callback function to assign the merged references to a node.
+ */
+const useMergeRefs = (...refs) => {
+    return useMemo(() => mergeRefs(...refs), refs);
+};
+export default useMergeRefs;

package/hooks/useMutationObserver.d.ts

@@ -1,6 +1,22 @@
+import { type MutableRefObject } from 'react';
+export type Options = {
+    attributes?: boolean;
+    childList?: boolean;
+    subtree?: boolean;
+};
+/**
+ * Custom hook to observe mutations on a target element.
+ *
+ * @param {HTMLElement | MutableRefObject<HTMLElement | null> | null} target - The element or ref to observe.
+ * @param {MutationCallback | undefined} callback - The callback function to execute when mutations occur.
+ * @param {object} options - Options to configure the MutationObserver.
+ * @param {boolean} options.attributes - Set to true if attribute mutations should be observed.
+ * @param {boolean} options.childList - Set to true if mutations to target's children should be observed.
+ * @param {boolean} options.subtree - Set to true if mutations to target's descendants should be observed.
+ */
+declare const useMutationObserver: (target: HTMLElement | MutableRefObject<HTMLElement | null> | null, callback?: MutationCallback | undefined, 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,18 +1,34 @@
 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);
+import noop from 'lodash/fp/noop';
 // 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 DEFAULT_OPTIONS = {
+    attributes: true,
+    childList: false,
+    subtree: false,
+};
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const isRef = (obj) => obj !== null && typeof obj === 'object' && Object.prototype.hasOwnProperty.call(obj, 'current');
+const unRef = (target) => isRef(target) ? target.current : target;
+/**
+ * Custom hook to observe mutations on a target element.
+ *
+ * @param {HTMLElement | MutableRefObject<HTMLElement | null> | null} target - The element or ref to observe.
+ * @param {MutationCallback | undefined} callback - The callback function to execute when mutations occur.
+ * @param {object} options - Options to configure the MutationObserver.
+ * @param {boolean} options.attributes - Set to true if attribute mutations should be observed.
+ * @param {boolean} options.childList - Set to true if mutations to target's children should be observed.
+ * @param {boolean} options.subtree - Set to true if mutations to target's descendants should be observed.
+ */
+const useMutationObserver = (target, callback = noop, 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 = new MutationObserver(callback);
             observer.current.observe(targetElement, options);
         }
-    }, [target]);
+    }, [callback, options, target]);
     useLayoutEffect(() => {
         observe();
         return () => disconnect();

package/hooks/useOnMount.d.ts

@@ -1 +1,9 @@
-export default function useOnMount(callback: any, deps: any): void;
+import { type DependencyList } from 'react';
+/**
+ * Custom hook to execute a callback function only on component mount.
+ *
+ * @param callback - The callback function to be executed on mount.
+ * @param deps - The dependencies array for the useEffect hook.
+ */
+declare const useOnMount: (callback: () => void, deps: DependencyList) => void;
+export default useOnMount;

package/hooks/useOnMount.js

@@ -1,10 +1,17 @@
 import { useEffect, useRef } from 'react';
-export default function useOnMount(callback, deps) {
+/**
+ * Custom hook to execute a callback function only on component mount.
+ *
+ * @param callback - The callback function to be executed on mount.
+ * @param deps - The dependencies array for the useEffect hook.
+ */
+const useOnMount = (callback, deps) => {
     const componentJustMountedRef = useRef(true);
     useEffect(() => {
         if (componentJustMountedRef.current) {
+            componentJustMountedRef.current = false;
             return callback();
         }
-        componentJustMountedRef.current = true;
     }, deps);
-}
+};
+export default useOnMount;

package/hooks/useOnScreen.d.ts

@@ -1,3 +1,18 @@
-export default function useOnScreen(ref: any, options?: {
-    rootMargin: string;
-}): boolean;
+import { type RefObject } from 'react';
+export type UseOnScreen = (ref: RefObject<HTMLElement>, options?: {
+    rootMargin?: string;
+    threshold?: number | number[];
+}) => boolean;
+/**
+ * Custom React hook to detect whether an element is within the viewport.
+ *
+ * @param {RefObject<HTMLElement>} ref - Reference object for the target element to observe.
+ * @param {object} [options] - Options for configuring the IntersectionObserver.
+ * @param {string} [options.rootMargin='0px'] - Margin around the root (viewport) to track intersections.
+ * @param {number | number[]} [options.threshold] - A single threshold value or an array of threshold values
+ *        which indicate the percentage of the target element's visibility needed to trigger the callback.
+ *
+ * @returns {boolean} - Boolean value indicating whether the target element is currently visible in the viewport.
+ */
+declare const useOnScreen: UseOnScreen;
+export default useOnScreen;

package/hooks/useOnScreen.js

@@ -1,19 +1,41 @@
 // 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' }) {
+/**
+ * Custom React hook to detect whether an element is within the viewport.
+ *
+ * @param {RefObject<HTMLElement>} ref - Reference object for the target element to observe.
+ * @param {object} [options] - Options for configuring the IntersectionObserver.
+ * @param {string} [options.rootMargin='0px'] - Margin around the root (viewport) to track intersections.
+ * @param {number | number[]} [options.threshold] - A single threshold value or an array of threshold values
+ *        which indicate the percentage of the target element's visibility needed to trigger the callback.
+ *
+ * @returns {boolean} - Boolean value indicating whether the target element is currently visible in the viewport.
+ */
+const useOnScreen = (ref, options = { rootMargin: '0px' }) => {
     const [isVisible, setIsVisible] = useState(false);
     useEffect(() => {
         if (!ref.current) {
             return;
         }
-        const observer = new IntersectionObserver(([entry]) => setIsVisible(entry.isIntersecting), options);
+        /**
+         * Callback function for IntersectionObserver.
+         *
+         * @param {IntersectionObserverEntry[]} entries - An array of IntersectionObserverEntry objects describing
+         * the intersection between the target element and its root container at a specific moment of transition.
+         */
+        const callback = ([entry]) => setIsVisible(entry.isIntersecting);
+        // Create a new IntersectionObserver instance
+        const observer = new IntersectionObserver(callback, options);
+        // Start observing the target element
         observer.observe(ref.current);
+        // Cleanup function to stop observing the target element when the component unmounts
         return () => {
             if (!ref.current) {
                 return;
             }
             observer.unobserve(ref.current);
         };
-    }, [ref.current, options]);
+    }, [ref, options]);
     return isVisible;
-}
+};
+export default useOnScreen;

package/hooks/useOnlineStatus.d.ts

@@ -1 +1,7 @@
-export default function useOnlineStatus(): boolean;
+/**
+ * Custom hook to track online/offline status of the browser.
+ *
+ * @returns Returns true if the browser is online, otherwise false.
+ */
+declare const useOnlineStatus: () => boolean;
+export default useOnlineStatus;

package/hooks/useOnlineStatus.js

@@ -1,9 +1,15 @@
 // 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() {
+/**
+ * Custom hook to track online/offline status of the browser.
+ *
+ * @returns Returns true if the browser is online, otherwise false.
+ */
+const useOnlineStatus = () => {
     const [online, setOnline] = useState(navigator.onLine);
     useEvent('online', () => setOnline(navigator.onLine), false, window);
     useEvent('offline', () => setOnline(navigator.onLine), false, window);
     return online;
-}
+};
+export default useOnlineStatus;

package/hooks/usePostMessage.d.ts

@@ -0,0 +1,32 @@
+export type RemoteAction = {
+    /**
+     * The RemoteAction is inspired by a plain redux action where the type is the
+     * action identifier.
+     *
+     * @example
+     *
+     * ```json
+     * {
+     *      "type": "EVENT_SET_VISIBLE_WIDGETS",
+     *      "payload": ["foo", "bar"],
+     * }
+     * ```
+     */
+    type: string;
+    /**
+     * The action payload itself.
+     */
+    payload: any;
+};
+/**
+ * A custom hook to ease the exchange of postMessage events between iframes and the parent window.
+ *
+ * @param messagePrefix a custom prefix to limit the event listener for these events
+ * @param onReceiveMessage a callback function triggered when a message is received
+ * @returns
+ */
+declare const usePostMessage: (messagePrefix: string, onReceiveMessage?: ((eventData: any) => void) | undefined) => {
+    sendMessageToParent: (message: RemoteAction) => void;
+    sendMessageToWidget: (message: RemoteAction, targetFrames: HTMLIFrameElement | HTMLIFrameElement[]) => void;
+};
+export default usePostMessage;

package/hooks/usePostMessage.js

@@ -0,0 +1,51 @@
+import { useEffect } from 'react';
+import noop from 'lodash/fp/noop';
+import isEmpty from 'lodash/fp/isEmpty';
+import isArray from 'lodash/fp/isArray';
+/**
+ * A custom hook to ease the exchange of postMessage events between iframes and the parent window.
+ *
+ * @param messagePrefix a custom prefix to limit the event listener for these events
+ * @param onReceiveMessage a callback function triggered when a message is received
+ * @returns
+ */
+const usePostMessage = (messagePrefix, onReceiveMessage) => {
+    const sendMessageToParent = (message) => {
+        const referrer = document.referrer;
+        if (referrer) {
+            window.parent.postMessage(message, referrer);
+        }
+    };
+    const sendMessageToWidget = (message, targetFrames) => {
+        if (!targetFrames || isEmpty(targetFrames)) {
+            return;
+        }
+        const frames = isArray(targetFrames) ? [...targetFrames] : [targetFrames];
+        [...frames].forEach(target => {
+            const contentWindow = target.contentWindow;
+            if (contentWindow) {
+                contentWindow.postMessage(message, '*');
+            }
+        });
+    };
+    const receiveMessage = (event, callback) => {
+        const actionType = event.data.type;
+        if (!actionType) {
+            return;
+        }
+        console.log(event);
+        if (actionType.startsWith(messagePrefix)) {
+            callback(event.data);
+        }
+    };
+    useEffect(() => {
+        const listenerCallback = (event) => receiveMessage(event, onReceiveMessage || noop);
+        window.addEventListener('message', listenerCallback, false);
+        return () => window.removeEventListener('message', listenerCallback, false);
+    }, []);
+    return {
+        sendMessageToParent,
+        sendMessageToWidget,
+    };
+};
+export default usePostMessage;

package/hooks/usePrevious.d.ts

@@ -17,5 +17,5 @@
  * @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;
+declare const usePrevious: <T>(state: T, isEqualFunc?: ((value: T | null | undefined, current: T | null | undefined) => any) | undefined) => T;
 export default usePrevious;

package/hooks/usePrevious.js

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import isEqual from 'lodash/fp/isEqual';
 // Based on the react beta docs, we avoid using an effect here but
 // use another state to store the previous value to compare to.
@@ -23,12 +23,11 @@ import isEqual from 'lodash/fp/isEqual';
  * @returns
  */
 const usePrevious = (state, isEqualFunc) => {
-    const prevRef = useRef();
-    const [previousState, setPreviousState] = useState(prevRef.current);
-    if (isEqualFunc ? !isEqualFunc(state, prevRef.current) : !isEqual(state, prevRef.current)) {
-        setPreviousState(prevRef.current);
-        prevRef.current = state;
+    const ref = useRef({ target: state, previous: state });
+    if (isEqualFunc ? !isEqualFunc(state, ref.current.target) : !isEqual(state, ref.current.target)) {
+        ref.current.previous = ref.current.target;
+        ref.current.target = state;
     }
-    return previousState;
+    return ref.current.previous;
 };
 export default usePrevious;

package/hooks/useRenderCount.d.ts

@@ -1 +1,2 @@
-export default function useRenderCount(): number;
+declare const useRenderCount: () => number;
+export default useRenderCount;

package/hooks/useRenderCount.js

@@ -1,9 +1,10 @@
 // Inspired by https://github.com/WebDevSimplified/useful-custom-react-hooks/blob/main/src/27-useRenderCount/useRenderCount.js
 import { useEffect, useRef } from 'react';
-export default function useRenderCount() {
+const useRenderCount = () => {
     const count = useRef(1);
     useEffect(() => {
         count.current++;
     });
     return count.current;
-}
+};
+export default useRenderCount;

package/hooks/useResizeObserver.d.ts

@@ -1,3 +1,10 @@
 import { type MutableRefObject } from 'react';
-declare const useResizeObserver: () => [MutableRefObject<HTMLDivElement | null>, ResizeObserverEntry | null];
+/**
+ * Custom hook for observing element resize.
+ * @returns
+ */
+declare const useResizeObserver: <T extends HTMLElement = HTMLDivElement>() => [MutableRefObject<T | null>, ResizeObserverEntry | null, {
+    blockSize: number | undefined;
+    inlineSize: number | undefined;
+}];
 export default useResizeObserver;

package/hooks/useResizeObserver.js

@@ -1,7 +1,12 @@
 // inspired from https://tobbelindstrom.com/blog/resize-observer-hook/
 import { useRef, useLayoutEffect, useState, useCallback } from 'react';
+/**
+ * Custom hook for observing element resize.
+ * @returns
+ */
 const useResizeObserver = () => {
-    const [observerEntry, setObserverEntry] = useState({});
+    var _a, _b, _c, _d;
+    const [observerEntry, setObserverEntry] = useState(null);
     const nodeRef = useRef(null);
     const observer = useRef(null);
     const disconnect = useCallback(() => { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }, []);
@@ -15,6 +20,13 @@ const useResizeObserver = () => {
         observe();
         return () => disconnect();
     }, [disconnect, observe]);
-    return [nodeRef, observerEntry];
+    return [
+        nodeRef,
+        observerEntry,
+        {
+            blockSize: (_b = (_a = observerEntry === null || observerEntry === void 0 ? void 0 : observerEntry.borderBoxSize) === null || _a === void 0 ? void 0 : _a.at(0)) === null || _b === void 0 ? void 0 : _b.blockSize,
+            inlineSize: (_d = (_c = observerEntry === null || observerEntry === void 0 ? void 0 : observerEntry.borderBoxSize) === null || _c === void 0 ? void 0 : _c.at(0)) === null || _d === void 0 ? void 0 : _d.inlineSize,
+        },
+    ];
 };
 export default useResizeObserver;

package/hooks/useScrollPosition.d.ts

@@ -1,2 +1,10 @@
+import { RefObject } from 'react';
+export type TargetType = Window | Document | HTMLBodyElement | HTMLElement | Element | React.ReactElement | RefObject<HTMLElement>;
+/**
+ * A custom hook that tracks the scroll position of a target element.
+ *
+ * @param target The target element for scroll position tracking.
+ * @returns The current scroll position of the target element.
+ */
+declare const useScrollPosition: (target?: TargetType) => number;
 export default useScrollPosition;
-declare function useScrollPosition(target: any): number;

package/hooks/useScrollPosition.js

@@ -1,13 +1,19 @@
 import { useState, useEffect } from 'react';
-const getModuleContent = () => document.getElementsByClassName('module-content')[0];
-// "target" can be "window", "document.body", a "ref" or undefiend
+const getModuleContent = () => document.querySelector('.module-content > .scrollbar-view');
+// "target" can be "window", "document.body", a "ref" or undefined
 // where in later case the module-content is taken as default
-const useScrollPosition = target => {
-    const [targetElement, setTargetElement] = useState();
+/**
+ * A custom hook that tracks the scroll position of a target element.
+ *
+ * @param target The target element for scroll position tracking.
+ * @returns The current scroll position of the target element.
+ */
+const useScrollPosition = (target) => {
+    const [targetElement, setTargetElement] = useState(null);
     const [scrollPosition, setScrollPosition] = useState(0);
     useEffect(() => {
         let checkForModuleContent = null;
-        // In cae the target is undefined it might be that the module-content is
+        // In case the target is undefined it might be that the module-content is
         // not rendered yet, hence check periodically for the existence in the DOM
         if (!target) {
             checkForModuleContent = setInterval(() => {
@@ -21,7 +27,7 @@ const useScrollPosition = target => {
             clearInterval(checkForModuleContent);
         }
         // In case the target is a "ref" - set the targetElement when current is defined
-        else if ((target === null || target === void 0 ? void 0 : target.current) && !checkForModuleContent) {
+        else if (target instanceof Object && 'current' in target && target.current) {
             setTargetElement(target.current);
         }
         // In case it's "window" or "document.body"
@@ -37,7 +43,7 @@ const useScrollPosition = target => {
     const handleScroll = () => {
         requestAnimationFrame(() => {
             if (targetElement === window) {
-                setScrollPosition(targetElement.scrollY);
+                setScrollPosition(window.scrollY);
             }
             else {
                 setScrollPosition(targetElement.scrollTop);
@@ -45,11 +51,11 @@ const useScrollPosition = target => {
         });
     };
     useEffect(() => {
-        if (targetElement) {
+        if (targetElement instanceof EventTarget) {
             targetElement.addEventListener('scroll', handleScroll);
         }
         return () => {
-            if (targetElement) {
+            if (targetElement instanceof EventTarget) {
                 targetElement.removeEventListener('scroll', handleScroll);
             }
         };

package/hooks/useStateWithValidation.d.ts

@@ -1 +1,12 @@
-export default function useStateWithValidation(validationFn: any, initialValue: any): any[];
+export type ValidationFunction<T> = (value: T) => boolean;
+/**
+ * A custom hook that provides a state with validation.
+ *
+ * @param validationFn The function used to validate the state value.
+ * @param initialValue The initial value of the state.
+ *
+ * @returns A tuple containing the state value, a function to update the state
+ *          with validation, and a boolean indicating whether the current state value is valid.
+ */
+declare const useStateWithValidation: <T>(validationFn: ValidationFunction<T>, initialValue: T) => readonly [T, (nextState: T | ((prevState: T) => T)) => void, boolean];
+export default useStateWithValidation;

package/hooks/useStateWithValidation.js

@@ -1,11 +1,25 @@
 import { useCallback, useState } from 'react';
-export default function useStateWithValidation(validationFn, initialValue) {
+/**
+ * A custom hook that provides a state with validation.
+ *
+ * @param validationFn The function used to validate the state value.
+ * @param initialValue The initial value of the state.
+ *
+ * @returns A tuple containing the state value, a function to update the state
+ *          with validation, and a boolean indicating whether the current state value is valid.
+ */
+const useStateWithValidation = (validationFn, initialValue) => {
     const [state, setState] = useState(initialValue);
     const [isValid, setIsValid] = useState(() => validationFn(state));
-    const onChange = useCallback(nextState => {
+    // Callback function to update the state with validation
+    const onChange = useCallback((nextState) => {
+        // Get the next value based on the provided nextState argument
         const value = typeof nextState === 'function' ? nextState(state) : nextState;
+        // Update the state with the next value
         setState(value);
+        // Update the isValid state based on the validation function
         setIsValid(validationFn(value));
-    }, [validationFn]);
+    }, [validationFn, state]);
     return [state, onChange, isValid];
-}
+};
+export default useStateWithValidation;

package/hooks/useStorage.d.ts

@@ -1,2 +1,22 @@
-export function useLocalStorage(key: any, defaultValue: any): any[];
-export function useSessionStorage(key: any, defaultValue: any): any[];
+/// <reference types="react" />
+export type StorageType = 'localStorage' | 'sessionStorage';
+/**
+ * A custom hook for managing state stored in localStorage.
+ *
+ * @param key The key under which the state will be stored in localStorage.
+ * @param defaultValue The initial value for the state, or a function that returns the initial value.
+ *
+ * @returns A tuple containing the state value, a function to update the state, and a function
+ *          to remove the value from localStorage.
+ */
+export declare const useLocalStorage: <T>(key: string, defaultValue: T | (() => T)) => [T | undefined, import("react").Dispatch<import("react").SetStateAction<T | undefined>>, () => void];
+/**
+ * A custom hook for managing state stored in sessionStorage.
+ *
+ * @param key The key under which the state will be stored in sessionStorage.
+ * @param defaultValue The initial value for the state, or a function that returns the initial value.
+ *
+ * @returns A tuple containing the state value, a function to update the state,
+ *          and a function to remove the value from sessionStorage.
+ */
+export declare const useSessionStorage: <T>(key: string, defaultValue: T | (() => T)) => [T | undefined, import("react").Dispatch<import("react").SetStateAction<T | undefined>>, () => void];