@koine/react 1.0.87 → 1.0.90

package/node/hooks/useMeasure.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMeasure = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var utils_1 = require("@koine/utils");
+var dom_1 = require("@koine/dom");
+var observer;
+// Adds native resize listener to window
+function useOnWindowResize(onWindowResize) {
+    (0, react_1.useEffect)(function () {
+        var listener = (0, dom_1.listenResize)(onWindowResize);
+        return listener;
+    }, [onWindowResize]);
+}
+function useOnWindowScroll(onScroll, enabled) {
+    (0, react_1.useEffect)(function () {
+        if (enabled) {
+            var listener = (0, dom_1.listenScroll)(onScroll);
+            return listener;
+        }
+        return function () { return 0; };
+    }, [onScroll, enabled]);
+}
+// 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 tslib_1.__spreadArray(tslib_1.__spreadArray([], result, true), findScrollContainers(element.parentElement), true);
+}
+var keys = [
+    "x",
+    "y",
+    "top",
+    "bottom",
+    "left",
+    "right",
+    "width",
+    "height",
+];
+var areBoundsEqual = function (a, b) {
+    return keys.every(function (key) { return a[key] === b[key]; });
+};
+/**
+ * Use measure hook
+ *
+ * @borrows [pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
+ */
+function useMeasure(options) {
+    var _a = (options || {}).scroll /* offsetSize = false */, scroll = _a === void 0 ? false : _a /* offsetSize = false */;
+    var _b = (0, react_1.useState)({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+        bottom: 0,
+        right: 0,
+        x: 0,
+        y: 0,
+    }), bounds = _b[0], setBounds = _b[1];
+    // keep all state in a ref
+    var state = (0, react_1.useRef)([
+        // element
+        null,
+        // scrollContainers
+        null,
+        // resizeObserver
+        null,
+        // lastBounds
+        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 () {
+        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 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();
+            // if (element instanceof HTMLElement && offsetSize) {
+            //   size.height = element.offsetHeight;
+            //   size.width = element.offsetWidth;
+            // }
+            Object.freeze(size);
+            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
+                state.current[3] = size;
+                setBounds(size);
+            }
+        };
+        var debouncedCallback = (0, utils_1.debounce)(callback);
+        return [callback, debouncedCallback, debouncedCallback];
+    }, [setBounds /* , offsetSize */]), forceRefresh = _c[0] /* resizeChange */, scrollChange = _c[2];
+    // cleanup current scroll-listeners / observers
+    function removeListeners() {
+        var _a = state.current, scrollContainers = _a[1], resizeObserver = _a[2];
+        if (scrollContainers) {
+            scrollContainers.forEach(function (element) {
+                return (0, dom_1.off)(element, "scroll", scrollChange);
+            });
+            state.current[1] = null;
+        }
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            state.current[2] = null;
+        }
+    }
+    // add scroll-listeners / observers
+    function addListeners() {
+        var _a = state.current, element = _a[0], scrollContainers = _a[1];
+        if (!element)
+            return;
+        if (!observer && ResizeObserver) {
+            observer = new ResizeObserver(scrollChange);
+            state.current[2] = observer;
+            observer.observe(element);
+            if (scroll && scrollContainers) {
+                scrollContainers.forEach(function (scrollContainer) {
+                    return (0, dom_1.on)(scrollContainer, "scroll", scrollChange, {
+                        capture: true,
+                        passive: true,
+                    });
+                });
+            }
+        }
+    }
+    // the ref we expose to the user
+    var ref = function (node) {
+        if (!node || node === state.current[0])
+            return;
+        removeListeners();
+        state.current[0] = node;
+        state.current[1] = findScrollContainers(node);
+        addListeners();
+    };
+    // add general event listeners
+    useOnWindowScroll(forceRefresh, Boolean(scroll));
+    useOnWindowResize(forceRefresh);
+    // respond to changes that are relevant for the listeners
+    (0, react_1.useEffect)(function () {
+        removeListeners();
+        addListeners();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scroll /* , scrollChange, resizeChange */]);
+    (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
+        return removeListeners;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return [ref, bounds, forceRefresh];
+}
+exports.useMeasure = useMeasure;
+exports.default = useMeasure;

package/node/hooks/useSmoothScroll.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSmoothScroll = void 0;
+var react_1 = require("react");
+var utils_1 = require("@koine/utils");
+var dom_1 = require("@koine/dom");
+var useFixedOffset_1 = require("./useFixedOffset");
+function useSmoothScroll() {
+    var fixedOffset = (0, useFixedOffset_1.useFixedOffset)();
+    var scroll = (0, react_1.useCallback)(function (to, offset, callback) {
+        if (offset === void 0) { offset = 0; }
+        var top = undefined;
+        if ((0, utils_1.isNumber)(to)) {
+            top = to;
+        }
+        else if (to) {
+            var el = document.getElementById(to);
+            if (el) {
+                top = el.getBoundingClientRect().top;
+            }
+        }
+        if ((0, utils_1.isNumber)(top)) {
+            top = top + window.scrollY - (fixedOffset.current + offset);
+            (0, dom_1.scrollTo)(top, callback);
+        }
+    }, [fixedOffset]);
+    return scroll;
+}
+exports.useSmoothScroll = useSmoothScroll;
+exports.default = useSmoothScroll;

package/package.json

@@ -4,25 +4,25 @@
   "main": "./node/index.js",
   "typings": "./index.d.ts",
   "dependencies": {
-    "styled-components": "^5.3.5",
-    "framer-motion": "^7.2.1",
+    "styled-components": "^5.3.6",
+    "framer-motion": "^7.5.3",
     "react": "^18.2.0",
-    "@mui/base": "^5.0.0-alpha.95",
-    "@koine/utils": "1.0.87",
+    "@mui/base": "^5.0.0-alpha.101",
+    "@koine/utils": "1.0.90",
     "ts-debounce": "^4.0.0",
-    "date-fns-tz": "^1.3.7",
     "react-icons": "^4.4.0",
-    "date-fns": "^2.29.2",
+    "date-fns": "^2.29.3",
     "react-swipeable": "^7.0.0",
-    "@tiptap/react": "^2.0.0-beta.115",
-    "@tiptap/starter-kit": "^2.0.0-beta.192",
+    "@tiptap/react": "^2.0.0-beta.199",
+    "@tiptap/starter-kit": "^2.0.0-beta.199",
     "@kuus/yup": "^1.0.0-beta.4",
-    "react-hook-form": "^7.34.2",
+    "react-hook-form": "^7.37.0",
+    "@koine/dom": "1.0.90",
     "react-popper": "^2.3.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {},
-  "version": "1.0.87",
+  "version": "1.0.90",
   "module": "./index.js",
   "types": "./index.d.ts"
 }