@koine/react 2.0.0-beta.1 → 2.0.0-beta.100

package/hooks/types.js

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

package/hooks/types.mjs

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

package/hooks/useAsyncFn.js

@@ -1,41 +0,0 @@
-"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;
-exports.default = useAsyncFn;

package/hooks/useAsyncFn.mjs

@@ -1,37 +0,0 @@
-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)
- */
-export 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 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 })); });
-        }
-        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];
-}
-export default useAsyncFn;

package/hooks/useDateLocale.d.ts

@@ -1,8 +0,0 @@
-/**
- * Dynamically import the date-fns correct locale
- *
- * Inspired by:
- * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
- */
-export declare function useDateLocale(locale?: string, defaultLocale?: string): globalThis.Locale | undefined;
-export default useDateLocale;

package/hooks/useDateLocale.js

@@ -1,41 +0,0 @@
-"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/
- */
-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)(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("date-fns/locale/en-US/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();
-        }
-    }, [locale, current]);
-    return data;
-}
-exports.useDateLocale = useDateLocale;
-exports.default = useDateLocale;

package/hooks/useDateLocale.mjs

@@ -1,37 +0,0 @@
-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/
- */
-export 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];
-    // 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 () {
-            var localeToSet;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, import("date-fns/locale/en-US/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();
-        }
-    }, [locale, current]);
-    return data;
-}
-export default useDateLocale;

package/hooks/useFirstMountState.d.ts

@@ -1,5 +0,0 @@
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
- */
-export declare function useFirstMountState(): boolean;
-export default useFirstMountState;

package/hooks/useFirstMountState.js

@@ -1,17 +0,0 @@
-"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;
-exports.default = useFirstMountState;

package/hooks/useFirstMountState.mjs

@@ -1,13 +0,0 @@
-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.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-/**
- * # Use fixed offset
- *
- * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
- *
- * @see https://web.dev/resize-observer/
- *
- * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */
-export declare function useFixedOffset(selector?: string): import("react").MutableRefObject<number>;
-export default useFixedOffset;

package/hooks/useFixedOffset.js

@@ -1,62 +0,0 @@
-"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) {
-    (0, injectCss_1.default)("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
-};
-/**
- * # Use fixed offset
- *
- * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
- *
- * @see https://web.dev/resize-observer/
- *
- * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */
-function useFixedOffset(selector) {
-    var fixedOffset = (0, react_1.useRef)(0);
-    (0, useIsomorphicLayoutEffect_1.default)(function () {
-        var update = function () {
-            var newFixedOffset = (0, calculateFixedOffset_1.default)();
-            fixedOffset.current = newFixedOffset;
-            // inject this CSS make the hashed deeplinks position the scroll at the
-            // right offset
-            inject(newFixedOffset);
-        };
-        update();
-        if (ResizeObserver) {
-            // const elements = $$("[data-fixed]");
-            var observer_1 = new ResizeObserver(function (entries) {
-                var newFixedOffset = 0;
-                entries.forEach(function (entry) {
-                    newFixedOffset += entry.contentRect.height;
-                });
-                fixedOffset.current = newFixedOffset;
-                var updateOnResize = (0, debounce_1.default)(function () { return inject(newFixedOffset); }, 400, true);
-                updateOnResize();
-            });
-            (0, _each_1.default)(selector || "[data-fixed]", function ($el) {
-                if (observer_1)
-                    observer_1.observe($el);
-            });
-            return function () {
-                observer_1 === null || observer_1 === void 0 ? void 0 : observer_1.disconnect();
-            };
-        }
-        else {
-            var listener = (0, listenResizeDebounced_1.default)(0, update);
-            return listener;
-        }
-    }, [selector]);
-    return fixedOffset;
-}
-exports.useFixedOffset = useFixedOffset;
-exports.default = useFixedOffset;

package/hooks/useFixedOffset.mjs

@@ -1,57 +0,0 @@
-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) {
-    injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
-};
-/**
- * # Use fixed offset
- *
- * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
- *
- * @see https://web.dev/resize-observer/
- *
- * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */
-export function useFixedOffset(selector) {
-    var fixedOffset = useRef(0);
-    useIsomorphicLayoutEffect(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 (ResizeObserver) {
-            // const elements = $$("[data-fixed]");
-            var observer_1 = 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, true);
-                updateOnResize();
-            });
-            $each(selector || "[data-fixed]", function ($el) {
-                if (observer_1)
-                    observer_1.observe($el);
-            });
-            return function () {
-                observer_1 === null || observer_1 === void 0 ? void 0 : observer_1.disconnect();
-            };
-        }
-        else {
-            var listener = listenResizeDebounced(0, update);
-            return listener;
-        }
-    }, [selector]);
-    return fixedOffset;
-}
-export default useFixedOffset;

package/hooks/useFocus.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-/**
- * @see https://stackoverflow.com/a/54159564/1938970
- */
-export declare const useFocus: () => (import("react").RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | (() => void))[];
-export default useFocus;

package/hooks/useFocus.js

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

package/hooks/useFocus.mjs

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

package/hooks/useInterval.d.ts

@@ -1,7 +0,0 @@
-/**
- * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
- *
- * We just add `deps` array argument and typescript support
- */
-export declare function useInterval<T extends () => unknown>(callback: T, delay: number, deps?: unknown[]): void;
-export default useInterval;

package/hooks/useInterval.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInterval = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var noop_1 = tslib_1.__importDefault(require("@koine/utils/noop"));
-/**
- * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
- *
- * We just add `deps` array argument and typescript support
- */
-function useInterval(callback, delay, deps) {
-    if (deps === void 0) { deps = []; }
-    var savedCallback = (0, react_1.useRef)();
-    (0, react_1.useEffect)(function () {
-        savedCallback.current = callback;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, tslib_1.__spreadArray([callback], deps, true));
-    (0, react_1.useEffect)(function () {
-        function tick() {
-            if (savedCallback.current)
-                savedCallback.current();
-        }
-        if (delay !== null) {
-            var id_1 = setInterval(tick, delay);
-            return function () { return clearInterval(id_1); };
-        }
-        return noop_1.default;
-    }, [delay]);
-}
-exports.useInterval = useInterval;
-exports.default = useInterval;

package/hooks/useInterval.mjs

@@ -1,28 +0,0 @@
-import { __spreadArray } from "tslib";
-import { useEffect, useRef } from "react";
-import noop from "@koine/utils/noop";
-/**
- * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
- *
- * We just add `deps` array argument and typescript support
- */
-export function useInterval(callback, delay, deps) {
-    if (deps === void 0) { deps = []; }
-    var savedCallback = useRef();
-    useEffect(function () {
-        savedCallback.current = callback;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([callback], deps, true));
-    useEffect(function () {
-        function tick() {
-            if (savedCallback.current)
-                savedCallback.current();
-        }
-        if (delay !== null) {
-            var id_1 = setInterval(tick, delay);
-            return function () { return clearInterval(id_1); };
-        }
-        return noop;
-    }, [delay]);
-}
-export default useInterval;

package/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,6 +0,0 @@
-import { useEffect } from "react";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts)
- */
-export declare const useIsomorphicLayoutEffect: typeof useEffect;
-export default useIsomorphicLayoutEffect;

package/hooks/useIsomorphicLayoutEffect.js

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

package/hooks/useIsomorphicLayoutEffect.mjs

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

package/hooks/useKeyUp.d.ts

@@ -1,2 +0,0 @@
-export declare function useKeyUp(callback: (event: KeyboardEvent) => void, deps?: unknown[]): void;
-export default useKeyUp;

package/hooks/useKeyUp.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeyUp = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var on_1 = tslib_1.__importDefault(require("@koine/dom/on"));
-function useKeyUp(callback, deps) {
-    if (deps === void 0) { deps = []; }
-    (0, react_1.useEffect)(function () {
-        var listener = (0, on_1.default)(window, "keyup", function (event) {
-            // const { key } = event;
-            // be sure we do not intercept keys combinations maybe used for other
-            // actions like native browser navigation shortcuts
-            // @see https://stackoverflow.com/a/37559790/1938970
-            if (!event.ctrlKey &&
-                !event.altKey &&
-                !event.shiftKey &&
-                !event.metaKey) {
-                callback(event);
-            }
-        });
-        return listener;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, tslib_1.__spreadArray([callback], deps, true));
-}
-exports.useKeyUp = useKeyUp;
-exports.default = useKeyUp;

package/hooks/useKeyUp.mjs

@@ -1,23 +0,0 @@
-import { __spreadArray } from "tslib";
-import { useEffect } from "react";
-import on from "@koine/dom/on";
-export function useKeyUp(callback, deps) {
-    if (deps === void 0) { deps = []; }
-    useEffect(function () {
-        var listener = on(window, "keyup", function (event) {
-            // const { key } = event;
-            // be sure we do not intercept keys combinations maybe used for other
-            // actions like native browser navigation shortcuts
-            // @see https://stackoverflow.com/a/37559790/1938970
-            if (!event.ctrlKey &&
-                !event.altKey &&
-                !event.shiftKey &&
-                !event.metaKey) {
-                callback(event);
-            }
-        });
-        return listener;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, __spreadArray([callback], deps, true));
-}
-export default useKeyUp;