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

package/useScrollPosition.d.ts

@@ -0,0 +1,7 @@
+type Position = {
+    x: number;
+    y: number;
+};
+type ElementRef = React.MutableRefObject<HTMLElement | undefined>;
+export declare let useScrollPosition: (effect: (currentPosition: Position, prevPosition: Position) => void, deps?: import("react").DependencyList, element?: ElementRef, boundingElement?: ElementRef, wait?: number) => void;
+export default useScrollPosition;

package/useScrollPosition.esm.js

@@ -0,0 +1,60 @@
+import { useRef } from 'react';
+import { isBrowser } from '@koine/utils';
+import { listenScroll } from '@koine/dom';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
+
+const zeroPosition = { x: 0, y: 0 };
+const getClientRect = (element) => element?.getBoundingClientRect();
+const getScrollPosition = (element, boundingElement) => {
+    if (!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 = useRef(getScrollPosition(null, boundingElement));
+    let throttleTimeout = null;
+    const callBack = () => {
+        const current = getScrollPosition(element, boundingElement);
+        effect(current, position.current);
+        position.current = current;
+        throttleTimeout = null;
+    };
+    useIsomorphicLayoutEffect(() => {
+        if (!isBrowser) {
+            return undefined;
+        }
+        const handleScroll = () => {
+            if (wait) {
+                if (throttleTimeout === null) {
+                    throttleTimeout = window.setTimeout(callBack, wait);
+                }
+            }
+            else {
+                callBack();
+            }
+        };
+        const listener = listenScroll(handleScroll, boundingElement?.current);
+        return () => {
+            listener();
+            if (throttleTimeout) {
+                clearTimeout(throttleTimeout);
+            }
+        };
+    }, deps);
+};
+
+export { useScrollPosition as default, useScrollPosition };

package/useScrollThreshold.cjs.d.ts

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

package/useScrollThreshold.cjs.default.js

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

package/useScrollThreshold.cjs.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var utils = require('@koine/utils');
+var dom = require('@koine/dom');
+
+let useScrollThreshold = (threshold, callback) => {
+    const [isBelow, setIsBelow] = react.useState(false);
+    const handler = react.useCallback(() => {
+        if (threshold) {
+            const posY = window.scrollY;
+            const isAbove = posY < threshold;
+            const isBelow = posY > threshold;
+            setIsBelow(isBelow);
+            if (callback)
+                callback(isAbove, isBelow);
+        }
+    }, [threshold, callback]);
+    react.useEffect(() => {
+        if (threshold) {
+            const listener = dom.listenScroll(handler);
+            handler();
+            return listener;
+        }
+        return utils.noop;
+    }, [threshold, handler]);
+    return isBelow;
+};
+
+exports["default"] = useScrollThreshold;
+exports.useScrollThreshold = useScrollThreshold;

package/useScrollThreshold.cjs.mjs

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

package/useScrollThreshold.d.ts

@@ -0,0 +1,2 @@
+export declare let useScrollThreshold: (threshold?: number, callback?: ((isAbove: boolean, isBelow: boolean) => void) | undefined) => boolean;
+export default useScrollThreshold;

package/useScrollThreshold.esm.js

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

package/useScrollTo.cjs.d.ts

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

package/useScrollTo.cjs.default.js

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

package/useScrollTo.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('@koine/utils');
+
+let useScrollTo = (id = "", offset = 0) => {
+    if (!utils.isBrowser) {
+        return;
+    }
+    const headerOffset = 0;
+    let element = document.getElementById(id);
+    let top = 0;
+    if (element && element.offsetParent) {
+        do {
+            top += element.offsetTop;
+        } while ((element = element.offsetParent));
+    }
+    top -= offset;
+    top -= headerOffset;
+    window.scroll(0, top);
+};
+
+exports["default"] = useScrollTo;
+exports.useScrollTo = useScrollTo;

package/useScrollTo.cjs.mjs

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

package/useScrollTo.d.ts

@@ -0,0 +1,2 @@
+export declare let useScrollTo: (id?: string, offset?: number) => void;
+export default useScrollTo;

package/useScrollTo.esm.js

@@ -0,0 +1,20 @@
+import { isBrowser } from '@koine/utils';
+
+let useScrollTo = (id = "", offset = 0) => {
+    if (!isBrowser) {
+        return;
+    }
+    const headerOffset = 0;
+    let element = document.getElementById(id);
+    let top = 0;
+    if (element && element.offsetParent) {
+        do {
+            top += element.offsetTop;
+        } while ((element = element.offsetParent));
+    }
+    top -= offset;
+    top -= headerOffset;
+    window.scroll(0, top);
+};
+
+export { useScrollTo as default, useScrollTo };

package/useSmoothScroll.cjs.d.ts

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

package/useSmoothScroll.cjs.default.js

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

package/useSmoothScroll.cjs.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var utils = require('@koine/utils');
+var dom = require('@koine/dom');
+var useFixedOffset = require('./useFixedOffset.cjs.js');
+require('./useIsomorphicLayoutEffect.cjs.js');
+
+let useSmoothScroll = (disregardAutomaticFixedOffset) => {
+    const fixedOffset = useFixedOffset.useFixedOffset();
+    const scroll = react.useCallback((to, customOffset, callback, fallbackTimeout, behavior) => {
+        let top = undefined;
+        let toIsElement = false;
+        if (utils.isNumber(to)) {
+            top = to;
+        }
+        else if (to) {
+            const el = document.getElementById(to);
+            if (el) {
+                top = dom.getOffsetTopSlim(el) - fixedOffset.current;
+                toIsElement = true;
+            }
+        }
+        if (utils.isNumber(top)) {
+            top =
+                top +
+                    (customOffset || 0) +
+                    (disregardAutomaticFixedOffset || toIsElement
+                        ? 0
+                        : fixedOffset.current);
+            dom.scrollTo(top, callback, fallbackTimeout, behavior);
+        }
+    }, [disregardAutomaticFixedOffset, fixedOffset]);
+    return scroll;
+};
+
+exports["default"] = useSmoothScroll;
+exports.useSmoothScroll = useSmoothScroll;

package/useSmoothScroll.cjs.mjs

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

package/useSmoothScroll.d.ts

@@ -0,0 +1,2 @@
+export declare let useSmoothScroll: (disregardAutomaticFixedOffset?: boolean) => (to?: number | string, customOffset?: number, callback?: () => void, fallbackTimeout?: number, behavior?: ScrollBehavior) => void;
+export default useSmoothScroll;

package/useSmoothScroll.esm.js

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import { isNumber } from '@koine/utils';
+import { getOffsetTopSlim, scrollTo } from '@koine/dom';
+import { useFixedOffset } from './useFixedOffset.esm.js';
+import './useIsomorphicLayoutEffect.esm.js';
+
+let useSmoothScroll = (disregardAutomaticFixedOffset) => {
+    const fixedOffset = useFixedOffset();
+    const scroll = useCallback((to, customOffset, callback, fallbackTimeout, behavior) => {
+        let top = undefined;
+        let toIsElement = false;
+        if (isNumber(to)) {
+            top = to;
+        }
+        else if (to) {
+            const 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 { useSmoothScroll as default, useSmoothScroll };

package/useSpinDelay.cjs.d.ts

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

package/useSpinDelay.cjs.default.js

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

package/useSpinDelay.cjs.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+var State;
+(function (State) {
+    State[State["IDLE"] = 0] = "IDLE";
+    State[State["DELAY"] = 1] = "DELAY";
+    State[State["DISPLAY"] = 2] = "DISPLAY";
+    State[State["EXPIRE"] = 3] = "EXPIRE";
+})(State || (State = {}));
+let useSpinDelay = (loading, delay = 500, minDuration = 200) => {
+    const [state, setState] = react.useState(State.IDLE);
+    const timeout = react.useRef();
+    react.useEffect(() => {
+        if (loading && state === State.IDLE) {
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(() => {
+                if (!loading) {
+                    return setState(State.IDLE);
+                }
+                timeout.current = setTimeout(() => {
+                    setState(State.EXPIRE);
+                }, minDuration);
+                setState(State.DISPLAY);
+            }, delay);
+            setState(State.DELAY);
+        }
+        if (!loading && state !== State.DISPLAY) {
+            clearTimeout(timeout.current);
+            setState(State.IDLE);
+        }
+    }, [loading, state, delay, minDuration]);
+    react.useEffect(() => {
+        return () => clearTimeout(timeout.current);
+    }, []);
+    return state === State.DISPLAY || state === State.EXPIRE;
+};
+
+exports["default"] = useSpinDelay;
+exports.useSpinDelay = useSpinDelay;

package/useSpinDelay.cjs.mjs

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

package/useSpinDelay.d.ts

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

package/useSpinDelay.esm.js

@@ -0,0 +1,38 @@
+import { useState, useRef, useEffect } from 'react';
+
+var State;
+(function (State) {
+    State[State["IDLE"] = 0] = "IDLE";
+    State[State["DELAY"] = 1] = "DELAY";
+    State[State["DISPLAY"] = 2] = "DISPLAY";
+    State[State["EXPIRE"] = 3] = "EXPIRE";
+})(State || (State = {}));
+let useSpinDelay = (loading, delay = 500, minDuration = 200) => {
+    const [state, setState] = useState(State.IDLE);
+    const timeout = useRef();
+    useEffect(() => {
+        if (loading && state === State.IDLE) {
+            clearTimeout(timeout.current);
+            timeout.current = setTimeout(() => {
+                if (!loading) {
+                    return setState(State.IDLE);
+                }
+                timeout.current = setTimeout(() => {
+                    setState(State.EXPIRE);
+                }, minDuration);
+                setState(State.DISPLAY);
+            }, delay);
+            setState(State.DELAY);
+        }
+        if (!loading && state !== State.DISPLAY) {
+            clearTimeout(timeout.current);
+            setState(State.IDLE);
+        }
+    }, [loading, state, delay, minDuration]);
+    useEffect(() => {
+        return () => clearTimeout(timeout.current);
+    }, []);
+    return state === State.DISPLAY || state === State.EXPIRE;
+};
+
+export { useSpinDelay as default, useSpinDelay };

package/useTraceUpdate.cjs.d.ts

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

package/useTraceUpdate.cjs.default.js

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

package/useTraceUpdate.cjs.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+let useTraceUpdate = (props) => {
+    const prev = react.useRef(props);
+    react.useEffect(() => {
+        const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
+            if (prev.current[k] !== v) {
+                ps[k] = [prev.current[k], v];
+            }
+            return ps;
+        }, {});
+        if (Object.keys(changedProps).length > 0) {
+            console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
+        }
+        prev.current = props;
+    });
+};
+
+exports["default"] = useTraceUpdate;
+exports.useTraceUpdate = useTraceUpdate;

package/useTraceUpdate.cjs.mjs

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

package/useTraceUpdate.d.ts

@@ -0,0 +1,2 @@
+export declare let useTraceUpdate: (props: any) => void;
+export default useTraceUpdate;

package/{hooks/useTraceUpdate.mjs → useTraceUpdate.esm.js}

@@ -1,16 +1,11 @@
-import { useEffect, useRef } from "react";
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */ export function useTraceUpdate(props) {
+import { useRef, useEffect } from 'react';
+
+let useTraceUpdate = (props) => {
     const prev = useRef(props);
-    useEffect(()=>{
-        const changedProps = Object.entries(props).reduce((ps, [k, v])=>{
+    useEffect(() => {
+        const changedProps = Object.entries(props).reduce((ps, [k, v]) => {
             if (prev.current[k] !== v) {
-                // @ts-expect-error Does not matter here...
-                ps[k] = [
-                    prev.current[k],
-                    v
-                ];
+                ps[k] = [prev.current[k], v];
             }
             return ps;
         }, {});
@@ -19,5 +14,6 @@ import { useEffect, useRef } from "react";
         }
         prev.current = props;
     });
-}
-export default useTraceUpdate;
+};
+
+export { useTraceUpdate as default, useTraceUpdate };

package/useUpdateEffect.cjs.d.ts

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

package/useUpdateEffect.cjs.default.js

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

package/useUpdateEffect.cjs.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var useFirstMountState = require('./useFirstMountState.cjs.js');
+
+let useUpdateEffect = (effect, deps) => {
+    const isFirstMount = useFirstMountState.useFirstMountState();
+    react.useEffect(() => {
+        if (!isFirstMount) {
+            return effect();
+        }
+    }, deps);
+};
+
+exports["default"] = useUpdateEffect;
+exports.useUpdateEffect = useUpdateEffect;

package/useUpdateEffect.cjs.mjs

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

package/useUpdateEffect.d.ts

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

package/useUpdateEffect.esm.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { useFirstMountState } from './useFirstMountState.esm.js';
+
+let useUpdateEffect = (effect, deps) => {
+    const isFirstMount = useFirstMountState();
+    useEffect(() => {
+        if (!isFirstMount) {
+            return effect();
+        }
+    }, deps);
+};
+
+export { useUpdateEffect as default, useUpdateEffect };

package/useWindowSize.cjs.d.ts

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

package/useWindowSize.cjs.default.js

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

package/useWindowSize.cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+require('@koine/utils');
+var dom = require('@koine/dom');
+
+let useWindowSize = (wait, immediate) => {
+    const [width, widthSet] = react.useState(0);
+    const [height, heightSet] = react.useState(0);
+    react.useEffect(() => {
+        const updateSize = () => {
+            widthSet(window.innerWidth);
+            heightSet(window.innerHeight);
+        };
+        const listener = wait
+            ? dom.listenResizeDebounced(0, updateSize, wait, immediate)
+            : dom.listenResize(updateSize);
+        updateSize();
+        return listener;
+    }, [wait, immediate]);
+    return [width, height];
+};
+
+exports["default"] = useWindowSize;
+exports.useWindowSize = useWindowSize;

package/useWindowSize.cjs.mjs

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

package/useWindowSize.d.ts

@@ -0,0 +1,3 @@
+import { debounce } from "@koine/utils";
+export declare let useWindowSize: (wait?: Parameters<typeof debounce>[1], immediate?: Parameters<typeof debounce>[2]) => readonly [number, number];
+export default useWindowSize;

package/useWindowSize.esm.js

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react';
+import '@koine/utils';
+import { listenResizeDebounced, listenResize } from '@koine/dom';
+
+let useWindowSize = (wait, immediate) => {
+    const [width, widthSet] = useState(0);
+    const [height, heightSet] = useState(0);
+    useEffect(() => {
+        const updateSize = () => {
+            widthSet(window.innerWidth);
+            heightSet(window.innerHeight);
+        };
+        const listener = wait
+            ? listenResizeDebounced(0, updateSize, wait, immediate)
+            : listenResize(updateSize);
+        updateSize();
+        return listener;
+    }, [wait, immediate]);
+    return [width, height];
+};
+
+export { useWindowSize as default, useWindowSize };

package/Alert/Alert.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export type AlertProps = React.PropsWithChildren<{
-    $danger?: boolean;
-}>;
-export declare const Alert: ({ $danger, children, ...props }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/Alert/Alert.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "Alert", {
-    enumerable: true,
-    get: function() {
-        return Alert;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _jsxruntime = require("react/jsx-runtime");
-const _styledcomponents = /*#__PURE__*/ _interop_require_default._(require("styled-components"));
-const AlertRoot = _styledcomponents.default.div`
-  font-size: 12px;
-  ${(p)=>p.$danger ? `color: var(--danger)` : ""}
-`;
-const AlertInner = _styledcomponents.default.div`
-  padding: 1em;
-  background-color: rgba(0, 0, 0, 0.05);
-  /* border: 1px solid var(--grey700); */
-  /* background: pink; */
-  /* color: red; */
-`;
-const Alert = ({ $danger, children, ...props })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(AlertRoot, {
-        $danger: $danger,
-        ...props,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(AlertInner, {
-            children: children
-        })
-    });
-};