@koine/react 2.0.0-beta.2 → 2.0.0-beta.21

package/hooks/useScrollPosition.js

@@ -1,73 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScrollPosition = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
-var listenScroll_1 = tslib_1.__importDefault(require("@koine/dom/listenScroll"));
-var useIsomorphicLayoutEffect_1 = tslib_1.__importDefault(require("./useIsomorphicLayoutEffect"));
-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_1.default) {
-        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 };
-};
-/**
- * @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
- */
-var useScrollPosition = function (effect, deps, element, boundingElement, wait) {
-    if (deps === void 0) { deps = []; }
-    var position = (0, react_1.useRef)(getScrollPosition(null, boundingElement));
-    var throttleTimeout = null;
-    var callBack = function () {
-        var current = getScrollPosition(element, boundingElement);
-        effect(current, position.current);
-        position.current = current;
-        throttleTimeout = null;
-    };
-    (0, useIsomorphicLayoutEffect_1.default)(function () {
-        if (!isBrowser_1.default) {
-            return undefined;
-        }
-        var handleScroll = function () {
-            if (wait) {
-                if (throttleTimeout === null) {
-                    throttleTimeout = window.setTimeout(callBack, wait);
-                }
-            }
-            else {
-                callBack();
-            }
-        };
-        var listener = (0, listenScroll_1.default)(handleScroll, boundingElement === null || boundingElement === void 0 ? void 0 : boundingElement.current);
-        return function () {
-            listener();
-            if (throttleTimeout) {
-                clearTimeout(throttleTimeout);
-            }
-        };
-    }, deps);
-};
-exports.useScrollPosition = useScrollPosition;
-exports.default = exports.useScrollPosition;

package/hooks/useScrollThreshold.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScrollThreshold = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var noop_1 = tslib_1.__importDefault(require("@koine/utils/noop"));
-var listenScroll_1 = tslib_1.__importDefault(require("@koine/dom/listenScroll"));
-var useScrollThreshold = function (threshold, callback) {
-    var _a = (0, react_1.useState)(false), isBelow = _a[0], setIsBelow = _a[1];
-    var handler = (0, react_1.useCallback)(function () {
-        if (threshold) {
-            var posY = window.scrollY; // * -1;
-            var isAbove = posY < threshold;
-            var isBelow_1 = posY > threshold;
-            // console.log("useScrollThreshold setIsBelow", isBelow, posY, threshold);
-            setIsBelow(isBelow_1);
-            if (callback)
-                callback(isAbove, isBelow_1);
-        }
-    }, [threshold, callback]);
-    (0, react_1.useEffect)(function () {
-        if (threshold) {
-            // const listener = listenScrollThrottled(0, handler, 50);
-            var listener = (0, listenScroll_1.default)(handler);
-            handler();
-            return listener;
-        }
-        return noop_1.default;
-    }, [threshold, handler]);
-    return isBelow;
-};
-exports.useScrollThreshold = useScrollThreshold;
-exports.default = exports.useScrollThreshold;

package/hooks/useScrollTo.js

@@ -1,27 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useScrollTo = void 0;
-var tslib_1 = require("tslib");
-var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
-var useHeader_1 = tslib_1.__importDefault(require("../Header/useHeader"));
-function useScrollTo(id, offset) {
-    if (id === void 0) { id = ""; }
-    if (offset === void 0) { offset = 0; }
-    var _a = (0, useHeader_1.default)(), headerHeight = _a[2];
-    if (!isBrowser_1.default) {
-        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);
-}
-exports.useScrollTo = useScrollTo;
-exports.default = useScrollTo;

package/hooks/useSmoothScroll.js

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSmoothScroll = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var isNumber_1 = tslib_1.__importDefault(require("@koine/utils/isNumber"));
-var getOffsetTopSlim_1 = tslib_1.__importDefault(require("@koine/dom/getOffsetTopSlim"));
-var scrollTo_1 = tslib_1.__importDefault(require("@koine/dom/scrollTo"));
-var useFixedOffset_1 = tslib_1.__importDefault(require("./useFixedOffset"));
-/**
- *
- * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
- * selector we will keep into account the _fixedOffset_ despite this option.
- * @returns
- */
-function useSmoothScroll(disregardAutomaticFixedOffset) {
-    var fixedOffset = (0, useFixedOffset_1.default)();
-    var scroll = (0, react_1.useCallback)(function (to, customOffset, callback, fallbackTimeout, behavior) {
-        var top = undefined;
-        var toIsElement = false;
-        if ((0, isNumber_1.default)(to)) {
-            top = to;
-        }
-        else if (to) {
-            var el = document.getElementById(to);
-            if (el) {
-                top = (0, getOffsetTopSlim_1.default)(el) - fixedOffset.current;
-                toIsElement = true;
-            }
-        }
-        if ((0, isNumber_1.default)(top)) {
-            top =
-                top +
-                    (customOffset || 0) +
-                    (disregardAutomaticFixedOffset || toIsElement
-                        ? 0
-                        : fixedOffset.current);
-            (0, scrollTo_1.default)(top, callback, fallbackTimeout, behavior);
-        }
-    }, [disregardAutomaticFixedOffset, fixedOffset]);
-    return scroll;
-}
-exports.useSmoothScroll = useSmoothScroll;
-exports.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.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSpinDelay = void 0;
-var react_1 = 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 = {}));
-/**
- * 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]
- */
-function useSpinDelay(loading, delay, minDuration) {
-    if (delay === void 0) { delay = 500; }
-    if (minDuration === void 0) { minDuration = 200; }
-    var _a = (0, react_1.useState)(State.IDLE), state = _a[0], setState = _a[1];
-    var timeout = (0, react_1.useRef)();
-    (0, react_1.useEffect)(function () {
-        if (loading && state === State.IDLE) {
-            clearTimeout(timeout.current);
-            timeout.current = setTimeout(function () {
-                if (!loading) {
-                    return setState(State.IDLE);
-                }
-                timeout.current = setTimeout(function () {
-                    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]);
-    (0, react_1.useEffect)(function () {
-        return function () { return clearTimeout(timeout.current); };
-    }, []);
-    return state === State.DISPLAY || state === State.EXPIRE;
-}
-exports.useSpinDelay = useSpinDelay;
-exports.default = useSpinDelay;

package/hooks/useTraceUpdate.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTraceUpdate = void 0;
-var react_1 = require("react");
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */
-function useTraceUpdate(props) {
-    var prev = (0, react_1.useRef)(props);
-    (0, react_1.useEffect)(function () {
-        var changedProps = Object.entries(props).reduce(function (ps, _a) {
-            var k = _a[0], v = _a[1];
-            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;
-    });
-}
-exports.useTraceUpdate = useTraceUpdate;
-exports.default = useTraceUpdate;

package/hooks/useUpdateEffect.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useUpdateEffect = void 0;
-var react_1 = require("react");
-var useFirstMountState_1 = require("./useFirstMountState");
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */
-var useUpdateEffect = function (effect, deps) {
-    var isFirstMount = (0, useFirstMountState_1.useFirstMountState)();
-    (0, react_1.useEffect)(function () {
-        if (!isFirstMount) {
-            return effect();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-};
-exports.useUpdateEffect = useUpdateEffect;
-exports.default = exports.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.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useWindowSize = void 0;
-var tslib_1 = require("tslib");
-var react_1 = require("react");
-var listenResize_1 = tslib_1.__importDefault(require("@koine/dom/listenResize"));
-var listenResizeDebounced_1 = tslib_1.__importDefault(require("@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`
- */
-function useWindowSize(wait, immediate) {
-    var _a = (0, react_1.useState)(0), width = _a[0], widthSet = _a[1];
-    var _b = (0, react_1.useState)(0), height = _b[0], heightSet = _b[1];
-    (0, react_1.useEffect)(function () {
-        function updateSize() {
-            widthSet(window.innerWidth);
-            heightSet(window.innerHeight);
-        }
-        var listener = wait
-            ? (0, listenResizeDebounced_1.default)(0, updateSize, wait, immediate)
-            : (0, listenResize_1.default)(updateSize);
-        updateSize();
-        return listener;
-    }, [wait, immediate]);
-    return [width, height];
-}
-exports.useWindowSize = useWindowSize;
-exports.default = useWindowSize;

package/index.mjs

@@ -1,5 +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.mjs

@@ -1,39 +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 var MotionProvider = function (_a) {
-    var features = _a.features, children = _a.children;
-    return _jsx(LazyMotion, { features: features, children: children });
-};
-export default MotionProvider;

package/m/index.mjs

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

package/m/lite.mjs

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

package/m/max.mjs

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

package/m/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.mjs",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

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/sc/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.mjs",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

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/scm/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.mjs",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/shared/index.mjs

@@ -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";

package/shared/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.mjs",
-  "main": "./index.js",
-  "types": "./index.d.ts"
-}

package/styles/Body.mjs

@@ -1,13 +0,0 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-export var BodyRoot = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n"], ["\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n"])));
-/**
- * If you have background graphics to overlap you might need to add:
- *
- * ```css
- * z-index: 1;
- * position: relative;
- * ```
- */
-export var BodyMain = styled.main(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var templateObject_1, templateObject_2;

package/styles/Global.mjs

@@ -1,18 +0,0 @@
-import { __makeTemplateObject } from "tslib";
-import { createGlobalStyle } from "styled-components";
-/**
- * App global style
- *
- * For examples of what to do here take a look at [Bootstrap's reset](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss)
- * and similar.
- *
- * What we do here:
- * - set the base font family on all possible elements including placeholders prevent Chrome showing a standard font when using the autofill feature
- *  - @see https://stackoverflow.com/a/60987373/1938970
- * - set the base font size on all possible elements to prevent weird zooming on input fields on iPhone iOS devices.
- *  - @see https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
- *  - @see https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/
- */
-export var stylesGlobal = "\n  body {\n    margin: 0;\n    padding: 0;\n    overflow-x: hidden;\n    overflow-y: scroll;\n  }\n\n  body,\n  button,\n  input,\n  textarea,\n  select,\n  select:-webkit-autofill::first-line,\n  input:-webkit-autofill::first-line {\n    font-family: var(--font), -apple-system, BlinkMacSystemFont, \"Segoe UI\",\n      Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\",\n      sans-serif;\n    font-size: var(--fontSize);\n  }\n\n  html {\n    box-sizing: border-box;\n    @media (prefers-reduced-motion: no-preference) {\n      scroll-behavior: smooth;\n    }\n  }\n\n  *,\n  *:before,\n  *:after {\n    box-sizing: inherit;\n    -webkit-tap-highlight-color: transparent;\n  }\n";
-export var StylesGlobal = createGlobalStyle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["", ""], ["", ""])), stylesGlobal);
-var templateObject_1;

package/styles/index.mjs

@@ -1,7 +0,0 @@
-export { BodyMain, BodyRoot } from "./Body";
-export { StylesGlobal, stylesGlobal } from "./Global";
-export { between, down, generateMediaQueries, max, min, only, up, useMedia, } from "./media";
-export { spacing, spacingBottom, spacingTop, spacingVertical, } from "./spacing";
-export { colStretch, centered, ellipsis, inset0, invisible, overlay, stateFocus, } from "./styled";
-export { breakpoints, createTheme, useTheme, } from "./theme";
-export { THEME_DEFAULT, THEME_KEY, ThemeVanillaContext, ThemeVanillaProvider, getInitialThemeFromClient, } from "./theme--vanilla";