@koine/react 2.0.0-beta.7 → 2.0.0-beta.70

package/hooks/useScrollThreshold.mjs

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

package/hooks/useScrollTo.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useScrollTo: function() {
-        return useScrollTo;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _isBrowser = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isBrowser"));
-const _useHeader = /*#__PURE__*/ _interop_require_default._(require("../Header/useHeader"));
-function useScrollTo(id = "", offset = 0) {
-    const [, , headerHeight] = (0, _useHeader.default)();
-    if (!_isBrowser.default) {
-        return;
-    }
-    const headerOffset = headerHeight || 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);
-}
-const _default = useScrollTo;

package/hooks/useScrollTo.mjs

@@ -1,20 +0,0 @@
-import isBrowser from "@koine/utils/isBrowser";
-import useHeader from "../Header/useHeader";
-export function useScrollTo(id = "", offset = 0) {
-    const [, , headerHeight] = useHeader();
-    if (!isBrowser) {
-        return;
-    }
-    const headerOffset = headerHeight || 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 default useScrollTo;

package/hooks/useSmoothScroll.js

@@ -1,49 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useSmoothScroll: function() {
-        return useSmoothScroll;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _isNumber = /*#__PURE__*/ _interop_require_default._(require("@koine/utils/isNumber"));
-const _getOffsetTopSlim = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/getOffsetTopSlim"));
-const _scrollTo = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/scrollTo"));
-const _useFixedOffset = /*#__PURE__*/ _interop_require_default._(require("./useFixedOffset"));
-function useSmoothScroll(disregardAutomaticFixedOffset) {
-    const fixedOffset = (0, _useFixedOffset.default)();
-    const scroll = (0, _react.useCallback)((to, customOffset, callback, fallbackTimeout, behavior)=>{
-        let top = undefined;
-        let toIsElement = false;
-        if ((0, _isNumber.default)(to)) {
-            top = to;
-        } else if (to) {
-            const el = document.getElementById(to);
-            if (el) {
-                top = (0, _getOffsetTopSlim.default)(el) - fixedOffset.current;
-                toIsElement = true;
-            }
-        }
-        if ((0, _isNumber.default)(top)) {
-            top = top + (customOffset || 0) + (disregardAutomaticFixedOffset || toIsElement ? 0 : fixedOffset.current);
-            (0, _scrollTo.default)(top, callback, fallbackTimeout, behavior);
-        }
-    }, [
-        disregardAutomaticFixedOffset,
-        fixedOffset
-    ]);
-    return scroll;
-}
-const _default = useSmoothScroll;

package/hooks/useSmoothScroll.mjs

@@ -1,35 +0,0 @@
-import { useCallback } from "react";
-import isNumber from "@koine/utils/isNumber";
-import getOffsetTopSlim from "@koine/dom/getOffsetTopSlim";
-import scrollTo from "@koine/dom/scrollTo";
-import useFixedOffset from "./useFixedOffset";
-/**
- *
- * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
- * selector we will keep into account the _fixedOffset_ despite this option.
- * @returns
- */ export function 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 default useSmoothScroll;

package/hooks/useSpinDelay.js

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useSpinDelay: function() {
-        return useSpinDelay;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _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 = {}));
-function useSpinDelay(loading, delay = 500, minDuration = 200) {
-    const [state, setState] = (0, _react.useState)(0);
-    const timeout = (0, _react.useRef)();
-    (0, _react.useEffect)(()=>{
-        if (loading && state === 0) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(()=>{
-                if (!loading) {
-                    return setState(0);
-                }
-                timeout.current = setTimeout(()=>{
-                    setState(3);
-                }, minDuration);
-                setState(2);
-            }, delay);
-            setState(1);
-        }
-        if (!loading && state !== 2) {
-            clearTimeout(timeout.current);
-            setState(0);
-        }
-    }, [
-        loading,
-        state,
-        delay,
-        minDuration
-    ]);
-    (0, _react.useEffect)(()=>{
-        return ()=>clearTimeout(timeout.current);
-    }, []);
-    return state === 2 || state === 3;
-}
-const _default = useSpinDelay;

package/hooks/useSpinDelay.mjs

@@ -1,52 +0,0 @@
-import { useEffect, useRef, useState } 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 = {}));
-/**
- * Wraps your booleans only returning true after the `delay`, and for a minimum
- * time of `minDuration`. This way you're sure that you don't show unnecessary
- * or very short living spinners.
- *
- * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
- *
- * - Smaller footprint and options object as argument
- *
- * @param delay [500]
- * @param minDuration [200]
- */ export function useSpinDelay(loading, delay = 500, minDuration = 200) {
-    const [state, setState] = useState(0);
-    const timeout = useRef();
-    useEffect(()=>{
-        if (loading && state === 0) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(()=>{
-                if (!loading) {
-                    return setState(0);
-                }
-                timeout.current = setTimeout(()=>{
-                    setState(3);
-                }, minDuration);
-                setState(2);
-            }, delay);
-            setState(1);
-        }
-        if (!loading && state !== 2) {
-            clearTimeout(timeout.current);
-            setState(0);
-        }
-    }, [
-        loading,
-        state,
-        delay,
-        minDuration
-    ]);
-    useEffect(()=>{
-        return ()=>clearTimeout(timeout.current);
-    }, []);
-    return state === 2 || state === 3;
-}
-export default useSpinDelay;

package/hooks/useTraceUpdate.js

@@ -1,39 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useTraceUpdate: function() {
-        return useTraceUpdate;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _react = require("react");
-function useTraceUpdate(props) {
-    const prev = (0, _react.useRef)(props);
-    (0, _react.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
-                ];
-            }
-            return ps;
-        }, {});
-        if (Object.keys(changedProps).length > 0) {
-            console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
-        }
-        prev.current = props;
-    });
-}
-const _default = useTraceUpdate;

package/hooks/useTraceUpdate.mjs

@@ -1,23 +0,0 @@
-import { useEffect, useRef } from "react";
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */ export function useTraceUpdate(props) {
-    const prev = useRef(props);
-    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
-                ];
-            }
-            return ps;
-        }, {});
-        if (Object.keys(changedProps).length > 0) {
-            console.info("[@koine/react:useTraceUpdate] changed props:", changedProps);
-        }
-        prev.current = props;
-    });
-}
-export default useTraceUpdate;

package/hooks/useUpdateEffect.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useUpdateEffect: function() {
-        return useUpdateEffect;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _react = require("react");
-const _useFirstMountState = require("./useFirstMountState");
-const useUpdateEffect = (effect, deps)=>{
-    const isFirstMount = (0, _useFirstMountState.useFirstMountState)();
-    (0, _react.useEffect)(()=>{
-        if (!isFirstMount) {
-            return effect();
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-};
-const _default = useUpdateEffect;

package/hooks/useUpdateEffect.mjs

@@ -1,14 +0,0 @@
-import { useEffect } from "react";
-import { useFirstMountState } from "./useFirstMountState";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */ export const useUpdateEffect = (effect, deps)=>{
-    const isFirstMount = useFirstMountState();
-    useEffect(()=>{
-        if (!isFirstMount) {
-            return effect();
-        }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-};
-export default useUpdateEffect;

package/hooks/useWindowSize.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useWindowSize: function() {
-        return useWindowSize;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
-const _react = require("react");
-const _listenResize = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenResize"));
-const _listenResizeDebounced = /*#__PURE__*/ _interop_require_default._(require("@koine/dom/listenResizeDebounced"));
-function useWindowSize(wait, immediate) {
-    const [width, widthSet] = (0, _react.useState)(0);
-    const [height, heightSet] = (0, _react.useState)(0);
-    (0, _react.useEffect)(()=>{
-        function updateSize() {
-            widthSet(window.innerWidth);
-            heightSet(window.innerHeight);
-        }
-        const listener = wait ? (0, _listenResizeDebounced.default)(0, updateSize, wait, immediate) : (0, _listenResize.default)(updateSize);
-        updateSize();
-        return listener;
-    }, [
-        wait,
-        immediate
-    ]);
-    return [
-        width,
-        height
-    ];
-}
-const _default = useWindowSize;

package/hooks/useWindowSize.mjs

@@ -1,32 +0,0 @@
-import { useEffect, useState } from "react";
-import listenResize from "@koine/dom/listenResize";
-import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
-/**
- * # Use `window` size
- *
- * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
- *
- * @returns An array with:
- * 1) _width_: using `window.innerWidth`
- * 2) _height_: using `window.innerHeight`
- */ export function useWindowSize(wait, immediate) {
-    const [width, widthSet] = useState(0);
-    const [height, heightSet] = useState(0);
-    useEffect(()=>{
-        function 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 default useWindowSize;

package/index.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./shared"), exports);
- // we need to alias the star export otherwise the named exports would collide
- // export * as css from "./css";
- // export * as sc from "./sc";
- // export * as tw from "./tw";

package/index.mjs

@@ -1,4 +0,0 @@
-export * from "./shared"; // we need to alias the star export otherwise the named exports would collide
- // export * as css from "./css";
- // export * as sc from "./sc";
- // export * as tw from "./tw";

package/m/MotionProvider.d.ts

@@ -1,38 +0,0 @@
-/// <reference types="react" />
-import { type LazyProps } from "framer-motion";
-export type MotionProviderFeatures = LazyProps["features"];
-export type MotionProviderProps = LazyProps & React.PropsWithChildren<{}>;
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */
-export declare const MotionProvider: ({ features, children }: MotionProviderProps) => import("react/jsx-runtime").JSX.Element;
-export default MotionProvider;

package/m/MotionProvider.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    MotionProvider: function() {
-        return MotionProvider;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _framermotion = require("framer-motion");
-const MotionProvider = ({ features, children })=>{
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_framermotion.LazyMotion, {
-        features: features,
-        children: children
-    });
-};
-const _default = MotionProvider;

package/m/MotionProvider.mjs

@@ -1,40 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { LazyMotion } from "framer-motion";
-/**
- * `<LazyMotion />` provider wrapper from `framer-motion`
- *
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/
- *
- * About the difference between `lite` and `max`
- * @see https://www.framer.com/docs/guide-reduce-bundle-size/#available-features
- *
- * @example
- *
- * `lite` version:
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/lite").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- *
- * ### `max` version
- * ```tsx
- * import { MotionProvider } from "@koine/react/m";
- *
- * const features = () => import("@koine/react/m/max").then((m) => m.default);
- *
- * <MotionProvider features={features}>
- *   <App />
- * </MotionProvider>
- * ```
- */ export const MotionProvider = ({ features, children })=>{
-    return /*#__PURE__*/ _jsx(LazyMotion, {
-        features: features,
-        children: children
-    });
-};
-export default MotionProvider;

package/m/index.d.ts

@@ -1,6 +0,0 @@
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */
-export * from "./MotionProvider";

package/m/index.js

@@ -1,10 +0,0 @@
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */ "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./MotionProvider"), exports);

package/m/index.mjs

@@ -1,5 +0,0 @@
-/**
- * @file
- *
- * In this file we only have exports related to `framer-motion`
- */ export * from "./MotionProvider";

package/m/lite.d.ts

@@ -1,2 +0,0 @@
-import { domAnimation } from "framer-motion";
-export default domAnimation;

package/m/lite.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-const _framermotion = require("framer-motion");
-const _default = _framermotion.domAnimation;

package/m/lite.mjs

@@ -1,2 +0,0 @@
-import { domAnimation } from "framer-motion";
-export default domAnimation;

package/m/max.d.ts

@@ -1,2 +0,0 @@
-import { domMax } from "framer-motion";
-export default domMax;

package/m/max.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "default", {
-    enumerable: true,
-    get: function() {
-        return _default;
-    }
-});
-const _framermotion = require("framer-motion");
-const _default = _framermotion.domMax;

package/m/max.mjs

@@ -1,2 +0,0 @@
-import { domMax } from "framer-motion";
-export default domMax;