@opensite/hooks 0.1.0

package/dist/core/useDebounceCallback.js

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+export function useDebounceCallback(callback, delay, options = {}) {
+    const callbackRef = useRef(callback);
+    const timeoutRef = useRef(null);
+    const maxTimeoutRef = useRef(null);
+    const lastArgsRef = useRef(null);
+    const leading = options.leading ?? false;
+    const trailing = options.trailing ?? true;
+    const maxWait = options.maxWait;
+    const wait = Math.max(0, delay);
+    useIsomorphicLayoutEffect(() => {
+        callbackRef.current = callback;
+    }, [callback]);
+    const clearTimers = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        if (maxTimeoutRef.current) {
+            clearTimeout(maxTimeoutRef.current);
+            maxTimeoutRef.current = null;
+        }
+    }, []);
+    const invoke = useCallback(() => {
+        if (!lastArgsRef.current) {
+            return;
+        }
+        const args = lastArgsRef.current;
+        lastArgsRef.current = null;
+        callbackRef.current(...args);
+    }, []);
+    const debouncedCallback = useCallback((...args) => {
+        lastArgsRef.current = args;
+        const shouldInvokeLeading = leading && timeoutRef.current === null && maxTimeoutRef.current === null;
+        if (shouldInvokeLeading) {
+            invoke();
+        }
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (trailing) {
+            timeoutRef.current = setTimeout(() => {
+                timeoutRef.current = null;
+                if (lastArgsRef.current) {
+                    invoke();
+                }
+                if (maxTimeoutRef.current) {
+                    clearTimeout(maxTimeoutRef.current);
+                    maxTimeoutRef.current = null;
+                }
+            }, wait);
+        }
+        if (maxWait !== undefined && maxWait !== null && trailing) {
+            if (!maxTimeoutRef.current) {
+                const maxDelay = Math.max(0, maxWait);
+                maxTimeoutRef.current = setTimeout(() => {
+                    maxTimeoutRef.current = null;
+                    if (timeoutRef.current) {
+                        clearTimeout(timeoutRef.current);
+                        timeoutRef.current = null;
+                    }
+                    if (lastArgsRef.current) {
+                        invoke();
+                    }
+                }, maxDelay);
+            }
+        }
+    }, [invoke, leading, trailing, maxWait, wait]);
+    const cancel = useCallback(() => {
+        clearTimers();
+        lastArgsRef.current = null;
+    }, [clearTimers]);
+    const flush = useCallback(() => {
+        if (!lastArgsRef.current) {
+            return;
+        }
+        clearTimers();
+        invoke();
+    }, [clearTimers, invoke]);
+    useEffect(() => () => cancel(), [cancel]);
+    return { debouncedCallback, cancel, flush };
+}

package/dist/core/useDebounceValue.cjs

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+import { useDebounceCallback } from "./useDebounceCallback.js";
+export function useDebounceValue(value, delay, options) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    const { debouncedCallback, cancel } = useDebounceCallback((next) => {
+        setDebouncedValue(next);
+    }, delay, options);
+    useEffect(() => {
+        debouncedCallback(value);
+    }, [debouncedCallback, value]);
+    useEffect(() => () => cancel(), [cancel]);
+    return debouncedValue;
+}

package/dist/core/useDebounceValue.d.ts

@@ -0,0 +1,2 @@
+import { DebounceOptions } from "./useDebounceCallback.js";
+export declare function useDebounceValue<T>(value: T, delay: number, options?: DebounceOptions): T;

package/dist/core/useDebounceValue.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+import { useDebounceCallback } from "./useDebounceCallback.js";
+export function useDebounceValue(value, delay, options) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+    const { debouncedCallback, cancel } = useDebounceCallback((next) => {
+        setDebouncedValue(next);
+    }, delay, options);
+    useEffect(() => {
+        debouncedCallback(value);
+    }, [debouncedCallback, value]);
+    useEffect(() => () => cancel(), [cancel]);
+    return debouncedValue;
+}

package/dist/core/useEventListener.cjs

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+const isRefObject = (value) => !!value && typeof value === "object" && "current" in value;
+export function useEventListener(eventName, handler, element, options) {
+    const savedHandler = useRef(handler);
+    useIsomorphicLayoutEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        const isWindow = typeof Window !== "undefined" && element instanceof Window;
+        const isDocument = typeof Document !== "undefined" && element instanceof Document;
+        const target = element === undefined
+            ? typeof window !== "undefined"
+                ? window
+                : null
+            : isWindow || isDocument
+                ? element
+                : typeof HTMLElement !== "undefined" && element instanceof HTMLElement
+                    ? element
+                    : isRefObject(element)
+                        ? element.current
+                        : null;
+        if (!target?.addEventListener) {
+            return;
+        }
+        const listener = (event) => {
+            const currentHandler = savedHandler.current;
+            if (typeof currentHandler === "function") {
+                currentHandler(event);
+            }
+            else {
+                currentHandler.handleEvent(event);
+            }
+        };
+        target.addEventListener(eventName, listener, options);
+        return () => {
+            target.removeEventListener(eventName, listener, options);
+        };
+    }, [eventName, element, options]);
+}

package/dist/core/useEventListener.d.ts

@@ -0,0 +1,6 @@
+type ElementRef = React.RefObject<HTMLElement>;
+export declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: Window, options?: AddEventListenerOptions | boolean): void;
+export declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document, options?: AddEventListenerOptions | boolean): void;
+export declare function useEventListener<K extends keyof HTMLElementEventMap>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: ElementRef, options?: AddEventListenerOptions | boolean): void;
+export declare function useEventListener<K extends keyof HTMLElementEventMap>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: HTMLElement, options?: AddEventListenerOptions | boolean): void;
+export {};

package/dist/core/useEventListener.js

@@ -0,0 +1,40 @@
+import { useEffect, useRef } from "react";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+const isRefObject = (value) => !!value && typeof value === "object" && "current" in value;
+export function useEventListener(eventName, handler, element, options) {
+    const savedHandler = useRef(handler);
+    useIsomorphicLayoutEffect(() => {
+        savedHandler.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        const isWindow = typeof Window !== "undefined" && element instanceof Window;
+        const isDocument = typeof Document !== "undefined" && element instanceof Document;
+        const target = element === undefined
+            ? typeof window !== "undefined"
+                ? window
+                : null
+            : isWindow || isDocument
+                ? element
+                : typeof HTMLElement !== "undefined" && element instanceof HTMLElement
+                    ? element
+                    : isRefObject(element)
+                        ? element.current
+                        : null;
+        if (!target?.addEventListener) {
+            return;
+        }
+        const listener = (event) => {
+            const currentHandler = savedHandler.current;
+            if (typeof currentHandler === "function") {
+                currentHandler(event);
+            }
+            else {
+                currentHandler.handleEvent(event);
+            }
+        };
+        target.addEventListener(eventName, listener, options);
+        return () => {
+            target.removeEventListener(eventName, listener, options);
+        };
+    }, [eventName, element, options]);
+}

package/dist/core/useHover.cjs

@@ -0,0 +1,14 @@
+import { useCallback, useState } from "react";
+import { useEventListener } from "./useEventListener.js";
+export function useHover(ref) {
+    const [isHovered, setIsHovered] = useState(false);
+    const handleEnter = useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    const handleLeave = useCallback(() => {
+        setIsHovered(false);
+    }, []);
+    useEventListener("pointerenter", handleEnter, ref);
+    useEventListener("pointerleave", handleLeave, ref);
+    return isHovered;
+}

package/dist/core/useHover.d.ts

@@ -0,0 +1 @@
+export declare function useHover<T extends HTMLElement>(ref: React.RefObject<T>): boolean;

package/dist/core/useHover.js

@@ -0,0 +1,14 @@
+import { useCallback, useState } from "react";
+import { useEventListener } from "./useEventListener.js";
+export function useHover(ref) {
+    const [isHovered, setIsHovered] = useState(false);
+    const handleEnter = useCallback(() => {
+        setIsHovered(true);
+    }, []);
+    const handleLeave = useCallback(() => {
+        setIsHovered(false);
+    }, []);
+    useEventListener("pointerenter", handleEnter, ref);
+    useEventListener("pointerleave", handleLeave, ref);
+    return isHovered;
+}

package/dist/core/useIsClient.cjs

@@ -0,0 +1,8 @@
+import { useEffect, useState } from "react";
+export function useIsClient() {
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    return isClient;
+}

package/dist/core/useIsClient.d.ts

@@ -0,0 +1 @@
+export declare function useIsClient(): boolean;

package/dist/core/useIsClient.js

@@ -0,0 +1,8 @@
+import { useEffect, useState } from "react";
+export function useIsClient() {
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    return isClient;
+}

package/dist/core/useIsomorphicLayoutEffect.cjs

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from "react";
+export const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/dist/core/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useLayoutEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/dist/core/useIsomorphicLayoutEffect.js

@@ -0,0 +1,2 @@
+import { useEffect, useLayoutEffect } from "react";
+export const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;

package/dist/core/useLocalStorage.cjs

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useLocalStorage(key, initialValue, options = {}) {
+    const { initializeWithValue = true, serialize = JSON.stringify, deserialize = JSON.parse, listenToStorageChanges = true, } = options;
+    const initialValueRef = useRef(initialValue);
+    const readValue = useCallback(() => {
+        if (typeof window === "undefined") {
+            return initialValueRef.current;
+        }
+        if (!initializeWithValue) {
+            return initialValueRef.current;
+        }
+        try {
+            const item = window.localStorage.getItem(key);
+            return item ? deserialize(item) : initialValueRef.current;
+        }
+        catch {
+            return initialValueRef.current;
+        }
+    }, [deserialize, initializeWithValue, key]);
+    const [storedValue, setStoredValue] = useState(() => readValue());
+    const setValue = useCallback((value) => {
+        setStoredValue((current) => {
+            const valueToStore = typeof value === "function"
+                ? value(current)
+                : value;
+            if (typeof window !== "undefined") {
+                try {
+                    window.localStorage.setItem(key, serialize(valueToStore));
+                }
+                catch {
+                    // Ignore write errors (quota/security)
+                }
+            }
+            return valueToStore;
+        });
+    }, [key, serialize]);
+    useEffect(() => {
+        setStoredValue(readValue());
+    }, [readValue]);
+    useEffect(() => {
+        if (typeof window === "undefined" || !listenToStorageChanges) {
+            return;
+        }
+        const handleStorageChange = (event) => {
+            if (event.key !== key) {
+                return;
+            }
+            if (event.newValue === null) {
+                setStoredValue(initialValueRef.current);
+                return;
+            }
+            try {
+                setStoredValue(deserialize(event.newValue));
+            }
+            catch {
+                setStoredValue(initialValueRef.current);
+            }
+        };
+        window.addEventListener("storage", handleStorageChange);
+        return () => window.removeEventListener("storage", handleStorageChange);
+    }, [deserialize, key, listenToStorageChanges]);
+    return [storedValue, setValue];
+}

package/dist/core/useLocalStorage.d.ts

@@ -0,0 +1,9 @@
+export interface StorageOptions<T> {
+    initializeWithValue?: boolean;
+    serialize?: (value: T) => string;
+    deserialize?: (value: string) => T;
+    listenToStorageChanges?: boolean;
+}
+type StoredSetter<T> = (value: T | ((current: T) => T)) => void;
+export declare function useLocalStorage<T>(key: string, initialValue: T, options?: StorageOptions<T>): [T, StoredSetter<T>];
+export {};

package/dist/core/useLocalStorage.js

@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useLocalStorage(key, initialValue, options = {}) {
+    const { initializeWithValue = true, serialize = JSON.stringify, deserialize = JSON.parse, listenToStorageChanges = true, } = options;
+    const initialValueRef = useRef(initialValue);
+    const readValue = useCallback(() => {
+        if (typeof window === "undefined") {
+            return initialValueRef.current;
+        }
+        if (!initializeWithValue) {
+            return initialValueRef.current;
+        }
+        try {
+            const item = window.localStorage.getItem(key);
+            return item ? deserialize(item) : initialValueRef.current;
+        }
+        catch {
+            return initialValueRef.current;
+        }
+    }, [deserialize, initializeWithValue, key]);
+    const [storedValue, setStoredValue] = useState(() => readValue());
+    const setValue = useCallback((value) => {
+        setStoredValue((current) => {
+            const valueToStore = typeof value === "function"
+                ? value(current)
+                : value;
+            if (typeof window !== "undefined") {
+                try {
+                    window.localStorage.setItem(key, serialize(valueToStore));
+                }
+                catch {
+                    // Ignore write errors (quota/security)
+                }
+            }
+            return valueToStore;
+        });
+    }, [key, serialize]);
+    useEffect(() => {
+        setStoredValue(readValue());
+    }, [readValue]);
+    useEffect(() => {
+        if (typeof window === "undefined" || !listenToStorageChanges) {
+            return;
+        }
+        const handleStorageChange = (event) => {
+            if (event.key !== key) {
+                return;
+            }
+            if (event.newValue === null) {
+                setStoredValue(initialValueRef.current);
+                return;
+            }
+            try {
+                setStoredValue(deserialize(event.newValue));
+            }
+            catch {
+                setStoredValue(initialValueRef.current);
+            }
+        };
+        window.addEventListener("storage", handleStorageChange);
+        return () => window.removeEventListener("storage", handleStorageChange);
+    }, [deserialize, key, listenToStorageChanges]);
+    return [storedValue, setValue];
+}

package/dist/core/useMap.cjs

@@ -0,0 +1,39 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+export function useMap(initialState) {
+    const [map, setMap] = useState(() => {
+        if (initialState instanceof Map) {
+            return new Map(initialState);
+        }
+        if (Array.isArray(initialState)) {
+            return new Map(initialState);
+        }
+        return new Map();
+    });
+    const mapRef = useRef(map);
+    useEffect(() => {
+        mapRef.current = map;
+    }, [map]);
+    const actions = useMemo(() => ({
+        set: (key, value) => {
+            setMap((prev) => {
+                const next = new Map(prev);
+                next.set(key, value);
+                return next;
+            });
+        },
+        setAll: (entries) => {
+            setMap(entries instanceof Map ? new Map(entries) : new Map(entries));
+        },
+        remove: (key) => {
+            setMap((prev) => {
+                const next = new Map(prev);
+                next.delete(key);
+                return next;
+            });
+        },
+        clear: () => setMap(new Map()),
+        get: (key) => mapRef.current.get(key),
+        has: (key) => mapRef.current.has(key),
+    }), []);
+    return [map, actions];
+}

package/dist/core/useMap.d.ts

@@ -0,0 +1,9 @@
+export interface MapActions<K, V> {
+    set: (key: K, value: V) => void;
+    setAll: (entries: Map<K, V> | [K, V][]) => void;
+    remove: (key: K) => void;
+    clear: () => void;
+    get: (key: K) => V | undefined;
+    has: (key: K) => boolean;
+}
+export declare function useMap<K, V>(initialState?: Map<K, V> | [K, V][]): [Map<K, V>, MapActions<K, V>];

package/dist/core/useMap.js

@@ -0,0 +1,39 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+export function useMap(initialState) {
+    const [map, setMap] = useState(() => {
+        if (initialState instanceof Map) {
+            return new Map(initialState);
+        }
+        if (Array.isArray(initialState)) {
+            return new Map(initialState);
+        }
+        return new Map();
+    });
+    const mapRef = useRef(map);
+    useEffect(() => {
+        mapRef.current = map;
+    }, [map]);
+    const actions = useMemo(() => ({
+        set: (key, value) => {
+            setMap((prev) => {
+                const next = new Map(prev);
+                next.set(key, value);
+                return next;
+            });
+        },
+        setAll: (entries) => {
+            setMap(entries instanceof Map ? new Map(entries) : new Map(entries));
+        },
+        remove: (key) => {
+            setMap((prev) => {
+                const next = new Map(prev);
+                next.delete(key);
+                return next;
+            });
+        },
+        clear: () => setMap(new Map()),
+        get: (key) => mapRef.current.get(key),
+        has: (key) => mapRef.current.has(key),
+    }), []);
+    return [map, actions];
+}

package/dist/core/useMediaQuery.cjs

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+export function useMediaQuery(query, options = {}) {
+    const [matches, setMatches] = useState(() => {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return options.defaultValue ?? false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    useEffect(() => {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return;
+        }
+        const mediaQueryList = window.matchMedia(query);
+        const handler = (event) => {
+            setMatches(event.matches);
+        };
+        setMatches(mediaQueryList.matches);
+        if (mediaQueryList.addEventListener) {
+            mediaQueryList.addEventListener("change", handler);
+            return () => mediaQueryList.removeEventListener("change", handler);
+        }
+        mediaQueryList.addListener(handler);
+        return () => mediaQueryList.removeListener(handler);
+    }, [query]);
+    return matches;
+}

package/dist/core/useMediaQuery.d.ts

@@ -0,0 +1,4 @@
+export interface UseMediaQueryOptions {
+    defaultValue?: boolean;
+}
+export declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): boolean;

package/dist/core/useMediaQuery.js

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+export function useMediaQuery(query, options = {}) {
+    const [matches, setMatches] = useState(() => {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return options.defaultValue ?? false;
+        }
+        return window.matchMedia(query).matches;
+    });
+    useEffect(() => {
+        if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+            return;
+        }
+        const mediaQueryList = window.matchMedia(query);
+        const handler = (event) => {
+            setMatches(event.matches);
+        };
+        setMatches(mediaQueryList.matches);
+        if (mediaQueryList.addEventListener) {
+            mediaQueryList.addEventListener("change", handler);
+            return () => mediaQueryList.removeEventListener("change", handler);
+        }
+        mediaQueryList.addListener(handler);
+        return () => mediaQueryList.removeListener(handler);
+    }, [query]);
+    return matches;
+}

package/dist/core/useOnClickOutside.cjs

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+export function useOnClickOutside(ref, handler, eventType = "mousedown", options) {
+    const handlerRef = useRef(handler);
+    useEffect(() => {
+        handlerRef.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        if (typeof document === "undefined") {
+            return;
+        }
+        const refs = Array.isArray(ref) ? ref : [ref];
+        const listener = (event) => {
+            const target = event.target;
+            if (typeof Node === "undefined" || !(target instanceof Node)) {
+                return;
+            }
+            const clickedInside = refs.some((currentRef) => {
+                const node = currentRef.current;
+                return node ? node.contains(target) : false;
+            });
+            if (!clickedInside) {
+                handlerRef.current(event);
+            }
+        };
+        document.addEventListener(eventType, listener, options);
+        return () => {
+            document.removeEventListener(eventType, listener, options);
+        };
+    }, [eventType, options, ref]);
+}

package/dist/core/useOnClickOutside.d.ts

@@ -0,0 +1,3 @@
+type PossibleRef<T extends HTMLElement> = React.RefObject<T>;
+export declare function useOnClickOutside<T extends HTMLElement>(ref: PossibleRef<T> | Array<PossibleRef<T>>, handler: (event: MouseEvent | TouchEvent | PointerEvent) => void, eventType?: "mousedown" | "mouseup" | "click" | "touchstart" | "pointerdown", options?: AddEventListenerOptions | boolean): void;
+export {};

package/dist/core/useOnClickOutside.js

@@ -0,0 +1,30 @@
+import { useEffect, useRef } from "react";
+export function useOnClickOutside(ref, handler, eventType = "mousedown", options) {
+    const handlerRef = useRef(handler);
+    useEffect(() => {
+        handlerRef.current = handler;
+    }, [handler]);
+    useEffect(() => {
+        if (typeof document === "undefined") {
+            return;
+        }
+        const refs = Array.isArray(ref) ? ref : [ref];
+        const listener = (event) => {
+            const target = event.target;
+            if (typeof Node === "undefined" || !(target instanceof Node)) {
+                return;
+            }
+            const clickedInside = refs.some((currentRef) => {
+                const node = currentRef.current;
+                return node ? node.contains(target) : false;
+            });
+            if (!clickedInside) {
+                handlerRef.current(event);
+            }
+        };
+        document.addEventListener(eventType, listener, options);
+        return () => {
+            document.removeEventListener(eventType, listener, options);
+        };
+    }, [eventType, options, ref]);
+}

package/dist/core/usePrevious.cjs

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from "react";
+export function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}

package/dist/core/usePrevious.d.ts

@@ -0,0 +1 @@
+export declare function usePrevious<T>(value: T): T | undefined;

package/dist/core/usePrevious.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from "react";
+export function usePrevious(value) {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}