@koine/react 2.0.0-beta.74 → 2.0.0-beta.76

package/components/NoJs.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-export let NoJs = (_props) => {
-    return (_jsx("script", { id: "no-js", dangerouslySetInnerHTML: {
-            __html: `document.querySelector("html").className=document.querySelector("html").className.replace(/no-js/,"") + "js";`,
-        } }));
-};

package/forms.cjs.d.ts

@@ -1 +0,0 @@
-export * from "./forms";

package/forms.cjs.default.js

@@ -1 +0,0 @@
-exports._default = require('./forms.cjs.js').default;

package/forms.cjs.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var yup = require('@kuus/yup');
-var utils = require('@koine/utils');
-
-let encodeForm=t=>{let o={},i={};for(let e in t)if(!e.startsWith("_")){let l=utils.encode(e);o[l]=t[e],i[e]=l;}return {encodedSchema:yup.object(o).required(),encodedNames:i}};let decodeForm=e=>{let r={};for(let i in e){let l=utils.decode(i);i.startsWith("_")?r[i.substring(1)]=e[i]:utils.isUndefined(e[i])||""!==e[l]||(r[l]=e[i]);}return r};
-
-exports.decodeForm = decodeForm;
-exports.encodeForm = encodeForm;

package/forms.cjs.mjs

@@ -1,2 +0,0 @@
-export * from './forms.cjs.js';
-export { _default as default } from './forms.cjs.default.js';

package/forms.esm.js

@@ -1,6 +0,0 @@
-import { object } from '@kuus/yup';
-import { encode, decode, isUndefined } from '@koine/utils';
-
-let encodeForm=t=>{let o={},i={};for(let e in t)if(!e.startsWith("_")){let l=encode(e);o[l]=t[e],i[e]=l;}return {encodedSchema:object(o).required(),encodedNames:i}};let decodeForm=e=>{let r={};for(let i in e){let l=decode(i);i.startsWith("_")?r[i.substring(1)]=e[i]:isUndefined(e[i])||""!==e[l]||(r[l]=e[i]);}return r};
-
-export { decodeForm, encodeForm };

package/hooks/index.js

@@ -1,19 +0,0 @@
-export { useAsyncFn, } from "./useAsyncFn";
-export { useFirstMountState } from "./useFirstMountState";
-export { useFixedOffset } from "./useFixedOffset";
-export { useFocus } from "./useFocus";
-export { useInterval } from "./useInterval";
-export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
-export { useKeyUp } from "./useKeyUp";
-export { useMeasure, } from "./useMeasure";
-export { useMountedState } from "./useMountedState";
-export { useNavigateAway, } from "./useNavigateAway";
-export { usePrevious } from "./usePrevious";
-export { usePreviousRef } from "./usePreviousRef";
-export { useScrollPosition } from "./useScrollPosition";
-export { useScrollThreshold } from "./useScrollThreshold";
-export { useSmoothScroll } from "./useSmoothScroll";
-export { useSpinDelay } from "./useSpinDelay";
-export { useTraceUpdate } from "./useTraceUpdate";
-export { useUpdateEffect } from "./useUpdateEffect";
-export { useWindowSize } from "./useWindowSize";

package/hooks/useAsyncFn.js

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

@@ -1,9 +0,0 @@
-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

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

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

@@ -1,19 +0,0 @@
-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.d.ts

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

package/hooks/useIsomorphicLayoutEffect.js

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

package/hooks/useKeyUp.js

@@ -1,15 +0,0 @@
-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

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

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

@@ -1,24 +0,0 @@
-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

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

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

package/hooks/useReveal.js

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

@@ -1,57 +0,0 @@
-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

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

@@ -1,17 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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.d.ts

@@ -1 +0,0 @@
-export * from "./index";

package/index.cjs.default.js

@@ -1 +0,0 @@
-exports._default = require('./index.cjs.js').default;