@koine/react 2.0.0-beta.80 → 2.0.0-beta.83

package/useFirstMountState.cjs.js

@@ -4,14 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-let useFirstMountState = () => {
-    const isFirst = react.useRef(true);
-    if (isFirst.current) {
-        isFirst.current = false;
-        return true;
-    }
-    return isFirst.current;
-};
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */let useFirstMountState=()=>{let r=react.useRef(!0);return r.current?(r.current=!1,!0):r.current};
 
 exports["default"] = useFirstMountState;
 exports.useFirstMountState = useFirstMountState;

package/useFirstMountState.esm.js

@@ -1,12 +1,7 @@
 import { useRef } from 'react';
 
-let useFirstMountState = () => {
-    const isFirst = useRef(true);
-    if (isFirst.current) {
-        isFirst.current = false;
-        return true;
-    }
-    return isFirst.current;
-};
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */let useFirstMountState=()=>{let r=useRef(!0);return r.current?(r.current=!1,!0):r.current};
 
 export { useFirstMountState as default, useFirstMountState };

package/useFixedOffset.cjs.js

@@ -7,43 +7,18 @@ var utils = require('@koine/utils');
 var dom = require('@koine/dom');
 var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
 
-const inject = (value) => {
-    dom.injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
-};
-let useFixedOffset = (selector) => {
-    const fixedOffset = react.useRef(0);
-    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-        const update = () => {
-            const newFixedOffset = dom.calculateFixedOffset();
-            fixedOffset.current = newFixedOffset;
-            inject(newFixedOffset);
-        };
-        update();
-        if (ResizeObserver) {
-            const observer = new ResizeObserver((entries) => {
-                let newFixedOffset = 0;
-                entries.forEach((entry) => {
-                    newFixedOffset += entry.contentRect.height;
-                });
-                fixedOffset.current = newFixedOffset;
-                const updateOnResize = utils.debounce(() => inject(newFixedOffset), 400, true);
-                updateOnResize();
-            });
-            dom.domEach(selector || "[data-fixed]", ($el) => {
-                if (observer)
-                    observer.observe($el);
-            });
-            return () => {
-                observer?.disconnect();
-            };
-        }
-        else {
-            const listener = dom.listenResizeDebounced(0, update);
-            return listener;
-        }
-    }, [selector]);
-    return fixedOffset;
-};
+let n=e=>{dom.injectCss("useFixedOffset",`html{scroll-padding-top: ${e}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`
+ */let useFixedOffset=i=>{let l=react.useRef(0);return useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{let e=()=>{let e=dom.calculateFixedOffset();l.current=e,// inject this CSS make the hashed deeplinks position the scroll at the
+// right offset
+n(e);};if(e(),!ResizeObserver)return dom.listenResizeDebounced(0,e);{// const elements = domAll("[data-fixed]");
+let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),l.current=r,utils.debounce(()=>n(r),400,!0)();});return dom.domEach(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
 
 exports["default"] = useFixedOffset;
 exports.useFixedOffset = useFixedOffset;

package/useFixedOffset.esm.js

@@ -1,44 +1,19 @@
 import { useRef } from 'react';
 import { debounce } from '@koine/utils';
-import { domEach, listenResizeDebounced, calculateFixedOffset, injectCss } from '@koine/dom';
+import { listenResizeDebounced, domEach, calculateFixedOffset, injectCss } from '@koine/dom';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
 
-const inject = (value) => {
-    injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
-};
-let useFixedOffset = (selector) => {
-    const fixedOffset = useRef(0);
-    useIsomorphicLayoutEffect(() => {
-        const update = () => {
-            const newFixedOffset = calculateFixedOffset();
-            fixedOffset.current = newFixedOffset;
-            inject(newFixedOffset);
-        };
-        update();
-        if (ResizeObserver) {
-            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();
-            });
-            domEach(selector || "[data-fixed]", ($el) => {
-                if (observer)
-                    observer.observe($el);
-            });
-            return () => {
-                observer?.disconnect();
-            };
-        }
-        else {
-            const listener = listenResizeDebounced(0, update);
-            return listener;
-        }
-    }, [selector]);
-    return fixedOffset;
-};
+let n=e=>{injectCss("useFixedOffset",`html{scroll-padding-top: ${e}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`
+ */let useFixedOffset=i=>{let l=useRef(0);return useIsomorphicLayoutEffect(()=>{let e=()=>{let e=calculateFixedOffset();l.current=e,// inject this CSS make the hashed deeplinks position the scroll at the
+// right offset
+n(e);};if(e(),!ResizeObserver)return listenResizeDebounced(0,e);{// const elements = domAll("[data-fixed]");
+let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),l.current=r,debounce(()=>n(r),400,!0)();});return domEach(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
 
 export { useFixedOffset as default, useFixedOffset };

package/useFocus.cjs.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-let useFocus = () => {
-    const elementRef = react.useRef(null);
-    const setFocus = () => {
-        elementRef.current && elementRef.current.focus();
-    };
-    return [elementRef, setFocus];
-};
+/**
+ * @see https://stackoverflow.com/a/54159564/1938970
+ */let useFocus=()=>{let r=react.useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
 
 exports["default"] = useFocus;
 exports.useFocus = useFocus;

package/useFocus.esm.js

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

package/useInterval.cjs.js

@@ -5,23 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var utils = require('@koine/utils');
 
-let useInterval = (callback, delay, deps = []) => {
-    const savedCallback = react.useRef();
-    react.useEffect(() => {
-        savedCallback.current = callback;
-    }, [callback, ...deps]);
-    react.useEffect(() => {
-        function tick() {
-            if (savedCallback.current)
-                savedCallback.current();
-        }
-        if (delay !== null) {
-            const id = setInterval(tick, delay);
-            return () => clearInterval(id);
-        }
-        return utils.noop;
-    }, [delay]);
-};
+/**
+ * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
+ *
+ * We just add `deps` array argument and typescript support
+ */let useInterval=(n,l,u=[])=>{let o=react.useRef();react.useEffect(()=>{o.current=n;},// eslint-disable-next-line react-hooks/exhaustive-deps
+[n,...u]),react.useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return utils.noop},[l]);};
 
 exports["default"] = useInterval;
 exports.useInterval = useInterval;

package/useInterval.esm.js

@@ -1,22 +1,11 @@
 import { useRef, useEffect } from 'react';
 import { noop } from '@koine/utils';
 
-let useInterval = (callback, delay, deps = []) => {
-    const savedCallback = useRef();
-    useEffect(() => {
-        savedCallback.current = callback;
-    }, [callback, ...deps]);
-    useEffect(() => {
-        function tick() {
-            if (savedCallback.current)
-                savedCallback.current();
-        }
-        if (delay !== null) {
-            const id = setInterval(tick, delay);
-            return () => clearInterval(id);
-        }
-        return noop;
-    }, [delay]);
-};
+/**
+ * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
+ *
+ * We just add `deps` array argument and typescript support
+ */let useInterval=(n,l,u=[])=>{let o=useRef();useEffect(()=>{o.current=n;},// eslint-disable-next-line react-hooks/exhaustive-deps
+[n,...u]),useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return noop},[l]);};
 
 export { useInterval as default, useInterval };

package/useIsomorphicLayoutEffect.cjs.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var utils = require('@koine/utils');
 
-let useIsomorphicLayoutEffect = utils.isBrowser ? react.useLayoutEffect : react.useEffect;
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts)
+ */let useIsomorphicLayoutEffect=utils.isBrowser?react.useLayoutEffect:react.useEffect;
 
 exports["default"] = useIsomorphicLayoutEffect;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/useIsomorphicLayoutEffect.esm.js

@@ -1,6 +1,8 @@
 import { useLayoutEffect, useEffect } from 'react';
 import { isBrowser } from '@koine/utils';
 
-let useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts)
+ */let useIsomorphicLayoutEffect=isBrowser?useLayoutEffect:useEffect;
 
 export { useIsomorphicLayoutEffect as default, useIsomorphicLayoutEffect };

package/useKeyUp.cjs.js

@@ -5,19 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var dom = require('@koine/dom');
 
-let useKeyUp = (callback, deps = []) => {
-    react.useEffect(() => {
-        const listener = dom.on(window, "keyup", (event) => {
-            if (!event.ctrlKey &&
-                !event.altKey &&
-                !event.shiftKey &&
-                !event.metaKey) {
-                callback(event);
-            }
-        });
-        return listener;
-    }, [callback, ...deps]);
-};
+let useKeyUp=(o,r=[])=>{react.useEffect(()=>dom.on(window,"keyup",e=>{// 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
+    e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),// eslint-disable-next-line react-hooks/exhaustive-deps
+[o,...r]);};
 
 exports["default"] = useKeyUp;
 exports.useKeyUp = useKeyUp;

package/useKeyUp.esm.js

@@ -1,18 +1,11 @@
 import { useEffect } from 'react';
 import { on } from '@koine/dom';
 
-let useKeyUp = (callback, deps = []) => {
-    useEffect(() => {
-        const listener = on(window, "keyup", (event) => {
-            if (!event.ctrlKey &&
-                !event.altKey &&
-                !event.shiftKey &&
-                !event.metaKey) {
-                callback(event);
-            }
-        });
-        return listener;
-    }, [callback, ...deps]);
-};
+let useKeyUp=(o,r=[])=>{useEffect(()=>on(window,"keyup",e=>{// 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
+    e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),// eslint-disable-next-line react-hooks/exhaustive-deps
+[o,...r]);};
 
 export { useKeyUp as default, useKeyUp };

package/useMeasure.cjs.js

@@ -6,121 +6,39 @@ var react = require('react');
 var utils = require('@koine/utils');
 var dom = require('@koine/dom');
 
-let observer;
-let 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]);
-let useMeasure = (options) => {
-    const { scroll = false } = options || {};
-    const [bounds, setBounds] = react.useState({
-        left: 0,
-        top: 0,
-        width: 0,
-        height: 0,
-        bottom: 0,
-        right: 0,
-        x: 0,
-        y: 0,
-    });
-    const state = react.useRef([
-        null,
-        null,
-        null,
-        bounds,
-    ]);
-    const mounted = react.useRef(false);
-    react.useEffect(() => {
-        mounted.current = true;
-        return () => void (mounted.current = false);
-    }, []);
-    const [forceRefresh, , scrollChange] = react.useMemo(() => {
-        const callback = (..._args) => {
-            const [element, , , lastBounds] = state.current;
-            if (!element)
-                return;
-            const size = element.getBoundingClientRect();
-            Object.freeze(size);
-            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
-                state.current[3] = size;
-                setBounds(size);
-            }
-        };
-        const debouncedCallback = utils.debounce(callback);
-        return [callback, debouncedCallback, debouncedCallback];
-    }, [setBounds]);
-    function removeListeners() {
-        const [, scrollContainers, resizeObserver] = state.current;
-        if (scrollContainers) {
-            scrollContainers.forEach((element) => dom.off(element, "scroll", scrollChange));
-            state.current[1] = null;
-        }
-        if (resizeObserver) {
-            resizeObserver.disconnect();
-            state.current[2] = null;
-        }
-    }
-    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) => dom.on(scrollContainer, "scroll", scrollChange, {
-                    capture: true,
-                    passive: true,
-                }));
-            }
-        }
-    }
-    const ref = (node) => {
-        if (!node || node === state.current[0])
-            return;
-        removeListeners();
-        state.current[0] = node;
-        state.current[1] = findScrollContainers(node);
-        addListeners();
-    };
-    react.useEffect(() => {
-        if (scroll) {
-            const listener = dom.listenScrollDebounced(0, forceRefresh, 100);
-            return listener;
-        }
-        return utils.noop;
-    }, [scroll, forceRefresh]);
-    react.useEffect(() => {
-        const listener = dom.listenResizeDebounced(0, forceRefresh, 100);
-        return listener;
-    }, [forceRefresh]);
-    react.useEffect(() => {
-        removeListeners();
-        addListeners();
-    }, [scroll]);
-    react.useEffect(() => {
-        forceRefresh();
-        return removeListeners;
-    }, []);
-    return [ref, bounds, forceRefresh];
-};
+let e;let m=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:u}=window.getComputedStyle(e);return [r,n,u].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...m(e.parentElement)]},p=["x","y","top","bottom","left","right","width","height"],d=(e,t)=>p.every(r=>e[r]===t[r]);// offsetSize?: boolean;
+/**
+ * Use measure hook
+ *
+ * @borrows [pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
+ */let useMeasure=p=>{let{scroll:h=!1}=/* offsetSize = false */p||{},[a,b]=react.useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),// keep all state in a ref
+g=react.useRef([// element
+null,// scrollContainers
+null,// resizeObserver
+null,// lastBounds
+a]),// make sure to update state only as long as the component is truly mounted
+v=react.useRef(!1);react.useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);// memoize handlers, so event-listeners know when they should update
+let[w,,/* resizeChange */y]=react.useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();// if (element instanceof HTMLElement && offsetSize) {
+//   size.height = element.offsetHeight;
+//   size.width = element.offsetWidth;
+// }
+Object.freeze(n),v.current&&!d(r,n)&&(g.current[3]=n,b(n));},t=utils.debounce(e);return [e,t,t]},[b]);/* , offsetSize */// cleanup current scroll-listeners / observers
+function x(){let[,e,t]=g.current;e&&(e.forEach(e=>dom.off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}// add scroll-listeners / observers
+function z(){let[t,r]=g.current;t&&!e&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),h&&r&&r.forEach(e=>dom.on(e,"scroll",y,{capture:!0,passive:!0})));}return(// add general event listeners
+// useOnWindowScroll(forceRefresh, Boolean(scroll));
+// useOnWindowResize(() => {
+//   debugger;
+//   forceRefresh();
+// });
+react.useEffect(()=>h?dom.listenScrollDebounced(0,w,100):utils.noop,[h,w]),react.useEffect(()=>// const listener = listenResizeDebounced(onWindowResize);
+    // return listener;
+    dom.listenResizeDebounced(0,w,100),[w]),// respond to changes that are relevant for the listeners
+react.useEffect(()=>{x(),z();},// eslint-disable-next-line react-hooks/exhaustive-deps
+[h]),/* , scrollChange, resizeChange */react.useEffect(()=>(// operate on mount, @kuus on the original version there is no call on mount?
+    w(),// remove all listeners when the components unmounts
+    x),// eslint-disable-next-line react-hooks/exhaustive-deps
+[]),[// the ref we expose to the user
+e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=m(e),z());},a,w])};
 
 exports["default"] = useMeasure;
 exports.useMeasure = useMeasure;

package/useMeasure.esm.js

@@ -2,120 +2,38 @@ import { useState, useRef, useEffect, useMemo } from 'react';
 import { debounce, noop } from '@koine/utils';
 import { listenScrollDebounced, listenResizeDebounced, off, on } from '@koine/dom';
 
-let observer;
-let 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]);
-let useMeasure = (options) => {
-    const { scroll = false } = options || {};
-    const [bounds, setBounds] = useState({
-        left: 0,
-        top: 0,
-        width: 0,
-        height: 0,
-        bottom: 0,
-        right: 0,
-        x: 0,
-        y: 0,
-    });
-    const state = useRef([
-        null,
-        null,
-        null,
-        bounds,
-    ]);
-    const mounted = useRef(false);
-    useEffect(() => {
-        mounted.current = true;
-        return () => void (mounted.current = false);
-    }, []);
-    const [forceRefresh, , scrollChange] = useMemo(() => {
-        const callback = (..._args) => {
-            const [element, , , lastBounds] = state.current;
-            if (!element)
-                return;
-            const size = element.getBoundingClientRect();
-            Object.freeze(size);
-            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
-                state.current[3] = size;
-                setBounds(size);
-            }
-        };
-        const debouncedCallback = debounce(callback);
-        return [callback, debouncedCallback, debouncedCallback];
-    }, [setBounds]);
-    function removeListeners() {
-        const [, scrollContainers, resizeObserver] = state.current;
-        if (scrollContainers) {
-            scrollContainers.forEach((element) => off(element, "scroll", scrollChange));
-            state.current[1] = null;
-        }
-        if (resizeObserver) {
-            resizeObserver.disconnect();
-            state.current[2] = null;
-        }
-    }
-    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) => on(scrollContainer, "scroll", scrollChange, {
-                    capture: true,
-                    passive: true,
-                }));
-            }
-        }
-    }
-    const ref = (node) => {
-        if (!node || node === state.current[0])
-            return;
-        removeListeners();
-        state.current[0] = node;
-        state.current[1] = findScrollContainers(node);
-        addListeners();
-    };
-    useEffect(() => {
-        if (scroll) {
-            const listener = listenScrollDebounced(0, forceRefresh, 100);
-            return listener;
-        }
-        return noop;
-    }, [scroll, forceRefresh]);
-    useEffect(() => {
-        const listener = listenResizeDebounced(0, forceRefresh, 100);
-        return listener;
-    }, [forceRefresh]);
-    useEffect(() => {
-        removeListeners();
-        addListeners();
-    }, [scroll]);
-    useEffect(() => {
-        forceRefresh();
-        return removeListeners;
-    }, []);
-    return [ref, bounds, forceRefresh];
-};
+let e;let m=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:u}=window.getComputedStyle(e);return [r,n,u].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...m(e.parentElement)]},p=["x","y","top","bottom","left","right","width","height"],d=(e,t)=>p.every(r=>e[r]===t[r]);// offsetSize?: boolean;
+/**
+ * Use measure hook
+ *
+ * @borrows [pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
+ */let useMeasure=p=>{let{scroll:h=!1}=/* offsetSize = false */p||{},[a,b]=useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),// keep all state in a ref
+g=useRef([// element
+null,// scrollContainers
+null,// resizeObserver
+null,// lastBounds
+a]),// make sure to update state only as long as the component is truly mounted
+v=useRef(!1);useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);// memoize handlers, so event-listeners know when they should update
+let[w,,/* resizeChange */y]=useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();// if (element instanceof HTMLElement && offsetSize) {
+//   size.height = element.offsetHeight;
+//   size.width = element.offsetWidth;
+// }
+Object.freeze(n),v.current&&!d(r,n)&&(g.current[3]=n,b(n));},t=debounce(e);return [e,t,t]},[b]);/* , offsetSize */// cleanup current scroll-listeners / observers
+function x(){let[,e,t]=g.current;e&&(e.forEach(e=>off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}// add scroll-listeners / observers
+function z(){let[t,r]=g.current;t&&!e&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),h&&r&&r.forEach(e=>on(e,"scroll",y,{capture:!0,passive:!0})));}return(// add general event listeners
+// useOnWindowScroll(forceRefresh, Boolean(scroll));
+// useOnWindowResize(() => {
+//   debugger;
+//   forceRefresh();
+// });
+useEffect(()=>h?listenScrollDebounced(0,w,100):noop,[h,w]),useEffect(()=>// const listener = listenResizeDebounced(onWindowResize);
+    // return listener;
+    listenResizeDebounced(0,w,100),[w]),// respond to changes that are relevant for the listeners
+useEffect(()=>{x(),z();},// eslint-disable-next-line react-hooks/exhaustive-deps
+[h]),/* , scrollChange, resizeChange */useEffect(()=>(// operate on mount, @kuus on the original version there is no call on mount?
+    w(),// remove all listeners when the components unmounts
+    x),// eslint-disable-next-line react-hooks/exhaustive-deps
+[]),[// the ref we expose to the user
+e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=m(e),z());},a,w])};
 
 export { useMeasure as default, useMeasure };