@koine/react 2.0.0-beta.76 → 2.0.0-beta.78

package/package.json

@@ -2,8 +2,8 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.76",
-    "@koine/utils": "2.0.0-beta.76"
+    "@koine/dom": "2.0.0-beta.78",
+    "@koine/utils": "2.0.0-beta.78"
   },
   "peerDependencies": {
     "@kuus/yup": "1.0.0-beta.7",
@@ -25,182 +25,170 @@
       "optional": true
     }
   },
-  "module": "./index.js",
-  "type": "module",
-  "main": "./cjs/index.js",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "require": "./cjs/index.js",
-      "import": "./index.js"
-    },
-    "./FaviconTags": {
-      "require": "./cjs/FaviconTags.js",
-      "import": "./FaviconTags.js"
-    },
-    "./Meta": {
-      "require": "./cjs/Meta.js",
-      "import": "./Meta.js"
-    },
-    "./NoJs": {
-      "require": "./cjs/NoJs.js",
-      "import": "./NoJs.js"
-    },
-    "./Polymorphic": {
-      "require": "./cjs/Polymorphic.js",
-      "import": "./Polymorphic.js"
+      "module": "./index.esm.js",
+      "import": "./index.cjs.mjs",
+      "default": "./index.cjs.js"
     },
     "./calendar": {
-      "require": "./cjs/calendar.js",
-      "import": "./calendar.js"
-    },
-    "./calendar/CalendarDaygridCell": {
-      "require": "./cjs/calendar/CalendarDaygridCell.js",
-      "import": "./calendar/CalendarDaygridCell.js"
-    },
-    "./calendar/CalendarDaygridNav": {
-      "require": "./cjs/calendar/CalendarDaygridNav.js",
-      "import": "./calendar/CalendarDaygridNav.js"
-    },
-    "./calendar/CalendarDaygridTable": {
-      "require": "./cjs/calendar/CalendarDaygridTable.js",
-      "import": "./calendar/CalendarDaygridTable.js"
-    },
-    "./calendar/CalendarLegend": {
-      "require": "./cjs/calendar/CalendarLegend.js",
-      "import": "./calendar/CalendarLegend.js"
-    },
-    "./calendar/calendar-api-google": {
-      "require": "./cjs/calendar/calendar-api-google.js",
-      "import": "./calendar/calendar-api-google.js"
-    },
-    "./calendar/types": {
-      "require": "./cjs/calendar/types.js",
-      "import": "./calendar/types.js"
-    },
-    "./calendar/useCalendar": {
-      "require": "./cjs/calendar/useCalendar.js",
-      "import": "./calendar/useCalendar.js"
-    },
-    "./calendar/useDateLocale": {
-      "require": "./cjs/calendar/useDateLocale.js",
-      "import": "./calendar/useDateLocale.js"
-    },
-    "./calendar/utils": {
-      "require": "./cjs/calendar/utils.js",
-      "import": "./calendar/utils.js"
+      "module": "./calendar.esm.js",
+      "import": "./calendar.cjs.mjs",
+      "default": "./calendar.cjs.js"
     },
     "./classed": {
-      "require": "./cjs/classed.js",
-      "import": "./classed.js"
+      "module": "./classed.esm.js",
+      "import": "./classed.cjs.mjs",
+      "default": "./classed.cjs.js"
     },
     "./createUseMediaQueryWidth": {
-      "require": "./cjs/createUseMediaQueryWidth.js",
-      "import": "./createUseMediaQueryWidth.js"
+      "module": "./createUseMediaQueryWidth.esm.js",
+      "import": "./createUseMediaQueryWidth.cjs.mjs",
+      "default": "./createUseMediaQueryWidth.cjs.js"
     },
     "./extendComponent": {
-      "require": "./cjs/extendComponent.js",
-      "import": "./extendComponent.js"
+      "module": "./extendComponent.esm.js",
+      "import": "./extendComponent.cjs.mjs",
+      "default": "./extendComponent.cjs.js"
     },
-    "./forms": {
-      "require": "./cjs/forms.js",
-      "import": "./forms.js"
+    "./FaviconTags": {
+      "module": "./FaviconTags.esm.js",
+      "import": "./FaviconTags.cjs.mjs",
+      "default": "./FaviconTags.cjs.js"
     },
-    "./forms/antispam": {
-      "require": "./cjs/forms/antispam.js",
-      "import": "./forms/antispam.js"
+    "./forms": {
+      "module": "./forms.esm.js",
+      "import": "./forms.cjs.mjs",
+      "default": "./forms.cjs.js"
     },
     "./mergeRefs": {
-      "require": "./cjs/mergeRefs.js",
-      "import": "./mergeRefs.js"
+      "module": "./mergeRefs.esm.js",
+      "import": "./mergeRefs.cjs.mjs",
+      "default": "./mergeRefs.cjs.js"
+    },
+    "./Meta": {
+      "module": "./Meta.esm.js",
+      "import": "./Meta.cjs.mjs",
+      "default": "./Meta.cjs.js"
+    },
+    "./NoJs": {
+      "module": "./NoJs.esm.js",
+      "import": "./NoJs.cjs.mjs",
+      "default": "./NoJs.cjs.js"
+    },
+    "./Polymorphic": {
+      "module": "./Polymorphic.esm.js",
+      "import": "./Polymorphic.cjs.mjs",
+      "default": "./Polymorphic.cjs.js"
     },
     "./types": {
-      "require": "./cjs/types.js",
-      "import": "./types.js"
+      "module": "./types.esm.js",
+      "import": "./types.cjs.mjs",
+      "default": "./types.cjs.js"
     },
     "./useAsyncFn": {
-      "require": "./cjs/useAsyncFn.js",
-      "import": "./useAsyncFn.js"
+      "module": "./useAsyncFn.esm.js",
+      "import": "./useAsyncFn.cjs.mjs",
+      "default": "./useAsyncFn.cjs.js"
     },
     "./useFirstMountState": {
-      "require": "./cjs/useFirstMountState.js",
-      "import": "./useFirstMountState.js"
+      "module": "./useFirstMountState.esm.js",
+      "import": "./useFirstMountState.cjs.mjs",
+      "default": "./useFirstMountState.cjs.js"
     },
     "./useFixedOffset": {
-      "require": "./cjs/useFixedOffset.js",
-      "import": "./useFixedOffset.js"
+      "module": "./useFixedOffset.esm.js",
+      "import": "./useFixedOffset.cjs.mjs",
+      "default": "./useFixedOffset.cjs.js"
     },
     "./useFocus": {
-      "require": "./cjs/useFocus.js",
-      "import": "./useFocus.js"
+      "module": "./useFocus.esm.js",
+      "import": "./useFocus.cjs.mjs",
+      "default": "./useFocus.cjs.js"
     },
     "./useInterval": {
-      "require": "./cjs/useInterval.js",
-      "import": "./useInterval.js"
+      "module": "./useInterval.esm.js",
+      "import": "./useInterval.cjs.mjs",
+      "default": "./useInterval.cjs.js"
     },
     "./useIsomorphicLayoutEffect": {
-      "require": "./cjs/useIsomorphicLayoutEffect.js",
-      "import": "./useIsomorphicLayoutEffect.js"
+      "module": "./useIsomorphicLayoutEffect.esm.js",
+      "import": "./useIsomorphicLayoutEffect.cjs.mjs",
+      "default": "./useIsomorphicLayoutEffect.cjs.js"
     },
     "./useKeyUp": {
-      "require": "./cjs/useKeyUp.js",
-      "import": "./useKeyUp.js"
+      "module": "./useKeyUp.esm.js",
+      "import": "./useKeyUp.cjs.mjs",
+      "default": "./useKeyUp.cjs.js"
     },
     "./useMeasure": {
-      "require": "./cjs/useMeasure.js",
-      "import": "./useMeasure.js"
+      "module": "./useMeasure.esm.js",
+      "import": "./useMeasure.cjs.mjs",
+      "default": "./useMeasure.cjs.js"
     },
     "./useMountedState": {
-      "require": "./cjs/useMountedState.js",
-      "import": "./useMountedState.js"
+      "module": "./useMountedState.esm.js",
+      "import": "./useMountedState.cjs.mjs",
+      "default": "./useMountedState.cjs.js"
     },
     "./useNavigateAway": {
-      "require": "./cjs/useNavigateAway.js",
-      "import": "./useNavigateAway.js"
+      "module": "./useNavigateAway.esm.js",
+      "import": "./useNavigateAway.cjs.mjs",
+      "default": "./useNavigateAway.cjs.js"
     },
     "./usePrevious": {
-      "require": "./cjs/usePrevious.js",
-      "import": "./usePrevious.js"
+      "module": "./usePrevious.esm.js",
+      "import": "./usePrevious.cjs.mjs",
+      "default": "./usePrevious.cjs.js"
     },
     "./usePreviousRef": {
-      "require": "./cjs/usePreviousRef.js",
-      "import": "./usePreviousRef.js"
-    },
-    "./useReveal": {
-      "require": "./cjs/useReveal.js",
-      "import": "./useReveal.js"
+      "module": "./usePreviousRef.esm.js",
+      "import": "./usePreviousRef.cjs.mjs",
+      "default": "./usePreviousRef.cjs.js"
     },
     "./useScrollPosition": {
-      "require": "./cjs/useScrollPosition.js",
-      "import": "./useScrollPosition.js"
+      "module": "./useScrollPosition.esm.js",
+      "import": "./useScrollPosition.cjs.mjs",
+      "default": "./useScrollPosition.cjs.js"
     },
     "./useScrollThreshold": {
-      "require": "./cjs/useScrollThreshold.js",
-      "import": "./useScrollThreshold.js"
+      "module": "./useScrollThreshold.esm.js",
+      "import": "./useScrollThreshold.cjs.mjs",
+      "default": "./useScrollThreshold.cjs.js"
     },
     "./useScrollTo": {
-      "require": "./cjs/useScrollTo.js",
-      "import": "./useScrollTo.js"
+      "module": "./useScrollTo.esm.js",
+      "import": "./useScrollTo.cjs.mjs",
+      "default": "./useScrollTo.cjs.js"
     },
     "./useSmoothScroll": {
-      "require": "./cjs/useSmoothScroll.js",
-      "import": "./useSmoothScroll.js"
+      "module": "./useSmoothScroll.esm.js",
+      "import": "./useSmoothScroll.cjs.mjs",
+      "default": "./useSmoothScroll.cjs.js"
     },
     "./useSpinDelay": {
-      "require": "./cjs/useSpinDelay.js",
-      "import": "./useSpinDelay.js"
+      "module": "./useSpinDelay.esm.js",
+      "import": "./useSpinDelay.cjs.mjs",
+      "default": "./useSpinDelay.cjs.js"
     },
     "./useTraceUpdate": {
-      "require": "./cjs/useTraceUpdate.js",
-      "import": "./useTraceUpdate.js"
+      "module": "./useTraceUpdate.esm.js",
+      "import": "./useTraceUpdate.cjs.mjs",
+      "default": "./useTraceUpdate.cjs.js"
     },
     "./useUpdateEffect": {
-      "require": "./cjs/useUpdateEffect.js",
-      "import": "./useUpdateEffect.js"
+      "module": "./useUpdateEffect.esm.js",
+      "import": "./useUpdateEffect.cjs.mjs",
+      "default": "./useUpdateEffect.cjs.js"
     },
     "./useWindowSize": {
-      "require": "./cjs/useWindowSize.js",
-      "import": "./useWindowSize.js"
+      "module": "./useWindowSize.esm.js",
+      "import": "./useWindowSize.cjs.mjs",
+      "default": "./useWindowSize.cjs.js"
     }
   },
-  "version": "2.0.0-beta.76"
+  "module": "./index.esm.js",
+  "main": "./index.cjs.js",
+  "version": "2.0.0-beta.78"
 }

package/types.cjs.d.ts

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

package/types.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./types.cjs.js').default;

package/types.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/types.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './types.cjs.js';
+export { _default as default } from './types.cjs.default.js';

package/types.esm.js

@@ -0,0 +1 @@
+

package/useAsyncFn.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./useAsyncFn";
+export { default } from "./useAsyncFn";

package/useAsyncFn.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./useAsyncFn.cjs.js').default;

package/useAsyncFn.cjs.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var useMountedState = require('./useMountedState.cjs.js');
+
+let useAsyncFn = (fn, deps = [], initialState = { loading: false }) => {
+    const lastCallId = react.useRef(0);
+    const isMounted = useMountedState.useMountedState();
+    const [state, set] = react.useState(initialState);
+    const callback = react.useCallback((...args) => {
+        const callId = ++lastCallId.current;
+        if (!state.loading) {
+            set((prevState) => ({ ...prevState, loading: true }));
+        }
+        return fn(...args).then((value) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ value, loading: false });
+            return value;
+        }, (error) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ error, loading: false });
+            return error;
+        });
+    }, deps);
+    return [state, callback];
+};
+
+exports["default"] = useAsyncFn;
+exports.useAsyncFn = useAsyncFn;

package/useAsyncFn.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useAsyncFn.cjs.js';
+export { _default as default } from './useAsyncFn.cjs.default.js';

package/useAsyncFn.esm.js

@@ -0,0 +1,28 @@
+import { useRef, useState, useCallback } from 'react';
+import { useMountedState } from './useMountedState.esm.js';
+
+let useAsyncFn = (fn, deps = [], initialState = { loading: false }) => {
+    const lastCallId = useRef(0);
+    const isMounted = useMountedState();
+    const [state, set] = useState(initialState);
+    const callback = useCallback((...args) => {
+        const callId = ++lastCallId.current;
+        if (!state.loading) {
+            set((prevState) => ({ ...prevState, loading: true }));
+        }
+        return fn(...args).then((value) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ value, loading: false });
+            return value;
+        }, (error) => {
+            isMounted() &&
+                callId === lastCallId.current &&
+                set({ error, loading: false });
+            return error;
+        });
+    }, deps);
+    return [state, callback];
+};
+
+export { useAsyncFn as default, useAsyncFn };

package/useFirstMountState.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./useFirstMountState";
+export { default } from "./useFirstMountState";

package/useFirstMountState.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./useFirstMountState.cjs.js').default;

package/useFirstMountState.cjs.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+let useFirstMountState = () => {
+    const isFirst = react.useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+};
+
+exports["default"] = useFirstMountState;
+exports.useFirstMountState = useFirstMountState;

package/useFirstMountState.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useFirstMountState.cjs.js';
+export { _default as default } from './useFirstMountState.cjs.default.js';

package/useFirstMountState.esm.js

@@ -0,0 +1,12 @@
+import { useRef } from 'react';
+
+let useFirstMountState = () => {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+};
+
+export { useFirstMountState as default, useFirstMountState };

package/useFixedOffset.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./useFixedOffset";
+export { default } from "./useFixedOffset";

package/useFixedOffset.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./useFixedOffset.cjs.js').default;

package/useFixedOffset.cjs.js

@@ -0,0 +1,49 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var utils = require('@koine/utils');
+var dom = require('@koine/dom');
+var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
+
+const inject = (value) => {
+    dom.injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
+};
+let useFixedOffset = (selector) => {
+    const fixedOffset = react.useRef(0);
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+        const update = () => {
+            const newFixedOffset = dom.calculateFixedOffset();
+            fixedOffset.current = newFixedOffset;
+            inject(newFixedOffset);
+        };
+        update();
+        if (ResizeObserver) {
+            const observer = new ResizeObserver((entries) => {
+                let newFixedOffset = 0;
+                entries.forEach((entry) => {
+                    newFixedOffset += entry.contentRect.height;
+                });
+                fixedOffset.current = newFixedOffset;
+                const updateOnResize = utils.debounce(() => inject(newFixedOffset), 400, true);
+                updateOnResize();
+            });
+            dom.$each(selector || "[data-fixed]", ($el) => {
+                if (observer)
+                    observer.observe($el);
+            });
+            return () => {
+                observer?.disconnect();
+            };
+        }
+        else {
+            const listener = dom.listenResizeDebounced(0, update);
+            return listener;
+        }
+    }, [selector]);
+    return fixedOffset;
+};
+
+exports["default"] = useFixedOffset;
+exports.useFixedOffset = useFixedOffset;

package/useFixedOffset.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useFixedOffset.cjs.js';
+export { _default as default } from './useFixedOffset.cjs.default.js';

package/useFixedOffset.esm.js

@@ -0,0 +1,44 @@
+import { useRef } from 'react';
+import { debounce } from '@koine/utils';
+import { $each, listenResizeDebounced, calculateFixedOffset, injectCss } from '@koine/dom';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
+
+const inject = (value) => {
+    injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
+};
+let useFixedOffset = (selector) => {
+    const fixedOffset = useRef(0);
+    useIsomorphicLayoutEffect(() => {
+        const update = () => {
+            const newFixedOffset = calculateFixedOffset();
+            fixedOffset.current = newFixedOffset;
+            inject(newFixedOffset);
+        };
+        update();
+        if (ResizeObserver) {
+            const observer = new ResizeObserver((entries) => {
+                let newFixedOffset = 0;
+                entries.forEach((entry) => {
+                    newFixedOffset += entry.contentRect.height;
+                });
+                fixedOffset.current = newFixedOffset;
+                const updateOnResize = debounce(() => inject(newFixedOffset), 400, true);
+                updateOnResize();
+            });
+            $each(selector || "[data-fixed]", ($el) => {
+                if (observer)
+                    observer.observe($el);
+            });
+            return () => {
+                observer?.disconnect();
+            };
+        }
+        else {
+            const listener = listenResizeDebounced(0, update);
+            return listener;
+        }
+    }, [selector]);
+    return fixedOffset;
+};
+
+export { useFixedOffset as default, useFixedOffset };

package/useFocus.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./useFocus";
+export { default } from "./useFocus";

package/useFocus.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./useFocus.cjs.js').default;

package/useFocus.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+
+let useFocus = () => {
+    const elementRef = react.useRef(null);
+    const setFocus = () => {
+        elementRef.current && elementRef.current.focus();
+    };
+    return [elementRef, setFocus];
+};
+
+exports["default"] = useFocus;
+exports.useFocus = useFocus;

package/useFocus.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useFocus.cjs.js';
+export { _default as default } from './useFocus.cjs.default.js';

package/useFocus.esm.js

@@ -0,0 +1,11 @@
+import { useRef } from 'react';
+
+let useFocus = () => {
+    const elementRef = useRef(null);
+    const setFocus = () => {
+        elementRef.current && elementRef.current.focus();
+    };
+    return [elementRef, setFocus];
+};
+
+export { useFocus as default, useFocus };

package/useInterval.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "./useInterval";
+export { default } from "./useInterval";

package/useInterval.cjs.default.js

@@ -0,0 +1 @@
+exports._default = require('./useInterval.cjs.js').default;

package/useInterval.cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var utils = require('@koine/utils');
+
+let useInterval = (callback, delay, deps = []) => {
+    const savedCallback = react.useRef();
+    react.useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback, ...deps]);
+    react.useEffect(() => {
+        function tick() {
+            if (savedCallback.current)
+                savedCallback.current();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+        return utils.noop;
+    }, [delay]);
+};
+
+exports["default"] = useInterval;
+exports.useInterval = useInterval;

package/useInterval.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './useInterval.cjs.js';
+export { _default as default } from './useInterval.cjs.default.js';

package/useInterval.esm.js

@@ -0,0 +1,22 @@
+import { useRef, useEffect } from 'react';
+import { noop } from '@koine/utils';
+
+let useInterval = (callback, delay, deps = []) => {
+    const savedCallback = useRef();
+    useEffect(() => {
+        savedCallback.current = callback;
+    }, [callback, ...deps]);
+    useEffect(() => {
+        function tick() {
+            if (savedCallback.current)
+                savedCallback.current();
+        }
+        if (delay !== null) {
+            const id = setInterval(tick, delay);
+            return () => clearInterval(id);
+        }
+        return noop;
+    }, [delay]);
+};
+
+export { useInterval as default, useInterval };