@koine/react 2.0.0-beta.14 → 2.0.0-beta.15

package/hooks/useDateLocale.mjs

@@ -1,37 +0,0 @@
-import { useEffect, useState } from "react";
-/**
- * Dynamically import the date-fns correct locale
- *
- * Inspired by:
- * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
- */ export function useDateLocale(locale, defaultLocale = "en") {
-    const [data, setData] = useState();
-    const [current, setCurrent] = useState(defaultLocale);
-    // const [ready, setReady] = useState(false);
-    // If the user changes the locale listen to the change and import the locale that is now required.
-    useEffect(()=>{
-        const importLocaleFile = async ()=>{
-            // This webpack option stops all of the date-fns files being imported and chunked.
-            // NB: this makes unnecessary numerous webpack chunks in applications
-            // that do not even use this hook, so we comment out the webpack dynamic
-            // import and its magic comment
-            // const localeToSet = await import(
-            //   /FIXME: * webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
-            //   `date-fns/locale/${locale}/index.js`,
-            // );
-            const localeToSet = await import(`date-fns/locale/en-US/index.js`);
-            setCurrent(locale || current);
-            setData(localeToSet.default);
-        // setReady(true);
-        };
-        // If the locale has not yet been loaded.
-        if (locale !== current) {
-            importLocaleFile();
-        }
-    }, [
-        locale,
-        current
-    ]);
-    return data;
-}
-export default useDateLocale;

package/hooks/useFirstMountState.mjs

@@ -1,12 +0,0 @@
-import { useRef } from "react";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
- */ export function useFirstMountState() {
-    const isFirst = useRef(true);
-    if (isFirst.current) {
-        isFirst.current = false;
-        return true;
-    }
-    return isFirst.current;
-}
-export default useFirstMountState;

package/hooks/useFixedOffset.mjs

@@ -1,56 +0,0 @@
-import { useRef } from "react";
-import debounce from "@koine/utils/debounce";
-import $each from "@koine/dom/$each";
-import calculateFixedOffset from "@koine/dom/calculateFixedOffset";
-import injectCss from "@koine/dom/injectCss";
-import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
-import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
-const inject = (value)=>{
-    injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
-};
-/**
- * # Use fixed offset
- *
- * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
- *
- * @see https://web.dev/resize-observer/
- *
- * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */ export function useFixedOffset(selector) {
-    const fixedOffset = useRef(0);
-    useIsomorphicLayoutEffect(()=>{
-        const update = ()=>{
-            const newFixedOffset = calculateFixedOffset();
-            fixedOffset.current = newFixedOffset;
-            // inject this CSS make the hashed deeplinks position the scroll at the
-            // right offset
-            inject(newFixedOffset);
-        };
-        update();
-        if (ResizeObserver) {
-            // const elements = $$("[data-fixed]");
-            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/hooks/useFocus.mjs

@@ -1,14 +0,0 @@
-import { useRef } from "react";
-/**
- * @see https://stackoverflow.com/a/54159564/1938970
- */ export const useFocus = ()=>{
-    const elementRef = useRef(null);
-    const setFocus = ()=>{
-        elementRef.current && elementRef.current.focus();
-    };
-    return [
-        elementRef,
-        setFocus
-    ];
-};
-export default useFocus;

package/hooks/useInterval.mjs

@@ -1,29 +0,0 @@
-import { useEffect, useRef } from "react";
-import noop from "@koine/utils/noop";
-/**
- * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
- *
- * We just add `deps` array argument and typescript support
- */ export function useInterval(callback, delay, deps = []) {
-    const savedCallback = useRef();
-    useEffect(()=>{
-        savedCallback.current = callback;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        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/hooks/useIsomorphicLayoutEffect.mjs

@@ -1,6 +0,0 @@
-import { useEffect, useLayoutEffect } from "react";
-import isBrowser from "@koine/utils/isBrowser";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts)
- */ export const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-export default useIsomorphicLayoutEffect;

package/hooks/useKeyUp.mjs

@@ -1,21 +0,0 @@
-import { useEffect } from "react";
-import on from "@koine/dom/on";
-export function useKeyUp(callback, deps = []) {
-    useEffect(()=>{
-        const listener = on(window, "keyup", (event)=>{
-            // const { key } = event;
-            // be sure we do not intercept keys combinations maybe used for other
-            // actions like native browser navigation shortcuts
-            // @see https://stackoverflow.com/a/37559790/1938970
-            if (!event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
-                callback(event);
-            }
-        });
-        return listener;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        callback,
-        ...deps
-    ]);
-}
-export default useKeyUp;

package/hooks/useMeasure.mjs

@@ -1,174 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import debounce from "@koine/utils/debounce";
-import noop from "@koine/utils/noop";
-import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
-import listenScrollDebounced from "@koine/dom/listenScrollDebounced";
-import off from "@koine/dom/off";
-import on from "@koine/dom/on";
-let observer;
-// Returns a list of scroll offsets
-function 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]);
-/**
- * Use measure hook
- *
- * @borrows [pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
- */ export function 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
-    });
-    // keep all state in a ref
-    const state = useRef([
-        // element
-        null,
-        // scrollContainers
-        null,
-        // resizeObserver
-        null,
-        // lastBounds
-        bounds
-    ]);
-    // make sure to update state only as long as the component is truly mounted
-    const mounted = useRef(false);
-    useEffect(()=>{
-        mounted.current = true;
-        return ()=>void (mounted.current = false);
-    }, []);
-    // memoize handlers, so event-listeners know when they should update
-    const [forceRefresh /* resizeChange */ , , scrollChange] = useMemo(()=>{
-        const callback = (..._args)=>{
-            const [element, , , lastBounds] = state.current;
-            if (!element) return;
-            const size = element.getBoundingClientRect();
-            // if (element instanceof HTMLElement && offsetSize) {
-            //   size.height = element.offsetHeight;
-            //   size.width = element.offsetWidth;
-            // }
-            Object.freeze(size);
-            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
-                state.current[3] = size;
-                setBounds(size);
-            }
-        };
-        const debouncedCallback = debounce(callback);
-        return [
-            callback,
-            debouncedCallback,
-            debouncedCallback
-        ];
-    }, [
-        setBounds /* , offsetSize */ 
-    ]);
-    // cleanup current scroll-listeners / observers
-    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;
-        }
-    }
-    // add scroll-listeners / observers
-    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
-                    }));
-            }
-        }
-    }
-    // the ref we expose to the user
-    const ref = (node)=>{
-        if (!node || node === state.current[0]) return;
-        removeListeners();
-        state.current[0] = node;
-        state.current[1] = findScrollContainers(node);
-        addListeners();
-    };
-    // add general event listeners
-    // useOnWindowScroll(forceRefresh, Boolean(scroll));
-    // useOnWindowResize(() => {
-    //   debugger;
-    //   forceRefresh();
-    // });
-    useEffect(()=>{
-        if (scroll) {
-            const listener = listenScrollDebounced(0, forceRefresh, 100);
-            return listener;
-        }
-        return noop;
-    }, [
-        scroll,
-        forceRefresh
-    ]);
-    useEffect(()=>{
-        // const listener = listenResizeDebounced(onWindowResize);
-        // return listener;
-        const listener = listenResizeDebounced(0, forceRefresh, 100);
-        return listener;
-    }, [
-        forceRefresh
-    ]);
-    // respond to changes that are relevant for the listeners
-    useEffect(()=>{
-        removeListeners();
-        addListeners();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        scroll /* , scrollChange, resizeChange */ 
-    ]);
-    useEffect(()=>{
-        // operate on mount, @kuus on the original version there is no call on mount?
-        forceRefresh();
-        // remove all listeners when the components unmounts
-        return removeListeners;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return [
-        ref,
-        bounds,
-        forceRefresh
-    ];
-}
-export default useMeasure;

package/hooks/useMountedState.mjs

@@ -1,15 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
- */ export function useMountedState() {
-    const mountedRef = useRef(false);
-    const get = useCallback(()=>mountedRef.current, []);
-    useEffect(()=>{
-        mountedRef.current = true;
-        return ()=>{
-            mountedRef.current = false;
-        };
-    }, []);
-    return get;
-}
-export default useMountedState;

package/hooks/useNavigateAway.mjs

@@ -1,69 +0,0 @@
-import { useEffect, useRef } from "react";
-import on from "@koine/dom/on";
-// type UseNavigateAwayPagehideHandler = (event: PageTransitionEvent) => unknown;
-/**
- * @resources
- *
- * About browser's specs see:
- * - https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
- * - https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
- * - https://stackoverflow.com/questions/58009424/pagehide-event-on-google-chrome
- *
- * About react see:
- * - https://github.com/jacobbuck/react-beforeunload
- * - https://github.com/dioscarey/react-beforeunload-component
- *
- * About next.js see:
- * - https://github.com/vercel/next.js/issues/2476
- * - https://github.com/vercel/next.js/issues/2694
- *
- * For the callback technique see:
- * - https://stackoverflow.com/a/11835394/1938970
- */ export const useNavigateAway = (handler)=>{
-    const beforeUnloadHandlerRef = useRef();
-    // const pagehideHandlerRef = useRef<UseNavigateAwayPagehideHandler | undefined>();
-    useEffect(()=>{
-        beforeUnloadHandlerRef.current = (event)=>{
-            const customMessageOrCondition = handler(event);
-            if (customMessageOrCondition) {
-                event.preventDefault();
-            }
-            // Handle legacy `event.returnValue` property
-            // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
-            if (typeof customMessageOrCondition === "string") {
-                return event.returnValue = customMessageOrCondition;
-            }
-            // Chrome doesn't support `event.preventDefault()` on `BeforeUnloadEvent`,
-            // instead it requires `event.returnValue` to be set
-            // https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#browser_compatibility
-            if (event.defaultPrevented) {
-                return event.returnValue = "";
-            }
-            return;
-        };
-    // pagehideHandlerRef.current = (event) => {
-    //   const returnValue = handler?.(event);
-    //   if (event.persisted) {
-    //     // If the event's persisted property is `true` the page is about
-    //     // to enter the Back-Forward Cache, which is also in the frozen state.
-    //   } else {
-    //     // If the event's persisted property is not `true` the page is
-    //     // about to be unloaded.
-    //   }
-    // };
-    }, [
-        handler
-    ]);
-    useEffect(()=>{
-        const listenerBeforeunload = on(window, "beforeunload", (event)=>beforeUnloadHandlerRef.current?.(event));
-        // const listenerPagehide = on(window, "pagehide", (event) =>
-        //   pagehideHandlerRef.current?.(event)
-        // );
-        return listenerBeforeunload;
-    // return () => {
-    //   listenerBeforeunload();
-    //   // listenerPagehide();
-    // };
-    }, []);
-};
-export default useNavigateAway;

package/hooks/usePrevious.mjs

@@ -1,17 +0,0 @@
-import { useState } from "react";
-/**
- * @borrows [samselikoff/animated-carousel](https://github.com/samselikoff/2022-06-02-animated-carousel/blob/main/pages/final.jsx)
- */ export function usePrevious(state, defaulValue) {
-    const [tuple, setTuple] = useState([
-        state,
-        defaulValue
-    ]);
-    if (tuple[1] !== state) {
-        setTuple([
-            tuple[1],
-            state
-        ]);
-    }
-    return tuple[0];
-}
-export default usePrevious;

package/hooks/useScrollPosition.mjs

@@ -1,70 +0,0 @@
-import { useRef } from "react";
-import isBrowser from "@koine/utils/isBrowser";
-import listenScroll from "@koine/dom/listenScroll";
-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
-    };
-};
-/**
- * @borrows [@n8tb1t/use-scroll-position@2.0.3](https://github.com/n8tb1t/use-scroll-position) by `n8tb1t <n8tb1t@gmail.com>`
- *
- * We've just:
- * - reused internal helper functions
- * - compacted object arguments in functions as plain argument list to improve compression
- */ export const 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);
-};
-export default useScrollPosition;

package/hooks/useScrollThreshold.mjs

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

package/hooks/useScrollTo.mjs

@@ -1,20 +0,0 @@
-import isBrowser from "@koine/utils/isBrowser";
-import useHeader from "../Header/useHeader";
-export function useScrollTo(id = "", offset = 0) {
-    const [, , headerHeight] = useHeader();
-    if (!isBrowser) {
-        return;
-    }
-    const headerOffset = headerHeight || 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);
-}
-export default useScrollTo;

package/hooks/useSmoothScroll.mjs

@@ -1,35 +0,0 @@
-import { useCallback } from "react";
-import isNumber from "@koine/utils/isNumber";
-import getOffsetTopSlim from "@koine/dom/getOffsetTopSlim";
-import scrollTo from "@koine/dom/scrollTo";
-import useFixedOffset from "./useFixedOffset";
-/**
- *
- * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
- * selector we will keep into account the _fixedOffset_ despite this option.
- * @returns
- */ export function 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;
-}
-export default useSmoothScroll;

package/hooks/useSpinDelay.mjs

@@ -1,52 +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 = {}));
-/**
- * Wraps your booleans only returning true after the `delay`, and for a minimum
- * time of `minDuration`. This way you're sure that you don't show unnecessary
- * or very short living spinners.
- *
- * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
- *
- * - Smaller footprint and options object as argument
- *
- * @param delay [500]
- * @param minDuration [200]
- */ export function useSpinDelay(loading, delay = 500, minDuration = 200) {
-    const [state, setState] = useState(0);
-    const timeout = useRef();
-    useEffect(()=>{
-        if (loading && state === 0) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(()=>{
-                if (!loading) {
-                    return setState(0);
-                }
-                timeout.current = setTimeout(()=>{
-                    setState(3);
-                }, minDuration);
-                setState(2);
-            }, delay);
-            setState(1);
-        }
-        if (!loading && state !== 2) {
-            clearTimeout(timeout.current);
-            setState(0);
-        }
-    }, [
-        loading,
-        state,
-        delay,
-        minDuration
-    ]);
-    useEffect(()=>{
-        return ()=>clearTimeout(timeout.current);
-    }, []);
-    return state === 2 || state === 3;
-}
-export default useSpinDelay;