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

package/hooks/useDateLocale.js

@@ -0,0 +1,28 @@
+import { __awaiter, __generator } from "tslib";
+import { useEffect, useState } from "react";
+export function useDateLocale(locale, defaultLocale) {
+    var _this = this;
+    if (defaultLocale === void 0) { defaultLocale = "en"; }
+    var _a = useState(), data = _a[0], setData = _a[1];
+    var _b = useState(defaultLocale), current = _b[0], setCurrent = _b[1];
+    useEffect(function () {
+        var importLocaleFile = function () { return __awaiter(_this, void 0, void 0, function () {
+            var localeToSet;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4, import("date-fns/locale/en-US/index.js")];
+                    case 1:
+                        localeToSet = _a.sent();
+                        setCurrent(locale || current);
+                        setData(localeToSet.default);
+                        return [2];
+                }
+            });
+        }); };
+        if (locale !== current) {
+            importLocaleFile();
+        }
+    }, [locale, current]);
+    return data;
+}
+export default useDateLocale;

package/hooks/useFirstMountState.d.ts

@@ -1,5 +1,2 @@
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
- */
 export declare function useFirstMountState(): boolean;
 export default useFirstMountState;

package/hooks/useFirstMountState.js

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

package/hooks/useFixedOffset.d.ts

@@ -1,12 +1,3 @@
 /// <reference types="react" />
-/**
- * # 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 declare function useFixedOffset(selector?: string): import("react").MutableRefObject<number>;
 export default useFixedOffset;

package/hooks/useFixedOffset.js

@@ -0,0 +1,45 @@
+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.js";
+var inject = function (value) {
+    injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
+};
+export function useFixedOffset(selector) {
+    var fixedOffset = useRef(0);
+    useIsomorphicLayoutEffect(function () {
+        var update = function () {
+            var newFixedOffset = calculateFixedOffset();
+            fixedOffset.current = newFixedOffset;
+            inject(newFixedOffset);
+        };
+        update();
+        if (ResizeObserver) {
+            var observer_1 = new ResizeObserver(function (entries) {
+                var newFixedOffset = 0;
+                entries.forEach(function (entry) {
+                    newFixedOffset += entry.contentRect.height;
+                });
+                fixedOffset.current = newFixedOffset;
+                var updateOnResize = debounce(function () { return inject(newFixedOffset); }, 400, true);
+                updateOnResize();
+            });
+            $each(selector || "[data-fixed]", function ($el) {
+                if (observer_1)
+                    observer_1.observe($el);
+            });
+            return function () {
+                observer_1 === null || observer_1 === void 0 ? void 0 : observer_1.disconnect();
+            };
+        }
+        else {
+            var listener = listenResizeDebounced(0, update);
+            return listener;
+        }
+    }, [selector]);
+    return fixedOffset;
+}
+export default useFixedOffset;

package/hooks/useFocus.d.ts

@@ -1,6 +1,3 @@
 /// <reference types="react" />
-/**
- * @see https://stackoverflow.com/a/54159564/1938970
- */
 export declare const useFocus: () => (import("react").RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | (() => void))[];
 export default useFocus;

package/hooks/useFocus.js

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

package/hooks/useInterval.d.ts

@@ -1,7 +1,2 @@
-/**
- * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
- *
- * We just add `deps` array argument and typescript support
- */
 export declare function useInterval<T extends () => unknown>(callback: T, delay: number, deps?: unknown[]): void;
 export default useInterval;

package/hooks/useInterval.js

@@ -0,0 +1,22 @@
+import { __spreadArray } from "tslib";
+import { useEffect, useRef } from "react";
+import noop from "@koine/utils/noop";
+export function useInterval(callback, delay, deps) {
+    if (deps === void 0) { deps = []; }
+    var savedCallback = useRef();
+    useEffect(function () {
+        savedCallback.current = callback;
+    }, __spreadArray([callback], deps, true));
+    useEffect(function () {
+        function tick() {
+            if (savedCallback.current)
+                savedCallback.current();
+        }
+        if (delay !== null) {
+            var id_1 = setInterval(tick, delay);
+            return function () { return clearInterval(id_1); };
+        }
+        return noop;
+    }, [delay]);
+}
+export default useInterval;

package/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,6 +1,3 @@
 import { useEffect } from "react";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts)
- */
 export declare const useIsomorphicLayoutEffect: typeof useEffect;
 export default useIsomorphicLayoutEffect;

package/hooks/useIsomorphicLayoutEffect.js

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

package/hooks/useKeyUp.js

@@ -0,0 +1,18 @@
+import { __spreadArray } from "tslib";
+import { useEffect } from "react";
+import on from "@koine/dom/on";
+export function useKeyUp(callback, deps) {
+    if (deps === void 0) { deps = []; }
+    useEffect(function () {
+        var listener = on(window, "keyup", function (event) {
+            if (!event.ctrlKey &&
+                !event.altKey &&
+                !event.shiftKey &&
+                !event.metaKey) {
+                callback(event);
+            }
+        });
+        return listener;
+    }, __spreadArray([callback], deps, true));
+}
+export default useKeyUp;

package/hooks/useMeasure.d.ts

@@ -18,10 +18,5 @@ export type UseMeasureReturn = [
     RectReadOnly,
     () => void
 ];
-/**
- * Use measure hook
- *
- * @borrows [pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
- */
 export declare function useMeasure(options?: UseMeasureOptions): UseMeasureReturn;
 export default useMeasure;

package/hooks/useMeasure.js

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

package/hooks/useMountedState.d.ts

@@ -1,5 +1,2 @@
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
- */
 export declare function useMountedState(): () => boolean;
 export default useMountedState;

package/hooks/useMountedState.js

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

package/hooks/useNavigateAway.d.ts

@@ -1,32 +1,3 @@
-/**
- * @return A custom error message (most browser will ignore it), or just a
- * boolean to signal whether we want to prompt the user
- *
- * We might instead return an array with the above as first element and two
- * callbacks, but the callback technique is too cumbersome and unreliable
- * probably:
- * 2) A callback on confirmed leaving
- * 3) A callback on cancel, user stays on page
- */
 export type UseNavigateAwayHandler = (event: BeforeUnloadEvent) => string | boolean;
-/**
- * @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 declare const useNavigateAway: (handler: UseNavigateAwayHandler) => void;
 export default useNavigateAway;

package/hooks/useNavigateAway.js

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

package/hooks/usePrevious.d.ts

@@ -1,5 +1,2 @@
-/**
- * @borrows [samselikoff/animated-carousel](https://github.com/samselikoff/2022-06-02-animated-carousel/blob/main/pages/final.jsx)
- */
 export declare function usePrevious<T>(state: T, defaulValue: T): T;
 export default usePrevious;

package/hooks/usePrevious.js

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

package/hooks/{usePreviousRef.mjs → usePreviousRef.js}

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

package/hooks/useScrollPosition.d.ts

@@ -4,12 +4,5 @@ type Position = {
     y: number;
 };
 type ElementRef = React.MutableRefObject<HTMLElement | undefined>;
-/**
- * @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 declare const useScrollPosition: (effect: (currentPosition: Position, prevPosition: Position) => void, deps?: import("react").DependencyList, element?: ElementRef, boundingElement?: ElementRef, wait?: number) => void;
 export default useScrollPosition;

package/hooks/useScrollPosition.js

@@ -0,0 +1,61 @@
+import { useRef } from "react";
+import isBrowser from "@koine/utils/isBrowser";
+import listenScroll from "@koine/dom/listenScroll";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
+var zeroPosition = { x: 0, y: 0 };
+var getClientRect = function (element) {
+    return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+};
+var getScrollPosition = function (element, boundingElement) {
+    if (!isBrowser) {
+        return zeroPosition;
+    }
+    if (!boundingElement) {
+        return { x: window.scrollX, y: window.scrollY };
+    }
+    var targetPosition = getClientRect((element === null || element === void 0 ? void 0 : element.current) || document.body);
+    var 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 var useScrollPosition = function (effect, deps, element, boundingElement, wait) {
+    if (deps === void 0) { deps = []; }
+    var position = useRef(getScrollPosition(null, boundingElement));
+    var throttleTimeout = null;
+    var callBack = function () {
+        var current = getScrollPosition(element, boundingElement);
+        effect(current, position.current);
+        position.current = current;
+        throttleTimeout = null;
+    };
+    useIsomorphicLayoutEffect(function () {
+        if (!isBrowser) {
+            return undefined;
+        }
+        var handleScroll = function () {
+            if (wait) {
+                if (throttleTimeout === null) {
+                    throttleTimeout = window.setTimeout(callBack, wait);
+                }
+            }
+            else {
+                callBack();
+            }
+        };
+        var listener = listenScroll(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
+        return function () {
+            listener();
+            if (throttleTimeout) {
+                clearTimeout(throttleTimeout);
+            }
+        };
+    }, deps);
+};
+export default useScrollPosition;

package/hooks/useScrollThreshold.js

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

package/hooks/useScrollTo.js

@@ -0,0 +1,22 @@
+import isBrowser from "@koine/utils/isBrowser";
+import useHeader from "../Header/useHeader.js";
+export function useScrollTo(id, offset) {
+    if (id === void 0) { id = ""; }
+    if (offset === void 0) { offset = 0; }
+    var _a = useHeader(), headerHeight = _a[2];
+    if (!isBrowser) {
+        return;
+    }
+    var headerOffset = headerHeight || 0;
+    var element = document.getElementById(id);
+    var 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.d.ts

@@ -1,8 +1,2 @@
-/**
- *
- * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
- * selector we will keep into account the _fixedOffset_ despite this option.
- * @returns
- */
 export declare function useSmoothScroll(disregardAutomaticFixedOffset?: boolean): (to?: number | string, customOffset?: number, callback?: () => void, fallbackTimeout?: number, behavior?: ScrollBehavior) => void;
 export default useSmoothScroll;

package/hooks/useSmoothScroll.js

@@ -0,0 +1,33 @@
+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.js";
+export function useSmoothScroll(disregardAutomaticFixedOffset) {
+    var fixedOffset = useFixedOffset();
+    var scroll = useCallback(function (to, customOffset, callback, fallbackTimeout, behavior) {
+        var top = undefined;
+        var toIsElement = false;
+        if (isNumber(to)) {
+            top = to;
+        }
+        else if (to) {
+            var 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.d.ts

@@ -1,14 +1,2 @@
-/**
- * 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 declare function useSpinDelay(loading: boolean, delay?: number, minDuration?: number): boolean;
 export default useSpinDelay;