@koine/react 2.0.0-beta.7 → 2.0.0-beta.71

package/hooks/useFixedOffset.js

@@ -1,67 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useFixedOffset: function() {
-        return useFixedOffset;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _debounce = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/debounce"));
-const _$each = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/$each"));
-const _calculateFixedOffset = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/calculateFixedOffset"));
-const _injectCss = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/injectCss"));
-const _listenResizeDebounced = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenResizeDebounced"));
-const _useIsomorphicLayoutEffect = /*#__PURE__*/ _interop_require_default._(require("./useIsomorphicLayoutEffect"));
-const inject = (value)=>{
-    (0, _injectCss.default)("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
-};
-function useFixedOffset(selector) {
-    const fixedOffset = (0, _react.useRef)(0);
-    (0, _useIsomorphicLayoutEffect.default)(()=>{
-        const update = ()=>{
-            const newFixedOffset = (0, _calculateFixedOffset.default)();
-            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]");
-            const observer = new ResizeObserver((entries)=>{
-                let newFixedOffset = 0;
-                entries.forEach((entry)=>{
-                    newFixedOffset += entry.contentRect.height;
-                });
-                fixedOffset.current = newFixedOffset;
-                const updateOnResize = (0, _debounce.default)(()=>inject(newFixedOffset), 400, true);
-                updateOnResize();
-            });
-            (0, _$each.default)(selector || "[data-fixed]", ($el)=>{
-                if (observer) observer.observe($el);
-            });
-            return ()=>{
-                observer?.disconnect();
-            };
-        } else {
-            const listener = (0, _listenResizeDebounced.default)(0, update);
-            return listener;
-        }
-    }, [
-        selector
-    ]);
-    return fixedOffset;
-}
-const _default = useFixedOffset;

package/hooks/useFixedOffset.mjs

@@ -1,56 +0,0 @@
-import { useRef } from "react";
-import debounce from "@koine/utils/debounce";
-import $each from "@koine/dom/$each";
-import calculateFixedOffset from "@koine/dom/calculateFixedOffset";
-import injectCss from "@koine/dom/injectCss";
-import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
-import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
-const inject = (value)=>{
-    injectCss("useFixedOffset", `html{scroll-padding-top: ${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) {
-    const fixedOffset = useRef(0);
-    useIsomorphicLayoutEffect(()=>{
-        const update = ()=>{
-            const 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]");
-            const observer = new ResizeObserver((entries)=>{
-                let newFixedOffset = 0;
-                entries.forEach((entry)=>{
-                    newFixedOffset += entry.contentRect.height;
-                });
-                fixedOffset.current = newFixedOffset;
-                const updateOnResize = debounce(()=>inject(newFixedOffset), 400, true);
-                updateOnResize();
-            });
-            $each(selector || "[data-fixed]", ($el)=>{
-                if (observer) observer.observe($el);
-            });
-            return ()=>{
-                observer?.disconnect();
-            };
-        } else {
-            const listener = listenResizeDebounced(0, update);
-            return listener;
-        }
-    }, [
-        selector
-    ]);
-    return fixedOffset;
-}
-export default useFixedOffset;

package/hooks/useFocus.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useFocus: function() {
-        return useFocus;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _react = require("react");
-const useFocus = ()=>{
-    const elementRef = (0, _react.useRef)(null);
-    const setFocus = ()=>{
-        elementRef.current && elementRef.current.focus();
-    };
-    return [
-        elementRef,
-        setFocus
-    ];
-};
-const _default = useFocus;

package/hooks/useFocus.mjs

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

package/hooks/useInterval.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useInterval: function() {
-        return useInterval;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _noop = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/noop"));
-function useInterval(callback, delay, deps = []) {
-    const savedCallback = (0, _react.useRef)();
-    (0, _react.useEffect)(()=>{
-        savedCallback.current = callback;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        callback,
-        ...deps
-    ]);
-    (0, _react.useEffect)(()=>{
-        function tick() {
-            if (savedCallback.current) savedCallback.current();
-        }
-        if (delay !== null) {
-            const id = setInterval(tick, delay);
-            return ()=>clearInterval(id);
-        }
-        return _noop.default;
-    }, [
-        delay
-    ]);
-}
-const _default = useInterval;

package/hooks/useInterval.mjs

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

package/hooks/useIsomorphicLayoutEffect.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useIsomorphicLayoutEffect: function() {
-        return useIsomorphicLayoutEffect;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _isBrowser = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isBrowser"));
-const useIsomorphicLayoutEffect = _isBrowser.default ? _react.useLayoutEffect : _react.useEffect;
-const _default = useIsomorphicLayoutEffect;

package/hooks/useIsomorphicLayoutEffect.mjs

@@ -1,6 +0,0 @@
-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 const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
-export default useIsomorphicLayoutEffect;

package/hooks/useKeyUp.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useKeyUp: function() {
-        return useKeyUp;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _on = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/on"));
-function useKeyUp(callback, deps = []) {
-    (0, _react.useEffect)(()=>{
-        const listener = (0, _on.default)(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) {
-                callback(event);
-            }
-        });
-        return listener;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        callback,
-        ...deps
-    ]);
-}
-const _default = useKeyUp;

package/hooks/useKeyUp.mjs

@@ -1,21 +0,0 @@
-import { useEffect } from "react";
-import on from "@koine/dom/on";
-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) {
-                callback(event);
-            }
-        });
-        return listener;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        callback,
-        ...deps
-    ]);
-}
-export default useKeyUp;

package/hooks/useMeasure.js

@@ -1,189 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useMeasure: function() {
-        return useMeasure;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _debounce = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/debounce"));
-const _noop = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/noop"));
-const _listenResizeDebounced = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenResizeDebounced"));
-const _listenScrollDebounced = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenScrollDebounced"));
-const _off = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/off"));
-const _on = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/on"));
-let observer;
-// Returns a list of scroll offsets
-function findScrollContainers(element) {
-    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)
-    ];
-}
-const keys = [
-    "x",
-    "y",
-    "top",
-    "bottom",
-    "left",
-    "right",
-    "width",
-    "height"
-];
-const areBoundsEqual = (a, b)=>keys.every((key)=>a[key] === b[key]);
-function useMeasure(options) {
-    const { scroll = false } = options || {};
-    const [bounds, setBounds] = (0, _react.useState)({
-        left: 0,
-        top: 0,
-        width: 0,
-        height: 0,
-        bottom: 0,
-        right: 0,
-        x: 0,
-        y: 0
-    });
-    // keep all state in a ref
-    const state = (0, _react.useRef)([
-        // element
-        null,
-        // scrollContainers
-        null,
-        // resizeObserver
-        null,
-        // lastBounds
-        bounds
-    ]);
-    // make sure to update state only as long as the component is truly mounted
-    const mounted = (0, _react.useRef)(false);
-    (0, _react.useEffect)(()=>{
-        mounted.current = true;
-        return ()=>void (mounted.current = false);
-    }, []);
-    // memoize handlers, so event-listeners know when they should update
-    const [forceRefresh /* resizeChange */ , , scrollChange] = (0, _react.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;
-            // }
-            Object.freeze(size);
-            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
-                state.current[3] = size;
-                setBounds(size);
-            }
-        };
-        const debouncedCallback = (0, _debounce.default)(callback);
-        return [
-            callback,
-            debouncedCallback,
-            debouncedCallback
-        ];
-    }, [
-        setBounds /* , offsetSize */ 
-    ]);
-    // cleanup current scroll-listeners / observers
-    function removeListeners() {
-        const [, scrollContainers, resizeObserver] = state.current;
-        if (scrollContainers) {
-            scrollContainers.forEach((element)=>(0, _off.default)(element, "scroll", scrollChange));
-            state.current[1] = null;
-        }
-        if (resizeObserver) {
-            resizeObserver.disconnect();
-            state.current[2] = null;
-        }
-    }
-    // add scroll-listeners / observers
-    function addListeners() {
-        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((scrollContainer)=>(0, _on.default)(scrollContainer, "scroll", scrollChange, {
-                        capture: true,
-                        passive: true
-                    }));
-            }
-        }
-    }
-    // the ref we expose to the user
-    const ref = (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(() => {
-    //   debugger;
-    //   forceRefresh();
-    // });
-    (0, _react.useEffect)(()=>{
-        if (scroll) {
-            const listener = (0, _listenScrollDebounced.default)(0, forceRefresh, 100);
-            return listener;
-        }
-        return _noop.default;
-    }, [
-        scroll,
-        forceRefresh
-    ]);
-    (0, _react.useEffect)(()=>{
-        // const listener = listenResizeDebounced(onWindowResize);
-        // return listener;
-        const listener = (0, _listenResizeDebounced.default)(0, forceRefresh, 100);
-        return listener;
-    }, [
-        forceRefresh
-    ]);
-    // respond to changes that are relevant for the listeners
-    (0, _react.useEffect)(()=>{
-        removeListeners();
-        addListeners();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        scroll /* , scrollChange, resizeChange */ 
-    ]);
-    (0, _react.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
-    }, []);
-    return [
-        ref,
-        bounds,
-        forceRefresh
-    ];
-}
-const _default = useMeasure;