@koine/react 2.0.0-beta.8 → 2.0.0-beta.80

package/useIsomorphicLayoutEffect.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useIsomorphicLayoutEffect.cjs.js';
+export { _default as default } from './useIsomorphicLayoutEffect.cjs.default.js';

package/useIsomorphicLayoutEffect.d.ts

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

package/useIsomorphicLayoutEffect.esm.js

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

package/useKeyUp.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./useKeyUp";
+export { default } from "./useKeyUp";

package/useKeyUp.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./useKeyUp.cjs.js').default;

package/useKeyUp.cjs.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var dom = require('@koine/dom');
+
+let useKeyUp = (callback, deps = []) => {
+    react.useEffect(() => {
+        const listener = dom.on(window, "keyup", (event) => {
+            if (!event.ctrlKey &&
+                !event.altKey &&
+                !event.shiftKey &&
+                !event.metaKey) {
+                callback(event);
+            }
+        });
+        return listener;
+    }, [callback, ...deps]);
+};
+
+exports["default"] = useKeyUp;
+exports.useKeyUp = useKeyUp;

package/useKeyUp.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useKeyUp.cjs.js';
+export { _default as default } from './useKeyUp.cjs.default.js';

package/useKeyUp.d.ts

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

package/useKeyUp.esm.js

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { on } from '@koine/dom';
+
+let useKeyUp = (callback, deps = []) => {
+    useEffect(() => {
+        const listener = on(window, "keyup", (event) => {
+            if (!event.ctrlKey &&
+                !event.altKey &&
+                !event.shiftKey &&
+                !event.metaKey) {
+                callback(event);
+            }
+        });
+        return listener;
+    }, [callback, ...deps]);
+};
+
+export { useKeyUp as default, useKeyUp };

package/useMeasure.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./useMeasure";
+export { default } from "./useMeasure";

package/useMeasure.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./useMeasure.cjs.js').default;

package/useMeasure.cjs.js

@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var utils = require('@koine/utils');
+var dom = require('@koine/dom');
+
+let observer;
+let findScrollContainers = (element) => {
+    const result = [];
+    if (!element || element === document.body)
+        return result;
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(element);
+    if ([overflow, overflowX, overflowY].some((prop) => prop === "auto" || prop === "scroll"))
+        result.push(element);
+    return [...result, ...findScrollContainers(element.parentElement)];
+};
+const keys = [
+    "x",
+    "y",
+    "top",
+    "bottom",
+    "left",
+    "right",
+    "width",
+    "height",
+];
+const areBoundsEqual = (a, b) => keys.every((key) => a[key] === b[key]);
+let useMeasure = (options) => {
+    const { scroll = false } = options || {};
+    const [bounds, setBounds] = react.useState({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+        bottom: 0,
+        right: 0,
+        x: 0,
+        y: 0,
+    });
+    const state = react.useRef([
+        null,
+        null,
+        null,
+        bounds,
+    ]);
+    const mounted = react.useRef(false);
+    react.useEffect(() => {
+        mounted.current = true;
+        return () => void (mounted.current = false);
+    }, []);
+    const [forceRefresh, , scrollChange] = react.useMemo(() => {
+        const callback = (..._args) => {
+            const [element, , , lastBounds] = state.current;
+            if (!element)
+                return;
+            const size = element.getBoundingClientRect();
+            Object.freeze(size);
+            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
+                state.current[3] = size;
+                setBounds(size);
+            }
+        };
+        const debouncedCallback = utils.debounce(callback);
+        return [callback, debouncedCallback, debouncedCallback];
+    }, [setBounds]);
+    function removeListeners() {
+        const [, scrollContainers, resizeObserver] = state.current;
+        if (scrollContainers) {
+            scrollContainers.forEach((element) => dom.off(element, "scroll", scrollChange));
+            state.current[1] = null;
+        }
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            state.current[2] = null;
+        }
+    }
+    function addListeners() {
+        const [element, scrollContainers] = state.current;
+        if (!element)
+            return;
+        if (!observer && ResizeObserver) {
+            observer = new ResizeObserver(scrollChange);
+            state.current[2] = observer;
+            observer.observe(element);
+            if (scroll && scrollContainers) {
+                scrollContainers.forEach((scrollContainer) => dom.on(scrollContainer, "scroll", scrollChange, {
+                    capture: true,
+                    passive: true,
+                }));
+            }
+        }
+    }
+    const ref = (node) => {
+        if (!node || node === state.current[0])
+            return;
+        removeListeners();
+        state.current[0] = node;
+        state.current[1] = findScrollContainers(node);
+        addListeners();
+    };
+    react.useEffect(() => {
+        if (scroll) {
+            const listener = dom.listenScrollDebounced(0, forceRefresh, 100);
+            return listener;
+        }
+        return utils.noop;
+    }, [scroll, forceRefresh]);
+    react.useEffect(() => {
+        const listener = dom.listenResizeDebounced(0, forceRefresh, 100);
+        return listener;
+    }, [forceRefresh]);
+    react.useEffect(() => {
+        removeListeners();
+        addListeners();
+    }, [scroll]);
+    react.useEffect(() => {
+        forceRefresh();
+        return removeListeners;
+    }, []);
+    return [ref, bounds, forceRefresh];
+};
+
+exports["default"] = useMeasure;
+exports.useMeasure = useMeasure;

package/useMeasure.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useMeasure.cjs.js';
+export { _default as default } from './useMeasure.cjs.default.js';

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 declare let useMeasure: (options?: UseMeasureOptions) => UseMeasureReturn;
 export default useMeasure;

package/useMeasure.esm.js

@@ -0,0 +1,121 @@
+import { useState, useRef, useEffect, useMemo } from 'react';
+import { debounce, noop } from '@koine/utils';
+import { listenScrollDebounced, listenResizeDebounced, off, on } from '@koine/dom';
+
+let observer;
+let findScrollContainers = (element) => {
+    const result = [];
+    if (!element || element === document.body)
+        return result;
+    const { overflow, overflowX, overflowY } = window.getComputedStyle(element);
+    if ([overflow, overflowX, overflowY].some((prop) => prop === "auto" || prop === "scroll"))
+        result.push(element);
+    return [...result, ...findScrollContainers(element.parentElement)];
+};
+const keys = [
+    "x",
+    "y",
+    "top",
+    "bottom",
+    "left",
+    "right",
+    "width",
+    "height",
+];
+const areBoundsEqual = (a, b) => keys.every((key) => a[key] === b[key]);
+let useMeasure = (options) => {
+    const { scroll = false } = options || {};
+    const [bounds, setBounds] = useState({
+        left: 0,
+        top: 0,
+        width: 0,
+        height: 0,
+        bottom: 0,
+        right: 0,
+        x: 0,
+        y: 0,
+    });
+    const state = useRef([
+        null,
+        null,
+        null,
+        bounds,
+    ]);
+    const mounted = useRef(false);
+    useEffect(() => {
+        mounted.current = true;
+        return () => void (mounted.current = false);
+    }, []);
+    const [forceRefresh, , scrollChange] = useMemo(() => {
+        const callback = (..._args) => {
+            const [element, , , lastBounds] = state.current;
+            if (!element)
+                return;
+            const size = element.getBoundingClientRect();
+            Object.freeze(size);
+            if (mounted.current && !areBoundsEqual(lastBounds, size)) {
+                state.current[3] = size;
+                setBounds(size);
+            }
+        };
+        const debouncedCallback = debounce(callback);
+        return [callback, debouncedCallback, debouncedCallback];
+    }, [setBounds]);
+    function removeListeners() {
+        const [, scrollContainers, resizeObserver] = state.current;
+        if (scrollContainers) {
+            scrollContainers.forEach((element) => off(element, "scroll", scrollChange));
+            state.current[1] = null;
+        }
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+            state.current[2] = null;
+        }
+    }
+    function addListeners() {
+        const [element, scrollContainers] = state.current;
+        if (!element)
+            return;
+        if (!observer && ResizeObserver) {
+            observer = new ResizeObserver(scrollChange);
+            state.current[2] = observer;
+            observer.observe(element);
+            if (scroll && scrollContainers) {
+                scrollContainers.forEach((scrollContainer) => on(scrollContainer, "scroll", scrollChange, {
+                    capture: true,
+                    passive: true,
+                }));
+            }
+        }
+    }
+    const ref = (node) => {
+        if (!node || node === state.current[0])
+            return;
+        removeListeners();
+        state.current[0] = node;
+        state.current[1] = findScrollContainers(node);
+        addListeners();
+    };
+    useEffect(() => {
+        if (scroll) {
+            const listener = listenScrollDebounced(0, forceRefresh, 100);
+            return listener;
+        }
+        return noop;
+    }, [scroll, forceRefresh]);
+    useEffect(() => {
+        const listener = listenResizeDebounced(0, forceRefresh, 100);
+        return listener;
+    }, [forceRefresh]);
+    useEffect(() => {
+        removeListeners();
+        addListeners();
+    }, [scroll]);
+    useEffect(() => {
+        forceRefresh();
+        return removeListeners;
+    }, []);
+    return [ref, bounds, forceRefresh];
+};
+
+export { useMeasure as default, useMeasure };

package/useMountedState.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./useMountedState";
+export { default } from "./useMountedState";

package/useMountedState.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./useMountedState.cjs.js').default;

package/useMountedState.cjs.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+let useMountedState = () => {
+    const mountedRef = react.useRef(false);
+    const get = react.useCallback(() => mountedRef.current, []);
+    react.useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+};
+
+exports["default"] = useMountedState;
+exports.useMountedState = useMountedState;

package/useMountedState.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useMountedState.cjs.js';
+export { _default as default } from './useMountedState.cjs.default.js';

package/useMountedState.d.ts

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

package/useMountedState.esm.js

@@ -0,0 +1,15 @@
+import { useRef, useCallback, useEffect } from 'react';
+
+let useMountedState = () => {
+    const mountedRef = useRef(false);
+    const get = useCallback(() => mountedRef.current, []);
+    useEffect(() => {
+        mountedRef.current = true;
+        return () => {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+};
+
+export { useMountedState as default, useMountedState };

package/useNavigateAway.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./useNavigateAway";
+export { default } from "./useNavigateAway";

package/useNavigateAway.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./useNavigateAway.cjs.js').default;

package/useNavigateAway.cjs.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var dom = require('@koine/dom');
+
+let useNavigateAway = (handler) => {
+    const beforeUnloadHandlerRef = react.useRef();
+    react.useEffect(() => {
+        beforeUnloadHandlerRef.current = (event) => {
+            const customMessageOrCondition = handler(event);
+            if (customMessageOrCondition) {
+                event.preventDefault();
+            }
+            if (typeof customMessageOrCondition === "string") {
+                return (event.returnValue = customMessageOrCondition);
+            }
+            if (event.defaultPrevented) {
+                return (event.returnValue = "");
+            }
+            return;
+        };
+    }, [handler]);
+    react.useEffect(() => {
+        const listenerBeforeunload = dom.on(window, "beforeunload", (event) => beforeUnloadHandlerRef.current?.(event));
+        return listenerBeforeunload;
+    }, []);
+};
+
+exports["default"] = useNavigateAway;
+exports.useNavigateAway = useNavigateAway;

package/useNavigateAway.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useNavigateAway.cjs.js';
+export { _default as default } from './useNavigateAway.cjs.default.js';

package/useNavigateAway.d.ts

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

package/useNavigateAway.esm.js

@@ -0,0 +1,27 @@
+import { useRef, useEffect } from 'react';
+import { on } from '@koine/dom';
+
+let useNavigateAway = (handler) => {
+    const beforeUnloadHandlerRef = useRef();
+    useEffect(() => {
+        beforeUnloadHandlerRef.current = (event) => {
+            const customMessageOrCondition = handler(event);
+            if (customMessageOrCondition) {
+                event.preventDefault();
+            }
+            if (typeof customMessageOrCondition === "string") {
+                return (event.returnValue = customMessageOrCondition);
+            }
+            if (event.defaultPrevented) {
+                return (event.returnValue = "");
+            }
+            return;
+        };
+    }, [handler]);
+    useEffect(() => {
+        const listenerBeforeunload = on(window, "beforeunload", (event) => beforeUnloadHandlerRef.current?.(event));
+        return listenerBeforeunload;
+    }, []);
+};
+
+export { useNavigateAway as default, useNavigateAway };

package/usePrevious.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./usePrevious";
+export { default } from "./usePrevious";

package/usePrevious.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./usePrevious.cjs.js').default;

package/usePrevious.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+let usePrevious = (state, defaulValue) => {
+    const [tuple, setTuple] = react.useState([state, defaulValue]);
+    if (tuple[1] !== state) {
+        setTuple([tuple[1], state]);
+    }
+    return tuple[0];
+};
+
+exports["default"] = usePrevious;
+exports.usePrevious = usePrevious;

package/usePrevious.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './usePrevious.cjs.js';
+export { _default as default } from './usePrevious.cjs.default.js';

package/usePrevious.d.ts

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

package/usePrevious.esm.js

@@ -0,0 +1,11 @@
+import { useState } from 'react';
+
+let usePrevious = (state, defaulValue) => {
+    const [tuple, setTuple] = useState([state, defaulValue]);
+    if (tuple[1] !== state) {
+        setTuple([tuple[1], state]);
+    }
+    return tuple[0];
+};
+
+export { usePrevious as default, usePrevious };

package/usePreviousRef.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./usePreviousRef";
+export { default } from "./usePreviousRef";

package/usePreviousRef.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./usePreviousRef.cjs.js').default;

package/usePreviousRef.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+let usePreviousRef = (value) => {
+    const ref = react.useRef();
+    react.useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+};
+
+exports["default"] = usePreviousRef;
+exports.usePreviousRef = usePreviousRef;

package/usePreviousRef.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './usePreviousRef.cjs.js';
+export { _default as default } from './usePreviousRef.cjs.default.js';

package/usePreviousRef.d.ts

@@ -0,0 +1,2 @@
+export declare let usePreviousRef: <T extends unknown>(value: T) => T | undefined;
+export default usePreviousRef;

package/usePreviousRef.esm.js

@@ -0,0 +1,11 @@
+import { useRef, useEffect } from 'react';
+
+let usePreviousRef = (value) => {
+    const ref = useRef();
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+};
+
+export { usePreviousRef as default, usePreviousRef };

package/useReveal.d.ts

@@ -0,0 +1,13 @@
+export type UseRevealOptions = {
+    direction?: "left" | "right";
+    offsetStartY?: number;
+    offsetEndY?: number;
+    offsetStartX?: number | "all";
+};
+export declare let useReveal: <T extends HTMLElement = HTMLDivElement>({ direction, offsetStartY, offsetEndY, offsetStartX, }: UseRevealOptions) => {
+    ref: import("react").RefObject<T>;
+    startY: number;
+    endY: number;
+    startX: number;
+};
+export default useReveal;

package/useScrollPosition.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./useScrollPosition";
+export { default } from "./useScrollPosition";

package/useScrollPosition.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./useScrollPosition.cjs.js').default;

package/useScrollPosition.cjs.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var utils = require('@koine/utils');
+var dom = require('@koine/dom');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
+
+const zeroPosition = { x: 0, y: 0 };
+const getClientRect = (element) => element?.getBoundingClientRect();
+const getScrollPosition = (element, boundingElement) => {
+    if (!utils.isBrowser) {
+        return zeroPosition;
+    }
+    if (!boundingElement) {
+        return { x: window.scrollX, y: window.scrollY };
+    }
+    const targetPosition = getClientRect(element?.current || document.body);
+    const 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 };
+};
+let useScrollPosition = (effect, deps = [], element, boundingElement, wait) => {
+    const position = react.useRef(getScrollPosition(null, boundingElement));
+    let throttleTimeout = null;
+    const callBack = () => {
+        const current = getScrollPosition(element, boundingElement);
+        effect(current, position.current);
+        position.current = current;
+        throttleTimeout = null;
+    };
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        if (!utils.isBrowser) {
+            return undefined;
+        }
+        const handleScroll = () => {
+            if (wait) {
+                if (throttleTimeout === null) {
+                    throttleTimeout = window.setTimeout(callBack, wait);
+                }
+            }
+            else {
+                callBack();
+            }
+        };
+        const listener = dom.listenScroll(handleScroll, boundingElement?.current);
+        return () => {
+            listener();
+            if (throttleTimeout) {
+                clearTimeout(throttleTimeout);
+            }
+        };
+    }, deps);
+};
+
+exports["default"] = useScrollPosition;
+exports.useScrollPosition = useScrollPosition;

package/useScrollPosition.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useScrollPosition.cjs.js';
+export { _default as default } from './useScrollPosition.cjs.default.js';