@koine/react 1.1.11 → 1.1.14

package/hooks/index.d.ts

@@ -1,6 +1,5 @@
 export * from "./useAsyncFn";
 export * from "./useDateLocale";
-export * from "./useEffectOnce";
 export * from "./useFirstMountState";
 export * from "./useFixedOffset";
 export * from "./useFocus";
@@ -8,7 +7,6 @@ export * from "./useInterval";
 export * from "./useIsomorphicLayoutEffect";
 export * from "./useKeyUp";
 export * from "./useMeasure";
-export * from "./useMount";
 export * from "./useMountedState";
 export * from "./useNavigateAway";
 export * from "./usePrevious";
@@ -16,6 +14,7 @@ export * from "./usePreviousRef";
 export * from "./useScrollPosition";
 export * from "./useScrollThreshold";
 export * from "./useSmoothScroll";
+export * from "./useSpinDelay";
 export * from "./useTraceUpdate";
 export * from "./useUpdateEffect";
 export * from "./useWindowSize";

package/hooks/index.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./useAsyncFn"), exports);
 tslib_1.__exportStar(require("./useDateLocale"), exports);
-tslib_1.__exportStar(require("./useEffectOnce"), exports);
 tslib_1.__exportStar(require("./useFirstMountState"), exports);
 tslib_1.__exportStar(require("./useFixedOffset"), exports);
 tslib_1.__exportStar(require("./useFocus"), exports);
@@ -11,7 +10,6 @@ tslib_1.__exportStar(require("./useInterval"), exports);
 tslib_1.__exportStar(require("./useIsomorphicLayoutEffect"), exports);
 tslib_1.__exportStar(require("./useKeyUp"), exports);
 tslib_1.__exportStar(require("./useMeasure"), exports);
-tslib_1.__exportStar(require("./useMount"), exports);
 tslib_1.__exportStar(require("./useMountedState"), exports);
 tslib_1.__exportStar(require("./useNavigateAway"), exports);
 tslib_1.__exportStar(require("./usePrevious"), exports);
@@ -20,6 +18,7 @@ tslib_1.__exportStar(require("./useScrollPosition"), exports);
 tslib_1.__exportStar(require("./useScrollThreshold"), exports);
 // export * from "./useScrollTo";
 tslib_1.__exportStar(require("./useSmoothScroll"), exports);
+tslib_1.__exportStar(require("./useSpinDelay"), exports);
 tslib_1.__exportStar(require("./useTraceUpdate"), exports);
 tslib_1.__exportStar(require("./useUpdateEffect"), exports);
 tslib_1.__exportStar(require("./useWindowSize"), exports);

package/hooks/index.mjs

@@ -1,6 +1,5 @@
 export * from "./useAsyncFn";
 export * from "./useDateLocale";
-export * from "./useEffectOnce";
 export * from "./useFirstMountState";
 export * from "./useFixedOffset";
 export * from "./useFocus";
@@ -8,7 +7,6 @@ export * from "./useInterval";
 export * from "./useIsomorphicLayoutEffect";
 export * from "./useKeyUp";
 export * from "./useMeasure";
-export * from "./useMount";
 export * from "./useMountedState";
 export * from "./useNavigateAway";
 export * from "./usePrevious";
@@ -17,6 +15,7 @@ export * from "./useScrollPosition";
 export * from "./useScrollThreshold";
 // export * from "./useScrollTo";
 export * from "./useSmoothScroll";
+export * from "./useSpinDelay";
 export * from "./useTraceUpdate";
 export * from "./useUpdateEffect";
 export * from "./useWindowSize";

package/hooks/useFocus.js

@@ -6,11 +6,11 @@ var react_1 = require("react");
  * @see https://stackoverflow.com/a/54159564/1938970
  */
 var useFocus = function () {
-    var element = (0, react_1.useRef)(null);
+    var elementRef = (0, react_1.useRef)(null);
     var setFocus = function () {
-        element.current && element.current.focus();
+        elementRef.current && elementRef.current.focus();
     };
-    return [element, setFocus];
+    return [elementRef, setFocus];
 };
 exports.useFocus = useFocus;
 exports.default = exports.useFocus;

package/hooks/useFocus.mjs

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

package/hooks/useIsomorphicLayoutEffect.d.ts

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

package/hooks/useIsomorphicLayoutEffect.js

@@ -5,7 +5,7 @@ var tslib_1 = require("tslib");
 var react_1 = require("react");
 var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
 /**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts)
  */
 exports.useIsomorphicLayoutEffect = isBrowser_1.default
     ? react_1.useLayoutEffect

package/hooks/useIsomorphicLayoutEffect.mjs

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

package/hooks/useSpinDelay.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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

@@ -0,0 +1,54 @@
+"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/useSpinDelay.mjs

@@ -0,0 +1,50 @@
+import { useEffect, useState, useRef } 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, minDuration) {
+    if (delay === void 0) { delay = 500; }
+    if (minDuration === void 0) { minDuration = 200; }
+    var _a = useState(State.IDLE), state = _a[0], setState = _a[1];
+    var timeout = useRef();
+    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]);
+    useEffect(function () {
+        return function () { return clearTimeout(timeout.current); };
+    }, []);
+    return state === State.DISPLAY || state === State.EXPIRE;
+}
+export default useSpinDelay;

package/package.json

@@ -45,29 +45,32 @@
       "optional": true
     }
   },
-  "main": "./index.js",
-  "types": "./index.d.ts",
-  "dependencies": {},
-  "peerDependencies": {
-    "styled-components": "5.3.6",
-    "framer-motion": "8.5.5",
-    "react": "18.2.0",
-    "@mui/base": "5.0.0-alpha.115",
-    "@koine/utils": "1.1.11",
-    "react-icons": "4.7.1",
-    "date-fns": "2.29.3",
-    "react-swipeable": "7.0.0",
-    "clsx": "1.2.1",
-    "ts-debounce": "4.0.0",
-    "type-fest": "3.5.3",
-    "@tiptap/react": "2.0.0-beta.209",
-    "@tiptap/starter-kit": "2.0.0-beta.209",
+  "dependencies": {
     "@kuus/yup": "1.0.0-beta.7",
-    "react-hook-form": "7.42.1",
-    "@mui/utils": "5.11.2",
-    "react-popper": "2.3.0",
-    "tslib": "2.5.0"
+    "@mui/base": "5.0.0-alpha.118",
+    "@mui/utils": "5.11.9",
+    "@tiptap/react": "2.0.0-beta.217",
+    "@tiptap/starter-kit": "2.0.0-beta.217",
+    "clsx": "1.2.1",
+    "date-fns": "^2.29.3",
+    "framer-motion": "^9.0.4",
+    "next": "^13.1.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.1",
+    "react-icons": "^4.7.1",
+    "react-is": "^18.2.0",
+    "react-swipeable": "^7.0.0",
+    "styled-components": "^5.3.6",
+    "ts-debounce": "^4.0.0",
+    "tslib": "^2.5.0",
+    "type-fest": "^3.5.7"
   },
-  "version": "1.1.11",
+  "peerDependencies": {
+    "@koine/utils": "1.1.14"
+  },
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "version": "1.1.14",
   "module": "./index.mjs"
 }

package/styles/theme--vanilla.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export declare const THEME_KEY = "theme";
 export declare const THEME_DEFAULT: ThemeVanillaValue;
-export declare const getInitialThemeFromRequest: (cookie?: string) => ThemeVanillaValue;
 export declare const getInitialThemeFromClient: () => ThemeVanillaValue;
 export type ThemeCookie = {
     [THEME_KEY]: ThemeVanillaValue;

package/styles/theme--vanilla.js

@@ -1,24 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeVanillaProvider = exports.ThemeVanillaContext = exports.getInitialThemeFromClient = exports.getInitialThemeFromRequest = exports.THEME_DEFAULT = exports.THEME_KEY = void 0;
+exports.ThemeVanillaProvider = exports.ThemeVanillaContext = exports.getInitialThemeFromClient = exports.THEME_DEFAULT = exports.THEME_KEY = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var isBrowser_1 = tslib_1.__importDefault(require("@koine/utils/isBrowser"));
-var setCookie_1 = tslib_1.__importDefault(require("@koine/utils/setCookie"));
-var parseCookie_1 = tslib_1.__importDefault(require("@koine/utils/parseCookie"));
-var useMount_1 = tslib_1.__importDefault(require("../hooks/useMount"));
+// import setCookie from "@koine/utils/setCookie";
+// import parseCookie from "@koine/utils/parseCookie";
 var useUpdateEffect_1 = tslib_1.__importDefault(require("../hooks/useUpdateEffect"));
 exports.THEME_KEY = "theme";
 exports.THEME_DEFAULT = "light";
-var getInitialThemeFromRequest = function (cookie) {
-    if (cookie) {
-        var parsed = (0, parseCookie_1.default)(cookie);
-        return parsed === null || parsed === void 0 ? void 0 : parsed.theme;
-    }
-    return exports.THEME_DEFAULT;
-};
-exports.getInitialThemeFromRequest = getInitialThemeFromRequest;
+// export const getInitialThemeFromRequest = (
+//   cookie?: string
+// ): ThemeVanillaValue => {
+//   if (cookie) {
+//     const parsed = parseCookie<ThemeCookie>(cookie);
+//     return parsed?.theme;
+//   }
+//   return THEME_DEFAULT;
+// };
 var getInitialThemeFromClient = function () {
     if (typeof window !== "undefined" && window.localStorage) {
         var storedPrefs = window.localStorage.getItem(exports.THEME_KEY);
@@ -49,13 +49,13 @@ var ThemeVanillaProvider = function (_a) {
         root.classList.remove(isDark ? "light" : "dark");
         root.classList.add(rawTheme);
         localStorage.setItem(exports.THEME_KEY, rawTheme);
-        (0, setCookie_1.default)(exports.THEME_KEY, rawTheme);
+        // setCookie(THEME_KEY, rawTheme);
     };
-    (0, useMount_1.default)(function () {
+    (0, react_1.useEffect)(function () {
         var theme = (0, exports.getInitialThemeFromClient)();
         setTheme(theme);
         rawSetTheme(theme);
-    });
+    }, []);
     (0, useUpdateEffect_1.default)(function () {
         rawSetTheme(theme);
     }, [theme]);

package/styles/theme--vanilla.mjs

@@ -1,20 +1,21 @@
 import { __assign } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useState } from "react";
+import { createContext, useEffect, useState } from "react";
 import isBrowser from "@koine/utils/isBrowser";
-import setCookie from "@koine/utils/setCookie";
-import parseCookie from "@koine/utils/parseCookie";
-import useMount from "../hooks/useMount";
+// import setCookie from "@koine/utils/setCookie";
+// import parseCookie from "@koine/utils/parseCookie";
 import useUpdateEffect from "../hooks/useUpdateEffect";
 export var THEME_KEY = "theme";
 export var THEME_DEFAULT = "light";
-export var getInitialThemeFromRequest = function (cookie) {
-    if (cookie) {
-        var parsed = parseCookie(cookie);
-        return parsed === null || parsed === void 0 ? void 0 : parsed.theme;
-    }
-    return THEME_DEFAULT;
-};
+// export const getInitialThemeFromRequest = (
+//   cookie?: string
+// ): ThemeVanillaValue => {
+//   if (cookie) {
+//     const parsed = parseCookie<ThemeCookie>(cookie);
+//     return parsed?.theme;
+//   }
+//   return THEME_DEFAULT;
+// };
 export var getInitialThemeFromClient = function () {
     if (typeof window !== "undefined" && window.localStorage) {
         var storedPrefs = window.localStorage.getItem(THEME_KEY);
@@ -44,13 +45,13 @@ export var ThemeVanillaProvider = function (_a) {
         root.classList.remove(isDark ? "light" : "dark");
         root.classList.add(rawTheme);
         localStorage.setItem(THEME_KEY, rawTheme);
-        setCookie(THEME_KEY, rawTheme);
+        // setCookie(THEME_KEY, rawTheme);
     };
-    useMount(function () {
+    useEffect(function () {
         var theme = getInitialThemeFromClient();
         setTheme(theme);
         rawSetTheme(theme);
-    });
+    }, []);
     useUpdateEffect(function () {
         rawSetTheme(theme);
     }, [theme]);