@koine/react 2.0.0-beta.1 → 2.0.0-beta.11

package/hooks/useInterval.mjs

@@ -1,28 +1,29 @@
-import { __spreadArray } from "tslib";
 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) {
-    if (deps === void 0) { deps = []; }
-    var savedCallback = useRef();
-    useEffect(function () {
+ */ export function useInterval(callback, delay, deps = []) {
+    const savedCallback = useRef();
+    useEffect(()=>{
         savedCallback.current = callback;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([callback], deps, true));
-    useEffect(function () {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        callback,
+        ...deps
+    ]);
+    useEffect(()=>{
         function tick() {
-            if (savedCallback.current)
-                savedCallback.current();
+            if (savedCallback.current) savedCallback.current();
         }
         if (delay !== null) {
-            var id_1 = setInterval(tick, delay);
-            return function () { return clearInterval(id_1); };
+            const id = setInterval(tick, delay);
+            return ()=>clearInterval(id);
         }
         return noop;
-    }, [delay]);
+    }, [
+        delay
+    ]);
 }
 export default useInterval;

package/hooks/useIsomorphicLayoutEffect.mjs

@@ -2,8 +2,5 @@ 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 var useIsomorphicLayoutEffect = isBrowser
-    ? useLayoutEffect
-    : useEffect;
+ */ export const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
 export default useIsomorphicLayoutEffect;

package/hooks/useKeyUp.mjs

@@ -1,23 +1,21 @@
-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) {
+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) {
+            if (!event.ctrlKey && !event.altKey && !event.shiftKey && !event.metaKey) {
                 callback(event);
             }
         });
         return listener;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([callback], deps, true));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        callback,
+        ...deps
+    ]);
 }
 export default useKeyUp;

package/hooks/useMeasure.mjs

@@ -1,23 +1,27 @@
-import { __spreadArray } from "tslib";
-import { useEffect, useState, useRef, useMemo } from "react";
+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 on from "@koine/dom/on";
 import off from "@koine/dom/off";
-var observer;
+import on from "@koine/dom/on";
+let observer;
 // Returns a list of scroll offsets
 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);
+    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)
+    ];
 }
-var keys = [
+const keys = [
     "x",
     "y",
     "top",
@@ -25,19 +29,16 @@ var keys = [
     "left",
     "right",
     "width",
-    "height",
+    "height"
 ];
-var areBoundsEqual = function (a, b) {
-    return keys.every(function (key) { return a[key] === b[key]; });
-};
+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) {
-    var _a = (options || {}).scroll /* offsetSize = false */, scroll = _a === void 0 ? false : _a /* offsetSize = false */;
-    var _b = useState({
+ */ export function useMeasure(options) {
+    const { scroll = false } = options || {};
+    const [bounds, setBounds] = useState({
         left: 0,
         top: 0,
         width: 0,
@@ -45,10 +46,10 @@ export function useMeasure(options) {
         bottom: 0,
         right: 0,
         x: 0,
-        y: 0,
-    }), bounds = _b[0], setBounds = _b[1];
+        y: 0
+    });
     // keep all state in a ref
-    var state = useRef([
+    const state = useRef([
         // element
         null,
         // scrollContainers
@@ -56,25 +57,20 @@ export function useMeasure(options) {
         // resizeObserver
         null,
         // lastBounds
-        bounds,
+        bounds
     ]);
     // make sure to update state only as long as the component is truly mounted
-    var mounted = useRef(false);
-    useEffect(function () {
+    const mounted = useRef(false);
+    useEffect(()=>{
         mounted.current = true;
-        return function () { return void (mounted.current = false); };
+        return ()=>void (mounted.current = false);
     }, []);
     // memoize handlers, so event-listeners know when they should update
-    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();
+    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;
@@ -85,16 +81,20 @@ export function useMeasure(options) {
                 setBounds(size);
             }
         };
-        var debouncedCallback = debounce(callback);
-        return [callback, debouncedCallback, debouncedCallback];
-    }, [setBounds /* , offsetSize */]), forceRefresh = _c[0] /* resizeChange */, scrollChange = _c[2];
+        const debouncedCallback = debounce(callback);
+        return [
+            callback,
+            debouncedCallback,
+            debouncedCallback
+        ];
+    }, [
+        setBounds /* , offsetSize */ 
+    ]);
     // cleanup current scroll-listeners / observers
     function removeListeners() {
-        var _a = state.current, scrollContainers = _a[1], resizeObserver = _a[2];
+        const [, scrollContainers, resizeObserver] = state.current;
         if (scrollContainers) {
-            scrollContainers.forEach(function (element) {
-                return off(element, "scroll", scrollChange);
-            });
+            scrollContainers.forEach((element)=>off(element, "scroll", scrollChange));
             state.current[1] = null;
         }
         if (resizeObserver) {
@@ -104,27 +104,23 @@ export function useMeasure(options) {
     }
     // add scroll-listeners / observers
     function addListeners() {
-        var _a = state.current, element = _a[0], scrollContainers = _a[1];
-        if (!element)
-            return;
+        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(function (scrollContainer) {
-                    return on(scrollContainer, "scroll", scrollChange, {
+                scrollContainers.forEach((scrollContainer)=>on(scrollContainer, "scroll", scrollChange, {
                         capture: true,
-                        passive: true,
-                    });
-                });
+                        passive: true
+                    }));
             }
         }
     }
     // the ref we expose to the user
-    var ref = function (node) {
-        if (!node || node === state.current[0])
-            return;
+    const ref = (node)=>{
+        if (!node || node === state.current[0]) return;
         removeListeners();
         state.current[0] = node;
         state.current[1] = findScrollContainers(node);
@@ -136,32 +132,43 @@ export function useMeasure(options) {
     //   debugger;
     //   forceRefresh();
     // });
-    useEffect(function () {
+    useEffect(()=>{
         if (scroll) {
-            var listener = listenScrollDebounced(0, forceRefresh, 100);
+            const listener = listenScrollDebounced(0, forceRefresh, 100);
             return listener;
         }
         return noop;
-    }, [scroll, forceRefresh]);
-    useEffect(function () {
+    }, [
+        scroll,
+        forceRefresh
+    ]);
+    useEffect(()=>{
         // const listener = listenResizeDebounced(onWindowResize);
         // return listener;
-        var listener = listenResizeDebounced(0, forceRefresh, 100);
+        const listener = listenResizeDebounced(0, forceRefresh, 100);
         return listener;
-    }, [forceRefresh]);
+    }, [
+        forceRefresh
+    ]);
     // respond to changes that are relevant for the listeners
-    useEffect(function () {
+    useEffect(()=>{
         removeListeners();
         addListeners();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [scroll /* , scrollChange, resizeChange */]);
-    useEffect(function () {
+    // 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
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return [ref, bounds, forceRefresh];
+    return [
+        ref,
+        bounds,
+        forceRefresh
+    ];
 }
 export default useMeasure;

package/hooks/useMountedState.mjs

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

package/hooks/useNavigateAway.mjs

@@ -19,50 +19,51 @@ import on from "@koine/dom/on";
  *
  * For the callback technique see:
  * - https://stackoverflow.com/a/11835394/1938970
- */
-export var useNavigateAway = function (handler) {
-    var beforeUnloadHandlerRef = useRef();
+ */ export const useNavigateAway = (handler)=>{
+    const beforeUnloadHandlerRef = useRef();
     // const pagehideHandlerRef = useRef<UseNavigateAwayPagehideHandler | undefined>();
-    useEffect(function () {
-        beforeUnloadHandlerRef.current = function (event) {
-            var customMessageOrCondition = handler(event);
+    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);
+                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 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(function () {
-        var listenerBeforeunload = on(window, "beforeunload", function (event) { var _a; return (_a = beforeUnloadHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(beforeUnloadHandlerRef, event); });
+    // 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();
-        // };
+    // return () => {
+    //   listenerBeforeunload();
+    //   // listenerPagehide();
+    // };
     }, []);
 };
 export default useNavigateAway;

package/hooks/usePrevious.mjs

@@ -1,11 +1,16 @@
 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) {
-    var _a = useState([state, defaulValue]), tuple = _a[0], setTuple = _a[1];
+ */ export function usePrevious(state, defaulValue) {
+    const [tuple, setTuple] = useState([
+        state,
+        defaulValue
+    ]);
     if (tuple[1] !== state) {
-        setTuple([tuple[1], state]);
+        setTuple([
+            tuple[1],
+            state
+        ]);
     }
     return tuple[0];
 }

package/hooks/usePreviousRef.mjs

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

package/hooks/useScrollPosition.mjs

@@ -2,28 +2,33 @@ import { useRef } from "react";
 import isBrowser from "@koine/utils/isBrowser";
 import listenScroll from "@koine/dom/listenScroll";
 import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
-var zeroPosition = { x: 0, y: 0 };
-var getClientRect = function (element) {
-    return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+const zeroPosition = {
+    x: 0,
+    y: 0
 };
-var getScrollPosition = function (element, boundingElement) {
+const getClientRect = (element)=>element?.getBoundingClientRect();
+const getScrollPosition = (element, boundingElement)=>{
     if (!isBrowser) {
         return zeroPosition;
     }
     if (!boundingElement) {
-        return { x: window.scrollX, y: window.scrollY };
+        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);
+    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 };
+    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>`
@@ -31,33 +36,30 @@ var getScrollPosition = function (element, boundingElement) {
  * We've just:
  * - reused internal helper functions
  * - compacted object arguments in functions as plain argument list to improve compression
- */
-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);
+ */ 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(function () {
+    useIsomorphicLayoutEffect(()=>{
         if (!isBrowser) {
             return undefined;
         }
-        var handleScroll = function () {
+        const handleScroll = ()=>{
             if (wait) {
                 if (throttleTimeout === null) {
                     throttleTimeout = window.setTimeout(callBack, wait);
                 }
-            }
-            else {
+            } else {
                 callBack();
             }
         };
-        var listener = listenScroll(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
-        return function () {
+        const listener = listenScroll(handleScroll, boundingElement?.current);
+        return ()=>{
             listener();
             if (throttleTimeout) {
                 clearTimeout(throttleTimeout);

package/hooks/useScrollThreshold.mjs

@@ -1,28 +1,33 @@
 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 () {
+export const useScrollThreshold = (threshold, callback)=>{
+    const [isBelow, setIsBelow] = useState(false);
+    const handler = useCallback(()=>{
         if (threshold) {
-            var posY = window.scrollY; // * -1;
-            var isAbove = posY < threshold;
-            var isBelow_1 = posY > threshold;
+            const posY = window.scrollY; // * -1;
+            const isAbove = posY < threshold;
+            const isBelow = posY > threshold;
             // console.log("useScrollThreshold setIsBelow", isBelow, posY, threshold);
-            setIsBelow(isBelow_1);
-            if (callback)
-                callback(isAbove, isBelow_1);
+            setIsBelow(isBelow);
+            if (callback) callback(isAbove, isBelow);
         }
-    }, [threshold, callback]);
-    useEffect(function () {
+    }, [
+        threshold,
+        callback
+    ]);
+    useEffect(()=>{
         if (threshold) {
             // const listener = listenScrollThrottled(0, handler, 50);
-            var listener = listenScroll(handler);
+            const listener = listenScroll(handler);
             handler();
             return listener;
         }
         return noop;
-    }, [threshold, handler]);
+    }, [
+        threshold,
+        handler
+    ]);
     return isBelow;
 };
 export default useScrollThreshold;

package/hooks/useScrollTo.mjs

@@ -1,19 +1,17 @@
 import isBrowser from "@koine/utils/isBrowser";
 import useHeader from "../Header/useHeader";
-export function useScrollTo(id, offset) {
-    if (id === void 0) { id = ""; }
-    if (offset === void 0) { offset = 0; }
-    var _a = useHeader(), headerHeight = _a[2];
+export function useScrollTo(id = "", offset = 0) {
+    const [, , headerHeight] = useHeader();
     if (!isBrowser) {
         return;
     }
-    var headerOffset = headerHeight || 0;
-    var element = document.getElementById(id);
-    var top = 0;
+    const headerOffset = headerHeight || 0;
+    let element = document.getElementById(id);
+    let top = 0;
     if (element && element.offsetParent) {
         do {
             top += element.offsetTop;
-        } while ((element = element.offsetParent));
+        }while (element = element.offsetParent)
     }
     top -= offset;
     top -= headerOffset;