@koine/react 2.0.0-beta.14 → 2.0.0-beta.16

package/tw/index.d.ts

@@ -1,2 +1 @@
-export * from "../shared";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/bare";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/bare.js";

package/tw/index.js

@@ -0,0 +1 @@
+export { KoineDialog } from "../Dialog/tw/bare.js";

package/twm/index.d.ts

@@ -1,2 +1 @@
-export * from "../shared";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/framer";
+export { KoineDialog, type KoineDialogProps } from "../Dialog/tw/framer.js";

package/twm/index.js

@@ -0,0 +1 @@
+export { KoineDialog } from "../Dialog/tw/framer.js";

package/types.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-export type { KoineImgSmartWrapProps, KoineImgSmartProps } from "./Img/types";
+export type { KoineImgSmartWrapProps, KoineImgSmartProps } from "./Img/types.js";
 export type Translate = (i18nKey: any, query?: any, options?: any) => string;
 export type Option = {
     value: string;
@@ -8,3 +7,5 @@ export type Option = {
 };
 export type KoineComponentProps<BaseComponentProps, ExtendableProps> = BaseComponentProps & ExtendableProps;
 export type KoineComponent<Props = any> = string | React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
+export type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T : never;
+export type FunctionReturningPromise = (...args: any[]) => Promise<any>;

package/types.js

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

package/{hooks/useAsyncFn.d.ts → useAsyncFn.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FunctionReturningPromise, PromiseType } from "./types";
+import type { FunctionReturningPromise, PromiseType } from "./types.js";
 export type UseAsyncState<T> = {
     loading: boolean;
     error?: undefined;
@@ -19,8 +19,5 @@ export type UseAsyncState<T> = {
 };
 type StateFromFunctionReturningPromise<T extends FunctionReturningPromise> = UseAsyncState<PromiseType<ReturnType<T>>>;
 export type UseAsyncFnReturn<T extends FunctionReturningPromise = FunctionReturningPromise> = [StateFromFunctionReturningPromise<T>, T];
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
- */
 export declare function useAsyncFn<T extends FunctionReturningPromise>(fn: T, deps?: React.DependencyList, initialState?: StateFromFunctionReturningPromise<T>): UseAsyncFnReturn<T>;
 export default useAsyncFn;

package/useAsyncFn.js

@@ -0,0 +1,33 @@
+import { __assign } from "tslib";
+import { useCallback, useRef, useState } from "react";
+import { useMountedState } from "./useMountedState.js";
+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;
+        });
+    }, deps);
+    return [state, callback];
+}
+export default useAsyncFn;

package/useDateLocale.d.ts

@@ -0,0 +1,2 @@
+export declare function useDateLocale(locale?: string, defaultLocale?: string): globalThis.Locale | undefined;
+export default useDateLocale;

package/useDateLocale.js

@@ -0,0 +1,28 @@
+import { __awaiter, __generator } from "tslib";
+import { useEffect, useState } from "react";
+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];
+    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, import("date-fns/locale/en-US/index.js")];
+                    case 1:
+                        localeToSet = _a.sent();
+                        setCurrent(locale || current);
+                        setData(localeToSet.default);
+                        return [2];
+                }
+            });
+        }); };
+        if (locale !== current) {
+            importLocaleFile();
+        }
+    }, [locale, current]);
+    return data;
+}
+export default useDateLocale;

package/useFirstMountState.d.ts

@@ -0,0 +1,2 @@
+export declare function useFirstMountState(): boolean;
+export default useFirstMountState;

package/useFirstMountState.js

@@ -0,0 +1,10 @@
+import { useRef } from "react";
+export function useFirstMountState() {
+    var isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}
+export default useFirstMountState;

package/useFixedOffset.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function useFixedOffset(selector?: string): import("react").MutableRefObject<number>;
+export default useFixedOffset;

package/useFixedOffset.js

@@ -0,0 +1,42 @@
+import { useRef } from "react";
+import { debounce } from "@koine/utils";
+import { $each, calculateFixedOffset, injectCss, listenResizeDebounced, } from "@koine/dom";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
+var inject = function (value) {
+    injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
+};
+export function useFixedOffset(selector) {
+    var fixedOffset = useRef(0);
+    useIsomorphicLayoutEffect(function () {
+        var update = function () {
+            var newFixedOffset = calculateFixedOffset();
+            fixedOffset.current = newFixedOffset;
+            inject(newFixedOffset);
+        };
+        update();
+        if (ResizeObserver) {
+            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 → useFocus.d.ts}

@@ -1,6 +1,3 @@
 /// <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/useFocus.js

@@ -0,0 +1,9 @@
+import { useRef } from "react";
+export var useFocus = function () {
+    var elementRef = useRef(null);
+    var setFocus = function () {
+        elementRef.current && elementRef.current.focus();
+    };
+    return [elementRef, setFocus];
+};
+export default useFocus;

package/useInterval.d.ts

@@ -0,0 +1,2 @@
+export declare function useInterval<T extends () => unknown>(callback: T, delay: number, deps?: unknown[]): void;
+export default useInterval;

package/useInterval.js

@@ -0,0 +1,22 @@
+import { __spreadArray } from "tslib";
+import { useEffect, useRef } from "react";
+import { noop } from "@koine/utils";
+export function useInterval(callback, delay, deps) {
+    if (deps === void 0) { deps = []; }
+    var savedCallback = useRef();
+    useEffect(function () {
+        savedCallback.current = callback;
+    }, __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/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from "react";
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export default useIsomorphicLayoutEffect;

package/useIsomorphicLayoutEffect.js

@@ -0,0 +1,6 @@
+import { useEffect, useLayoutEffect } from "react";
+import { isBrowser } from "@koine/utils";
+export var useIsomorphicLayoutEffect = isBrowser
+    ? useLayoutEffect
+    : useEffect;
+export default useIsomorphicLayoutEffect;

package/useKeyUp.js

@@ -0,0 +1,18 @@
+import { __spreadArray } from "tslib";
+import { useEffect } from "react";
+import { on } from "@koine/dom";
+export function useKeyUp(callback, deps) {
+    if (deps === void 0) { deps = []; }
+    useEffect(function () {
+        var listener = on(window, "keyup", function (event) {
+            if (!event.ctrlKey &&
+                !event.altKey &&
+                !event.shiftKey &&
+                !event.metaKey) {
+                callback(event);
+            }
+        });
+        return listener;
+    }, __spreadArray([callback], deps, true));
+}
+export default useKeyUp;

package/{hooks/useMeasure.d.ts → useMeasure.d.ts}

@@ -18,10 +18,5 @@ export type UseMeasureReturn = [
     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/useMeasure.js

@@ -0,0 +1,130 @@
+import { __spreadArray } from "tslib";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { debounce, noop } from "@koine/utils";
+import { listenResizeDebounced, listenScrollDebounced, off, on, } from "@koine/dom";
+var observer;
+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]; });
+};
+export function useMeasure(options) {
+    var _a = (options || {}).scroll, scroll = _a === void 0 ? false : _a;
+    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];
+    var state = useRef([
+        null,
+        null,
+        null,
+        bounds,
+    ]);
+    var mounted = useRef(false);
+    useEffect(function () {
+        mounted.current = true;
+        return function () { return void (mounted.current = false); };
+    }, []);
+    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();
+            Object.freeze(size);
+            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
+                state.current[3] = size;
+                setBounds(size);
+            }
+        };
+        var debouncedCallback = debounce(callback);
+        return [callback, debouncedCallback, debouncedCallback];
+    }, [setBounds]), forceRefresh = _c[0], scrollChange = _c[2];
+    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;
+        }
+    }
+    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,
+                    });
+                });
+            }
+        }
+    }
+    var ref = function (node) {
+        if (!node || node === state.current[0])
+            return;
+        removeListeners();
+        state.current[0] = node;
+        state.current[1] = findScrollContainers(node);
+        addListeners();
+    };
+    useEffect(function () {
+        if (scroll) {
+            var listener = listenScrollDebounced(0, forceRefresh, 100);
+            return listener;
+        }
+        return noop;
+    }, [scroll, forceRefresh]);
+    useEffect(function () {
+        var listener = listenResizeDebounced(0, forceRefresh, 100);
+        return listener;
+    }, [forceRefresh]);
+    useEffect(function () {
+        removeListeners();
+        addListeners();
+    }, [scroll]);
+    useEffect(function () {
+        forceRefresh();
+        return removeListeners;
+    }, []);
+    return [ref, bounds, forceRefresh];
+}
+export default useMeasure;

package/useMountedState.d.ts

@@ -0,0 +1,2 @@
+export declare function useMountedState(): () => boolean;
+export default useMountedState;

package/useMountedState.js

@@ -0,0 +1,13 @@
+import { useCallback, useEffect, useRef } from "react";
+export function useMountedState() {
+    var mountedRef = useRef(false);
+    var get = useCallback(function () { return mountedRef.current; }, []);
+    useEffect(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+}
+export default useMountedState;

package/useNavigateAway.d.ts

@@ -0,0 +1,3 @@
+export type UseNavigateAwayHandler = (event: BeforeUnloadEvent) => string | boolean;
+export declare const useNavigateAway: (handler: UseNavigateAwayHandler) => void;
+export default useNavigateAway;

package/useNavigateAway.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import { on } from "@koine/dom";
+export var useNavigateAway = function (handler) {
+    var beforeUnloadHandlerRef = useRef();
+    useEffect(function () {
+        beforeUnloadHandlerRef.current = function (event) {
+            var customMessageOrCondition = handler(event);
+            if (customMessageOrCondition) {
+                event.preventDefault();
+            }
+            if (typeof customMessageOrCondition === "string") {
+                return (event.returnValue = customMessageOrCondition);
+            }
+            if (event.defaultPrevented) {
+                return (event.returnValue = "");
+            }
+            return;
+        };
+    }, [handler]);
+    useEffect(function () {
+        var listenerBeforeunload = on(window, "beforeunload", function (event) { var _a; return (_a = beforeUnloadHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(beforeUnloadHandlerRef, event); });
+        return listenerBeforeunload;
+    }, []);
+};
+export default useNavigateAway;

package/usePrevious.d.ts

@@ -0,0 +1,2 @@
+export declare function usePrevious<T>(state: T, defaulValue: T): T;
+export default usePrevious;

package/usePrevious.js

@@ -0,0 +1,9 @@
+import { useState } from "react";
+export function usePrevious(state, defaulValue) {
+    var _a = useState([state, defaulValue]), tuple = _a[0], setTuple = _a[1];
+    if (tuple[1] !== state) {
+        setTuple([tuple[1], state]);
+    }
+    return tuple[0];
+}
+export default usePrevious;

package/{hooks/usePreviousRef.mjs → usePreviousRef.js}

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from "react";
 export function usePreviousRef(value) {
-    const ref = useRef();
-    useEffect(()=>{
+    var ref = useRef();
+    useEffect(function () {
         ref.current = value;
     });
     return ref.current;

package/{hooks/useScrollPosition.d.ts → useScrollPosition.d.ts}

@@ -4,12 +4,5 @@ type Position = {
     y: number;
 };
 type ElementRef = React.MutableRefObject<HTMLElement | undefined>;
-/**
- * @borrows [@n8tb1t/use-scroll-position@2.0.3](https://github.com/n8tb1t/use-scroll-position) by `n8tb1t <n8tb1t@gmail.com>`
- *
- * We've just:
- * - reused internal helper functions
- * - compacted object arguments in functions as plain argument list to improve compression
- */
 export declare const useScrollPosition: (effect: (currentPosition: Position, prevPosition: Position) => void, deps?: import("react").DependencyList, element?: ElementRef, boundingElement?: ElementRef, wait?: number) => void;
 export default useScrollPosition;

package/useScrollPosition.js

@@ -0,0 +1,61 @@
+import { useRef } from "react";
+import { isBrowser } from "@koine/utils";
+import { listenScroll } from "@koine/dom";
+import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect.js";
+var zeroPosition = { x: 0, y: 0 };
+var getClientRect = function (element) {
+    return element === null || element === void 0 ? void 0 : element.getBoundingClientRect();
+};
+var getScrollPosition = function (element, boundingElement) {
+    if (!isBrowser) {
+        return zeroPosition;
+    }
+    if (!boundingElement) {
+        return { x: window.scrollX, y: window.scrollY };
+    }
+    var targetPosition = getClientRect((element === null || element === void 0 ? void 0 : element.current) || document.body);
+    var containerPosition = getClientRect(boundingElement.current);
+    if (!targetPosition) {
+        return zeroPosition;
+    }
+    return containerPosition
+        ? {
+            x: (containerPosition.x || 0) - (targetPosition.x || 0),
+            y: (containerPosition.y || 0) - (targetPosition.y || 0),
+        }
+        : { x: targetPosition.left, y: targetPosition.top };
+};
+export var useScrollPosition = function (effect, deps, element, boundingElement, wait) {
+    if (deps === void 0) { deps = []; }
+    var position = useRef(getScrollPosition(null, boundingElement));
+    var throttleTimeout = null;
+    var callBack = function () {
+        var current = getScrollPosition(element, boundingElement);
+        effect(current, position.current);
+        position.current = current;
+        throttleTimeout = null;
+    };
+    useIsomorphicLayoutEffect(function () {
+        if (!isBrowser) {
+            return undefined;
+        }
+        var handleScroll = function () {
+            if (wait) {
+                if (throttleTimeout === null) {
+                    throttleTimeout = window.setTimeout(callBack, wait);
+                }
+            }
+            else {
+                callBack();
+            }
+        };
+        var listener = listenScroll(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
+        return function () {
+            listener();
+            if (throttleTimeout) {
+                clearTimeout(throttleTimeout);
+            }
+        };
+    }, deps);
+};
+export default useScrollPosition;

package/useScrollThreshold.js

@@ -0,0 +1,26 @@
+import { useCallback, useEffect, useState } from "react";
+import { noop } from "@koine/utils";
+import { listenScroll } from "@koine/dom";
+export var useScrollThreshold = function (threshold, callback) {
+    var _a = useState(false), isBelow = _a[0], setIsBelow = _a[1];
+    var handler = useCallback(function () {
+        if (threshold) {
+            var posY = window.scrollY;
+            var isAbove = posY < threshold;
+            var isBelow_1 = posY > threshold;
+            setIsBelow(isBelow_1);
+            if (callback)
+                callback(isAbove, isBelow_1);
+        }
+    }, [threshold, callback]);
+    useEffect(function () {
+        if (threshold) {
+            var listener = listenScroll(handler);
+            handler();
+            return listener;
+        }
+        return noop;
+    }, [threshold, handler]);
+    return isBelow;
+};
+export default useScrollThreshold;

package/useScrollTo.js

@@ -0,0 +1,22 @@
+import { isBrowser } from "@koine/utils";
+import useHeader from "./Header/useHeader.js";
+export function useScrollTo(id, offset) {
+    if (id === void 0) { id = ""; }
+    if (offset === void 0) { offset = 0; }
+    var _a = useHeader(), headerHeight = _a[2];
+    if (!isBrowser) {
+        return;
+    }
+    var headerOffset = headerHeight || 0;
+    var element = document.getElementById(id);
+    var top = 0;
+    if (element && element.offsetParent) {
+        do {
+            top += element.offsetTop;
+        } while ((element = element.offsetParent));
+    }
+    top -= offset;
+    top -= headerOffset;
+    window.scroll(0, top);
+}
+export default useScrollTo;

package/{hooks/useSmoothScroll.d.ts → useSmoothScroll.d.ts}

@@ -1,8 +1,2 @@
-/**
- *
- * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
- * selector we will keep into account the _fixedOffset_ despite this option.
- * @returns
- */
 export declare function useSmoothScroll(disregardAutomaticFixedOffset?: boolean): (to?: number | string, customOffset?: number, callback?: () => void, fallbackTimeout?: number, behavior?: ScrollBehavior) => void;
 export default useSmoothScroll;

package/useSmoothScroll.js

@@ -0,0 +1,32 @@
+import { useCallback } from "react";
+import { isNumber } from "@koine/utils";
+import { getOffsetTopSlim, scrollTo } from "@koine/dom";
+import useFixedOffset from "./useFixedOffset.js";
+export function useSmoothScroll(disregardAutomaticFixedOffset) {
+    var fixedOffset = useFixedOffset();
+    var scroll = useCallback(function (to, customOffset, callback, fallbackTimeout, behavior) {
+        var top = undefined;
+        var toIsElement = false;
+        if (isNumber(to)) {
+            top = to;
+        }
+        else if (to) {
+            var el = document.getElementById(to);
+            if (el) {
+                top = getOffsetTopSlim(el) - fixedOffset.current;
+                toIsElement = true;
+            }
+        }
+        if (isNumber(top)) {
+            top =
+                top +
+                    (customOffset || 0) +
+                    (disregardAutomaticFixedOffset || toIsElement
+                        ? 0
+                        : fixedOffset.current);
+            scrollTo(top, callback, fallbackTimeout, behavior);
+        }
+    }, [disregardAutomaticFixedOffset, fixedOffset]);
+    return scroll;
+}
+export default useSmoothScroll;

package/useSpinDelay.d.ts

@@ -0,0 +1,2 @@
+export declare function useSpinDelay(loading: boolean, delay?: number, minDuration?: number): boolean;
+export default useSpinDelay;