@koine/react 1.0.10 → 1.0.13

package/hooks/useAsyncFn.js

@@ -0,0 +1,36 @@
+import { __assign } from "tslib";
+import { useCallback, useRef, useState } from "react";
+import { useMountedState } from "./useMountedState";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
+ */
+export function useAsyncFn(fn, deps, initialState) {
+    if (deps === void 0) { deps = []; }
+    if (initialState === void 0) { initialState = { loading: false }; }
+    var lastCallId = useRef(0);
+    var isMounted = useMountedState();
+    var _a = useState(initialState), state = _a[0], set = _a[1];
+    var callback = useCallback(function () {
+        var args = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            args[_i] = arguments[_i];
+        }
+        var callId = ++lastCallId.current;
+        if (!state.loading) {
+            set(function (prevState) { return (__assign(__assign({}, prevState), { loading: true })); });
+        }
+        return fn.apply(void 0, args).then(function (value) {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ value: value, loading: false });
+            return value;
+        }, function (error) {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ error: error, loading: false });
+            return error;
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, deps);
+    return [state, callback];
+}

package/hooks/useDateLocale.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Dynamically import the date-fns correct locale
+ *
+ * Inspired by:
+ * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
+ */
+export declare function useDateLocale(locale?: string, defaultLocale?: string): globalThis.Locale | undefined;

package/hooks/useDateLocale.js

@@ -0,0 +1,38 @@
+import { __awaiter, __generator } from "tslib";
+import { useEffect, useState } from "react";
+/**
+ * Dynamically import the date-fns correct locale
+ *
+ * Inspired by:
+ * @see https://robertmarshall.dev/blog/dynamically-import-datefns-locale-mui-datepicker-localization/
+ */
+export function useDateLocale(locale, defaultLocale) {
+    var _this = this;
+    if (defaultLocale === void 0) { defaultLocale = "en"; }
+    var _a = useState(), data = _a[0], setData = _a[1];
+    var _b = useState(defaultLocale), current = _b[0], setCurrent = _b[1];
+    // const [ready, setReady] = useState(false);
+    // If the user changes the locale listen to the change and import the locale that is now required.
+    useEffect(function () {
+        var importLocaleFile = function () { return __awaiter(_this, void 0, void 0, function () {
+            var localeToSet;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, import(
+                        /* webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
+                        "date-fns/locale/".concat(locale, "/index.js"))];
+                    case 1:
+                        localeToSet = _a.sent();
+                        setCurrent(locale || current);
+                        setData(localeToSet.default);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        // If the locale has not yet been loaded.
+        if (locale !== current) {
+            importLocaleFile();
+        }
+    }, [locale, current]);
+    return data;
+}

package/hooks/useEffectOnce.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts)
+ */
+export declare const useEffectOnce: (effect: React.EffectCallback) => void;

package/hooks/useEffectOnce.js

@@ -0,0 +1,8 @@
+import { useEffect } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useEffectOnce.ts)
+ */
+export var useEffectOnce = function (effect) {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(effect, []);
+};

package/hooks/useFirstMountState.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export declare function useFirstMountState(): boolean;

package/hooks/useFirstMountState.js

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export function useFirstMountState() {
+    var isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}

package/hooks/useFocus.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @see https://stackoverflow.com/a/54159564/1938970
+ */
+export declare const useFocus: () => (import("react").RefObject<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | (() => void))[];

package/hooks/useFocus.js

@@ -0,0 +1,11 @@
+import { useRef } from "react";
+/**
+ * @see https://stackoverflow.com/a/54159564/1938970
+ */
+export var useFocus = function () {
+    var element = useRef(null);
+    var setFocus = function () {
+        element.current && element.current.focus();
+    };
+    return [element, setFocus];
+};

package/hooks/useId.d.ts

@@ -0,0 +1,4 @@
+/**
+ * FIXME: once we can move to react 18 just replace this import with `{ useId } from "react";`
+ */
+export declare function useId(prefix?: string): string;

package/hooks/useId.js

@@ -0,0 +1,8 @@
+import { uid } from "@koine/utils";
+/**
+ * FIXME: once we can move to react 18 just replace this import with `{ useId } from "react";`
+ */
+export function useId(prefix) {
+    if (prefix === void 0) { prefix = "uid"; }
+    return "".concat(prefix, "-").concat(uid());
+}

package/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,5 @@
+import { useEffect } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,8 @@
+import { useEffect, useLayoutEffect } from "react";
+import { isBrowser } from "@koine/utils";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ */
+export var useIsomorphicLayoutEffect = isBrowser
+    ? useLayoutEffect
+    : useEffect;

package/hooks/useMount.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMount.ts)
+ */
+export declare const useMount: (fn: () => void) => void;

package/hooks/useMount.js

@@ -0,0 +1,9 @@
+import { useEffectOnce } from "./useEffectOnce";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMount.ts)
+ */
+export var useMount = function (fn) {
+    useEffectOnce(function () {
+        fn();
+    });
+};

package/hooks/useMountedState.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
+ */
+export declare function useMountedState(): () => boolean;

package/hooks/useMountedState.js

@@ -0,0 +1,15 @@
+import { useCallback, useEffect, useRef } from "react";
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
+ */
+export function useMountedState() {
+    var mountedRef = useRef(false);
+    var get = useCallback(function () { return mountedRef.current; }, []);
+    useEffect(function () {
+        mountedRef.current = true;
+        return function () {
+            mountedRef.current = false;
+        };
+    }, []);
+    return get;
+}

package/hooks/usePrevious.d.ts

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

package/hooks/usePrevious.js

@@ -0,0 +1,8 @@
+import { useEffect, useRef } from "react";
+export function usePrevious(value) {
+    var ref = useRef();
+    useEffect(function () {
+        ref.current = value;
+    });
+    return ref.current;
+}

package/hooks/useScrollPosition.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare type Position = {
+    x: number;
+    y: number;
+};
+declare 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 | undefined, useWindow?: boolean | undefined, wait?: number | undefined, boundingElement?: ElementRef | undefined) => void;
+export {};

package/hooks/useScrollPosition.js

@@ -0,0 +1,80 @@
+import { useRef } from "react";
+import { isBrowser } from "@koine/utils";
+import { useIsomorphicLayoutEffect } from "./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, useWindow, boundingElement) {
+    if (!isBrowser) {
+        return zeroPosition;
+    }
+    if (useWindow) {
+        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 === null || boundingElement === void 0 ? void 0 : 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 var useScrollPosition = function (effect, deps, element, useWindow, wait, boundingElement) {
+    if (deps === void 0) { deps = []; }
+    var position = useRef(getScrollPosition(null, useWindow, boundingElement));
+    var throttleTimeout = null;
+    var callBack = function () {
+        var current = getScrollPosition(element, useWindow, boundingElement);
+        effect(current, position.current);
+        position.current = current;
+        throttleTimeout = null;
+    };
+    useIsomorphicLayoutEffect(function () {
+        var _a;
+        if (!isBrowser) {
+            return undefined;
+        }
+        var handleScroll = function () {
+            if (wait) {
+                if (throttleTimeout === null) {
+                    throttleTimeout = window.setTimeout(callBack, wait);
+                }
+            }
+            else {
+                callBack();
+            }
+        };
+        if (boundingElement) {
+            (_a = boundingElement.current) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", handleScroll, {
+                passive: true,
+            });
+        }
+        else {
+            window.addEventListener("scroll", handleScroll, { passive: true });
+        }
+        return function () {
+            var _a;
+            if (boundingElement) {
+                (_a = boundingElement.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", handleScroll);
+            }
+            else {
+                window.removeEventListener("scroll", handleScroll);
+            }
+            if (throttleTimeout) {
+                clearTimeout(throttleTimeout);
+            }
+        };
+    }, deps);
+};

package/hooks/useScrollTo.d.ts

@@ -0,0 +1 @@
+export declare function useScrollTo(id?: string, offset?: number): void;

package/hooks/useScrollTo.js

@@ -0,0 +1,21 @@
+import { isBrowser } from "@koine/utils";
+import { useHeader } from "../Header/useHeader";
+export function useScrollTo(id, offset) {
+    if (id === void 0) { id = ""; }
+    if (offset === void 0) { offset = 0; }
+    var _a = useHeader(), headerHeight = _a[2];
+    if (!isBrowser) {
+        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);
+}

package/hooks/useTraceUpdate.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @see https://stackoverflow.com/a/51082563/9122820
+ */
+export declare function useTraceUpdate(props: any): void;

package/hooks/useTraceUpdate.js

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from "react";
+/**
+ * @see https://stackoverflow.com/a/51082563/9122820
+ */
+export function useTraceUpdate(props) {
+    var prev = useRef(props);
+    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.log("Changed props:", changedProps);
+        }
+        prev.current = props;
+    });
+}

package/hooks/useUpdateEffect.d.ts

@@ -0,0 +1,5 @@
+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;

package/hooks/useUpdateEffect.js

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

package/hooks/useWindowSize.d.ts

@@ -0,0 +1 @@
+export declare function useWindowSize(): number[];

package/hooks/useWindowSize.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+export function useWindowSize() {
+    var _a = useState([0, 0]), size = _a[0], setSize = _a[1];
+    useEffect(function () {
+        function updateSize() {
+            setSize([window.innerWidth, window.innerHeight]);
+        }
+        window.addEventListener("resize", updateSize);
+        updateSize();
+        return function () { return window.removeEventListener("resize", updateSize); };
+    }, []);
+    return size;
+}

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./shared";

package/index.js

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

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import { LazyProps } from "framer-motion";
+export declare type MotionProviderFeatures = LazyProps["features"];
+export declare 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) => JSX.Element;

package/m/MotionProvider.js

@@ -0,0 +1,39 @@
+import { __assign } from "tslib";
+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, __assign({ features: features }, { children: children }));
+};

package/m/index.d.ts

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

package/m/index.js

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

package/m/lite.d.ts

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

package/m/lite.js

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

package/m/max.d.ts

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

package/m/max.js

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

package/m/package.json

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

package/package.json

@@ -1,25 +1,22 @@
 {
   "name": "@koine/react",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "sideEffects": false,
   "main": "./node/index.js",
   "typings": "./index.d.ts",
   "dependencies": {
     "styled-components": "^5.3.5",
-    "framer-motion": "^6.3.3",
+    "framer-motion": "^6.3.4",
     "react": "^16.8 || ^17 || ^18",
-    "@mui/base": "^5.0.0-alpha.79",
+    "@mui/base": "^5.0.0-alpha.82",
     "react-icons": "^4.3.1",
     "date-fns": "^2.28.0",
     "react-swipeable": "^7.0.0",
-    "@reach/disclosure": "^0.17.0",
     "@tiptap/react": "^2.0.0-beta.109",
-    "@tiptap/starter-kit": "^2.0.0-beta.184",
+    "@tiptap/starter-kit": "^2.0.0-beta.185",
     "yup": "^0.32.11",
-    "react-hook-form": "^7.30.0",
-    "type-fest": "^2.12.2",
-    "react-use": "^17.3.2",
-    "@reach/tabs": "^0.17.0",
+    "react-hook-form": "^7.31.2",
+    "type-fest": "^2.13.0",
     "tslib": "^2.4.0"
   },
   "peerDependencies": {},

package/sc/index.d.ts

@@ -0,0 +1,30 @@
+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.js

@@ -0,0 +1,31 @@
+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

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