@koine/react 1.1.10 → 1.1.12

package/hooks/useEffectOnce.js

@@ -1,9 +1,13 @@
-import { useEffect } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEffectOnce = void 0;
+var react_1 = require("react");
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts)
  */
-export var useEffectOnce = function (effect) {
+var useEffectOnce = function (effect) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(effect, []);
+    (0, react_1.useEffect)(effect, []);
 };
-export default useEffectOnce;
+exports.useEffectOnce = useEffectOnce;
+exports.default = exports.useEffectOnce;

package/hooks/useEffectOnce.mjs

@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts)
+ */
+export var useEffectOnce = function (effect) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, []);
+};
+export default useEffectOnce;

package/hooks/useFirstMountState.js

@@ -1,13 +1,17 @@
-import { useRef } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFirstMountState = void 0;
+var react_1 = require("react");
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
  */
-export function useFirstMountState() {
-    var isFirst = useRef(true);
+function useFirstMountState() {
+    var isFirst = (0, react_1.useRef)(true);
     if (isFirst.current) {
         isFirst.current = false;
         return true;
     }
     return isFirst.current;
 }
-export default useFirstMountState;
+exports.useFirstMountState = useFirstMountState;
+exports.default = useFirstMountState;

package/hooks/useFirstMountState.mjs

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

package/hooks/useFixedOffset.js

@@ -1,12 +1,16 @@
-import { useRef } from "react";
-import injectCss from "@koine/dom/injectCss";
-import calculateFixedOffset from "@koine/dom/calculateFixedOffset";
-import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
-import $each from "@koine/dom/$each";
-import debounce from "@koine/utils/debounce";
-import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFixedOffset = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var injectCss_1 = tslib_1.__importDefault(require("@koine/dom/injectCss"));
+var calculateFixedOffset_1 = tslib_1.__importDefault(require("@koine/dom/calculateFixedOffset"));
+var listenResizeDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenResizeDebounced"));
+var _each_1 = tslib_1.__importDefault(require("@koine/dom/$each"));
+var debounce_1 = tslib_1.__importDefault(require("@koine/utils/debounce"));
+var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("./useIsomorphicLayoutEffect"));
 var inject = function (value) {
-    injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
+    (0, injectCss_1.default)("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
 };
 /**
  * # Use fixed offset
@@ -17,11 +21,11 @@ var inject = function (value) {
  *
  * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
  */
-export function useFixedOffset(selector) {
-    var fixedOffset = useRef(0);
-    useIsomorphicLayoutEffect(function () {
+function useFixedOffset(selector) {
+    var fixedOffset = (0, react_1.useRef)(0);
+    (0, useIsomorphicLayoutEffect_1.default)(function () {
         var update = function () {
-            var newFixedOffset = calculateFixedOffset();
+            var newFixedOffset = (0, calculateFixedOffset_1.default)();
             fixedOffset.current = newFixedOffset;
             // inject this CSS make the hashed deeplinks position the scroll at the
             // right offset
@@ -36,10 +40,10 @@ export function useFixedOffset(selector) {
                     newFixedOffset += entry.contentRect.height;
                 });
                 fixedOffset.current = newFixedOffset;
-                var updateOnResize = debounce(function () { return inject(newFixedOffset); }, 400, true);
+                var updateOnResize = (0, debounce_1.default)(function () { return inject(newFixedOffset); }, 400, true);
                 updateOnResize();
             });
-            $each(selector || "[data-fixed]", function ($el) {
+            (0, _each_1.default)(selector || "[data-fixed]", function ($el) {
                 if (observer_1)
                     observer_1.observe($el);
             });
@@ -48,10 +52,11 @@ export function useFixedOffset(selector) {
             };
         }
         else {
-            var listener = listenResizeDebounced(0, update);
+            var listener = (0, listenResizeDebounced_1.default)(0, update);
             return listener;
         }
     }, [selector]);
     return fixedOffset;
 }
-export default useFixedOffset;
+exports.useFixedOffset = useFixedOffset;
+exports.default = useFixedOffset;

package/hooks/useFixedOffset.mjs

@@ -0,0 +1,57 @@
+import { useRef } from "react";
+import injectCss from "@koine/dom/injectCss";
+import calculateFixedOffset from "@koine/dom/calculateFixedOffset";
+import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
+import $each from "@koine/dom/$each";
+import debounce from "@koine/utils/debounce";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
+var inject = function (value) {
+    injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(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) {
+    var fixedOffset = useRef(0);
+    useIsomorphicLayoutEffect(function () {
+        var update = function () {
+            var 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]");
+            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.js

@@ -1,12 +1,16 @@
-import { useRef } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFocus = void 0;
+var react_1 = require("react");
 /**
  * @see https://stackoverflow.com/a/54159564/1938970
  */
-export var useFocus = function () {
-    var element = useRef(null);
+var useFocus = function () {
+    var element = (0, react_1.useRef)(null);
     var setFocus = function () {
         element.current && element.current.focus();
     };
     return [element, setFocus];
 };
-export default useFocus;
+exports.useFocus = useFocus;
+exports.default = exports.useFocus;

package/hooks/useFocus.mjs

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

package/hooks/useInterval.js

@@ -1,19 +1,22 @@
-import { __spreadArray } from "tslib";
-import { useEffect, useRef } from "react";
-import noop from "@koine/utils/noop";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInterval = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var noop_1 = tslib_1.__importDefault(require("@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) {
+function useInterval(callback, delay, deps) {
     if (deps === void 0) { deps = []; }
-    var savedCallback = useRef();
-    useEffect(function () {
+    var savedCallback = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
         savedCallback.current = callback;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([callback], deps, true));
-    useEffect(function () {
+    }, tslib_1.__spreadArray([callback], deps, true));
+    (0, react_1.useEffect)(function () {
         function tick() {
             if (savedCallback.current)
                 savedCallback.current();
@@ -22,7 +25,8 @@ export function useInterval(callback, delay, deps) {
             var id_1 = setInterval(tick, delay);
             return function () { return clearInterval(id_1); };
         }
-        return noop;
+        return noop_1.default;
     }, [delay]);
 }
-export default useInterval;
+exports.useInterval = useInterval;
+exports.default = useInterval;

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

@@ -1,22 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInterval = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var noop_1 = tslib_1.__importDefault(require("@koine/utils/noop"));
+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
  */
-function useInterval(callback, delay, deps) {
+export function useInterval(callback, delay, deps) {
     if (deps === void 0) { deps = []; }
-    var savedCallback = (0, react_1.useRef)();
-    (0, react_1.useEffect)(function () {
+    var savedCallback = useRef();
+    useEffect(function () {
         savedCallback.current = callback;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, tslib_1.__spreadArray([callback], deps, true));
-    (0, react_1.useEffect)(function () {
+    }, __spreadArray([callback], deps, true));
+    useEffect(function () {
         function tick() {
             if (savedCallback.current)
                 savedCallback.current();
@@ -25,8 +22,7 @@ function useInterval(callback, delay, deps) {
             var id_1 = setInterval(tick, delay);
             return function () { return clearInterval(id_1); };
         }
-        return noop_1.default;
+        return noop;
     }, [delay]);
 }
-exports.useInterval = useInterval;
-exports.default = useInterval;
+export default useInterval;

package/hooks/useIsomorphicLayoutEffect.js

@@ -1,9 +1,13 @@
-import { useEffect, useLayoutEffect } from "react";
-import isBrowser from "@koine/utils/isBrowser";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsomorphicLayoutEffect = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
  */
-export var useIsomorphicLayoutEffect = isBrowser
-    ? useLayoutEffect
-    : useEffect;
-export default useIsomorphicLayoutEffect;
+exports.useIsomorphicLayoutEffect = isBrowser_1.default
+    ? react_1.useLayoutEffect
+    : react_1.useEffect;
+exports.default = exports.useIsomorphicLayoutEffect;

package/hooks/useIsomorphicLayoutEffect.mjs

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

package/hooks/useKeyUp.js

@@ -1,10 +1,13 @@
-import { __spreadArray } from "tslib";
-import { useEffect } from "react";
-import on from "@koine/dom/on";
-export function useKeyUp(callback, deps) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useKeyUp = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
+function useKeyUp(callback, deps) {
     if (deps === void 0) { deps = []; }
-    useEffect(function () {
-        var listener = on(window, "keyup", function (event) {
+    (0, react_1.useEffect)(function () {
+        var listener = (0, on_1.default)(window, "keyup", function (event) {
             // const { key } = event;
             // be sure we do not intercept keys combinations maybe used for other
             // actions like native browser navigation shortcuts
@@ -18,6 +21,7 @@ export function useKeyUp(callback, deps) {
         });
         return listener;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([callback], deps, true));
+    }, tslib_1.__spreadArray([callback], deps, true));
 }
-export default useKeyUp;
+exports.useKeyUp = useKeyUp;
+exports.default = useKeyUp;

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

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeyUp = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
-function useKeyUp(callback, deps) {
+import { __spreadArray } from "tslib";
+import { useEffect } from "react";
+import on from "@koine/dom/on";
+export function useKeyUp(callback, deps) {
     if (deps === void 0) { deps = []; }
-    (0, react_1.useEffect)(function () {
-        var listener = (0, on_1.default)(window, "keyup", function (event) {
+    useEffect(function () {
+        var listener = on(window, "keyup", function (event) {
             // const { key } = event;
             // be sure we do not intercept keys combinations maybe used for other
             // actions like native browser navigation shortcuts
@@ -21,7 +18,6 @@ function useKeyUp(callback, deps) {
         });
         return listener;
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, tslib_1.__spreadArray([callback], deps, true));
+    }, __spreadArray([callback], deps, true));
 }
-exports.useKeyUp = useKeyUp;
-exports.default = useKeyUp;
+export default useKeyUp;

package/hooks/useMeasure.js

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