@koine/react 1.0.87 → 1.0.89

package/helpers/createUseMediaQueryWidth.d.ts

@@ -0,0 +1,6 @@
+import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils";
+declare type _MediaQuerWidthDefExplicit<TBreakpoint extends string> = `min-${TBreakpoint}` | `max-${TBreakpoint}` | `up-${TBreakpoint}` | `down-${TBreakpoint}` | `between-${TBreakpoint}_${TBreakpoint}` | `only-${TBreakpoint}`;
+export declare type MediaQuerWidthDef<TBreakpoint extends string> = `${TBreakpoint}` | _MediaQuerWidthDefExplicit<TBreakpoint>;
+export declare type MediaQueryWidth<TBreakpoint extends string> = `@${MediaQuerWidthDef<TBreakpoint>}`;
+export declare function createUseMediaQueryWidth<TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig): <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: `@${TBreakpoints}` | `@min-${TBreakpoints}` | `@max-${TBreakpoints}` | `@up-${TBreakpoints}` | `@down-${TBreakpoints}` | `@between-${TBreakpoints}_${TBreakpoints}` | `@only-${TBreakpoints}`) => boolean;
+export default createUseMediaQueryWidth;

package/helpers/createUseMediaQueryWidth.js

@@ -0,0 +1,169 @@
+import { useState, useEffect, useMemo } from "react";
+import { isBrowser, isUndefined, getMediaQueryWidthResolvers, } from "@koine/utils";
+export function createUseMediaQueryWidth(customBreakpoints) {
+    var queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
+    return function useMediaQueryWidth(media) {
+        var definition = media.substring(1);
+        var _a = definition.split("-"), rule = _a[0], ruleBreakpoint = _a[1];
+        if (isUndefined(ruleBreakpoint)) {
+            ruleBreakpoint = rule;
+        }
+        if (isUndefined(rule)) {
+            rule = "min";
+        }
+        // with the hook creator approach these breakpoint types cannot be deduced
+        // const [br1, br2] = ruleBreakpoint.split("-") as Split<
+        //   typeof ruleBreakpoint,
+        //   "-"
+        // >;
+        var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
+        var query = queryResolvers[rule](br1, br2);
+        var mq = useMemo(function () { return (isBrowser ? window.matchMedia(query) : { matches: false }); }, [query]);
+        var _c = useState(mq.matches), matches = _c[0], setMatches = _c[1];
+        useEffect(function () {
+            var mq = window.matchMedia(query);
+            var handleChange = function (event) {
+                setMatches(event.matches);
+            };
+            setMatches(mq.matches);
+            // Safari < 14 can't use addEventListener on a MediaQueryList
+            // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+            if (!mq.addEventListener) {
+                // Update the state whenever the media query match state changes
+                mq.addListener(handleChange);
+                // Clean up on unmount and if the query changes
+                return function () {
+                    mq.removeListener(handleChange);
+                };
+            }
+            mq.addEventListener("change", handleChange);
+            return function () {
+                mq.removeEventListener("change", handleChange);
+            };
+        }, [query]);
+        return matches;
+    };
+}
+export default createUseMediaQueryWidth;
+//// without creator it would be:
+//// ---------------------------------------------------------------------------
+// import { useState, useEffect, useMemo } from "react";
+// import { isBrowser, type Split } from "@koine/utils";
+// import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
+// type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+// type Breakpoints = Record<Breakpoint, number>;
+// type MediaQuery =
+//   | `max:${Breakpoint}`
+//   | `min:${Breakpoint}`
+//   | `down:${Breakpoint}`
+//   | `up:${Breakpoint}`
+//   | `between:${Breakpoint}-${Breakpoint}`
+//   | `only:${Breakpoint}`;
+// const breakpoints: Breakpoints = {
+//   xs: 0,
+//   ...themeBreakpoints,
+// };
+// const sortedBreakpointsNames = (
+//   Object.keys(breakpoints).map((key) => {
+//     const br = key as keyof typeof breakpoints;
+//     return [br, breakpoints[br]];
+//   }) as [Breakpoint, number][]
+// )
+//   .sort((a, b) => a[1] - b[1])
+//   .map((item) => item[0]);
+// const getNextBreakpoint = (breakpoint: Breakpoint) => {
+//   const index = sortedBreakpointsNames.indexOf(breakpoint);
+//   return sortedBreakpointsNames[index + 1];
+// };
+// /**
+//  * It behaves the same as `(min-width: ${value}px)`
+//  * where value is the given breakpoint value.
+//  * For ease of use this can be used both as a function `min("md")` and as an
+//  * object literal `min.md`.
+//  */
+// const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
+// /**
+//  * It behaves the same as `(max-width: ${value}px)`
+//  * where value is the given breakpoint value.
+//  * For ease of use this can be used both as a function `max("md")` and as an
+//  * object literal `max.md`.
+//  */
+// const max = (br: Breakpoint) => `(max-width: ${breakpoints[br] - 0.02}px)`;
+// /**
+//  * It behaves the same as `min`
+//  * @inheritdoc {max}
+//  */
+// const up = min;
+// /**
+//  * It behaves similarly to `max` but you will use the "next" breakpoint,
+//  * specifying CSS that will apply from the given breakpoint and down.
+//  */
+// const down = (br: Breakpoint) => {
+//   const brNext = getNextBreakpoint(br);
+//   // TODO: if br does not exists otherwise throw Error
+//   return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
+// };
+// /**
+//  * Media query between the two given breakpoints
+//  */
+// const between = (br1: Breakpoint, br2?: Breakpoint) => {
+//   return br2
+//     ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
+//         breakpoints[br2] - 0.02
+//       }px)`
+//     : min(br1);
+// };
+// /**
+//  * Media query to apply from the given breakpoint until the next, just for its
+//  * full range
+//  */
+// const only = (br: Breakpoint) => {
+//   const brNext = getNextBreakpoint(br);
+//   return brNext ? between(br, brNext) : min(br);
+// };
+// const queryResolvers = {
+//   max,
+//   min,
+//   down,
+//   up,
+//   between,
+//   only,
+// };
+// export function useMqWidth(media: MediaQuery) {
+//   const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
+//     MediaQuery,
+//     ":"
+//   >;
+//   const [br1, br2] = ruleBreakpoint.split("-") as Split<
+//     typeof ruleBreakpoint,
+//     "-"
+//   >;
+//   const query = queryResolvers[rule](br1, br2);
+//   const mq = useMemo(
+//     () => (isBrowser ? window.matchMedia(query) : { matches: false }),
+//     [query]
+//   );
+//   const [matches, setMatches] = useState(mq.matches);
+//   useEffect(() => {
+//     const mq = window.matchMedia(query);
+//     const handleChange = (event: MediaQueryListEvent) => {
+//       setMatches(event.matches);
+//     };
+//     setMatches(mq.matches);
+//     // Safari < 14 can't use addEventListener on a MediaQueryList
+//     // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+//     if (!mq.addEventListener) {
+//       // Update the state whenever the media query match state changes
+//       mq.addListener(handleChange);
+//       // Clean up on unmount and if the query changes
+//       return () => {
+//         mq.removeListener(handleChange);
+//       };
+//     }
+//     mq.addEventListener("change", handleChange);
+//     return () => {
+//       mq.removeEventListener("change", handleChange);
+//     };
+//   }, [query]);
+//   return matches;
+// }

package/helpers/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./classed";
+export * from "./createUseMediaQueryWidth";
 export * from "./extend-component";

package/helpers/index.js

@@ -1,2 +1,3 @@
 export * from "./classed";
+export * from "./createUseMediaQueryWidth";
 export * from "./extend-component";

package/helpers/mergeRefs.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function mergeRefs<T = Element>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;
+export default mergeRefs;

package/helpers/mergeRefs.js

@@ -0,0 +1,13 @@
+export function mergeRefs(refs) {
+    return function (value) {
+        refs.forEach(function (ref) {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+}
+export default mergeRefs;

package/hooks/index.d.ts

@@ -2,14 +2,16 @@ export * from "./useAsyncFn";
 export * from "./useDateLocale";
 export * from "./useEffectOnce";
 export * from "./useFirstMountState";
+export * from "./useFixedOffset";
 export * from "./useFocus";
 export * from "./useId";
 export * from "./useIsomorphicLayoutEffect";
-export * from "./useMediaQueryWidthCreator";
+export * from "./useMeasure";
 export * from "./useMount";
 export * from "./useMountedState";
 export * from "./usePrevious";
 export * from "./useScrollPosition";
+export * from "./useSmoothScroll";
 export * from "./useTraceUpdate";
 export * from "./useUpdateEffect";
 export * from "./useWindowSize";

package/hooks/index.js

@@ -2,15 +2,17 @@ export * from "./useAsyncFn";
 export * from "./useDateLocale";
 export * from "./useEffectOnce";
 export * from "./useFirstMountState";
+export * from "./useFixedOffset";
 export * from "./useFocus";
 export * from "./useId";
 export * from "./useIsomorphicLayoutEffect";
-export * from "./useMediaQueryWidthCreator";
+export * from "./useMeasure";
 export * from "./useMount";
 export * from "./useMountedState";
 export * from "./usePrevious";
 export * from "./useScrollPosition";
 // export * from "./useScrollTo";
+export * from "./useSmoothScroll";
 export * from "./useTraceUpdate";
 export * from "./useUpdateEffect";
 export * from "./useWindowSize";

package/hooks/useFixedOffset.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+/**
+ * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
+ *
+ * @see https://web.dev/resize-observer/
+ */
+export declare function useFixedOffset(): import("react").MutableRefObject<number>;
+export default useFixedOffset;

package/hooks/useFixedOffset.js

@@ -0,0 +1,50 @@
+import { useLayoutEffect, useRef } from "react";
+import { injectCss, calculateFixedOffset, listenResize, $each, } from "@koine/dom";
+import { debounce } from "@koine/utils";
+var observer;
+var inject = function (value) {
+    injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
+};
+/**
+ * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
+ *
+ * @see https://web.dev/resize-observer/
+ */
+export function useFixedOffset() {
+    var fixedOffset = useRef(0);
+    useLayoutEffect(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 (!observer && ResizeObserver) {
+            // const elements = $$("[data-fixed]");
+            observer = 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);
+                updateOnResize();
+            });
+            $each("[data-fixed]", function ($el) {
+                if (observer)
+                    observer.observe($el);
+            });
+            return function () {
+                observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            };
+        }
+        else {
+            var listener = listenResize(update);
+            return listener;
+        }
+    }, []);
+    return fixedOffset;
+}
+export default useFixedOffset;

package/hooks/useMeasure.d.ts

@@ -0,0 +1,27 @@
+interface RectReadOnly {
+    readonly x: number;
+    readonly y: number;
+    readonly width: number;
+    readonly height: number;
+    readonly top: number;
+    readonly right: number;
+    readonly bottom: number;
+    readonly left: number;
+    [key: string]: number;
+}
+declare type HTMLOrSVGElement = HTMLElement | SVGElement;
+export declare type UseMeasureOptions = {
+    scroll?: boolean;
+};
+export declare type UseMeasureReturn = [
+    (element: HTMLOrSVGElement | null) => void,
+    RectReadOnly,
+    () => void
+];
+/**
+ * Use measure hook
+ *
+ * @borrows [pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
+ */
+export declare function useMeasure(options?: UseMeasureOptions): UseMeasureReturn;
+export default useMeasure;

package/hooks/useMeasure.js

@@ -0,0 +1,163 @@
+import { __spreadArray } from "tslib";
+import { useEffect, useState, useRef, useMemo } from "react";
+import { debounce } from "@koine/utils";
+import { listenResize, listenScroll, on, off } from "@koine/dom";
+var observer;
+// Adds native resize listener to window
+function useOnWindowResize(onWindowResize) {
+    useEffect(function () {
+        var listener = listenResize(onWindowResize);
+        return listener;
+    }, [onWindowResize]);
+}
+function useOnWindowScroll(onScroll, enabled) {
+    useEffect(function () {
+        if (enabled) {
+            var listener = 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 __spreadArray(__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)
+ */
+export function useMeasure(options) {
+    var _a = (options || {}).scroll /* offsetSize = false */, scroll = _a === void 0 ? false : _a /* offsetSize = false */;
+    var _b = 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 = 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 = useRef(false);
+    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 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 = 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 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 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
+    useEffect(function () {
+        removeListeners();
+        addListeners();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [scroll /* , scrollChange, resizeChange */]);
+    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];
+}
+export default useMeasure;

package/hooks/useSmoothScroll.d.ts

@@ -0,0 +1,2 @@
+export declare function useSmoothScroll(): (to?: number | string, offset?: number, callback?: () => void) => void;
+export default useSmoothScroll;

package/hooks/useSmoothScroll.js

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+import { isNumber } from "@koine/utils";
+import { scrollTo } from "@koine/dom";
+import { useFixedOffset } from "./useFixedOffset";
+export function useSmoothScroll() {
+    var fixedOffset = useFixedOffset();
+    var scroll = useCallback(function (to, offset, callback) {
+        if (offset === void 0) { offset = 0; }
+        var top = undefined;
+        if (isNumber(to)) {
+            top = to;
+        }
+        else if (to) {
+            var el = document.getElementById(to);
+            if (el) {
+                top = el.getBoundingClientRect().top;
+            }
+        }
+        if (isNumber(top)) {
+            top = top + window.scrollY - (fixedOffset.current + offset);
+            scrollTo(top, callback);
+        }
+    }, [fixedOffset]);
+    return scroll;
+}
+export default useSmoothScroll;

package/node/{hooks/useMediaQueryWidthCreator.js → helpers/createUseMediaQueryWidth.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaQueryWidthCreator = void 0;
+exports.createUseMediaQueryWidth = void 0;
 var react_1 = require("react");
 var utils_1 = require("@koine/utils");
-function useMediaQueryWidthCreator(customBreakpoints) {
+function createUseMediaQueryWidth(customBreakpoints) {
     var queryResolvers = (0, utils_1.getMediaQueryWidthResolvers)(customBreakpoints);
     return function useMediaQueryWidth(media) {
         var definition = media.substring(1);
@@ -47,8 +47,8 @@ function useMediaQueryWidthCreator(customBreakpoints) {
         return matches;
     };
 }
-exports.useMediaQueryWidthCreator = useMediaQueryWidthCreator;
-exports.default = useMediaQueryWidthCreator;
+exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
+exports.default = createUseMediaQueryWidth;
 //// without creator it would be:
 //// ---------------------------------------------------------------------------
 // import { useState, useEffect, useMemo } from "react";

package/node/helpers/index.js

@@ -2,4 +2,5 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./classed"), exports);
+tslib_1.__exportStar(require("./createUseMediaQueryWidth"), exports);
 tslib_1.__exportStar(require("./extend-component"), exports);

package/node/helpers/mergeRefs.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeRefs = void 0;
+function mergeRefs(refs) {
+    return function (value) {
+        refs.forEach(function (ref) {
+            if (typeof ref === "function") {
+                ref(value);
+            }
+            else if (ref != null) {
+                ref.current = value;
+            }
+        });
+    };
+}
+exports.mergeRefs = mergeRefs;
+exports.default = mergeRefs;

package/node/hooks/index.js

@@ -5,15 +5,17 @@ tslib_1.__exportStar(require("./useAsyncFn"), exports);
 tslib_1.__exportStar(require("./useDateLocale"), exports);
 tslib_1.__exportStar(require("./useEffectOnce"), exports);
 tslib_1.__exportStar(require("./useFirstMountState"), exports);
+tslib_1.__exportStar(require("./useFixedOffset"), exports);
 tslib_1.__exportStar(require("./useFocus"), exports);
 tslib_1.__exportStar(require("./useId"), exports);
 tslib_1.__exportStar(require("./useIsomorphicLayoutEffect"), exports);
-tslib_1.__exportStar(require("./useMediaQueryWidthCreator"), exports);
+tslib_1.__exportStar(require("./useMeasure"), exports);
 tslib_1.__exportStar(require("./useMount"), exports);
 tslib_1.__exportStar(require("./useMountedState"), exports);
 tslib_1.__exportStar(require("./usePrevious"), exports);
 tslib_1.__exportStar(require("./useScrollPosition"), exports);
 // export * from "./useScrollTo";
+tslib_1.__exportStar(require("./useSmoothScroll"), exports);
 tslib_1.__exportStar(require("./useTraceUpdate"), exports);
 tslib_1.__exportStar(require("./useUpdateEffect"), exports);
 tslib_1.__exportStar(require("./useWindowSize"), exports);

package/node/hooks/useFixedOffset.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFixedOffset = void 0;
+var react_1 = require("react");
+var dom_1 = require("@koine/dom");
+var utils_1 = require("@koine/utils");
+var observer;
+var inject = function (value) {
+    (0, dom_1.injectCss)("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
+};
+/**
+ * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
+ *
+ * @see https://web.dev/resize-observer/
+ */
+function useFixedOffset() {
+    var fixedOffset = (0, react_1.useRef)(0);
+    (0, react_1.useLayoutEffect)(function () {
+        var update = function () {
+            var newFixedOffset = (0, dom_1.calculateFixedOffset)();
+            fixedOffset.current = newFixedOffset;
+            // inject this CSS make the hashed deeplinks position the scroll at the
+            // right offset
+            inject(newFixedOffset);
+        };
+        update();
+        if (!observer && ResizeObserver) {
+            // const elements = $$("[data-fixed]");
+            observer = 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);
+                updateOnResize();
+            });
+            (0, dom_1.$each)("[data-fixed]", function ($el) {
+                if (observer)
+                    observer.observe($el);
+            });
+            return function () {
+                observer === null || observer === void 0 ? void 0 : observer.disconnect();
+            };
+        }
+        else {
+            var listener = (0, dom_1.listenResize)(update);
+            return listener;
+        }
+    }, []);
+    return fixedOffset;
+}
+exports.useFixedOffset = useFixedOffset;
+exports.default = useFixedOffset;