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

package/hooks/useAsyncFn.js

@@ -0,0 +1,25 @@
+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];
+};

package/hooks/useFirstMountState.js

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

package/hooks/useFixedOffset.js

@@ -0,0 +1,41 @@
+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;
+};

package/hooks/useFocus.js

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

package/hooks/useInterval.js

@@ -0,0 +1,19 @@
+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]);
+};

package/hooks/useIsomorphicLayoutEffect.js

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

package/hooks/useKeyUp.js

@@ -0,0 +1,15 @@
+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]);
+};

package/hooks/useMeasure.js

@@ -0,0 +1,118 @@
+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];
+};

package/hooks/useMountedState.js

@@ -0,0 +1,12 @@
+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;
+};

package/hooks/useNavigateAway.js

@@ -0,0 +1,24 @@
+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;
+    }, []);
+};

package/hooks/usePrevious.js

@@ -0,0 +1,8 @@
+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];
+};

package/hooks/usePreviousRef.js

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

package/hooks/useReveal.js

@@ -0,0 +1,41 @@
+import { useEffect, useRef, useState } from "react";
+export let useReveal = ({ direction = "left", offsetStartY = -2, offsetEndY = 0, offsetStartX = "all", }) => {
+    const ref = useRef(null);
+    const [startY, setStartY] = useState(0);
+    const [endY, setEndY] = useState(0);
+    const [startX, setStartX] = useState(0);
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+        const rect = ref.current.getBoundingClientRect();
+        const scrollTop = window.scrollY || document.documentElement.scrollTop;
+        const elementHeight = rect.height;
+        const elementTop = rect.top;
+        const distanceTop = elementTop + scrollTop;
+        const offsetTop = offsetStartY ? elementHeight * offsetStartY : 0;
+        const offsetBottom = offsetEndY ? elementHeight * offsetEndY : offsetTop;
+        const startY = (distanceTop + offsetTop) / document.body.clientHeight;
+        const endY = (distanceTop + elementHeight + offsetBottom) / document.body.clientHeight;
+        let startX;
+        if (offsetStartX === "all") {
+            startX = direction === "left" ? -rect.right : rect.left;
+        }
+        else {
+            startX = rect.width * offsetStartX;
+            startX = direction === "left" ? -startX : startX;
+        }
+        setStartY(startY);
+        setEndY(endY);
+        setStartX(startX);
+    }, [
+        setStartY,
+        setEndY,
+        setStartX,
+        offsetStartY,
+        offsetEndY,
+        offsetStartX,
+        direction,
+    ]);
+    return { ref, startY, endY, startX };
+};

package/hooks/useScrollPosition.js

@@ -0,0 +1,57 @@
+import { useRef } from "react";
+import { isBrowser } from "@koine/utils";
+import { listenScroll } from "@koine/dom";
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+const zeroPosition = { x: 0, y: 0 };
+const getClientRect = (element) => element?.getBoundingClientRect();
+const getScrollPosition = (element, boundingElement) => {
+    if (!isBrowser) {
+        return zeroPosition;
+    }
+    if (!boundingElement) {
+        return { x: window.scrollX, y: window.scrollY };
+    }
+    const targetPosition = getClientRect(element?.current || document.body);
+    const containerPosition = getClientRect(boundingElement.current);
+    if (!targetPosition) {
+        return zeroPosition;
+    }
+    return containerPosition
+        ? {
+            x: (containerPosition.x || 0) - (targetPosition.x || 0),
+            y: (containerPosition.y || 0) - (targetPosition.y || 0),
+        }
+        : { x: targetPosition.left, y: targetPosition.top };
+};
+export let useScrollPosition = (effect, deps = [], element, boundingElement, wait) => {
+    const position = useRef(getScrollPosition(null, boundingElement));
+    let throttleTimeout = null;
+    const callBack = () => {
+        const current = getScrollPosition(element, boundingElement);
+        effect(current, position.current);
+        position.current = current;
+        throttleTimeout = null;
+    };
+    useIsomorphicLayoutEffect(() => {
+        if (!isBrowser) {
+            return undefined;
+        }
+        const handleScroll = () => {
+            if (wait) {
+                if (throttleTimeout === null) {
+                    throttleTimeout = window.setTimeout(callBack, wait);
+                }
+            }
+            else {
+                callBack();
+            }
+        };
+        const listener = listenScroll(handleScroll, boundingElement?.current);
+        return () => {
+            listener();
+            if (throttleTimeout) {
+                clearTimeout(throttleTimeout);
+            }
+        };
+    }, deps);
+};

package/hooks/useScrollThreshold.js

@@ -0,0 +1,25 @@
+import { useCallback, useEffect, useState } from "react";
+import { noop } from "@koine/utils";
+import { listenScroll } from "@koine/dom";
+export let useScrollThreshold = (threshold, callback) => {
+    const [isBelow, setIsBelow] = useState(false);
+    const handler = useCallback(() => {
+        if (threshold) {
+            const posY = window.scrollY;
+            const isAbove = posY < threshold;
+            const isBelow = posY > threshold;
+            setIsBelow(isBelow);
+            if (callback)
+                callback(isAbove, isBelow);
+        }
+    }, [threshold, callback]);
+    useEffect(() => {
+        if (threshold) {
+            const listener = listenScroll(handler);
+            handler();
+            return listener;
+        }
+        return noop;
+    }, [threshold, handler]);
+    return isBelow;
+};

package/hooks/useScrollTo.js

@@ -0,0 +1,17 @@
+import { isBrowser } from "@koine/utils";
+export let useScrollTo = (id = "", offset = 0) => {
+    if (!isBrowser) {
+        return;
+    }
+    const headerOffset = 0;
+    let element = document.getElementById(id);
+    let top = 0;
+    if (element && element.offsetParent) {
+        do {
+            top += element.offsetTop;
+        } while ((element = element.offsetParent));
+    }
+    top -= offset;
+    top -= headerOffset;
+    window.scroll(0, top);
+};

package/hooks/useSmoothScroll.js

@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+import { isNumber } from "@koine/utils";
+import { getOffsetTopSlim, scrollTo } from "@koine/dom";
+import { useFixedOffset } from "./useFixedOffset";
+export let useSmoothScroll = (disregardAutomaticFixedOffset) => {
+    const fixedOffset = useFixedOffset();
+    const scroll = useCallback((to, customOffset, callback, fallbackTimeout, behavior) => {
+        let top = undefined;
+        let toIsElement = false;
+        if (isNumber(to)) {
+            top = to;
+        }
+        else if (to) {
+            const el = document.getElementById(to);
+            if (el) {
+                top = getOffsetTopSlim(el) - fixedOffset.current;
+                toIsElement = true;
+            }
+        }
+        if (isNumber(top)) {
+            top =
+                top +
+                    (customOffset || 0) +
+                    (disregardAutomaticFixedOffset || toIsElement
+                        ? 0
+                        : fixedOffset.current);
+            scrollTo(top, callback, fallbackTimeout, behavior);
+        }
+    }, [disregardAutomaticFixedOffset, fixedOffset]);
+    return scroll;
+};

package/hooks/useSpinDelay.js

@@ -0,0 +1,35 @@
+import { useEffect, useRef, useState } from "react";
+var State;
+(function (State) {
+    State[State["IDLE"] = 0] = "IDLE";
+    State[State["DELAY"] = 1] = "DELAY";
+    State[State["DISPLAY"] = 2] = "DISPLAY";
+    State[State["EXPIRE"] = 3] = "EXPIRE";
+})(State || (State = {}));
+export let useSpinDelay = (loading, delay = 500, minDuration = 200) => {
+    const [state, setState] = useState(State.IDLE);
+    const timeout = useRef();
+    useEffect(() => {
+        if (loading && state === State.IDLE) {
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(() => {
+                if (!loading) {
+                    return setState(State.IDLE);
+                }
+                timeout.current = setTimeout(() => {
+                    setState(State.EXPIRE);
+                }, minDuration);
+                setState(State.DISPLAY);
+            }, delay);
+            setState(State.DELAY);
+        }
+        if (!loading && state !== State.DISPLAY) {
+            clearTimeout(timeout.current);
+            setState(State.IDLE);
+        }
+    }, [loading, state, delay, minDuration]);
+    useEffect(() => {
+        return () => clearTimeout(timeout.current);
+    }, []);
+    return state === State.DISPLAY || state === State.EXPIRE;
+};

package/hooks/useTraceUpdate.js

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+export let useTraceUpdate = (props) => {
+    const prev = useRef(props);
+    useEffect(() => {
+        const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+            if (prev.current[k] !== v) {
+                ps[k] = [prev.current[k], v];
+            }
+            return ps;
+        }, {});
+        if (Object.keys(changedProps).length > 0) {
+            console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
+        }
+        prev.current = props;
+    });
+};

package/hooks/useUpdateEffect.js

@@ -0,0 +1,10 @@
+import { useEffect } from "react";
+import { useFirstMountState } from "./useFirstMountState";
+export let useUpdateEffect = (effect, deps) => {
+    const isFirstMount = useFirstMountState();
+    useEffect(() => {
+        if (!isFirstMount) {
+            return effect();
+        }
+    }, deps);
+};

package/hooks/useWindowSize.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import { debounce } from "@koine/utils";
+import { listenResize, listenResizeDebounced } from "@koine/dom";
+export let useWindowSize = (wait, immediate) => {
+    const [width, widthSet] = useState(0);
+    const [height, heightSet] = useState(0);
+    useEffect(() => {
+        const updateSize = () => {
+            widthSet(window.innerWidth);
+            heightSet(window.innerHeight);
+        };
+        const listener = wait
+            ? listenResizeDebounced(0, updateSize, wait, immediate)
+            : listenResize(updateSize);
+        updateSize();
+        return listener;
+    }, [wait, immediate]);
+    return [width, height];
+};

package/index.cjs.js

@@ -22,7 +22,7 @@ let useInterval=(n,l,u=[])=>{let o=react.useRef();react.useEffect(()=>{o.current
 
 let useKeyUp=(o,r=[])=>{react.useEffect(()=>dom.on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
 
-let e$1;let f=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:l}=window.getComputedStyle(e);return [r,n,l].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...f(e.parentElement)]},h=["x","y","top","bottom","left","right","width","height"],p=(e,t)=>h.every(r=>e[r]===t[r]);let useMeasure=h=>{let{scroll:d=!1}=h||{},[a,b]=react.useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),g=react.useRef([null,null,null,a]),v=react.useRef(!1);react.useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);let[w,,y]=react.useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();Object.freeze(n),v.current&&!p(r,n)&&(g.current[3]=n,b(n));},t=utils.debounce(e);return [e,t,t]},[b]);function x(){let[,e,t]=g.current;e&&(e.forEach(e=>dom.off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}function z(){let[t,r]=g.current;t&&!e$1&&ResizeObserver&&(e$1=new ResizeObserver(y),g.current[2]=e$1,e$1.observe(t),d&&r&&r.forEach(e=>dom.on(e,"scroll",y,{capture:!0,passive:!0})));}return react.useEffect(()=>d?dom.listenScrollDebounced(0,w,100):utils.noop,[d,w]),react.useEffect(()=>dom.listenResizeDebounced(0,w,100),[w]),react.useEffect(()=>{x(),z();},[d]),react.useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=f(e),z());},a,w]};
+let e;let f=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:l}=window.getComputedStyle(e);return [r,n,l].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...f(e.parentElement)]},h=["x","y","top","bottom","left","right","width","height"],p=(e,t)=>h.every(r=>e[r]===t[r]);let useMeasure=h=>{let{scroll:d=!1}=h||{},[a,b]=react.useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),g=react.useRef([null,null,null,a]),v=react.useRef(!1);react.useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);let[w,,y]=react.useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();Object.freeze(n),v.current&&!p(r,n)&&(g.current[3]=n,b(n));},t=utils.debounce(e);return [e,t,t]},[b]);function x(){let[,e,t]=g.current;e&&(e.forEach(e=>dom.off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}function z(){let[t,r]=g.current;t&&!e&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),d&&r&&r.forEach(e=>dom.on(e,"scroll",y,{capture:!0,passive:!0})));}return react.useEffect(()=>d?dom.listenScrollDebounced(0,w,100):utils.noop,[d,w]),react.useEffect(()=>dom.listenResizeDebounced(0,w,100),[w]),react.useEffect(()=>{x(),z();},[d]),react.useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=f(e),z());},a,w]};
 
 let useNavigateAway=o=>{let n=react.useRef();react.useEffect(()=>{n.current=e=>{let r=o(e);return (r&&e.preventDefault(),"string"==typeof r)?e.returnValue=r:e.defaultPrevented?e.returnValue="":void 0};},[o]),react.useEffect(()=>dom.on(window,"beforeunload",e=>n.current?.(e)),[]);};
 
@@ -36,7 +36,7 @@ let useScrollThreshold=(i,m)=>{let[n,f]=react.useState(!1),u=react.useCallback((
 
 let useSmoothScroll=i=>{let l=useFixedOffset();return react.useCallback((e,m,f,n,u)=>{let c;let p=!1;if(utils.isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=dom.getOffsetTopSlim(t)-l.current,p=!0);}utils.isNumber(c)&&dom.scrollTo(c=c+(m||0)+(i||p?0:l.current),f,n,u);},[i,l])};
 
-var e,r;(r=e||(e={}))[r.IDLE=0]="IDLE",r[r.DELAY=1]="DELAY",r[r.DISPLAY=2]="DISPLAY",r[r.EXPIRE=3]="EXPIRE";let useSpinDelay=(e,r=500,i=200)=>{let[n,o]=react.useState(0),E=react.useRef();return react.useEffect(()=>{e&&0===n&&(clearTimeout(E.current),E.current=setTimeout(()=>{if(!e)return o(0);E.current=setTimeout(()=>{o(3);},i),o(2);},r),o(1)),e||2===n||(clearTimeout(E.current),o(0));},[e,n,r,i]),react.useEffect(()=>()=>clearTimeout(E.current),[]),2===n||3===n};
+let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=react.useState(0),m=react.useRef();return react.useEffect(()=>{u&&0===n&&(clearTimeout(m.current),m.current=setTimeout(()=>{if(!u)return o(0);m.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(m.current),o(0));},[u,n,c,i]),react.useEffect(()=>()=>clearTimeout(m.current),[]),2===n||3===n};
 
 let useTraceUpdate=t=>{let c=react.useRef(t);react.useEffect(()=>{let e=Object.entries(t).reduce((e,[r,t])=>(c.current[r]!==t&&(e[r]=[c.current[r],t]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=t;});};
 

package/index.esm.js

@@ -18,7 +18,7 @@ let useInterval=(n,l,u=[])=>{let o=useRef();useEffect(()=>{o.current=n;},[n,...u
 
 let useKeyUp=(o,r=[])=>{useEffect(()=>on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
 
-let e$1;let f=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:l}=window.getComputedStyle(e);return [r,n,l].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...f(e.parentElement)]},h=["x","y","top","bottom","left","right","width","height"],p=(e,t)=>h.every(r=>e[r]===t[r]);let useMeasure=h=>{let{scroll:d=!1}=h||{},[a,b]=useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),g=useRef([null,null,null,a]),v=useRef(!1);useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);let[w,,y]=useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();Object.freeze(n),v.current&&!p(r,n)&&(g.current[3]=n,b(n));},t=debounce(e);return [e,t,t]},[b]);function x(){let[,e,t]=g.current;e&&(e.forEach(e=>off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}function z(){let[t,r]=g.current;t&&!e$1&&ResizeObserver&&(e$1=new ResizeObserver(y),g.current[2]=e$1,e$1.observe(t),d&&r&&r.forEach(e=>on(e,"scroll",y,{capture:!0,passive:!0})));}return useEffect(()=>d?listenScrollDebounced(0,w,100):noop,[d,w]),useEffect(()=>listenResizeDebounced(0,w,100),[w]),useEffect(()=>{x(),z();},[d]),useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=f(e),z());},a,w]};
+let e;let f=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:l}=window.getComputedStyle(e);return [r,n,l].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...f(e.parentElement)]},h=["x","y","top","bottom","left","right","width","height"],p=(e,t)=>h.every(r=>e[r]===t[r]);let useMeasure=h=>{let{scroll:d=!1}=h||{},[a,b]=useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),g=useRef([null,null,null,a]),v=useRef(!1);useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);let[w,,y]=useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();Object.freeze(n),v.current&&!p(r,n)&&(g.current[3]=n,b(n));},t=debounce(e);return [e,t,t]},[b]);function x(){let[,e,t]=g.current;e&&(e.forEach(e=>off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}function z(){let[t,r]=g.current;t&&!e&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),d&&r&&r.forEach(e=>on(e,"scroll",y,{capture:!0,passive:!0})));}return useEffect(()=>d?listenScrollDebounced(0,w,100):noop,[d,w]),useEffect(()=>listenResizeDebounced(0,w,100),[w]),useEffect(()=>{x(),z();},[d]),useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=f(e),z());},a,w]};
 
 let useNavigateAway=o=>{let n=useRef();useEffect(()=>{n.current=e=>{let r=o(e);return (r&&e.preventDefault(),"string"==typeof r)?e.returnValue=r:e.defaultPrevented?e.returnValue="":void 0};},[o]),useEffect(()=>on(window,"beforeunload",e=>n.current?.(e)),[]);};
 
@@ -32,7 +32,7 @@ let useScrollThreshold=(i,m)=>{let[n,f]=useState(!1),u=useCallback(()=>{if(i){le
 
 let useSmoothScroll=i=>{let l=useFixedOffset();return useCallback((e,m,f,n,u)=>{let c;let p=!1;if(isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=getOffsetTopSlim(t)-l.current,p=!0);}isNumber(c)&&scrollTo(c=c+(m||0)+(i||p?0:l.current),f,n,u);},[i,l])};
 
-var e,r;(r=e||(e={}))[r.IDLE=0]="IDLE",r[r.DELAY=1]="DELAY",r[r.DISPLAY=2]="DISPLAY",r[r.EXPIRE=3]="EXPIRE";let useSpinDelay=(e,r=500,i=200)=>{let[n,o]=useState(0),E=useRef();return useEffect(()=>{e&&0===n&&(clearTimeout(E.current),E.current=setTimeout(()=>{if(!e)return o(0);E.current=setTimeout(()=>{o(3);},i),o(2);},r),o(1)),e||2===n||(clearTimeout(E.current),o(0));},[e,n,r,i]),useEffect(()=>()=>clearTimeout(E.current),[]),2===n||3===n};
+let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=useState(0),m=useRef();return useEffect(()=>{u&&0===n&&(clearTimeout(m.current),m.current=setTimeout(()=>{if(!u)return o(0);m.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(m.current),o(0));},[u,n,c,i]),useEffect(()=>()=>clearTimeout(m.current),[]),2===n||3===n};
 
 let useTraceUpdate=t=>{let c=useRef(t);useEffect(()=>{let e=Object.entries(t).reduce((e,[r,t])=>(c.current[r]!==t&&(e[r]=[c.current[r],t]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=t;});};
 

package/index.js

@@ -0,0 +1,3 @@
+export * from "./hooks";
+export * from "./utils";
+export * from "./types";

package/package.json

@@ -2,8 +2,8 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.72",
-    "@koine/utils": "2.0.0-beta.72"
+    "@koine/dom": "2.0.0-beta.73",
+    "@koine/utils": "2.0.0-beta.73"
   },
   "peerDependencies": {
     "@kuus/yup": "1.0.0-beta.7",
@@ -45,5 +45,5 @@
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
-  "version": "2.0.0-beta.72"
+  "version": "2.0.0-beta.73"
 }

package/types.js

@@ -0,0 +1 @@
+export {};

package/utils/Polymorphic.js

@@ -0,0 +1 @@
+export {};