@koine/react 2.0.0-beta.73 → 2.0.0-beta.75

package/package.json

@@ -2,8 +2,8 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.73",
-    "@koine/utils": "2.0.0-beta.73"
+    "@koine/dom": "2.0.0-beta.75",
+    "@koine/utils": "2.0.0-beta.75"
   },
   "peerDependencies": {
     "@kuus/yup": "1.0.0-beta.7",
@@ -26,24 +26,264 @@
     }
   },
   "exports": {
-    "./package.json": "./package.json",
     ".": {
       "module": "./index.esm.js",
       "import": "./index.cjs.mjs",
       "default": "./index.cjs.js"
     },
+    "./FaviconTags": {
+      "import": "./FaviconTags.js"
+    },
+    "./Meta": {
+      "import": "./Meta.js"
+    },
+    "./NoJs": {
+      "import": "./NoJs.js"
+    },
+    "./Polymorphic": {
+      "import": "./Polymorphic.js"
+    },
+    "./calendar.cjs.default": {
+      "import": "./calendar.cjs.default.js"
+    },
+    "./calendar.cjs": {
+      "import": "./calendar.cjs.js"
+    },
+    "./calendar.esm": {
+      "import": "./calendar.esm.js"
+    },
     "./calendar": {
       "module": "./calendar.esm.js",
       "import": "./calendar.cjs.mjs",
       "default": "./calendar.cjs.js"
     },
+    "./calendar/CalendarDaygridCell": {
+      "import": "./calendar/CalendarDaygridCell.js"
+    },
+    "./calendar/CalendarDaygridNav": {
+      "import": "./calendar/CalendarDaygridNav.js"
+    },
+    "./calendar/CalendarDaygridTable": {
+      "import": "./calendar/CalendarDaygridTable.js"
+    },
+    "./calendar/CalendarLegend": {
+      "import": "./calendar/CalendarLegend.js"
+    },
+    "./calendar/calendar-api-google": {
+      "import": "./calendar/calendar-api-google.js"
+    },
+    "./calendar/types": {
+      "import": "./calendar/types.js"
+    },
+    "./calendar/useCalendar": {
+      "import": "./calendar/useCalendar.js"
+    },
+    "./calendar/useDateLocale": {
+      "import": "./calendar/useDateLocale.js"
+    },
+    "./calendar/utils": {
+      "import": "./calendar/utils.js"
+    },
+    "./classed": {
+      "import": "./classed.js"
+    },
+    "./components/FaviconTags": {
+      "import": "./components/FaviconTags.js"
+    },
+    "./components/Meta": {
+      "import": "./components/Meta.js"
+    },
+    "./components/NoJs": {
+      "import": "./components/NoJs.js"
+    },
+    "./createUseMediaQueryWidth": {
+      "import": "./createUseMediaQueryWidth.js"
+    },
+    "./extendComponent": {
+      "import": "./extendComponent.js"
+    },
+    "./forms.cjs.default": {
+      "import": "./forms.cjs.default.js"
+    },
+    "./forms.cjs": {
+      "import": "./forms.cjs.js"
+    },
+    "./forms.esm": {
+      "import": "./forms.esm.js"
+    },
     "./forms": {
       "module": "./forms.esm.js",
       "import": "./forms.cjs.mjs",
       "default": "./forms.cjs.js"
-    }
+    },
+    "./forms/antispam": {
+      "import": "./forms/antispam.js"
+    },
+    "./hooks": {
+      "import": "./hooks/index.js"
+    },
+    "./hooks/useAsyncFn": {
+      "import": "./hooks/useAsyncFn.js"
+    },
+    "./hooks/useFirstMountState": {
+      "import": "./hooks/useFirstMountState.js"
+    },
+    "./hooks/useFixedOffset": {
+      "import": "./hooks/useFixedOffset.js"
+    },
+    "./hooks/useFocus": {
+      "import": "./hooks/useFocus.js"
+    },
+    "./hooks/useInterval": {
+      "import": "./hooks/useInterval.js"
+    },
+    "./hooks/useIsomorphicLayoutEffect": {
+      "import": "./hooks/useIsomorphicLayoutEffect.js"
+    },
+    "./hooks/useKeyUp": {
+      "import": "./hooks/useKeyUp.js"
+    },
+    "./hooks/useMeasure": {
+      "import": "./hooks/useMeasure.js"
+    },
+    "./hooks/useMountedState": {
+      "import": "./hooks/useMountedState.js"
+    },
+    "./hooks/useNavigateAway": {
+      "import": "./hooks/useNavigateAway.js"
+    },
+    "./hooks/usePrevious": {
+      "import": "./hooks/usePrevious.js"
+    },
+    "./hooks/usePreviousRef": {
+      "import": "./hooks/usePreviousRef.js"
+    },
+    "./hooks/useReveal": {
+      "import": "./hooks/useReveal.js"
+    },
+    "./hooks/useScrollPosition": {
+      "import": "./hooks/useScrollPosition.js"
+    },
+    "./hooks/useScrollThreshold": {
+      "import": "./hooks/useScrollThreshold.js"
+    },
+    "./hooks/useScrollTo": {
+      "import": "./hooks/useScrollTo.js"
+    },
+    "./hooks/useSmoothScroll": {
+      "import": "./hooks/useSmoothScroll.js"
+    },
+    "./hooks/useSpinDelay": {
+      "import": "./hooks/useSpinDelay.js"
+    },
+    "./hooks/useTraceUpdate": {
+      "import": "./hooks/useTraceUpdate.js"
+    },
+    "./hooks/useUpdateEffect": {
+      "import": "./hooks/useUpdateEffect.js"
+    },
+    "./hooks/useWindowSize": {
+      "import": "./hooks/useWindowSize.js"
+    },
+    "./index.cjs.default": {
+      "import": "./index.cjs.default.js"
+    },
+    "./index.cjs": {
+      "import": "./index.cjs.js"
+    },
+    "./index.esm": {
+      "import": "./index.esm.js"
+    },
+    "./mergeRefs": {
+      "import": "./mergeRefs.js"
+    },
+    "./types": {
+      "import": "./types.js"
+    },
+    "./useAsyncFn": {
+      "import": "./useAsyncFn.js"
+    },
+    "./useFirstMountState": {
+      "import": "./useFirstMountState.js"
+    },
+    "./useFixedOffset": {
+      "import": "./useFixedOffset.js"
+    },
+    "./useFocus": {
+      "import": "./useFocus.js"
+    },
+    "./useInterval": {
+      "import": "./useInterval.js"
+    },
+    "./useIsomorphicLayoutEffect": {
+      "import": "./useIsomorphicLayoutEffect.js"
+    },
+    "./useKeyUp": {
+      "import": "./useKeyUp.js"
+    },
+    "./useMeasure": {
+      "import": "./useMeasure.js"
+    },
+    "./useMountedState": {
+      "import": "./useMountedState.js"
+    },
+    "./useNavigateAway": {
+      "import": "./useNavigateAway.js"
+    },
+    "./usePrevious": {
+      "import": "./usePrevious.js"
+    },
+    "./usePreviousRef": {
+      "import": "./usePreviousRef.js"
+    },
+    "./useReveal": {
+      "import": "./useReveal.js"
+    },
+    "./useScrollPosition": {
+      "import": "./useScrollPosition.js"
+    },
+    "./useScrollThreshold": {
+      "import": "./useScrollThreshold.js"
+    },
+    "./useScrollTo": {
+      "import": "./useScrollTo.js"
+    },
+    "./useSmoothScroll": {
+      "import": "./useSmoothScroll.js"
+    },
+    "./useSpinDelay": {
+      "import": "./useSpinDelay.js"
+    },
+    "./useTraceUpdate": {
+      "import": "./useTraceUpdate.js"
+    },
+    "./useUpdateEffect": {
+      "import": "./useUpdateEffect.js"
+    },
+    "./useWindowSize": {
+      "import": "./useWindowSize.js"
+    },
+    "./utils/Polymorphic": {
+      "import": "./utils/Polymorphic.js"
+    },
+    "./utils/classed": {
+      "import": "./utils/classed.js"
+    },
+    "./utils/createUseMediaQueryWidth": {
+      "import": "./utils/createUseMediaQueryWidth.js"
+    },
+    "./utils/extendComponent": {
+      "import": "./utils/extendComponent.js"
+    },
+    "./utils": {
+      "import": "./utils/index.js"
+    },
+    "./utils/mergeRefs": {
+      "import": "./utils/mergeRefs.js"
+    },
+    "./package.json": "./package.json"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
-  "version": "2.0.0-beta.73"
+  "version": "2.0.0-beta.75"
 }

package/useAsyncFn.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T : never;
+type FunctionReturningPromise = (...args: any[]) => Promise<any>;
+export type UseAsyncState<T> = {
+    loading: boolean;
+    error?: undefined;
+    value?: undefined;
+} | {
+    loading: true;
+    error?: Error | undefined;
+    value?: T;
+} | {
+    loading: false;
+    error: Error;
+    value?: undefined;
+} | {
+    loading: false;
+    error?: undefined;
+    value: T;
+};
+type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = UseAsyncState<PromiseType<ReturnType<T>>>;
+export type UseAsyncFnReturn<T extends FunctionReturningPromise = FunctionReturningPromise> = [StateFromFunctionReturningPromise<T>, T];
+export declare let useAsyncFn: <T extends FunctionReturningPromise>(fn: T, deps?: React.DependencyList, initialState?: StateFromFunctionReturningPromise<T>) => UseAsyncFnReturn<T>;
+export default useAsyncFn;

package/useAsyncFn.js

@@ -0,0 +1,26 @@
+import React, { useCallback, useRef, useState } from "react";
+import { useMountedState } from "./useMountedState";
+export let useAsyncFn = (fn, deps = [], initialState = { loading: false }) => {
+    const lastCallId = useRef(0);
+    const isMounted = useMountedState();
+    const [state, set] = useState(initialState);
+    const callback = useCallback((...args) => {
+        const callId = ++lastCallId.current;
+        if (!state.loading) {
+            set((prevState) => ({ ...prevState, loading: true }));
+        }
+        return fn(...args).then((value) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ value, loading: false });
+            return value;
+        }, (error) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ error, loading: false });
+            return error;
+        });
+    }, deps);
+    return [state, callback];
+};
+export default useAsyncFn;

package/useFirstMountState.d.ts

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

package/useFirstMountState.js

@@ -0,0 +1,10 @@
+import { useRef } from "react";
+export let useFirstMountState = () => {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+};
+export default useFirstMountState;

package/useFixedOffset.d.ts

@@ -0,0 +1,2 @@
+export declare let useFixedOffset: (selector?: string) => import("react").MutableRefObject<number>;
+export default useFixedOffset;

package/useFixedOffset.js

@@ -0,0 +1,42 @@
+import { useRef } from "react";
+import { debounce } from "@koine/utils";
+import { $each, calculateFixedOffset, injectCss, listenResizeDebounced, } from "@koine/dom";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+const inject = (value) => {
+    injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
+};
+export let useFixedOffset = (selector) => {
+    const fixedOffset = useRef(0);
+    useIsomorphicLayoutEffect(() => {
+        const update = () => {
+            const newFixedOffset = calculateFixedOffset();
+            fixedOffset.current = newFixedOffset;
+            inject(newFixedOffset);
+        };
+        update();
+        if (ResizeObserver) {
+            const observer = new ResizeObserver((entries) => {
+                let newFixedOffset = 0;
+                entries.forEach((entry) => {
+                    newFixedOffset += entry.contentRect.height;
+                });
+                fixedOffset.current = newFixedOffset;
+                const updateOnResize = debounce(() => inject(newFixedOffset), 400, true);
+                updateOnResize();
+            });
+            $each(selector || "[data-fixed]", ($el) => {
+                if (observer)
+                    observer.observe($el);
+            });
+            return () => {
+                observer?.disconnect();
+            };
+        }
+        else {
+            const listener = listenResizeDebounced(0, update);
+            return listener;
+        }
+    }, [selector]);
+    return fixedOffset;
+};
+export default useFixedOffset;

package/useFocus.d.ts

@@ -0,0 +1,2 @@
+export declare let useFocus: () => (import("react").RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | (() => void))[];
+export default useFocus;

package/useFocus.js

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+export let useFocus = () => {
+    const elementRef = useRef(null);
+    const setFocus = () => {
+        elementRef.current && elementRef.current.focus();
+    };
+    return [elementRef, setFocus];
+};
+export default useFocus;

package/useInterval.d.ts

@@ -0,0 +1,2 @@
+export declare let useInterval: <T extends () => unknown>(callback: T, delay: number, deps?: unknown[]) => void;
+export default useInterval;

package/useInterval.js

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from "react";
+import { noop } from "@koine/utils";
+export let useInterval = (callback, delay, deps = []) => {
+    const savedCallback = useRef();
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback, ...deps]);
+    useEffect(() => {
+        function tick() {
+            if (savedCallback.current)
+                savedCallback.current();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+        return noop;
+    }, [delay]);
+};
+export default useInterval;

package/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from "react";
+export declare let useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export default useIsomorphicLayoutEffect;

package/useIsomorphicLayoutEffect.js

@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from "react";
+import { isBrowser } from "@koine/utils";
+export let useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+export default useIsomorphicLayoutEffect;

package/useKeyUp.d.ts

@@ -0,0 +1,2 @@
+export declare let useKeyUp: (callback: (event: KeyboardEvent) => void, deps?: unknown[]) => void;
+export default useKeyUp;

package/useKeyUp.js

@@ -0,0 +1,16 @@
+import { useEffect } from "react";
+import { on } from "@koine/dom";
+export let useKeyUp = (callback, deps = []) => {
+    useEffect(() => {
+        const listener = on(window, "keyup", (event) => {
+            if (!event.ctrlKey &&
+                !event.altKey &&
+                !event.shiftKey &&
+                !event.metaKey) {
+                callback(event);
+            }
+        });
+        return listener;
+    }, [callback, ...deps]);
+};
+export default useKeyUp;

package/useMeasure.d.ts

@@ -0,0 +1,22 @@
+interface RectReadOnly {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+    [key: string]: number;
+}
+type HTMLOrSVGElement = HTMLElement | SVGElement;
+export type UseMeasureOptions = {
+    scroll?: boolean;
+};
+export type UseMeasureReturn = [
+    (element: HTMLOrSVGElement | null) => void,
+    RectReadOnly,
+    () => void
+];
+export declare let useMeasure: (options?: UseMeasureOptions) => UseMeasureReturn;
+export default useMeasure;

package/useMeasure.js

@@ -0,0 +1,119 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { debounce, noop } from "@koine/utils";
+import { listenResizeDebounced, listenScrollDebounced, off, on, } from "@koine/dom";
+let observer;
+let findScrollContainers = (element) => {
+    const result = [];
+    if (!element || element === document.body)
+        return result;
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(element);
+    if ([overflow, overflowX, overflowY].some((prop) => prop === "auto" || prop === "scroll"))
+        result.push(element);
+    return [...result, ...findScrollContainers(element.parentElement)];
+};
+const keys = [
+    "x",
+    "y",
+    "top",
+    "bottom",
+    "left",
+    "right",
+    "width",
+    "height",
+];
+const areBoundsEqual = (a, b) => keys.every((key) => a[key] === b[key]);
+export let useMeasure = (options) => {
+    const { scroll = false } = options || {};
+    const [bounds, setBounds] = useState({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+        bottom: 0,
+        right: 0,
+        x: 0,
+        y: 0,
+    });
+    const state = useRef([
+        null,
+        null,
+        null,
+        bounds,
+    ]);
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+        return () => void (mounted.current = false);
+    }, []);
+    const [forceRefresh, , scrollChange] = useMemo(() => {
+        const callback = (..._args) => {
+            const [element, , , lastBounds] = state.current;
+            if (!element)
+                return;
+            const size = element.getBoundingClientRect();
+            Object.freeze(size);
+            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
+                state.current[3] = size;
+                setBounds(size);
+            }
+        };
+        const debouncedCallback = debounce(callback);
+        return [callback, debouncedCallback, debouncedCallback];
+    }, [setBounds]);
+    function removeListeners() {
+        const [, scrollContainers, resizeObserver] = state.current;
+        if (scrollContainers) {
+            scrollContainers.forEach((element) => off(element, "scroll", scrollChange));
+            state.current[1] = null;
+        }
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            state.current[2] = null;
+        }
+    }
+    function addListeners() {
+        const [element, scrollContainers] = state.current;
+        if (!element)
+            return;
+        if (!observer && ResizeObserver) {
+            observer = new ResizeObserver(scrollChange);
+            state.current[2] = observer;
+            observer.observe(element);
+            if (scroll && scrollContainers) {
+                scrollContainers.forEach((scrollContainer) => on(scrollContainer, "scroll", scrollChange, {
+                    capture: true,
+                    passive: true,
+                }));
+            }
+        }
+    }
+    const ref = (node) => {
+        if (!node || node === state.current[0])
+            return;
+        removeListeners();
+        state.current[0] = node;
+        state.current[1] = findScrollContainers(node);
+        addListeners();
+    };
+    useEffect(() => {
+        if (scroll) {
+            const listener = listenScrollDebounced(0, forceRefresh, 100);
+            return listener;
+        }
+        return noop;
+    }, [scroll, forceRefresh]);
+    useEffect(() => {
+        const listener = listenResizeDebounced(0, forceRefresh, 100);
+        return listener;
+    }, [forceRefresh]);
+    useEffect(() => {
+        removeListeners();
+        addListeners();
+    }, [scroll]);
+    useEffect(() => {
+        forceRefresh();
+        return removeListeners;
+    }, []);
+    return [ref, bounds, forceRefresh];
+};
+export default useMeasure;

package/useMountedState.d.ts

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

package/useMountedState.js

@@ -0,0 +1,13 @@
+import { useCallback, useEffect, useRef } from "react";
+export let useMountedState = () => {
+    const mountedRef = useRef(false);
+    const get = useCallback(() => mountedRef.current, []);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+};
+export default useMountedState;

package/useNavigateAway.d.ts

@@ -0,0 +1,3 @@
+export type UseNavigateAwayHandler = (event: BeforeUnloadEvent) => string | boolean;
+export declare let useNavigateAway: (handler: UseNavigateAwayHandler) => void;
+export default useNavigateAway;

package/useNavigateAway.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import { on } from "@koine/dom";
+export let useNavigateAway = (handler) => {
+    const beforeUnloadHandlerRef = useRef();
+    useEffect(() => {
+        beforeUnloadHandlerRef.current = (event) => {
+            const customMessageOrCondition = handler(event);
+            if (customMessageOrCondition) {
+                event.preventDefault();
+            }
+            if (typeof customMessageOrCondition === "string") {
+                return (event.returnValue = customMessageOrCondition);
+            }
+            if (event.defaultPrevented) {
+                return (event.returnValue = "");
+            }
+            return;
+        };
+    }, [handler]);
+    useEffect(() => {
+        const listenerBeforeunload = on(window, "beforeunload", (event) => beforeUnloadHandlerRef.current?.(event));
+        return listenerBeforeunload;
+    }, []);
+};
+export default useNavigateAway;

package/usePrevious.d.ts

@@ -0,0 +1,2 @@
+export declare let usePrevious: <T extends unknown>(state: T, defaulValue: T) => T;
+export default usePrevious;

package/usePrevious.js

@@ -0,0 +1,9 @@
+import { useState } from "react";
+export let usePrevious = (state, defaulValue) => {
+    const [tuple, setTuple] = useState([state, defaulValue]);
+    if (tuple[1] !== state) {
+        setTuple([tuple[1], state]);
+    }
+    return tuple[0];
+};
+export default usePrevious;

package/usePreviousRef.d.ts

@@ -0,0 +1,2 @@
+export declare let usePreviousRef: <T extends unknown>(value: T) => T | undefined;
+export default usePreviousRef;