@koine/react 1.1.10 → 1.1.12

package/{node/hooks/useMeasure.js → hooks/useMeasure.mjs}

@@ -1,14 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMeasure = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var debounce_1 = tslib_1.__importDefault(require("@koine/utils/debounce"));
-var noop_1 = tslib_1.__importDefault(require("@koine/utils/noop"));
-var listenResizeDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenResizeDebounced"));
-var listenScrollDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenScrollDebounced"));
-var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
-var off_1 = tslib_1.__importDefault(require("@koine/dom/off"));
+import { __spreadArray } from "tslib";
+import { useEffect, useState, useRef, useMemo } 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;
 // Returns a list of scroll offsets
 function findScrollContainers(element) {
@@ -18,7 +15,7 @@ function findScrollContainers(element) {
     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 tslib_1.__spreadArray(tslib_1.__spreadArray([], result, true), findScrollContainers(element.parentElement), true);
+    return __spreadArray(__spreadArray([], result, true), findScrollContainers(element.parentElement), true);
 }
 var keys = [
     "x",
@@ -38,9 +35,9 @@ var areBoundsEqual = function (a, b) {
  *
  * @borrows [pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
  */
-function useMeasure(options) {
+export function useMeasure(options) {
     var _a = (options || {}).scroll /* offsetSize = false */, scroll = _a === void 0 ? false : _a /* offsetSize = false */;
-    var _b = (0, react_1.useState)({
+    var _b = useState({
         left: 0,
         top: 0,
         width: 0,
@@ -51,7 +48,7 @@ function useMeasure(options) {
         y: 0,
     }), bounds = _b[0], setBounds = _b[1];
     // keep all state in a ref
-    var state = (0, react_1.useRef)([
+    var state = useRef([
         // element
         null,
         // scrollContainers
@@ -62,13 +59,13 @@ function useMeasure(options) {
         bounds,
     ]);
     // make sure to update state only as long as the component is truly mounted
-    var mounted = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(function () {
+    var mounted = useRef(false);
+    useEffect(function () {
         mounted.current = true;
         return function () { return void (mounted.current = false); };
     }, []);
     // memoize handlers, so event-listeners know when they should update
-    var _c = (0, react_1.useMemo)(function () {
+    var _c = useMemo(function () {
         var callback = function () {
             var _args = [];
             for (var _i = 0; _i < arguments.length; _i++) {
@@ -88,7 +85,7 @@ function useMeasure(options) {
                 setBounds(size);
             }
         };
-        var debouncedCallback = (0, debounce_1.default)(callback);
+        var debouncedCallback = debounce(callback);
         return [callback, debouncedCallback, debouncedCallback];
     }, [setBounds /* , offsetSize */]), forceRefresh = _c[0] /* resizeChange */, scrollChange = _c[2];
     // cleanup current scroll-listeners / observers
@@ -96,7 +93,7 @@ function useMeasure(options) {
         var _a = state.current, scrollContainers = _a[1], resizeObserver = _a[2];
         if (scrollContainers) {
             scrollContainers.forEach(function (element) {
-                return (0, off_1.default)(element, "scroll", scrollChange);
+                return off(element, "scroll", scrollChange);
             });
             state.current[1] = null;
         }
@@ -116,7 +113,7 @@ function useMeasure(options) {
             observer.observe(element);
             if (scroll && scrollContainers) {
                 scrollContainers.forEach(function (scrollContainer) {
-                    return (0, on_1.default)(scrollContainer, "scroll", scrollChange, {
+                    return on(scrollContainer, "scroll", scrollChange, {
                         capture: true,
                         passive: true,
                     });
@@ -139,26 +136,26 @@ function useMeasure(options) {
     //   debugger;
     //   forceRefresh();
     // });
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         if (scroll) {
-            var listener = (0, listenScrollDebounced_1.default)(0, forceRefresh, 100);
+            var listener = listenScrollDebounced(0, forceRefresh, 100);
             return listener;
         }
-        return noop_1.default;
+        return noop;
     }, [scroll, forceRefresh]);
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         // const listener = listenResizeDebounced(onWindowResize);
         // return listener;
-        var listener = (0, listenResizeDebounced_1.default)(0, forceRefresh, 100);
+        var listener = listenResizeDebounced(0, forceRefresh, 100);
         return listener;
     }, [forceRefresh]);
     // respond to changes that are relevant for the listeners
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         removeListeners();
         addListeners();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [scroll /* , scrollChange, resizeChange */]);
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         // operate on mount, @kuus on the original version there is no call on mount?
         forceRefresh();
         // remove all listeners when the components unmounts
@@ -167,5 +164,4 @@ function useMeasure(options) {
     }, []);
     return [ref, bounds, forceRefresh];
 }
-exports.useMeasure = useMeasure;
-exports.default = useMeasure;
+export default useMeasure;

package/hooks/useMount.js

@@ -1,10 +1,14 @@
-import { useEffectOnce } from "./useEffectOnce";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMount = void 0;
+var useEffectOnce_1 = require("./useEffectOnce");
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMount.ts)
  */
-export var useMount = function (fn) {
-    useEffectOnce(function () {
+var useMount = function (fn) {
+    (0, useEffectOnce_1.useEffectOnce)(function () {
         fn();
     });
 };
-export default useMount;
+exports.useMount = useMount;
+exports.default = exports.useMount;

package/hooks/useMount.mjs

@@ -0,0 +1,10 @@
+import { useEffectOnce } from "./useEffectOnce";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMount.ts)
+ */
+export var useMount = function (fn) {
+    useEffectOnce(function () {
+        fn();
+    });
+};
+export default useMount;

package/hooks/useMountedState.js

@@ -1,11 +1,14 @@
-import { useCallback, useEffect, useRef } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMountedState = void 0;
+var react_1 = require("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 () {
+function useMountedState() {
+    var mountedRef = (0, react_1.useRef)(false);
+    var get = (0, react_1.useCallback)(function () { return mountedRef.current; }, []);
+    (0, react_1.useEffect)(function () {
         mountedRef.current = true;
         return function () {
             mountedRef.current = false;
@@ -13,4 +16,5 @@ export function useMountedState() {
     }, []);
     return get;
 }
-export default useMountedState;
+exports.useMountedState = useMountedState;
+exports.default = useMountedState;

package/hooks/useMountedState.mjs

@@ -0,0 +1,16 @@
+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 () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+}
+export default useMountedState;

package/hooks/useNavigateAway.js

@@ -1,5 +1,9 @@
-import { useEffect, useRef } from "react";
-import on from "@koine/dom/on";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useNavigateAway = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
 // type UseNavigateAwayPagehideHandler = (event: PageTransitionEvent) => unknown;
 /**
  * @resources
@@ -20,10 +24,10 @@ 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();
+var useNavigateAway = function (handler) {
+    var beforeUnloadHandlerRef = (0, react_1.useRef)();
     // const pagehideHandlerRef = useRef<UseNavigateAwayPagehideHandler | undefined>();
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         beforeUnloadHandlerRef.current = function (event) {
             var customMessageOrCondition = handler(event);
             if (customMessageOrCondition) {
@@ -53,8 +57,8 @@ export var useNavigateAway = function (handler) {
         //   }
         // };
     }, [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); });
+    (0, react_1.useEffect)(function () {
+        var listenerBeforeunload = (0, on_1.default)(window, "beforeunload", function (event) { var _a; return (_a = beforeUnloadHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(beforeUnloadHandlerRef, event); });
         // const listenerPagehide = on(window, "pagehide", (event) =>
         //   pagehideHandlerRef.current?.(event)
         // );
@@ -65,4 +69,5 @@ export var useNavigateAway = function (handler) {
         // };
     }, []);
 };
-export default useNavigateAway;
+exports.useNavigateAway = useNavigateAway;
+exports.default = exports.useNavigateAway;

package/{node/hooks/useNavigateAway.js → hooks/useNavigateAway.mjs}

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useNavigateAway = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
+import { useEffect, useRef } from "react";
+import on from "@koine/dom/on";
 // type UseNavigateAwayPagehideHandler = (event: PageTransitionEvent) => unknown;
 /**
  * @resources
@@ -24,10 +20,10 @@ var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
  * For the callback technique see:
  * - https://stackoverflow.com/a/11835394/1938970
  */
-var useNavigateAway = function (handler) {
-    var beforeUnloadHandlerRef = (0, react_1.useRef)();
+export var useNavigateAway = function (handler) {
+    var beforeUnloadHandlerRef = useRef();
     // const pagehideHandlerRef = useRef<UseNavigateAwayPagehideHandler | undefined>();
-    (0, react_1.useEffect)(function () {
+    useEffect(function () {
         beforeUnloadHandlerRef.current = function (event) {
             var customMessageOrCondition = handler(event);
             if (customMessageOrCondition) {
@@ -57,8 +53,8 @@ var useNavigateAway = function (handler) {
         //   }
         // };
     }, [handler]);
-    (0, react_1.useEffect)(function () {
-        var listenerBeforeunload = (0, on_1.default)(window, "beforeunload", function (event) { var _a; return (_a = beforeUnloadHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(beforeUnloadHandlerRef, event); });
+    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); });
         // const listenerPagehide = on(window, "pagehide", (event) =>
         //   pagehideHandlerRef.current?.(event)
         // );
@@ -69,5 +65,4 @@ var useNavigateAway = function (handler) {
         // };
     }, []);
 };
-exports.useNavigateAway = useNavigateAway;
-exports.default = exports.useNavigateAway;
+export default useNavigateAway;

package/hooks/usePrevious.js

@@ -1,12 +1,16 @@
-import { useState } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrevious = void 0;
+var react_1 = require("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];
+function usePrevious(state, defaulValue) {
+    var _a = (0, react_1.useState)([state, defaulValue]), tuple = _a[0], setTuple = _a[1];
     if (tuple[1] !== state) {
         setTuple([tuple[1], state]);
     }
     return tuple[0];
 }
-export default usePrevious;
+exports.usePrevious = usePrevious;
+exports.default = usePrevious;

package/hooks/usePrevious.mjs

@@ -0,0 +1,12 @@
+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];
+    if (tuple[1] !== state) {
+        setTuple([tuple[1], state]);
+    }
+    return tuple[0];
+}
+export default usePrevious;

package/hooks/usePreviousRef.js

@@ -1,9 +1,13 @@
-import { useEffect, useRef } from "react";
-export function usePreviousRef(value) {
-    var ref = useRef();
-    useEffect(function () {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePreviousRef = void 0;
+var react_1 = require("react");
+function usePreviousRef(value) {
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
         ref.current = value;
     });
     return ref.current;
 }
-export default usePreviousRef;
+exports.usePreviousRef = usePreviousRef;
+exports.default = usePreviousRef;

package/hooks/usePreviousRef.mjs

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

package/hooks/useScrollPosition.js

@@ -1,13 +1,17 @@
-import { useRef } from "react";
-import isBrowser from "@koine/utils/isBrowser";
-import listenScroll from "@koine/dom/listenScroll";
-import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollPosition = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
+var listenScroll_1 = tslib_1.__importDefault(require("@koine/dom/listenScroll"));
+var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("./useIsomorphicLayoutEffect"));
 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) {
+    if (!isBrowser_1.default) {
         return zeroPosition;
     }
     if (!boundingElement) {
@@ -32,9 +36,9 @@ var getScrollPosition = function (element, boundingElement) {
  * - 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) {
+var useScrollPosition = function (effect, deps, element, boundingElement, wait) {
     if (deps === void 0) { deps = []; }
-    var position = useRef(getScrollPosition(null, boundingElement));
+    var position = (0, react_1.useRef)(getScrollPosition(null, boundingElement));
     var throttleTimeout = null;
     var callBack = function () {
         var current = getScrollPosition(element, boundingElement);
@@ -42,8 +46,8 @@ export var useScrollPosition = function (effect, deps, element, boundingElement,
         position.current = current;
         throttleTimeout = null;
     };
-    useIsomorphicLayoutEffect(function () {
-        if (!isBrowser) {
+    (0, useIsomorphicLayoutEffect_1.default)(function () {
+        if (!isBrowser_1.default) {
             return undefined;
         }
         var handleScroll = function () {
@@ -56,7 +60,7 @@ export var useScrollPosition = function (effect, deps, element, boundingElement,
                 callBack();
             }
         };
-        var listener = listenScroll(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
+        var listener = (0, listenScroll_1.default)(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
         return function () {
             listener();
             if (throttleTimeout) {
@@ -65,4 +69,5 @@ export var useScrollPosition = function (effect, deps, element, boundingElement,
         };
     }, deps);
 };
-export default useScrollPosition;
+exports.useScrollPosition = useScrollPosition;
+exports.default = exports.useScrollPosition;

package/{node/hooks/useScrollPosition.js → hooks/useScrollPosition.mjs}

@@ -1,17 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScrollPosition = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
-var listenScroll_1 = tslib_1.__importDefault(require("@koine/dom/listenScroll"));
-var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("./useIsomorphicLayoutEffect"));
+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();
 };
 var getScrollPosition = function (element, boundingElement) {
-    if (!isBrowser_1.default) {
+    if (!isBrowser) {
         return zeroPosition;
     }
     if (!boundingElement) {
@@ -36,9 +32,9 @@ var getScrollPosition = function (element, boundingElement) {
  * - reused internal helper functions
  * - compacted object arguments in functions as plain argument list to improve compression
  */
-var useScrollPosition = function (effect, deps, element, boundingElement, wait) {
+export var useScrollPosition = function (effect, deps, element, boundingElement, wait) {
     if (deps === void 0) { deps = []; }
-    var position = (0, react_1.useRef)(getScrollPosition(null, boundingElement));
+    var position = useRef(getScrollPosition(null, boundingElement));
     var throttleTimeout = null;
     var callBack = function () {
         var current = getScrollPosition(element, boundingElement);
@@ -46,8 +42,8 @@ var useScrollPosition = function (effect, deps, element, boundingElement, wait)
         position.current = current;
         throttleTimeout = null;
     };
-    (0, useIsomorphicLayoutEffect_1.default)(function () {
-        if (!isBrowser_1.default) {
+    useIsomorphicLayoutEffect(function () {
+        if (!isBrowser) {
             return undefined;
         }
         var handleScroll = function () {
@@ -60,7 +56,7 @@ var useScrollPosition = function (effect, deps, element, boundingElement, wait)
                 callBack();
             }
         };
-        var listener = (0, listenScroll_1.default)(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
+        var listener = listenScroll(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
         return function () {
             listener();
             if (throttleTimeout) {
@@ -69,5 +65,4 @@ var useScrollPosition = function (effect, deps, element, boundingElement, wait)
         };
     }, deps);
 };
-exports.useScrollPosition = useScrollPosition;
-exports.default = exports.useScrollPosition;
+export default useScrollPosition;

package/hooks/useScrollThreshold.js

@@ -1,9 +1,13 @@
-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 () {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollThreshold = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var noop_1 = tslib_1.__importDefault(require("@koine/utils/noop"));
+var listenScroll_1 = tslib_1.__importDefault(require("@koine/dom/listenScroll"));
+var useScrollThreshold = function (threshold, callback) {
+    var _a = (0, react_1.useState)(false), isBelow = _a[0], setIsBelow = _a[1];
+    var handler = (0, react_1.useCallback)(function () {
         if (threshold) {
             var posY = window.scrollY; // * -1;
             var isAbove = posY < threshold;
@@ -14,15 +18,16 @@ export var useScrollThreshold = function (threshold, callback) {
                 callback(isAbove, isBelow_1);
         }
     }, [threshold, callback]);
-    useEffect(function () {
+    (0, react_1.useEffect)(function () {
         if (threshold) {
             // const listener = listenScrollThrottled(0, handler, 50);
-            var listener = listenScroll(handler);
+            var listener = (0, listenScroll_1.default)(handler);
             handler();
             return listener;
         }
-        return noop;
+        return noop_1.default;
     }, [threshold, handler]);
     return isBelow;
 };
-export default useScrollThreshold;
+exports.useScrollThreshold = useScrollThreshold;
+exports.default = exports.useScrollThreshold;

package/hooks/useScrollThreshold.mjs

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

package/hooks/useScrollTo.js

@@ -1,10 +1,14 @@
-import isBrowser from "@koine/utils/isBrowser";
-import useHeader from "../Header/useHeader";
-export function useScrollTo(id, offset) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollTo = void 0;
+var tslib_1 = require("tslib");
+var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
+var useHeader_1 = tslib_1.__importDefault(require("../Header/useHeader"));
+function useScrollTo(id, offset) {
     if (id === void 0) { id = ""; }
     if (offset === void 0) { offset = 0; }
-    var _a = useHeader(), headerHeight = _a[2];
-    if (!isBrowser) {
+    var _a = (0, useHeader_1.default)(), headerHeight = _a[2];
+    if (!isBrowser_1.default) {
         return;
     }
     var headerOffset = headerHeight || 0;
@@ -19,4 +23,5 @@ export function useScrollTo(id, offset) {
     top -= headerOffset;
     window.scroll(0, top);
 }
-export default useScrollTo;
+exports.useScrollTo = useScrollTo;
+exports.default = useScrollTo;

package/hooks/useScrollTo.mjs

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