@koine/react 1.0.9 → 1.0.12

package/node/Typography/TextLoop.js

@@ -1,15 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TextLoop = exports.TextLoopPiece = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const framer_motion_1 = require("framer-motion");
-const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up", inline = true, noOverflow = true, delay = 400, }) => {
-    const placeholderRef = (0, react_1.useRef)(null);
-    const [content, setContent] = (0, react_1.useState)({ data: "", key: "" });
-    const [width, setWidth] = (0, react_1.useState)(inline ? 0 : "auto");
-    (0, react_1.useEffect)(() => {
-        const timeoutId = setTimeout(() => {
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var framer_motion_1 = require("framer-motion");
+var TextLoopPiece = function (_a) {
+    var _b = _a.text, text = _b === void 0 ? "" : _b, _c = _a.style, style = _c === void 0 ? {} : _c, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.direction, direction = _e === void 0 ? "up" : _e, _f = _a.inline, inline = _f === void 0 ? true : _f, _g = _a.noOverflow, noOverflow = _g === void 0 ? true : _g, _h = _a.delay, delay = _h === void 0 ? 400 : _h;
+    var placeholderRef = (0, react_1.useRef)(null);
+    var _j = (0, react_1.useState)({ data: "", key: "" }), content = _j[0], setContent = _j[1];
+    var _k = (0, react_1.useState)(inline ? 0 : "auto"), width = _k[0], setWidth = _k[1];
+    (0, react_1.useEffect)(function () {
+        var timeoutId = setTimeout(function () {
             if (!placeholderRef.current)
                 return;
             placeholderRef.current.innerHTML = text + "";
@@ -17,15 +19,9 @@ const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up"
                 setWidth(placeholderRef.current.offsetWidth);
             setContent({ data: text + "", key: new Date() + "" });
         }, delay);
-        return () => clearTimeout(timeoutId);
+        return function () { return clearTimeout(timeoutId); };
     }, [text, delay, inline]);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, style: {
-            ...style,
-            position: "relative",
-            display: inline ? "inline-block" : "block",
-            width,
-            whiteSpace: inline ? "nowrap" : "normal",
-        }, children: [(0, jsx_runtime_1.jsx)("span", { ref: placeholderRef, style: { visibility: "hidden" } }), (0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", tslib_1.__assign({ className: className, style: tslib_1.__assign(tslib_1.__assign({}, style), { position: "relative", display: inline ? "inline-block" : "block", width: width, whiteSpace: inline ? "nowrap" : "normal" }) }, { children: [(0, jsx_runtime_1.jsx)("span", { ref: placeholderRef, style: { visibility: "hidden" } }), (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: {
                     overflow: noOverflow ? "hidden" : "visible",
                     display: "block",
                     position: "absolute",
@@ -33,22 +29,23 @@ const TextLoopPiece = ({ text = "", style = {}, className = "", direction = "up"
                     left: 0,
                     height: "100%",
                     width: "100%",
-                }, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.m.div, { style: { position: "absolute" }, initial: {
+                } }, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(framer_motion_1.m.div, tslib_1.__assign({ style: { position: "absolute" }, initial: {
                             opacity: 0,
                             y: direction === "down" ? "-100%" : "100%",
                         }, animate: { opacity: 1, y: 0 }, exit: {
                             opacity: 0,
                             y: direction === "down" ? "100%" : "-100%",
-                        }, children: content.data }, content.key) }) })] }));
+                        } }, { children: content.data }), content.key) }) }))] })));
 };
 exports.TextLoopPiece = TextLoopPiece;
-const TextLoop = ({ texts, interval = 3000, ...props }) => {
-    const [index, setIndex] = (0, react_1.useState)(0);
-    (0, react_1.useEffect)(() => {
-        const intervalId = setInterval(() => setIndex((index) => index + 1), interval // every 3 seconds
+var TextLoop = function (_a) {
+    var texts = _a.texts, _b = _a.interval, interval = _b === void 0 ? 3000 : _b, props = tslib_1.__rest(_a, ["texts", "interval"]);
+    var _c = (0, react_1.useState)(0), index = _c[0], setIndex = _c[1];
+    (0, react_1.useEffect)(function () {
+        var intervalId = setInterval(function () { return setIndex(function (index) { return index + 1; }); }, interval // every 3 seconds
         );
-        return () => clearTimeout(intervalId);
+        return function () { return clearTimeout(intervalId); };
     }, [interval]);
-    return (0, jsx_runtime_1.jsx)(exports.TextLoopPiece, { ...props, text: texts[index % texts.length] });
+    return (0, jsx_runtime_1.jsx)(exports.TextLoopPiece, tslib_1.__assign({}, props, { text: texts[index % texts.length] }));
 };
 exports.TextLoop = TextLoop;

package/node/Typography/TypeStairs.js

@@ -1,26 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TypeStairs = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-exports.TypeStairs = (0, react_1.forwardRef)(({ children, limit }, ref) => {
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+exports.TypeStairs = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, limit = _a.limit;
     // split in rows or just use one row if there is no limit
-    const rows = limit ? splitTextIntoRows(children, limit) : [children];
-    return rows.length > 1 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: rows.map((row, rowIndex) => {
-            return ((0, jsx_runtime_1.jsxs)("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, `row-${rowIndex}`));
+    var rows = limit ? splitTextIntoRows(children, limit) : [children];
+    return rows.length > 1 ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: rows.map(function (row, rowIndex) {
+            return ((0, jsx_runtime_1.jsxs)("span", { children: [renderRow(row, rowIndex, ref), rowIndex !== rows.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, "row-".concat(rowIndex)));
         }) })) : (renderRow(rows[0], 0, ref));
 });
 /**
  * every number chars find a space and break, then restart the gradient weight
  * @see https://stackoverflow.com/a/25770787
  */
-function splitTextIntoRows(input = "", limit = 18) {
-    const rows = [];
-    const arr = input.split(" ");
-    let currow = arr[0];
-    let rowlen = currow.length;
-    for (let i = 1; i < arr.length; i++) {
-        const word = arr[i];
+function splitTextIntoRows(input, limit) {
+    if (input === void 0) { input = ""; }
+    if (limit === void 0) { limit = 18; }
+    var rows = [];
+    var arr = input.split(" ");
+    var currow = arr[0];
+    var rowlen = currow.length;
+    for (var i = 1; i < arr.length; i++) {
+        var word = arr[i];
         rowlen += word.length + 1;
         if (rowlen <= limit) {
             currow += " " + word;
@@ -35,15 +39,15 @@ function splitTextIntoRows(input = "", limit = 18) {
     return rows;
 }
 function renderRow(row, rowIndex, ref) {
-    const letters = row.split("");
-    let fontWeightIdx = 1;
+    var letters = row.split("");
+    var fontWeightIdx = 1;
     // const fontWeight = Math.min(fontWeightIdx * 100, 800);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: letters.map((letter, letterIndex) => {
-            const fontWeight = Math.min(fontWeightIdx * 100, 800);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: letters.map(function (letter, letterIndex) {
+            var fontWeight = Math.min(fontWeightIdx * 100, 800);
             // don't waste a fontWeight for a white space
             if (letter !== " ") {
                 fontWeightIdx++;
             }
-            return ((0, jsx_runtime_1.jsx)("span", { style: { fontWeight }, ref: ref, children: letter }, `letter-${rowIndex}-${letterIndex}`));
+            return ((0, jsx_runtime_1.jsx)("span", tslib_1.__assign({ style: { fontWeight: fontWeight }, ref: ref }, { children: letter }), "letter-".concat(rowIndex, "-").concat(letterIndex)));
         }) }));
 }

package/node/Typography/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./CopyPasteVisible"), exports);
 tslib_1.__exportStar(require("./Native"), exports);
 tslib_1.__exportStar(require("./ReadMore"), exports);

package/node/css/index.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.KoineDialog = void 0;
-const tslib_1 = require("tslib");
+var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("../shared"), exports);
 // export * from "../Alert";
 // export * from "../Animations";
@@ -14,6 +14,7 @@ tslib_1.__exportStar(require("../shared"), exports);
 // export * from "../Debug";
 var bare_1 = require("../Dialog/css/bare");
 Object.defineProperty(exports, "KoineDialog", { enumerable: true, get: function () { return bare_1.KoineDialog; } });
+// export * from "../Form";
 // export * from "../Forms";
 // export * from "../Grid";
 // export * from "../Hamburger";

package/node/helpers/classed.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.classed = void 0;
-const react_1 = require("react");
+var tslib_1 = require("tslib");
+var react_1 = require("react");
 /**
  * This utility allows to extend a component a là `styled-components` but for
  * a className based styling solution like Tailwind,
@@ -18,12 +19,17 @@ const react_1 = require("react");
  */
 function classed(component) {
     // @ts-expect-error nevermind for now...
-    const type = component.type || component;
-    return function (strings, ...args) {
-        const WrappedComponent = (0, react_1.forwardRef)(function (props, ref) {
-            const argResolved = args
-                .map((arg, index) => {
-                let result = "";
+    var type = component.type || component;
+    return function (strings) {
+        var args = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            args[_i - 1] = arguments[_i];
+        }
+        var WrappedComponent = (0, react_1.forwardRef)(function (props, ref) {
+            var _a;
+            var argResolved = args
+                .map(function (arg, index) {
+                var result = "";
                 if (typeof arg === "function") {
                     result = arg(props);
                 }
@@ -33,32 +39,30 @@ function classed(component) {
                 return strings[index] + result;
             })
                 .join("");
-            const isNativeHtmlElement = typeof type === "string";
-            const propsToForward = isNativeHtmlElement
+            var isNativeHtmlElement = typeof type === "string";
+            var propsToForward = isNativeHtmlElement
                 ? {}
                 : props;
             if (isNativeHtmlElement) {
-                for (const key in props) {
+                for (var key in props) {
                     // like styled-components `transient` props
                     if (!key.startsWith("$")) {
+                        // FIXME: for react 18 we need: @ts-expect-error
                         propsToForward[key] = props[key];
                     }
                 }
             }
             // get the tagged function string outcome
-            let className = argResolved || strings[0];
+            var className = argResolved || strings[0];
             // check if we need to clean it or not from the optional structure `< class="..."`
-            className = className.match(/class="([^"]*)/)?.[1] || className;
+            className = ((_a = className.match(/class="([^"]*)/)) === null || _a === void 0 ? void 0 : _a[1]) || className;
             // add the custom classes from props
-            className += props?.className ? " " + props?.className : "";
-            return (0, react_1.createElement)(type, {
-                // ...props,
-                ...propsToForward,
+            className += (props === null || props === void 0 ? void 0 : props.className) ? " " + (props === null || props === void 0 ? void 0 : props.className) : "";
+            return (0, react_1.createElement)(type, tslib_1.__assign(tslib_1.__assign({}, propsToForward), { 
                 // only add ot props if it is not an empty string
-                className: className || undefined,
+                className: className || undefined, 
                 // add ref to props
-                ref,
-            });
+                ref: ref }));
         });
         // FIXME: not sure if this is needed
         // WrappedComponent.displayName = type.toString();

package/node/helpers/extend-component.js

@@ -1,16 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.extendComponent = void 0;
-const react_1 = require("react");
-const extendComponent = (component, defaultProps) => {
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var extendComponent = function (component, defaultProps) {
     // FIXME: check if we need to forwardRef or not
-    const NewComponent = (props) => (0, react_1.createElement)(component, props);
+    var NewComponent = function (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, {
-        ...defaultProps,
-        defaultProps,
-    });
+    return Object.assign(NewComponent, tslib_1.__assign(tslib_1.__assign({}, defaultProps), { defaultProps: defaultProps }));
 };
 exports.extendComponent = extendComponent;

package/node/helpers/index.js

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

package/node/hooks/index.js

@@ -1,10 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
+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("./useFocus"), exports);
+tslib_1.__exportStar(require("./useId"), exports);
+tslib_1.__exportStar(require("./useIsomorphicLayoutEffect"), 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("./useTraceUpdate"), exports);
+tslib_1.__exportStar(require("./useUpdateEffect"), exports);
 tslib_1.__exportStar(require("./useWindowSize"), exports);

package/node/hooks/types.js

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

package/node/hooks/useAsyncFn.js

@@ -0,0 +1,40 @@
+"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)
+ */
+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 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 })); });
+        }
+        return fn.apply(void 0, args).then(function (value) {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ value: value, loading: false });
+            return value;
+        }, function (error) {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ error: error, loading: false });
+            return error;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+    return [state, callback];
+}
+exports.useAsyncFn = useAsyncFn;

package/node/hooks/useDateLocale.js

@@ -1,51 +1,37 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDateLocale = void 0;
-const react_1 = require("react");
+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/
  */
-function useDateLocale(locale, defaultLocale = "en") {
-    const [data, setData] = (0, react_1.useState)();
-    const [current, setCurrent] = (0, react_1.useState)(defaultLocale);
+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];
     // 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)(() => {
-        const importLocaleFile = async () => {
-            // This webpack option stops all of the date-fns files being imported and chunked.
-            const localeToSet = await Promise.resolve().then(() => __importStar(require(
-            /* webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
-            `date-fns/locale/${locale}/index.js`)));
-            setCurrent(locale || current);
-            setData(localeToSet.default);
-            // setReady(true);
-        };
+    (0, react_1.useEffect)(function () {
+        var importLocaleFile = function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+            var localeToSet;
+            return tslib_1.__generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, Promise.resolve().then(function () { return tslib_1.__importStar(require(
+                        /* webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
+                        "date-fns/locale/".concat(locale, "/index.js"))); })];
+                    case 1:
+                        localeToSet = _a.sent();
+                        setCurrent(locale || current);
+                        setData(localeToSet.default);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
         // If the locale has not yet been loaded.
         if (locale !== current) {
             importLocaleFile();

package/node/hooks/useEffectOnce.js

@@ -0,0 +1,12 @@
+"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)
+ */
+var useEffectOnce = function (effect) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (0, react_1.useEffect)(effect, []);
+};
+exports.useEffectOnce = useEffectOnce;

package/node/hooks/useFirstMountState.js

@@ -0,0 +1,16 @@
+"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)
+ */
+function useFirstMountState() {
+    var isFirst = (0, react_1.useRef)(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}
+exports.useFirstMountState = useFirstMountState;

package/node/hooks/useFocus.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFocus = void 0;
-const react_1 = require("react");
+var react_1 = require("react");
 /**
  * @see https://stackoverflow.com/a/54159564/1938970
  */
-const useFocus = () => {
-    const element = (0, react_1.useRef)(null);
-    const setFocus = () => {
+var useFocus = function () {
+    var element = (0, react_1.useRef)(null);
+    var setFocus = function () {
         element.current && element.current.focus();
     };
     return [element, setFocus];

package/node/hooks/useId.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useId = void 0;
+var utils_1 = require("@koine/utils");
+/**
+ * FIXME: once we can move to react 18 just replace this import with `{ useId } from "react";`
+ */
+function useId(prefix) {
+    if (prefix === void 0) { prefix = "uid"; }
+    return "".concat(prefix, "-").concat((0, utils_1.uid)());
+}
+exports.useId = useId;

package/node/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsomorphicLayoutEffect = void 0;
+var react_1 = require("react");
+var utils_1 = require("@koine/utils");
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+exports.useIsomorphicLayoutEffect = utils_1.isBrowser
+    ? react_1.useLayoutEffect
+    : react_1.useEffect;

package/node/hooks/useMount.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMount = void 0;
+var useEffectOnce_1 = require("./useEffectOnce");
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMount.ts)
+ */
+var useMount = function (fn) {
+    (0, useEffectOnce_1.useEffectOnce)(function () {
+        fn();
+    });
+};
+exports.useMount = useMount;

package/node/hooks/useMountedState.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMountedState = void 0;
+var react_1 = require("react");
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
+ */
+function useMountedState() {
+    var mountedRef = (0, react_1.useRef)(false);
+    var get = (0, react_1.useCallback)(function () { return mountedRef.current; }, []);
+    (0, react_1.useEffect)(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+}
+exports.useMountedState = useMountedState;

package/node/hooks/usePrevious.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePrevious = void 0;
-const react_1 = require("react");
+var react_1 = require("react");
 function usePrevious(value) {
-    const ref = (0, react_1.useRef)();
-    (0, react_1.useEffect)(() => {
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
         ref.current = value;
     });
     return ref.current;

package/node/hooks/useScrollPosition.js

@@ -1,21 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScrollPosition = void 0;
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("react-use/esm/useIsomorphicLayoutEffect"));
-const utils_1 = require("@koine/utils");
-const zeroPosition = { x: 0, y: 0 };
-const getClientRect = (element) => element?.getBoundingClientRect();
-const getScrollPosition = (element, useWindow, boundingElement) => {
+var react_1 = require("react");
+var utils_1 = require("@koine/utils");
+var useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
+var zeroPosition = { x: 0, y: 0 };
+var getClientRect = function (element) {
+    return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+};
+var getScrollPosition = function (element, useWindow, boundingElement) {
     if (!utils_1.isBrowser) {
         return zeroPosition;
     }
     if (useWindow) {
         return { x: window.scrollX, y: window.scrollY };
     }
-    const targetPosition = getClientRect(element?.current || document.body);
-    const containerPosition = getClientRect(boundingElement?.current);
+    var targetPosition = getClientRect((element === null || element === void 0 ? void 0 : element.current) || document.body);
+    var containerPosition = getClientRect(boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
     if (!targetPosition) {
         return zeroPosition;
     }
@@ -33,20 +34,22 @@ const getScrollPosition = (element, useWindow, boundingElement) => {
  * - reused internal helper functions
  * - compacted object arguments in functions as plain argument list to improve compression
  */
-const useScrollPosition = (effect, deps = [], element, useWindow, wait, boundingElement) => {
-    const position = (0, react_1.useRef)(getScrollPosition(null, useWindow, boundingElement));
-    let throttleTimeout = null;
-    const callBack = () => {
-        const current = getScrollPosition(element, useWindow, boundingElement);
+var useScrollPosition = function (effect, deps, element, useWindow, wait, boundingElement) {
+    if (deps === void 0) { deps = []; }
+    var position = (0, react_1.useRef)(getScrollPosition(null, useWindow, boundingElement));
+    var throttleTimeout = null;
+    var callBack = function () {
+        var current = getScrollPosition(element, useWindow, boundingElement);
         effect(current, position.current);
         position.current = current;
         throttleTimeout = null;
     };
-    (0, useIsomorphicLayoutEffect_1.default)(() => {
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
+        var _a;
         if (!utils_1.isBrowser) {
             return undefined;
         }
-        const handleScroll = () => {
+        var handleScroll = function () {
             if (wait) {
                 if (throttleTimeout === null) {
                     throttleTimeout = window.setTimeout(callBack, wait);
@@ -57,16 +60,17 @@ const useScrollPosition = (effect, deps = [], element, useWindow, wait, bounding
             }
         };
         if (boundingElement) {
-            boundingElement.current?.addEventListener("scroll", handleScroll, {
+            (_a = boundingElement.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", handleScroll, {
                 passive: true,
             });
         }
         else {
             window.addEventListener("scroll", handleScroll, { passive: true });
         }
-        return () => {
+        return function () {
+            var _a;
             if (boundingElement) {
-                boundingElement.current?.removeEventListener("scroll", handleScroll);
+                (_a = boundingElement.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", handleScroll);
             }
             else {
                 window.removeEventListener("scroll", handleScroll);