@koine/react 1.1.9 → 1.1.11

package/{node/helpers/createUseMediaQueryWidth.js → helpers/createUseMediaQueryWidth.mjs}

@@ -1,24 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createUseMediaQueryWidth = void 0;
-var react_1 = require("react");
-var utils_1 = require("@koine/utils");
-var useIsomorphicLayoutEffect_1 = require("../hooks/useIsomorphicLayoutEffect");
+import { useState } from "react";
+import isUndefined from "@koine/utils/isUndefined";
+import getMediaQueryWidthResolvers from "@koine/utils/getMediaQueryWidthResolvers";
+import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
 /**
  * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
  *
  * @param customBreakpoints
  * @returns
  */
-function createUseMediaQueryWidth(customBreakpoints) {
-    var queryResolvers = (0, utils_1.getMediaQueryWidthResolvers)(customBreakpoints);
+export function createUseMediaQueryWidth(customBreakpoints) {
+    var queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
     return function useMediaQueryWidth(media, serverValue) {
         var definition = media.substring(1);
         var _a = definition.split("-"), rule = _a[0], ruleBreakpoint = _a[1];
-        if ((0, utils_1.isUndefined)(ruleBreakpoint)) {
+        if (isUndefined(ruleBreakpoint)) {
             ruleBreakpoint = rule;
         }
-        if ((0, utils_1.isUndefined)(rule)) {
+        if (isUndefined(rule)) {
             rule = "min";
         }
         // with the hook creator approach these breakpoint types cannot be deduced
@@ -28,8 +26,8 @@ function createUseMediaQueryWidth(customBreakpoints) {
         // >;
         var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
         var query = queryResolvers[rule](br1, br2);
-        var _c = (0, react_1.useState)((0, utils_1.isUndefined)(serverValue) ? null : serverValue), matches = _c[0], setMatches = _c[1];
-        (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
+        var _c = useState(isUndefined(serverValue) ? null : serverValue), matches = _c[0], setMatches = _c[1];
+        useIsomorphicLayoutEffect(function () {
             var mq = window.matchMedia(query);
             var handleChange = function (event) {
                 setMatches(event.matches);
@@ -53,12 +51,12 @@ function createUseMediaQueryWidth(customBreakpoints) {
         return matches;
     };
 }
-exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
-exports.default = createUseMediaQueryWidth;
+export default createUseMediaQueryWidth;
 //// without creator it would be:
 //// ---------------------------------------------------------------------------
 // import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
-// import { isBrowser, type Split } from "@koine/utils";
+// import type { Split } from "@koine/utils";
+// import isBrowser from "@koine/utils/isBrowser";
 // import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
 // import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
 // type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";

package/helpers/extend-component.js

@@ -1,13 +1,17 @@
-import { __assign } from "tslib";
-import { createElement } from "react";
-export var extendComponent = function (component, defaultProps) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extendComponent = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var extendComponent = function (component, defaultProps) {
     // FIXME: check if we need to forwardRef or not
     var NewComponent = function (props) {
-        return createElement(component, props);
+        return (0, react_1.createElement)(component, props);
     };
     // const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
     //   (props, ref) => createElement(component, { ...props, ref })
     // );
-    return Object.assign(NewComponent, __assign(__assign({}, defaultProps), { defaultProps: defaultProps }));
+    return Object.assign(NewComponent, tslib_1.__assign(tslib_1.__assign({}, defaultProps), { defaultProps: defaultProps }));
 };
-export default extendComponent;
+exports.extendComponent = extendComponent;
+exports.default = exports.extendComponent;

package/helpers/extend-component.mjs

@@ -0,0 +1,13 @@
+import { __assign } from "tslib";
+import { createElement } from "react";
+export var extendComponent = function (component, defaultProps) {
+    // FIXME: check if we need to forwardRef or not
+    var NewComponent = function (props) {
+        return createElement(component, props);
+    };
+    // const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
+    //   (props, ref) => createElement(component, { ...props, ref })
+    // );
+    return Object.assign(NewComponent, __assign(__assign({}, defaultProps), { defaultProps: defaultProps }));
+};
+export default extendComponent;

package/helpers/index.js

@@ -1,4 +1,7 @@
-export * from "./classed";
-export * from "./createUseMediaQueryWidth";
-export * from "./extend-component";
-export * from "./mergeRefs";
+"use strict";
+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);
+tslib_1.__exportStar(require("./mergeRefs"), exports);

package/helpers/index.mjs

@@ -0,0 +1,4 @@
+export * from "./classed";
+export * from "./createUseMediaQueryWidth";
+export * from "./extend-component";
+export * from "./mergeRefs";

package/helpers/mergeRefs.js

@@ -1,4 +1,7 @@
-export function mergeRefs(refs) {
+"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") {
@@ -10,4 +13,5 @@ export function mergeRefs(refs) {
         });
     };
 }
-export default mergeRefs;
+exports.mergeRefs = mergeRefs;
+exports.default = mergeRefs;

package/{node/helpers/mergeRefs.js → helpers/mergeRefs.mjs}

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mergeRefs = void 0;
-function mergeRefs(refs) {
+export function mergeRefs(refs) {
     return function (value) {
         refs.forEach(function (ref) {
             if (typeof ref === "function") {
@@ -13,5 +10,4 @@ function mergeRefs(refs) {
         });
     };
 }
-exports.mergeRefs = mergeRefs;
-exports.default = mergeRefs;
+export default mergeRefs;

package/helpers/package.json

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

package/hooks/index.js

@@ -1,22 +1,25 @@
-export * from "./useAsyncFn";
-export * from "./useDateLocale";
-export * from "./useEffectOnce";
-export * from "./useFirstMountState";
-export * from "./useFixedOffset";
-export * from "./useFocus";
-export * from "./useInterval";
-export * from "./useIsomorphicLayoutEffect";
-export * from "./useKeyUp";
-export * from "./useMeasure";
-export * from "./useMount";
-export * from "./useMountedState";
-export * from "./useNavigateAway";
-export * from "./usePrevious";
-export * from "./usePreviousRef";
-export * from "./useScrollPosition";
-export * from "./useScrollThreshold";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+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("./useInterval"), exports);
+tslib_1.__exportStar(require("./useIsomorphicLayoutEffect"), exports);
+tslib_1.__exportStar(require("./useKeyUp"), exports);
+tslib_1.__exportStar(require("./useMeasure"), exports);
+tslib_1.__exportStar(require("./useMount"), exports);
+tslib_1.__exportStar(require("./useMountedState"), exports);
+tslib_1.__exportStar(require("./useNavigateAway"), exports);
+tslib_1.__exportStar(require("./usePrevious"), exports);
+tslib_1.__exportStar(require("./usePreviousRef"), exports);
+tslib_1.__exportStar(require("./useScrollPosition"), exports);
+tslib_1.__exportStar(require("./useScrollThreshold"), exports);
 // export * from "./useScrollTo";
-export * from "./useSmoothScroll";
-export * from "./useTraceUpdate";
-export * from "./useUpdateEffect";
-export * from "./useWindowSize";
+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/hooks/index.mjs

@@ -0,0 +1,22 @@
+export * from "./useAsyncFn";
+export * from "./useDateLocale";
+export * from "./useEffectOnce";
+export * from "./useFirstMountState";
+export * from "./useFixedOffset";
+export * from "./useFocus";
+export * from "./useInterval";
+export * from "./useIsomorphicLayoutEffect";
+export * from "./useKeyUp";
+export * from "./useMeasure";
+export * from "./useMount";
+export * from "./useMountedState";
+export * from "./useNavigateAway";
+export * from "./usePrevious";
+export * from "./usePreviousRef";
+export * from "./useScrollPosition";
+export * from "./useScrollThreshold";
+// export * from "./useScrollTo";
+export * from "./useSmoothScroll";
+export * from "./useTraceUpdate";
+export * from "./useUpdateEffect";
+export * from "./useWindowSize";

package/hooks/package.json

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

package/hooks/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/hooks/types.mjs

@@ -0,0 +1 @@
+export {};

package/hooks/useAsyncFn.js

@@ -1,23 +1,26 @@
-import { __assign } from "tslib";
-import { useCallback, useRef, useState } from "react";
-import { useMountedState } from "./useMountedState";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsyncFn = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useMountedState_1 = require("./useMountedState");
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
  */
-export function useAsyncFn(fn, deps, initialState) {
+function useAsyncFn(fn, deps, initialState) {
     if (deps === void 0) { deps = []; }
     if (initialState === void 0) { initialState = { loading: false }; }
-    var lastCallId = useRef(0);
-    var isMounted = useMountedState();
-    var _a = useState(initialState), state = _a[0], set = _a[1];
-    var callback = useCallback(function () {
+    var lastCallId = (0, react_1.useRef)(0);
+    var isMounted = (0, useMountedState_1.useMountedState)();
+    var _a = (0, react_1.useState)(initialState), state = _a[0], set = _a[1];
+    var callback = (0, react_1.useCallback)(function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
         var callId = ++lastCallId.current;
         if (!state.loading) {
-            set(function (prevState) { return (__assign(__assign({}, prevState), { loading: true })); });
+            set(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { loading: true })); });
         }
         return fn.apply(void 0, args).then(function (value) {
             isMounted() &&
@@ -34,4 +37,5 @@ export function useAsyncFn(fn, deps, initialState) {
     }, deps);
     return [state, callback];
 }
-export default useAsyncFn;
+exports.useAsyncFn = useAsyncFn;
+exports.default = useAsyncFn;

package/{node/hooks/useAsyncFn.js → hooks/useAsyncFn.mjs}

@@ -1,26 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAsyncFn = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var useMountedState_1 = require("./useMountedState");
+import { __assign } from "tslib";
+import { useCallback, useRef, useState } from "react";
+import { useMountedState } from "./useMountedState";
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
  */
-function useAsyncFn(fn, deps, initialState) {
+export function useAsyncFn(fn, deps, initialState) {
     if (deps === void 0) { deps = []; }
     if (initialState === void 0) { initialState = { loading: false }; }
-    var lastCallId = (0, react_1.useRef)(0);
-    var isMounted = (0, useMountedState_1.useMountedState)();
-    var _a = (0, react_1.useState)(initialState), state = _a[0], set = _a[1];
-    var callback = (0, react_1.useCallback)(function () {
+    var lastCallId = useRef(0);
+    var isMounted = useMountedState();
+    var _a = useState(initialState), state = _a[0], set = _a[1];
+    var callback = useCallback(function () {
         var args = [];
         for (var _i = 0; _i < arguments.length; _i++) {
             args[_i] = arguments[_i];
         }
         var callId = ++lastCallId.current;
         if (!state.loading) {
-            set(function (prevState) { return (tslib_1.__assign(tslib_1.__assign({}, prevState), { loading: true })); });
+            set(function (prevState) { return (__assign(__assign({}, prevState), { loading: true })); });
         }
         return fn.apply(void 0, args).then(function (value) {
             isMounted() &&
@@ -37,5 +34,4 @@ function useAsyncFn(fn, deps, initialState) {
     }, deps);
     return [state, callback];
 }
-exports.useAsyncFn = useAsyncFn;
-exports.default = useAsyncFn;
+export default useAsyncFn;

package/hooks/useDateLocale.js

@@ -1,26 +1,27 @@
-import { __awaiter, __generator } from "tslib";
-import { useEffect, useState } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDateLocale = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
 /**
  * Dynamically import the date-fns correct locale
  *
  * Inspired by:
  * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
  */
-export function useDateLocale(locale, defaultLocale) {
+function useDateLocale(locale, defaultLocale) {
     var _this = this;
     if (defaultLocale === void 0) { defaultLocale = "en"; }
-    var _a = useState(), data = _a[0], setData = _a[1];
-    var _b = useState(defaultLocale), current = _b[0], setCurrent = _b[1];
+    var _a = (0, react_1.useState)(), data = _a[0], setData = _a[1];
+    var _b = (0, react_1.useState)(defaultLocale), current = _b[0], setCurrent = _b[1];
     // const [ready, setReady] = useState(false);
     // If the user changes the locale listen to the change and import the locale that is now required.
-    useEffect(function () {
-        var importLocaleFile = function () { return __awaiter(_this, void 0, void 0, function () {
+    (0, react_1.useEffect)(function () {
+        var importLocaleFile = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
             var localeToSet;
-            return __generator(this, function (_a) {
+            return tslib_1.__generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, import(
-                        /* webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
-                        "date-fns/locale/".concat(locale, "/index.js"))];
+                    case 0: return [4 /*yield*/, Promise.resolve().then(function () { return tslib_1.__importStar(require("date-fns/locale/en-US/index.js")); })];
                     case 1:
                         localeToSet = _a.sent();
                         setCurrent(locale || current);
@@ -36,4 +37,5 @@ export function useDateLocale(locale, defaultLocale) {
     }, [locale, current]);
     return data;
 }
-export default useDateLocale;
+exports.useDateLocale = useDateLocale;
+exports.default = useDateLocale;

package/{node/hooks/useDateLocale.js → hooks/useDateLocale.mjs}

@@ -1,30 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDateLocale = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
+import { __awaiter, __generator } from "tslib";
+import { useEffect, useState } from "react";
 /**
  * Dynamically import the date-fns correct locale
  *
  * Inspired by:
  * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
  */
-function useDateLocale(locale, defaultLocale) {
+export function useDateLocale(locale, defaultLocale) {
     var _this = this;
     if (defaultLocale === void 0) { defaultLocale = "en"; }
-    var _a = (0, react_1.useState)(), data = _a[0], setData = _a[1];
-    var _b = (0, react_1.useState)(defaultLocale), current = _b[0], setCurrent = _b[1];
+    var _a = useState(), data = _a[0], setData = _a[1];
+    var _b = useState(defaultLocale), current = _b[0], setCurrent = _b[1];
     // const [ready, setReady] = useState(false);
     // If the user changes the locale listen to the change and import the locale that is now required.
-    (0, react_1.useEffect)(function () {
-        var importLocaleFile = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+    useEffect(function () {
+        var importLocaleFile = function () { return __awaiter(_this, void 0, void 0, function () {
             var localeToSet;
-            return tslib_1.__generator(this, function (_a) {
-                var _b;
+            return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, (_b = 
-                        /* webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
-                        "date-fns/locale/".concat(locale, "/index.js"), Promise.resolve().then(function () { return tslib_1.__importStar(require(_b)); }))];
+                    case 0: return [4 /*yield*/, import("date-fns/locale/en-US/index.js")];
                     case 1:
                         localeToSet = _a.sent();
                         setCurrent(locale || current);
@@ -40,5 +34,4 @@ function useDateLocale(locale, defaultLocale) {
     }, [locale, current]);
     return data;
 }
-exports.useDateLocale = useDateLocale;
-exports.default = useDateLocale;
+export default useDateLocale;

package/hooks/useEffectOnce.js

@@ -1,9 +1,13 @@
-import { useEffect } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEffectOnce = void 0;
+var react_1 = require("react");
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts)
  */
-export var useEffectOnce = function (effect) {
+var useEffectOnce = function (effect) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(effect, []);
+    (0, react_1.useEffect)(effect, []);
 };
-export default useEffectOnce;
+exports.useEffectOnce = useEffectOnce;
+exports.default = exports.useEffectOnce;

package/hooks/useEffectOnce.mjs

@@ -0,0 +1,9 @@
+import { useEffect } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts)
+ */
+export var useEffectOnce = function (effect) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, []);
+};
+export default useEffectOnce;

package/hooks/useFirstMountState.js

@@ -1,13 +1,17 @@
-import { useRef } from "react";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFirstMountState = void 0;
+var react_1 = require("react");
 /**
  * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
  */
-export function useFirstMountState() {
-    var isFirst = useRef(true);
+function useFirstMountState() {
+    var isFirst = (0, react_1.useRef)(true);
     if (isFirst.current) {
         isFirst.current = false;
         return true;
     }
     return isFirst.current;
 }
-export default useFirstMountState;
+exports.useFirstMountState = useFirstMountState;
+exports.default = useFirstMountState;

package/hooks/useFirstMountState.mjs

@@ -0,0 +1,13 @@
+import { useRef } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export function useFirstMountState() {
+    var isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}
+export default useFirstMountState;

package/hooks/useFixedOffset.js

@@ -1,9 +1,16 @@
-import { useRef } from "react";
-import { injectCss, calculateFixedOffset, listenResizeDebounced, $each, } from "@koine/dom";
-import { debounce } from "@koine/utils";
-import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFixedOffset = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var injectCss_1 = tslib_1.__importDefault(require("@koine/dom/injectCss"));
+var calculateFixedOffset_1 = tslib_1.__importDefault(require("@koine/dom/calculateFixedOffset"));
+var listenResizeDebounced_1 = tslib_1.__importDefault(require("@koine/dom/listenResizeDebounced"));
+var _each_1 = tslib_1.__importDefault(require("@koine/dom/$each"));
+var debounce_1 = tslib_1.__importDefault(require("@koine/utils/debounce"));
+var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("./useIsomorphicLayoutEffect"));
 var inject = function (value) {
-    injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
+    (0, injectCss_1.default)("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
 };
 /**
  * # Use fixed offset
@@ -14,11 +21,11 @@ var inject = function (value) {
  *
  * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
  */
-export function useFixedOffset(selector) {
-    var fixedOffset = useRef(0);
-    useIsomorphicLayoutEffect(function () {
+function useFixedOffset(selector) {
+    var fixedOffset = (0, react_1.useRef)(0);
+    (0, useIsomorphicLayoutEffect_1.default)(function () {
         var update = function () {
-            var newFixedOffset = calculateFixedOffset();
+            var newFixedOffset = (0, calculateFixedOffset_1.default)();
             fixedOffset.current = newFixedOffset;
             // inject this CSS make the hashed deeplinks position the scroll at the
             // right offset
@@ -33,10 +40,10 @@ export function useFixedOffset(selector) {
                     newFixedOffset += entry.contentRect.height;
                 });
                 fixedOffset.current = newFixedOffset;
-                var updateOnResize = debounce(function () { return inject(newFixedOffset); }, 400, true);
+                var updateOnResize = (0, debounce_1.default)(function () { return inject(newFixedOffset); }, 400, true);
                 updateOnResize();
             });
-            $each(selector || "[data-fixed]", function ($el) {
+            (0, _each_1.default)(selector || "[data-fixed]", function ($el) {
                 if (observer_1)
                     observer_1.observe($el);
             });
@@ -45,10 +52,11 @@ export function useFixedOffset(selector) {
             };
         }
         else {
-            var listener = listenResizeDebounced(0, update);
+            var listener = (0, listenResizeDebounced_1.default)(0, update);
             return listener;
         }
     }, [selector]);
     return fixedOffset;
 }
-export default useFixedOffset;
+exports.useFixedOffset = useFixedOffset;
+exports.default = useFixedOffset;

package/{node/hooks/useFixedOffset.js → hooks/useFixedOffset.mjs}

@@ -1,12 +1,12 @@
-"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 useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
+import { useRef } from "react";
+import injectCss from "@koine/dom/injectCss";
+import calculateFixedOffset from "@koine/dom/calculateFixedOffset";
+import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
+import $each from "@koine/dom/$each";
+import debounce from "@koine/utils/debounce";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
 var inject = function (value) {
-    (0, dom_1.injectCss)("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
+    injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
 };
 /**
  * # Use fixed offset
@@ -17,11 +17,11 @@ var inject = function (value) {
  *
  * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
  */
-function useFixedOffset(selector) {
-    var fixedOffset = (0, react_1.useRef)(0);
-    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
+export function useFixedOffset(selector) {
+    var fixedOffset = useRef(0);
+    useIsomorphicLayoutEffect(function () {
         var update = function () {
-            var newFixedOffset = (0, dom_1.calculateFixedOffset)();
+            var newFixedOffset = calculateFixedOffset();
             fixedOffset.current = newFixedOffset;
             // inject this CSS make the hashed deeplinks position the scroll at the
             // right offset
@@ -36,10 +36,10 @@ function useFixedOffset(selector) {
                     newFixedOffset += entry.contentRect.height;
                 });
                 fixedOffset.current = newFixedOffset;
-                var updateOnResize = (0, utils_1.debounce)(function () { return inject(newFixedOffset); }, 400, true);
+                var updateOnResize = debounce(function () { return inject(newFixedOffset); }, 400, true);
                 updateOnResize();
             });
-            (0, dom_1.$each)(selector || "[data-fixed]", function ($el) {
+            $each(selector || "[data-fixed]", function ($el) {
                 if (observer_1)
                     observer_1.observe($el);
             });
@@ -48,11 +48,10 @@ function useFixedOffset(selector) {
             };
         }
         else {
-            var listener = (0, dom_1.listenResizeDebounced)(0, update);
+            var listener = listenResizeDebounced(0, update);
             return listener;
         }
     }, [selector]);
     return fixedOffset;
 }
-exports.useFixedOffset = useFixedOffset;
-exports.default = useFixedOffset;
+export default useFixedOffset;