@koine/react 2.0.0-beta.11 → 2.0.0-beta.111

package/hooks/usePrevious.mjs

@@ -1,17 +0,0 @@
-import { useState } from "react";
-/**
- * @borrows [samselikoff/animated-carousel](https://github.com/samselikoff/2022-06-02-animated-carousel/blob/main/pages/final.jsx)
- */ export function usePrevious(state, defaulValue) {
-    const [tuple, setTuple] = useState([
-        state,
-        defaulValue
-    ]);
-    if (tuple[1] !== state) {
-        setTuple([
-            tuple[1],
-            state
-        ]);
-    }
-    return tuple[0];
-}
-export default usePrevious;

package/hooks/usePreviousRef.d.ts

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

package/hooks/usePreviousRef.mjs

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

package/hooks/useScrollPosition.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-type Position = {
-    x: number;
-    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/hooks/useScrollPosition.mjs

@@ -1,70 +0,0 @@
-import { useRef } from "react";
-import isBrowser from "@koine/utils/isBrowser";
-import listenScroll from "@koine/dom/listenScroll";
-import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
-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
-    };
-};
-/**
- * @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 const 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 default useScrollPosition;

package/hooks/useScrollThreshold.d.ts

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

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.d.ts

@@ -1,2 +0,0 @@
-export declare function useScrollTo(id?: string, offset?: number): void;
-export 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.d.ts

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

@@ -1,14 +0,0 @@
-/**
- * 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 declare function useSpinDelay(loading: boolean, delay?: number, minDuration?: number): boolean;
-export 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.d.ts

@@ -1,5 +0,0 @@
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */
-export declare function useTraceUpdate(props: any): void;
-export 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.d.ts

@@ -1,6 +0,0 @@
-import { useEffect } from "react";
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */
-export declare const useUpdateEffect: typeof useEffect;
-export 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.d.ts

@@ -1,12 +0,0 @@
-import debounce from "@koine/utils/debounce";
-/**
- * # 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 declare function useWindowSize(wait?: Parameters<typeof debounce>[1], immediate?: Parameters<typeof debounce>[2]): readonly [number, number];
-export 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.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.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.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.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.mjs

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

package/sc/index.d.ts

@@ -1,30 +0,0 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/sc/bare";
-export { KoineForm, type KoineFormProps } from "../Form/sc/bare";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/sc/index.mjs

@@ -1,31 +0,0 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog } from "../Dialog/sc/bare";
-export { KoineForm } from "../Form/sc/bare";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-// export * from "../Select";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/scm/index.d.ts

@@ -1,29 +0,0 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog, type KoineDialogProps } from "../Dialog/sc/framer";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/scm/index.mjs

@@ -1,31 +0,0 @@
-export * from "../shared";
-export * from "../Alert";
-export * from "../Animations";
-export * from "../Autocomplete";
-export * from "../Bg";
-export * from "../Breadcrumbs";
-export * from "../Buttons";
-export * from "../Carousel";
-export * from "../Collapsable";
-export * from "../Debug";
-export { KoineDialog } from "../Dialog/sc/framer";
-// export { KoineForm, type KoineFormProps} from "../Form/sc/framer";
-export * from "../Forms";
-export * from "../Grid";
-export * from "../Hamburger";
-export * from "../Header";
-export * from "../Hidden";
-export * from "../Img";
-export * from "../Link";
-export * from "../MenuItem";
-export * from "../Pagination";
-export * from "../Pill";
-export * from "../Progress";
-export * from "../Rating";
-// export * from "../Select";
-export * from "../Sidebar";
-export * from "../Spacing";
-export * from "../Sticky";
-export * from "../styles";
-export * from "../Tabs";
-export * from "../Typography";

package/shared/index.d.ts

@@ -1,8 +0,0 @@
-export * from "../Calendar";
-export * from "../Dialog";
-export * from "../FaviconTags";
-export * from "../helpers";
-export * from "../hooks";
-export * from "../Meta";
-export * from "../NoJs";
-export * from "../types";