@koine/react 1.1.5 → 1.1.7

package/hooks/useScrollPosition.d.ts

@@ -11,5 +11,5 @@ type ElementRef = React.MutableRefObject<HTMLElement | undefined>;
  * - 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, useWindow?: boolean, wait?: number, boundingElement?: ElementRef) => void;
+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

@@ -1,19 +1,20 @@
 import { useRef } from "react";
 import { isBrowser } from "@koine/utils";
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+import { listenScroll } from "@koine/dom";
 var zeroPosition = { x: 0, y: 0 };
 var getClientRect = function (element) {
     return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
 };
-var getScrollPosition = function (element, useWindow, boundingElement) {
+var getScrollPosition = function (element, boundingElement) {
     if (!isBrowser) {
         return zeroPosition;
     }
-    if (useWindow) {
+    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 === null || boundingElement === void 0 ? void 0 : boundingElement.current);
+    var containerPosition = getClientRect(boundingElement.current);
     if (!targetPosition) {
         return zeroPosition;
     }
@@ -31,18 +32,17 @@ var getScrollPosition = function (element, useWindow, boundingElement) {
  * - reused internal helper functions
  * - compacted object arguments in functions as plain argument list to improve compression
  */
-export var useScrollPosition = function (effect, deps, element, useWindow, wait, boundingElement) {
+export var useScrollPosition = function (effect, deps, element, boundingElement, wait) {
     if (deps === void 0) { deps = []; }
-    var position = useRef(getScrollPosition(null, useWindow, boundingElement));
+    var position = useRef(getScrollPosition(null, boundingElement));
     var throttleTimeout = null;
     var callBack = function () {
-        var current = getScrollPosition(element, useWindow, boundingElement);
+        var current = getScrollPosition(element, boundingElement);
         effect(current, position.current);
         position.current = current;
         throttleTimeout = null;
     };
     useIsomorphicLayoutEffect(function () {
-        var _a;
         if (!isBrowser) {
             return undefined;
         }
@@ -56,22 +56,9 @@ export var useScrollPosition = function (effect, deps, element, useWindow, wait,
                 callBack();
             }
         };
-        if (boundingElement) {
-            (_a = boundingElement.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", handleScroll, {
-                passive: true,
-            });
-        }
-        else {
-            window.addEventListener("scroll", handleScroll, { passive: true });
-        }
+        var listener = listenScroll(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
         return function () {
-            var _a;
-            if (boundingElement) {
-                (_a = boundingElement.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", handleScroll);
-            }
-            else {
-                window.removeEventListener("scroll", handleScroll);
-            }
+            listener();
             if (throttleTimeout) {
                 clearTimeout(throttleTimeout);
             }

package/hooks/useScrollThreshold.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from "react";
 import { noop } from "@koine/utils";
-import { /* listenScroll, */ on } from "@koine/dom";
+import { listenScroll } from "@koine/dom";
 export var useScrollThreshold = function (threshold, callback) {
     var _a = useState(false), isBelow = _a[0], setIsBelow = _a[1];
     var handler = useCallback(function () {
@@ -16,8 +16,8 @@ export var useScrollThreshold = function (threshold, callback) {
     }, [threshold, callback]);
     useEffect(function () {
         if (threshold) {
-            // const listener = listenScroll(handler, 50);
-            var listener = on(window, "scroll", handler, { passive: true });
+            // const listener = listenScrollThrottled(0, handler, 50);
+            var listener = listenScroll(handler);
             handler();
             return listener;
         }

package/hooks/useSmoothScroll.d.ts

@@ -1,2 +1,8 @@
-export declare function useSmoothScroll(disregardFixedOffset?: boolean): (to?: number | string, offset?: number, callback?: () => void, fallbackTimeout?: number, behavior?: ScrollBehavior) => void;
+/**
+ *
+ * @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

@@ -1,26 +1,38 @@
 import { useCallback } from "react";
 import { isNumber } from "@koine/utils";
-import { scrollTo } from "@koine/dom";
+import { getOffsetTopSlim, scrollTo } from "@koine/dom";
 import { useFixedOffset } from "./useFixedOffset";
-export function useSmoothScroll(disregardFixedOffset) {
+/**
+ *
+ * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
+ * selector we will keep into account the _fixedOffset_ despite this option.
+ * @returns
+ */
+export function useSmoothScroll(disregardAutomaticFixedOffset) {
     var fixedOffset = useFixedOffset();
-    var scroll = useCallback(function (to, offset, callback, fallbackTimeout, behavior) {
-        if (offset === void 0) { offset = 0; }
+    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 = el.getBoundingClientRect().top;
+                top = getOffsetTopSlim(el) - fixedOffset.current;
+                toIsElement = true;
             }
         }
         if (isNumber(top)) {
-            top = top + offset + (disregardFixedOffset ? 0 : fixedOffset.current);
+            top =
+                top +
+                    (customOffset || 0) +
+                    (disregardAutomaticFixedOffset || toIsElement
+                        ? 0
+                        : fixedOffset.current);
             scrollTo(top, callback, fallbackTimeout, behavior);
         }
-    }, [disregardFixedOffset, fixedOffset]);
+    }, [disregardAutomaticFixedOffset, fixedOffset]);
     return scroll;
 }
 export default useSmoothScroll;

package/hooks/useWindowSize.d.ts

@@ -1,2 +1,12 @@
-export declare function useWindowSize(): number[];
+import { debounce } from "@koine/utils";
+/**
+ * # Use `window` size
+ *
+ * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
+ *
+ * @returns An array with:
+ * 1) _width_: using `window.innerWidth`
+ * 2) _height_: using `window.innerHeight`
+ */
+export declare function useWindowSize(wait?: Parameters<typeof debounce>[1], immediate?: Parameters<typeof debounce>[2]): readonly [number, number];
 export default useWindowSize;

package/hooks/useWindowSize.js

@@ -1,15 +1,28 @@
 import { useEffect, useState } from "react";
-import { on } from "@koine/dom";
-export function useWindowSize() {
-    var _a = useState([0, 0]), size = _a[0], setSize = _a[1];
+import { listenResize, listenResizeDebounced } from "@koine/dom";
+/**
+ * # Use `window` size
+ *
+ * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
+ *
+ * @returns An array with:
+ * 1) _width_: using `window.innerWidth`
+ * 2) _height_: using `window.innerHeight`
+ */
+export function useWindowSize(wait, immediate) {
+    var _a = useState(0), width = _a[0], widthSet = _a[1];
+    var _b = useState(0), height = _b[0], heightSet = _b[1];
     useEffect(function () {
         function updateSize() {
-            setSize([window.innerWidth, window.innerHeight]);
+            widthSet(window.innerWidth);
+            heightSet(window.innerHeight);
         }
-        var listener = on(window, "resize", updateSize);
+        var listener = wait
+            ? listenResizeDebounced(0, updateSize, wait, immediate)
+            : listenResize(updateSize);
         updateSize();
         return listener;
-    }, []);
-    return size;
+    }, [wait, immediate]);
+    return [width, height];
 }
 export default useWindowSize;

package/node/hooks/useFixedOffset.js

@@ -5,16 +5,19 @@ var react_1 = require("react");
 var dom_1 = require("@koine/dom");
 var utils_1 = require("@koine/utils");
 var useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
-var observer;
 var inject = function (value) {
     (0, dom_1.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`
  */
-function useFixedOffset() {
+function useFixedOffset(selector) {
     var fixedOffset = (0, react_1.useRef)(0);
     (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
         var update = function () {
@@ -25,30 +28,30 @@ function useFixedOffset() {
             inject(newFixedOffset);
         };
         update();
-        if (!observer && ResizeObserver) {
+        if (ResizeObserver) {
             // const elements = $$("[data-fixed]");
-            observer = new ResizeObserver(function (entries) {
+            var observer_1 = new ResizeObserver(function (entries) {
                 var newFixedOffset = 0;
                 entries.forEach(function (entry) {
                     newFixedOffset += entry.contentRect.height;
                 });
                 fixedOffset.current = newFixedOffset;
-                var updateOnResize = (0, utils_1.debounce)(function () { return inject(newFixedOffset); }, 400);
+                var updateOnResize = (0, utils_1.debounce)(function () { return inject(newFixedOffset); }, 400, true);
                 updateOnResize();
             });
-            (0, dom_1.$each)("[data-fixed]", function ($el) {
-                if (observer)
-                    observer.observe($el);
+            (0, dom_1.$each)(selector || "[data-fixed]", function ($el) {
+                if (observer_1)
+                    observer_1.observe($el);
             });
             return function () {
-                observer === null || observer === void 0 ? void 0 : observer.disconnect();
+                observer_1 === null || observer_1 === void 0 ? void 0 : observer_1.disconnect();
             };
         }
         else {
-            var listener = (0, dom_1.listenResize)(update);
+            var listener = (0, dom_1.listenResizeDebounced)(0, update);
             return listener;
         }
-    }, []);
+    }, [selector]);
     return fixedOffset;
 }
 exports.useFixedOffset = useFixedOffset;

package/node/hooks/useMeasure.js

@@ -137,15 +137,15 @@ function useMeasure(options) {
     // });
     (0, react_1.useEffect)(function () {
         if (scroll) {
-            var listener = (0, dom_1.listenScroll)(forceRefresh, 100);
+            var listener = (0, dom_1.listenScrollDebounced)(0, forceRefresh, 100);
             return listener;
         }
-        return function () { return 0; };
+        return utils_1.noop;
     }, [scroll, forceRefresh]);
     (0, react_1.useEffect)(function () {
-        // const listener = listenResize(onWindowResize);
+        // const listener = listenResizeDebounced(onWindowResize);
         // return listener;
-        var listener = (0, dom_1.listenResize)(forceRefresh, 100);
+        var listener = (0, dom_1.listenResizeDebounced)(0, forceRefresh, 100);
         return listener;
     }, [forceRefresh]);
     // respond to changes that are relevant for the listeners

package/node/hooks/useScrollPosition.js

@@ -4,19 +4,20 @@ exports.useScrollPosition = void 0;
 var react_1 = require("react");
 var utils_1 = require("@koine/utils");
 var useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
+var dom_1 = require("@koine/dom");
 var zeroPosition = { x: 0, y: 0 };
 var getClientRect = function (element) {
     return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
 };
-var getScrollPosition = function (element, useWindow, boundingElement) {
+var getScrollPosition = function (element, boundingElement) {
     if (!utils_1.isBrowser) {
         return zeroPosition;
     }
-    if (useWindow) {
+    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 === null || boundingElement === void 0 ? void 0 : boundingElement.current);
+    var containerPosition = getClientRect(boundingElement.current);
     if (!targetPosition) {
         return zeroPosition;
     }
@@ -34,18 +35,17 @@ var getScrollPosition = function (element, useWindow, boundingElement) {
  * - reused internal helper functions
  * - compacted object arguments in functions as plain argument list to improve compression
  */
-var useScrollPosition = function (effect, deps, element, useWindow, wait, boundingElement) {
+var useScrollPosition = function (effect, deps, element, boundingElement, wait) {
     if (deps === void 0) { deps = []; }
-    var position = (0, react_1.useRef)(getScrollPosition(null, useWindow, boundingElement));
+    var position = (0, react_1.useRef)(getScrollPosition(null, boundingElement));
     var throttleTimeout = null;
     var callBack = function () {
-        var current = getScrollPosition(element, useWindow, boundingElement);
+        var current = getScrollPosition(element, boundingElement);
         effect(current, position.current);
         position.current = current;
         throttleTimeout = null;
     };
     (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
-        var _a;
         if (!utils_1.isBrowser) {
             return undefined;
         }
@@ -59,22 +59,9 @@ var useScrollPosition = function (effect, deps, element, useWindow, wait, boundi
                 callBack();
             }
         };
-        if (boundingElement) {
-            (_a = boundingElement.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", handleScroll, {
-                passive: true,
-            });
-        }
-        else {
-            window.addEventListener("scroll", handleScroll, { passive: true });
-        }
+        var listener = (0, dom_1.listenScroll)(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
         return function () {
-            var _a;
-            if (boundingElement) {
-                (_a = boundingElement.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", handleScroll);
-            }
-            else {
-                window.removeEventListener("scroll", handleScroll);
-            }
+            listener();
             if (throttleTimeout) {
                 clearTimeout(throttleTimeout);
             }

package/node/hooks/useScrollThreshold.js

@@ -19,8 +19,8 @@ var useScrollThreshold = function (threshold, callback) {
     }, [threshold, callback]);
     (0, react_1.useEffect)(function () {
         if (threshold) {
-            // const listener = listenScroll(handler, 50);
-            var listener = (0, dom_1.on)(window, "scroll", handler, { passive: true });
+            // const listener = listenScrollThrottled(0, handler, 50);
+            var listener = (0, dom_1.listenScroll)(handler);
             handler();
             return listener;
         }

package/node/hooks/useSmoothScroll.js

@@ -5,25 +5,37 @@ var react_1 = require("react");
 var utils_1 = require("@koine/utils");
 var dom_1 = require("@koine/dom");
 var useFixedOffset_1 = require("./useFixedOffset");
-function useSmoothScroll(disregardFixedOffset) {
+/**
+ *
+ * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
+ * selector we will keep into account the _fixedOffset_ despite this option.
+ * @returns
+ */
+function useSmoothScroll(disregardAutomaticFixedOffset) {
     var fixedOffset = (0, useFixedOffset_1.useFixedOffset)();
-    var scroll = (0, react_1.useCallback)(function (to, offset, callback, fallbackTimeout, behavior) {
-        if (offset === void 0) { offset = 0; }
+    var scroll = (0, react_1.useCallback)(function (to, customOffset, callback, fallbackTimeout, behavior) {
         var top = undefined;
+        var toIsElement = false;
         if ((0, utils_1.isNumber)(to)) {
             top = to;
         }
         else if (to) {
             var el = document.getElementById(to);
             if (el) {
-                top = el.getBoundingClientRect().top;
+                top = (0, dom_1.getOffsetTopSlim)(el) - fixedOffset.current;
+                toIsElement = true;
             }
         }
         if ((0, utils_1.isNumber)(top)) {
-            top = top + offset + (disregardFixedOffset ? 0 : fixedOffset.current);
+            top =
+                top +
+                    (customOffset || 0) +
+                    (disregardAutomaticFixedOffset || toIsElement
+                        ? 0
+                        : fixedOffset.current);
             (0, dom_1.scrollTo)(top, callback, fallbackTimeout, behavior);
         }
-    }, [disregardFixedOffset, fixedOffset]);
+    }, [disregardAutomaticFixedOffset, fixedOffset]);
     return scroll;
 }
 exports.useSmoothScroll = useSmoothScroll;

package/node/hooks/useWindowSize.js

@@ -3,17 +3,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useWindowSize = void 0;
 var react_1 = require("react");
 var dom_1 = require("@koine/dom");
-function useWindowSize() {
-    var _a = (0, react_1.useState)([0, 0]), size = _a[0], setSize = _a[1];
+/**
+ * # Use `window` size
+ *
+ * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
+ *
+ * @returns An array with:
+ * 1) _width_: using `window.innerWidth`
+ * 2) _height_: using `window.innerHeight`
+ */
+function useWindowSize(wait, immediate) {
+    var _a = (0, react_1.useState)(0), width = _a[0], widthSet = _a[1];
+    var _b = (0, react_1.useState)(0), height = _b[0], heightSet = _b[1];
     (0, react_1.useEffect)(function () {
         function updateSize() {
-            setSize([window.innerWidth, window.innerHeight]);
+            widthSet(window.innerWidth);
+            heightSet(window.innerHeight);
         }
-        var listener = (0, dom_1.on)(window, "resize", updateSize);
+        var listener = wait
+            ? (0, dom_1.listenResizeDebounced)(0, updateSize, wait, immediate)
+            : (0, dom_1.listenResize)(updateSize);
         updateSize();
         return listener;
-    }, []);
-    return size;
+    }, [wait, immediate]);
+    return [width, height];
 }
 exports.useWindowSize = useWindowSize;
 exports.default = useWindowSize;

package/package.json

@@ -50,7 +50,7 @@
     "framer-motion": "8.5.5",
     "react": "18.2.0",
     "@mui/base": "5.0.0-alpha.115",
-    "@koine/utils": "1.1.5",
+    "@koine/utils": "1.1.7",
     "ts-debounce": "4.0.0",
     "type-fest": "3.5.3",
     "react-icons": "4.7.1",
@@ -60,10 +60,10 @@
     "@tiptap/starter-kit": "2.0.0-beta.209",
     "@kuus/yup": "1.0.0-beta.7",
     "react-hook-form": "7.42.1",
-    "@koine/dom": "1.1.5",
+    "@koine/dom": "1.1.7",
     "react-popper": "2.3.0",
     "tslib": "2.5.0"
   },
-  "version": "1.1.5",
+  "version": "1.1.7",
   "module": "./index.js"
 }

package/Favicon/FaviconTags.d.ts

@@ -1,18 +0,0 @@
-export type FaviconTagsProps = {
-    name: string;
-    color?: string;
-    safariTabColor?: string;
-    tileColor?: string;
-    themeColor?: string;
-};
-/**
- * Favicon tags.
- *
- * This component is meant to be wrapped in a `<head>` manager component.
- *
- * These tags have been produced by [realfavicongenerator.net](https://realfavicongenerator.net/)
- * on _**16 Feb 2022**_.
- *
- * @see https://realfavicongenerator.net/
- */
-export declare const FaviconTags: ({ name, color, safariTabColor, tileColor, themeColor, }: FaviconTagsProps) => JSX.Element;

package/Favicon/FaviconTags.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Favicon tags.
- *
- * This component is meant to be wrapped in a `<head>` manager component.
- *
- * These tags have been produced by [realfavicongenerator.net](https://realfavicongenerator.net/)
- * on _**16 Feb 2022**_.
- *
- * @see https://realfavicongenerator.net/
- */
-export var FaviconTags = function (_a) {
-    var name = _a.name, color = _a.color, safariTabColor = _a.safariTabColor, tileColor = _a.tileColor, themeColor = _a.themeColor;
-    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "shortcut icon", href: "/favicon.ico", type: "image/x-icon" }), _jsx("link", { rel: "apple-touch-icon", sizes: "180x180", href: "/apple-touch-icon.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png" }), _jsx("link", { rel: "icon", type: "image/png", sizes: "16x16", href: "/favicon-16x16.png" }), _jsx("link", { rel: "manifest", href: "/site.webmanifest" }), _jsx("link", { rel: "mask-icon", href: "/safari-pinned-tab.svg", color: safariTabColor || color }), _jsx("meta", { name: "apple-mobile-web-app-title", content: name }), _jsx("meta", { name: "application-name", content: name }), _jsx("meta", { name: "msapplication-TileColor", content: tileColor || color }), _jsx("meta", { name: "theme-color", content: themeColor || color })] }));
-};

package/Favicon/index.d.ts

@@ -1 +0,0 @@
-export * from "./FaviconTags";

package/Favicon/index.js

@@ -1 +0,0 @@
-export * from "./FaviconTags";

package/Favicon/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Favicon/index.js",
-  "types": "./index.d.ts"
-}

package/hooks/useId.d.ts

@@ -1,5 +0,0 @@
-/**
- * FIXME: once we can move to react 18 just replace this import with `{ useId } from "react";`
- */
-export declare function useId(prefix?: string): string;
-export default useId;

package/hooks/useId.js

@@ -1,9 +0,0 @@
-import { uid } from "@koine/utils";
-/**
- * FIXME: once we can move to react 18 just replace this import with `{ useId } from "react";`
- */
-export function useId(prefix) {
-    if (prefix === void 0) { prefix = "uid"; }
-    return "".concat(prefix, "-").concat(uid());
-}
-export default useId;