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

package/helpers/createUseMediaQueryWidth.mjs

@@ -1,18 +1,17 @@
 import { useState } from "react";
-import isUndefined from "@koine/utils/isUndefined";
 import getMediaQueryWidthResolvers from "@koine/utils/getMediaQueryWidthResolvers";
+import isUndefined from "@koine/utils/isUndefined";
 import useIsomorphicLayoutEffect from "../hooks/useIsomorphicLayoutEffect";
 /**
  * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
  *
  * @param customBreakpoints
  * @returns
- */
-export function createUseMediaQueryWidth(customBreakpoints) {
-    var queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
+ */ export function createUseMediaQueryWidth(customBreakpoints) {
+    const queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
     return function useMediaQueryWidth(media, serverValue) {
-        var definition = media.substring(1);
-        var _a = definition.split("-"), rule = _a[0], ruleBreakpoint = _a[1];
+        const definition = media.substring(1);
+        let [rule, ruleBreakpoint] = definition.split("-");
         if (isUndefined(ruleBreakpoint)) {
             ruleBreakpoint = rule;
         }
@@ -24,12 +23,12 @@ export function createUseMediaQueryWidth(customBreakpoints) {
         //   typeof ruleBreakpoint,
         //   "-"
         // >;
-        var _b = ruleBreakpoint.split("_"), br1 = _b[0], br2 = _b[1];
-        var query = queryResolvers[rule](br1, br2);
-        var _c = useState(isUndefined(serverValue) ? null : serverValue), matches = _c[0], setMatches = _c[1];
-        useIsomorphicLayoutEffect(function () {
-            var mq = window.matchMedia(query);
-            var handleChange = function (event) {
+        const [br1, br2] = ruleBreakpoint.split("_");
+        const query = queryResolvers[rule](br1, br2);
+        const [matches, setMatches] = useState(isUndefined(serverValue) ? null : serverValue);
+        useIsomorphicLayoutEffect(()=>{
+            const mq = window.matchMedia(query);
+            const handleChange = (event)=>{
                 setMatches(event.matches);
             };
             setMatches(mq.matches);
@@ -39,140 +38,141 @@ export function createUseMediaQueryWidth(customBreakpoints) {
                 // Update the state whenever the media query match state changes
                 mq.addListener(handleChange);
                 // Clean up on unmount and if the query changes
-                return function () {
+                return ()=>{
                     mq.removeListener(handleChange);
                 };
             }
             mq.addEventListener("change", handleChange);
-            return function () {
+            return ()=>{
                 mq.removeEventListener("change", handleChange);
             };
-        }, [query]);
+        }, [
+            query
+        ]);
         return matches;
     };
 }
-export default createUseMediaQueryWidth;
-//// without creator it would be:
-//// ---------------------------------------------------------------------------
-// import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
-// import type { Split } from "@koine/utils";
-// import isBrowser from "@koine/utils/isBrowser";
-// import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
-// import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
-// type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
-// type Breakpoints = Record<Breakpoint, number>;
-// type MediaQuery =
-//   | `max:${Breakpoint}`
-//   | `min:${Breakpoint}`
-//   | `down:${Breakpoint}`
-//   | `up:${Breakpoint}`
-//   | `between:${Breakpoint}-${Breakpoint}`
-//   | `only:${Breakpoint}`;
-// const breakpoints: Breakpoints = {
-//   xs: 0,
-//   ...themeBreakpoints,
-// };
-// const sortedBreakpointsNames = (
-//   Object.keys(breakpoints).map((key) => {
-//     const br = key as keyof typeof breakpoints;
-//     return [br, breakpoints[br]];
-//   }) as [Breakpoint, number][]
-// )
-//   .sort((a, b) => a[1] - b[1])
-//   .map((item) => item[0]);
-// const getNextBreakpoint = (breakpoint: Breakpoint) => {
-//   const index = sortedBreakpointsNames.indexOf(breakpoint);
-//   return sortedBreakpointsNames[index + 1];
-// };
-// /**
-//  * It behaves the same as `(min-width: ${value}px)`
-//  * where value is the given breakpoint value.
-//  * For ease of use this can be used both as a function `min("md")` and as an
-//  * object literal `min.md`.
-//  */
-// const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
-// /**
-//  * It behaves the same as `(max-width: ${value}px)`
-//  * where value is the given breakpoint value.
-//  * For ease of use this can be used both as a function `max("md")` and as an
-//  * object literal `max.md`.
-//  */
-// const max = (br: Breakpoint) => `(max-width: ${breakpoints[br] - 0.02}px)`;
-// /**
-//  * It behaves the same as `min`
-//  * @inheritdoc {max}
-//  */
-// const up = min;
-// /**
-//  * It behaves similarly to `max` but you will use the "next" breakpoint,
-//  * specifying CSS that will apply from the given breakpoint and down.
-//  */
-// const down = (br: Breakpoint) => {
-//   const brNext = getNextBreakpoint(br);
-//   // TODO: if br does not exists otherwise throw Error
-//   return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
-// };
-// /**
-//  * Media query between the two given breakpoints
-//  */
-// const between = (br1: Breakpoint, br2?: Breakpoint) => {
-//   return br2
-//     ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
-//         breakpoints[br2] - 0.02
-//       }px)`
-//     : min(br1);
-// };
-// /**
-//  * Media query to apply from the given breakpoint until the next, just for its
-//  * full range
-//  */
-// const only = (br: Breakpoint) => {
-//   const brNext = getNextBreakpoint(br);
-//   return brNext ? between(br, brNext) : min(br);
-// };
-// const queryResolvers = {
-//   max,
-//   min,
-//   down,
-//   up,
-//   between,
-//   only,
-// };
-// export function useMqWidth(media: MediaQuery) {
-//   const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
-//     MediaQuery,
-//     ":"
-//   >;
-//   const [br1, br2] = ruleBreakpoint.split("-") as Split<
-//     typeof ruleBreakpoint,
-//     "-"
-//   >;
-//   const query = queryResolvers[rule](br1, br2);
-//   const mq = useMemo(
-//     () => (isBrowser ? window.matchMedia(query) : { matches: false }),
-//     [query]
-//   );
-//   const [matches, setMatches] = useState(mq.matches);
-//   useIsomorphicLayoutEffect(() => {
-//     const mq = window.matchMedia(query);
-//     const handleChange = (event: MediaQueryListEvent) => {
-//       setMatches(event.matches);
-//     };
-//     setMatches(mq.matches);
-//     // Safari < 14 can't use addEventListener on a MediaQueryList
-//     // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
-//     if (!mq.addEventListener) {
-//       // Update the state whenever the media query match state changes
-//       mq.addListener(handleChange);
-//       // Clean up on unmount and if the query changes
-//       return () => {
-//         mq.removeListener(handleChange);
-//       };
-//     }
-//     mq.addEventListener("change", handleChange);
-//     return () => {
-//       mq.removeEventListener("change", handleChange);
-//     };
-//   }, [query]);
-//   return matches;
-// }
+export default createUseMediaQueryWidth; //// without creator it would be:
+ //// ---------------------------------------------------------------------------
+ // import { useState, useIsomorphicLayoutEffect, useMemo } from "react";
+ // import type { Split } from "@koine/utils";
+ // import isBrowser from "@koine/utils/isBrowser";
+ // import { breakpoints as themeBreakpoints } from "@/config/theme/breakpoints";
+ // import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect"
+ // type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+ // type Breakpoints = Record<Breakpoint, number>;
+ // type MediaQuery =
+ //   | `max:${Breakpoint}`
+ //   | `min:${Breakpoint}`
+ //   | `down:${Breakpoint}`
+ //   | `up:${Breakpoint}`
+ //   | `between:${Breakpoint}-${Breakpoint}`
+ //   | `only:${Breakpoint}`;
+ // const breakpoints: Breakpoints = {
+ //   xs: 0,
+ //   ...themeBreakpoints,
+ // };
+ // const sortedBreakpointsNames = (
+ //   Object.keys(breakpoints).map((key) => {
+ //     const br = key as keyof typeof breakpoints;
+ //     return [br, breakpoints[br]];
+ //   }) as [Breakpoint, number][]
+ // )
+ //   .sort((a, b) => a[1] - b[1])
+ //   .map((item) => item[0]);
+ // const getNextBreakpoint = (breakpoint: Breakpoint) => {
+ //   const index = sortedBreakpointsNames.indexOf(breakpoint);
+ //   return sortedBreakpointsNames[index + 1];
+ // };
+ // /**
+ //  * It behaves the same as `(min-width: ${value}px)`
+ //  * where value is the given breakpoint value.
+ //  * For ease of use this can be used both as a function `min("md")` and as an
+ //  * object literal `min.md`.
+ //  */
+ // const min = (br: Breakpoint) => `(min-width: ${breakpoints[br]}px)`;
+ // /**
+ //  * It behaves the same as `(max-width: ${value}px)`
+ //  * where value is the given breakpoint value.
+ //  * For ease of use this can be used both as a function `max("md")` and as an
+ //  * object literal `max.md`.
+ //  */
+ // const max = (br: Breakpoint) => `(max-width: ${breakpoints[br] - 0.02}px)`;
+ // /**
+ //  * It behaves the same as `min`
+ //  * @inheritdoc {max}
+ //  */
+ // const up = min;
+ // /**
+ //  * It behaves similarly to `max` but you will use the "next" breakpoint,
+ //  * specifying CSS that will apply from the given breakpoint and down.
+ //  */
+ // const down = (br: Breakpoint) => {
+ //   const brNext = getNextBreakpoint(br);
+ //   // TODO: if br does not exists otherwise throw Error
+ //   return brNext && `(max-width: ${breakpoints[brNext] - 0.02}px)`;
+ // };
+ // /**
+ //  * Media query between the two given breakpoints
+ //  */
+ // const between = (br1: Breakpoint, br2?: Breakpoint) => {
+ //   return br2
+ //     ? `(min-width: ${breakpoints[br1]}px) and (max-width: ${
+ //         breakpoints[br2] - 0.02
+ //       }px)`
+ //     : min(br1);
+ // };
+ // /**
+ //  * Media query to apply from the given breakpoint until the next, just for its
+ //  * full range
+ //  */
+ // const only = (br: Breakpoint) => {
+ //   const brNext = getNextBreakpoint(br);
+ //   return brNext ? between(br, brNext) : min(br);
+ // };
+ // const queryResolvers = {
+ //   max,
+ //   min,
+ //   down,
+ //   up,
+ //   between,
+ //   only,
+ // };
+ // export function useMqWidth(media: MediaQuery) {
+ //   const [rule = "min", ruleBreakpoint] = media.split(":") as Split<
+ //     MediaQuery,
+ //     ":"
+ //   >;
+ //   const [br1, br2] = ruleBreakpoint.split("-") as Split<
+ //     typeof ruleBreakpoint,
+ //     "-"
+ //   >;
+ //   const query = queryResolvers[rule](br1, br2);
+ //   const mq = useMemo(
+ //     () => (isBrowser ? window.matchMedia(query) : { matches: false }),
+ //     [query]
+ //   );
+ //   const [matches, setMatches] = useState(mq.matches);
+ //   useIsomorphicLayoutEffect(() => {
+ //     const mq = window.matchMedia(query);
+ //     const handleChange = (event: MediaQueryListEvent) => {
+ //       setMatches(event.matches);
+ //     };
+ //     setMatches(mq.matches);
+ //     // Safari < 14 can't use addEventListener on a MediaQueryList
+ //     // https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+ //     if (!mq.addEventListener) {
+ //       // Update the state whenever the media query match state changes
+ //       mq.addListener(handleChange);
+ //       // Clean up on unmount and if the query changes
+ //       return () => {
+ //         mq.removeListener(handleChange);
+ //       };
+ //     }
+ //     mq.addEventListener("change", handleChange);
+ //     return () => {
+ //       mq.removeEventListener("change", handleChange);
+ //     };
+ //   }, [query]);
+ //   return matches;
+ // }

package/helpers/extend-component.mjs

@@ -1,13 +1,13 @@
-import { __assign } from "tslib";
-import { createElement } from "react";
-export var extendComponent = function (component, defaultProps) {
+import React, { createElement } from "react";
+export const extendComponent = (component, defaultProps)=>{
     // FIXME: check if we need to forwardRef or not
-    var NewComponent = function (props) {
-        return createElement(component, props);
-    };
+    const NewComponent = (props)=>createElement(component, props);
     // const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
     //   (props, ref) => createElement(component, { ...props, ref })
     // );
-    return Object.assign(NewComponent, __assign(__assign({}, defaultProps), { defaultProps: defaultProps }));
+    return Object.assign(NewComponent, {
+        ...defaultProps,
+        defaultProps
+    });
 };
 export default extendComponent;

package/helpers/mergeRefs.mjs

@@ -1,10 +1,9 @@
 export function mergeRefs(refs) {
-    return function (value) {
-        refs.forEach(function (ref) {
+    return (value)=>{
+        refs.forEach((ref)=>{
             if (typeof ref === "function") {
                 ref(value);
-            }
-            else if (ref != null) {
+            } else if (ref != null) {
                 ref.current = value;
             }
         });

package/hooks/index.mjs

@@ -1,4 +1,4 @@
-export { useAsyncFn, } from "./useAsyncFn";
+export { useAsyncFn } from "./useAsyncFn";
 export { useDateLocale } from "./useDateLocale";
 export { useFirstMountState } from "./useFirstMountState";
 export { useFixedOffset } from "./useFixedOffset";
@@ -6,9 +6,9 @@ export { useFocus } from "./useFocus";
 export { useInterval } from "./useInterval";
 export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 export { useKeyUp } from "./useKeyUp";
-export { useMeasure, } from "./useMeasure";
+export { useMeasure } from "./useMeasure";
 export { useMountedState } from "./useMountedState";
-export { useNavigateAway, } from "./useNavigateAway";
+export { useNavigateAway } from "./useNavigateAway";
 export { usePrevious } from "./usePrevious";
 export { usePreviousRef } from "./usePreviousRef";
 export { useScrollPosition } from "./useScrollPosition";

package/hooks/types.mjs

@@ -1 +1,3 @@
-export {};
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/misc/types.ts)
+ */ export { };

package/hooks/useAsyncFn.mjs

@@ -1,37 +1,39 @@
-import { __assign } from "tslib";
-import { useCallback, useRef, useState } from "react";
+import React, { 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;
+ */ export function 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(function (prevState) { return (__assign(__assign({}, prevState), { loading: true })); });
+            set((prevState)=>({
+                    ...prevState,
+                    loading: true
+                }));
         }
-        return fn.apply(void 0, args).then(function (value) {
-            isMounted() &&
-                callId === lastCallId.current &&
-                set({ value: value, loading: false });
+        return fn(...args).then((value)=>{
+            isMounted() && callId === lastCallId.current && set({
+                value,
+                loading: false
+            });
             return value;
-        }, function (error) {
-            isMounted() &&
-                callId === lastCallId.current &&
-                set({ error: error, loading: false });
+        }, (error)=>{
+            isMounted() && callId === lastCallId.current && set({
+                error,
+                loading: false
+            });
             return error;
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);
-    return [state, callback];
+    return [
+        state,
+        callback
+    ];
 }
 export default useAsyncFn;

package/hooks/useDateLocale.mjs

@@ -1,37 +1,37 @@
-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];
+ */ export function useDateLocale(locale, defaultLocale = "en") {
+    const [data, setData] = useState();
+    const [current, setCurrent] = useState(defaultLocale);
     // 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("date-fns/locale/en-US/index.js")];
-                    case 1:
-                        localeToSet = _a.sent();
-                        setCurrent(locale || current);
-                        setData(localeToSet.default);
-                        return [2 /*return*/];
-                }
-            });
-        }); };
+    useEffect(()=>{
+        const importLocaleFile = async ()=>{
+            // This webpack option stops all of the date-fns files being imported and chunked.
+            // NB: this makes unnecessary numerous webpack chunks in applications
+            // that do not even use this hook, so we comment out the webpack dynamic
+            // import and its magic comment
+            // const localeToSet = await import(
+            //   /FIXME: * webpackMode: "lazy", webpackChunkName: "df-[index]", webpackExclude: /_lib/ */
+            //   `date-fns/locale/${locale}/index.js`,
+            // );
+            const localeToSet = await import(`date-fns/locale/en-US/index.js`);
+            setCurrent(locale || current);
+            setData(localeToSet.default);
+        // setReady(true);
+        };
         // If the locale has not yet been loaded.
         if (locale !== current) {
             importLocaleFile();
         }
-    }, [locale, current]);
+    }, [
+        locale,
+        current
+    ]);
     return data;
 }
 export default useDateLocale;

package/hooks/useFirstMountState.mjs

@@ -1,9 +1,8 @@
 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);
+ */ export function useFirstMountState() {
+    const isFirst = useRef(true);
     if (isFirst.current) {
         isFirst.current = false;
         return true;

package/hooks/useFixedOffset.mjs

@@ -1,12 +1,12 @@
 import { useRef } from "react";
-import injectCss from "@koine/dom/injectCss";
+import debounce from "@koine/utils/debounce";
+import $each from "@koine/dom/$each";
 import calculateFixedOffset from "@koine/dom/calculateFixedOffset";
+import injectCss from "@koine/dom/injectCss";
 import listenResizeDebounced from "@koine/dom/listenResizeDebounced";
-import $each from "@koine/dom/$each";
-import debounce from "@koine/utils/debounce";
 import useIsomorphicLayoutEffect from "./useIsomorphicLayoutEffect";
-var inject = function (value) {
-    injectCss("useFixedOffset", "html{scroll-padding-top: ".concat(value, "px}"));
+const inject = (value)=>{
+    injectCss("useFixedOffset", `html{scroll-padding-top: ${value}px}`);
 };
 /**
  * # Use fixed offset
@@ -16,12 +16,11 @@ var inject = function (value) {
  * @see https://web.dev/resize-observer/
  *
  * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */
-export function useFixedOffset(selector) {
-    var fixedOffset = useRef(0);
-    useIsomorphicLayoutEffect(function () {
-        var update = function () {
-            var newFixedOffset = calculateFixedOffset();
+ */ export function useFixedOffset(selector) {
+    const fixedOffset = useRef(0);
+    useIsomorphicLayoutEffect(()=>{
+        const update = ()=>{
+            const newFixedOffset = calculateFixedOffset();
             fixedOffset.current = newFixedOffset;
             // inject this CSS make the hashed deeplinks position the scroll at the
             // right offset
@@ -30,28 +29,28 @@ export function useFixedOffset(selector) {
         update();
         if (ResizeObserver) {
             // const elements = $$("[data-fixed]");
-            var observer_1 = new ResizeObserver(function (entries) {
-                var newFixedOffset = 0;
-                entries.forEach(function (entry) {
+            const observer = new ResizeObserver((entries)=>{
+                let newFixedOffset = 0;
+                entries.forEach((entry)=>{
                     newFixedOffset += entry.contentRect.height;
                 });
                 fixedOffset.current = newFixedOffset;
-                var updateOnResize = debounce(function () { return inject(newFixedOffset); }, 400, true);
+                const updateOnResize = debounce(()=>inject(newFixedOffset), 400, true);
                 updateOnResize();
             });
-            $each(selector || "[data-fixed]", function ($el) {
-                if (observer_1)
-                    observer_1.observe($el);
+            $each(selector || "[data-fixed]", ($el)=>{
+                if (observer) observer.observe($el);
             });
-            return function () {
-                observer_1 === null || observer_1 === void 0 ? void 0 : observer_1.disconnect();
+            return ()=>{
+                observer?.disconnect();
             };
-        }
-        else {
-            var listener = listenResizeDebounced(0, update);
+        } else {
+            const listener = listenResizeDebounced(0, update);
             return listener;
         }
-    }, [selector]);
+    }, [
+        selector
+    ]);
     return fixedOffset;
 }
 export default useFixedOffset;

package/hooks/useFocus.mjs

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