@koine/react 2.0.0-beta.7 → 2.0.0-beta.70

package/helpers/createUseMediaQueryWidth.mjs

@@ -1,178 +0,0 @@
-import { useState } from "react";
-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) {
-    const queryResolvers = getMediaQueryWidthResolvers(customBreakpoints);
-    return function useMediaQueryWidth(media, serverValue) {
-        const definition = media.substring(1);
-        let [rule, ruleBreakpoint] = definition.split("-");
-        if (isUndefined(ruleBreakpoint)) {
-            ruleBreakpoint = rule;
-        }
-        if (isUndefined(rule)) {
-            rule = "min";
-        }
-        // with the hook creator approach these breakpoint types cannot be deduced
-        // const [br1, br2] = ruleBreakpoint.split("-") as Split<
-        //   typeof ruleBreakpoint,
-        //   "-"
-        // >;
-        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);
-            // 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.js

@@ -1,32 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    extendComponent: function() {
-        return extendComponent;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const extendComponent = (component, defaultProps)=>{
-    // FIXME: check if we need to forwardRef or not
-    const NewComponent = (props)=>(0, _react.createElement)(component, props);
-    // const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
-    //   (props, ref) => createElement(component, { ...props, ref })
-    // );
-    return Object.assign(NewComponent, {
-        ...defaultProps,
-        defaultProps
-    });
-};
-const _default = extendComponent;

package/helpers/extend-component.mjs

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

package/helpers/index.d.ts

@@ -1,4 +0,0 @@
-export * from "./classed";
-export * from "./createUseMediaQueryWidth";
-export * from "./extend-component";
-export * from "./mergeRefs";

package/helpers/index.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-const _export_star = require("@swc/helpers/_/_export_star");
-_export_star._(require("./classed"), exports);
-_export_star._(require("./createUseMediaQueryWidth"), exports);
-_export_star._(require("./extend-component"), exports);
-_export_star._(require("./mergeRefs"), exports);

package/helpers/index.mjs

@@ -1,4 +0,0 @@
-export * from "./classed";
-export * from "./createUseMediaQueryWidth";
-export * from "./extend-component";
-export * from "./mergeRefs";

package/helpers/mergeRefs.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare function mergeRefs<T = Element>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>): React.RefCallback<T>;
-export default mergeRefs;

package/helpers/mergeRefs.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    mergeRefs: function() {
-        return mergeRefs;
-    },
-    default: function() {
-        return _default;
-    }
-});
-function mergeRefs(refs) {
-    return (value)=>{
-        refs.forEach((ref)=>{
-            if (typeof ref === "function") {
-                ref(value);
-            } else if (ref != null) {
-                ref.current = value;
-            }
-        });
-    };
-}
-const _default = mergeRefs;

package/helpers/mergeRefs.mjs

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

package/hooks/index.js

@@ -1,92 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useAsyncFn: function() {
-        return _useAsyncFn.useAsyncFn;
-    },
-    useDateLocale: function() {
-        return _useDateLocale.useDateLocale;
-    },
-    useFirstMountState: function() {
-        return _useFirstMountState.useFirstMountState;
-    },
-    useFixedOffset: function() {
-        return _useFixedOffset.useFixedOffset;
-    },
-    useFocus: function() {
-        return _useFocus.useFocus;
-    },
-    useInterval: function() {
-        return _useInterval.useInterval;
-    },
-    useIsomorphicLayoutEffect: function() {
-        return _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect;
-    },
-    useKeyUp: function() {
-        return _useKeyUp.useKeyUp;
-    },
-    useMeasure: function() {
-        return _useMeasure.useMeasure;
-    },
-    useMountedState: function() {
-        return _useMountedState.useMountedState;
-    },
-    useNavigateAway: function() {
-        return _useNavigateAway.useNavigateAway;
-    },
-    usePrevious: function() {
-        return _usePrevious.usePrevious;
-    },
-    usePreviousRef: function() {
-        return _usePreviousRef.usePreviousRef;
-    },
-    useScrollPosition: function() {
-        return _useScrollPosition.useScrollPosition;
-    },
-    useScrollThreshold: function() {
-        return _useScrollThreshold.useScrollThreshold;
-    },
-    useSmoothScroll: function() {
-        return _useSmoothScroll.useSmoothScroll;
-    },
-    useSpinDelay: function() {
-        return _useSpinDelay.useSpinDelay;
-    },
-    useTraceUpdate: function() {
-        return _useTraceUpdate.useTraceUpdate;
-    },
-    useUpdateEffect: function() {
-        return _useUpdateEffect.useUpdateEffect;
-    },
-    useWindowSize: function() {
-        return _useWindowSize.useWindowSize;
-    }
-});
-const _useAsyncFn = require("./useAsyncFn");
-const _useDateLocale = require("./useDateLocale");
-const _useFirstMountState = require("./useFirstMountState");
-const _useFixedOffset = require("./useFixedOffset");
-const _useFocus = require("./useFocus");
-const _useInterval = require("./useInterval");
-const _useIsomorphicLayoutEffect = require("./useIsomorphicLayoutEffect");
-const _useKeyUp = require("./useKeyUp");
-const _useMeasure = require("./useMeasure");
-const _useMountedState = require("./useMountedState");
-const _useNavigateAway = require("./useNavigateAway");
-const _usePrevious = require("./usePrevious");
-const _usePreviousRef = require("./usePreviousRef");
-const _useScrollPosition = require("./useScrollPosition");
-const _useScrollThreshold = require("./useScrollThreshold");
-const _useSmoothScroll = require("./useSmoothScroll");
-const _useSpinDelay = require("./useSpinDelay");
-const _useTraceUpdate = require("./useTraceUpdate");
-const _useUpdateEffect = require("./useUpdateEffect");
-const _useWindowSize = require("./useWindowSize");

package/hooks/index.mjs

@@ -1,21 +0,0 @@
-export { useAsyncFn } from "./useAsyncFn";
-export { useDateLocale } from "./useDateLocale";
-export { useFirstMountState } from "./useFirstMountState";
-export { useFixedOffset } from "./useFixedOffset";
-export { useFocus } from "./useFocus";
-export { useInterval } from "./useInterval";
-export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
-export { useKeyUp } from "./useKeyUp";
-export { useMeasure } from "./useMeasure";
-export { useMountedState } from "./useMountedState";
-export { useNavigateAway } from "./useNavigateAway";
-export { usePrevious } from "./usePrevious";
-export { usePreviousRef } from "./usePreviousRef";
-export { useScrollPosition } from "./useScrollPosition";
-export { useScrollThreshold } from "./useScrollThreshold";
-// export { useScrollTo } from "./useScrollTo";
-export { useSmoothScroll } from "./useSmoothScroll";
-export { useSpinDelay } from "./useSpinDelay";
-export { useTraceUpdate } from "./useTraceUpdate";
-export { useUpdateEffect } from "./useUpdateEffect";
-export { useWindowSize } from "./useWindowSize";

package/hooks/types.d.ts

@@ -1,8 +0,0 @@
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/misc/types.ts)
- */
-export type PromiseType<P extends Promise<any>> = P extends Promise<infer T> ? T : never;
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/misc/types.ts)
- */
-export type FunctionReturningPromise = (...args: any[]) => Promise<any>;

package/hooks/types.js

@@ -1,6 +0,0 @@
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/misc/types.ts)
- */ "use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});

package/hooks/types.mjs

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

package/hooks/useAsyncFn.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useAsyncFn: function() {
-        return useAsyncFn;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _useMountedState = require("./useMountedState");
-function useAsyncFn(fn, deps = [], initialState = {
-    loading: false
-}) {
-    const lastCallId = (0, _react.useRef)(0);
-    const isMounted = (0, _useMountedState.useMountedState)();
-    const [state, set] = (0, _react.useState)(initialState);
-    const callback = (0, _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;
-        });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-    return [
-        state,
-        callback
-    ];
-}
-const _default = useAsyncFn;

package/hooks/useAsyncFn.mjs

@@ -1,39 +0,0 @@
-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 = {
-    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;
-        });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, deps);
-    return [
-        state,
-        callback
-    ];
-}
-export default useAsyncFn;

package/hooks/useDateLocale.d.ts

@@ -1,8 +0,0 @@
-/**
- * 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;
-export default useDateLocale;

package/hooks/useDateLocale.js

@@ -1,51 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useDateLocale: function() {
-        return useDateLocale;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = require("react");
-function useDateLocale(locale, defaultLocale = "en") {
-    const [data, setData] = (0, _react.useState)();
-    const [current, setCurrent] = (0, _react.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.
-    (0, _react.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 Promise.resolve(`date-fns/locale/en-US/index.js`).then((p)=>/*#__PURE__*/ _interop_require_wildcard._(require(p)));
-            setCurrent(locale || current);
-            setData(localeToSet.default);
-        // setReady(true);
-        };
-        // If the locale has not yet been loaded.
-        if (locale !== current) {
-            importLocaleFile();
-        }
-    }, [
-        locale,
-        current
-    ]);
-    return data;
-}
-const _default = useDateLocale;

package/hooks/useDateLocale.mjs

@@ -1,37 +0,0 @@
-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 = "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(()=>{
-        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
-    ]);
-    return data;
-}
-export default useDateLocale;

package/hooks/useFirstMountState.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useFirstMountState: function() {
-        return useFirstMountState;
-    },
-    default: function() {
-        return _default;
-    }
-});
-const _react = require("react");
-function useFirstMountState() {
-    const isFirst = (0, _react.useRef)(true);
-    if (isFirst.current) {
-        isFirst.current = false;
-        return true;
-    }
-    return isFirst.current;
-}
-const _default = useFirstMountState;

package/hooks/useFirstMountState.mjs

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