@koine/react 2.0.0-beta.80 → 2.0.0-beta.83

package/classed.cjs.js

@@ -4,45 +4,48 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-let classed = (component) => {
-    const type = component.type || component;
-    return function (strings, ...args) {
-        const WrappedComponent = react.forwardRef(function (props, ref) {
-            const argResolved = args
-                .map((arg, index) => {
-                let result = "";
-                if (typeof arg === "function") {
-                    result = arg(props);
-                }
-                else if (typeof arg !== "undefined") {
-                    result = arg.toString();
-                }
-                return strings[index] + result;
-            })
-                .join("");
-            const isNativeHtmlElement = typeof type === "string";
-            const propsToForward = isNativeHtmlElement
-                ? {}
-                : props;
-            if (isNativeHtmlElement) {
-                for (const key in props) {
-                    if (!key.startsWith("$")) {
-                        propsToForward[key] = props[key];
-                    }
-                }
-            }
-            let className = argResolved || strings[0];
-            className = className.match(/class="([^"]*)/)?.[1] || className;
-            className += props?.className ? " " + props?.className : "";
-            return react.createElement(type, {
-                ...propsToForward,
-                className: className || undefined,
-                ref,
-            });
-        });
-        return WrappedComponent;
-    };
-};
+// React.ComponentProps<typeof Component>
+// ? @see https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#props-extracting-prop-types-of-a-component
+// type ClassedComponent<Props = {}> =
+//   | React.ElementType<Props>
+//   | OverridableComponent<any>
+//   | React.Component<Props>
+//   | React.FunctionComponent<Props>
+//   | React.ReactElement<Props>
+//   | React.ReactHTMLElement<any>
+//   | string // | JSX.IntrinsicElements
+//   | ((props: Props) => JSX.Element);
+/**
+ * This utility allows to extend a component a là `styled-components` but for
+ * a className based styling solution like Tailwind,
+ *
+ * It also plays nicely with tailwind intellisense:
+ * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
+ *
+ * For references about tagged functions:
+ * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
+ * - https://makersden.io/blog/reverse-engineering-styled-components
+ * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
+ * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
+ *
+ * Similar projects:
+ * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
+ *
+ * Discussions and Q/A:
+ * - https://stackoverflow.com/q/73055695/1938970
+ */let classed=r=>{// @ts-expect-error nevermind for now...
+let s=r.type||r;return function(r,...a){// FIXME: not sure if this is needed
+// WrappedComponent.displayName = type.toString();
+return /*#__PURE__*/react.forwardRef(// Props
+function(e,n){let o=a.map((t,s)=>{let a="";return "function"==typeof t?a=t(e):void 0!==t&&(a=t.toString()),r[s]+a}).join(""),l="string"==typeof s,i=l?{}:e;if(l)for(let t in e)// like styled-components `transient` props
+t.startsWith("$")||// FIXME: for react 18 we need: @ts-expect-error
+(i[t]=e[t]);// get the tagged function string outcome
+let c=o||r[0];return(// add the custom classes from props
+c=// check if we need to clean it or not from the optional structure `< class="..."`
+(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),/*#__PURE__*/react.createElement(s,{// ...props,
+...i,// only add ot props if it is not an empty string
+className:c||void 0,// add ref to props
+ref:n}))})}};// as unknown as React.ReactElement<typeof props>;
 
 exports.classed = classed;
 exports["default"] = classed;

package/classed.esm.js

@@ -1,43 +1,46 @@
 import { forwardRef, createElement } from 'react';
 
-let classed = (component) => {
-    const type = component.type || component;
-    return function (strings, ...args) {
-        const WrappedComponent = forwardRef(function (props, ref) {
-            const argResolved = args
-                .map((arg, index) => {
-                let result = "";
-                if (typeof arg === "function") {
-                    result = arg(props);
-                }
-                else if (typeof arg !== "undefined") {
-                    result = arg.toString();
-                }
-                return strings[index] + result;
-            })
-                .join("");
-            const isNativeHtmlElement = typeof type === "string";
-            const propsToForward = isNativeHtmlElement
-                ? {}
-                : props;
-            if (isNativeHtmlElement) {
-                for (const key in props) {
-                    if (!key.startsWith("$")) {
-                        propsToForward[key] = props[key];
-                    }
-                }
-            }
-            let className = argResolved || strings[0];
-            className = className.match(/class="([^"]*)/)?.[1] || className;
-            className += props?.className ? " " + props?.className : "";
-            return createElement(type, {
-                ...propsToForward,
-                className: className || undefined,
-                ref,
-            });
-        });
-        return WrappedComponent;
-    };
-};
+// React.ComponentProps<typeof Component>
+// ? @see https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase/#props-extracting-prop-types-of-a-component
+// type ClassedComponent<Props = {}> =
+//   | React.ElementType<Props>
+//   | OverridableComponent<any>
+//   | React.Component<Props>
+//   | React.FunctionComponent<Props>
+//   | React.ReactElement<Props>
+//   | React.ReactHTMLElement<any>
+//   | string // | JSX.IntrinsicElements
+//   | ((props: Props) => JSX.Element);
+/**
+ * This utility allows to extend a component a là `styled-components` but for
+ * a className based styling solution like Tailwind,
+ *
+ * It also plays nicely with tailwind intellisense:
+ * - https://github.com/tailwindlabs/tailwindcss-intellisense#tailwindcssclassattributes
+ *
+ * For references about tagged functions:
+ * - https://javascript.plainenglish.io/how-css-in-js-libraries-work-da4145b1b6c7
+ * - https://makersden.io/blog/reverse-engineering-styled-components
+ * - https://typesafe.blog/article/the-logic-behind-javascript-tag-functions
+ * - https://flaming.codes/posts/typescript-and-javascript-tagged-template-strings
+ *
+ * Similar projects:
+ * - https://reactjsexample.com/style-radix-ui-components-with-tailwindcss/
+ *
+ * Discussions and Q/A:
+ * - https://stackoverflow.com/q/73055695/1938970
+ */let classed=r=>{// @ts-expect-error nevermind for now...
+let s=r.type||r;return function(r,...a){// FIXME: not sure if this is needed
+// WrappedComponent.displayName = type.toString();
+return /*#__PURE__*/forwardRef(// Props
+function(e,n){let o=a.map((t,s)=>{let a="";return "function"==typeof t?a=t(e):void 0!==t&&(a=t.toString()),r[s]+a}).join(""),l="string"==typeof s,i=l?{}:e;if(l)for(let t in e)// like styled-components `transient` props
+t.startsWith("$")||// FIXME: for react 18 we need: @ts-expect-error
+(i[t]=e[t]);// get the tagged function string outcome
+let c=o||r[0];return(// add the custom classes from props
+c=// check if we need to clean it or not from the optional structure `< class="..."`
+(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),/*#__PURE__*/createElement(s,{// ...props,
+...i,// only add ot props if it is not an empty string
+className:c||void 0,// add ref to props
+ref:n}))})}};// as unknown as React.ReactElement<typeof props>;
 
 export { classed, classed as default };

package/createUseMediaQueryWidth.cjs.js

@@ -6,40 +6,21 @@ var react = require('react');
 var utils = require('@koine/utils');
 var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
 
-let createUseMediaQueryWidth = (customBreakpoints) => {
-    const queryResolvers = utils.getMediaQueryWidthResolvers(customBreakpoints);
-    return function useMediaQueryWidth(media, serverValue) {
-        const definition = media.substring(1);
-        let [rule, ruleBreakpoint] = definition.split("-");
-        if (utils.isUndefined(ruleBreakpoint)) {
-            ruleBreakpoint = rule;
-        }
-        if (utils.isUndefined(rule)) {
-            rule = "min";
-        }
-        const [br1, br2] = ruleBreakpoint.split("_");
-        const query = queryResolvers[rule](br1, br2);
-        const [matches, setMatches] = react.useState(utils.isUndefined(serverValue) ? null : serverValue);
-        useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
-            const mq = window.matchMedia(query);
-            const handleChange = (event) => {
-                setMatches(event.matches);
-            };
-            setMatches(mq.matches);
-            if (!mq.addEventListener) {
-                mq.addListener(handleChange);
-                return () => {
-                    mq.removeListener(handleChange);
-                };
-            }
-            mq.addEventListener("change", handleChange);
-            return () => {
-                mq.removeEventListener("change", handleChange);
-            };
-        }, [query]);
-        return matches;
-    };
-};
+/**
+ * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
+ *
+ * @param customBreakpoints
+ * @returns
+ */let createUseMediaQueryWidth=n=>{let a=utils.getMediaQueryWidthResolvers(n);return function(t,n){let[o,s]=t.substring(1).split("-");utils.isUndefined(s)&&(s=o),utils.isUndefined(o)&&(o="min");// with the hook creator approach these breakpoint types cannot be deduced
+// const [br1, br2] = ruleBreakpoint.split("-") as Split<
+//   typeof ruleBreakpoint,
+//   "-"
+// >;
+let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=react.useState(utils.isUndefined(n)?null:n);return useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return(// Safari < 14 can't use addEventListener on a MediaQueryList
+// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+(l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(// Update the state whenever the media query match state changes
+e.addListener(t),// Clean up on unmount and if the query changes
+()=>{e.removeListener(t);}))},[u]),c}};//// without creator it would be:
 
 exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
 exports["default"] = createUseMediaQueryWidth;

package/createUseMediaQueryWidth.d.ts

@@ -2,5 +2,5 @@ import { type GetMediaQueryWidthResolversBreakpoints } from "@koine/utils";
 type _MediaQuerWidthDefExplicit<TBreakpoint extends string> = `min-${TBreakpoint}` | `max-${TBreakpoint}` | `up-${TBreakpoint}` | `down-${TBreakpoint}` | `between-${TBreakpoint}_${TBreakpoint}` | `only-${TBreakpoint}`;
 export type MediaQuerWidthDef<TBreakpoint extends string> = `${TBreakpoint}` | _MediaQuerWidthDefExplicit<TBreakpoint>;
 export type MediaQueryWidth<TBreakpoint extends string> = `@${MediaQuerWidthDef<TBreakpoint>}`;
-export declare let createUseMediaQueryWidth: <TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig) => <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: `@${TBreakpoints}` | `@min-${TBreakpoints}` | `@max-${TBreakpoints}` | `@up-${TBreakpoints}` | `@down-${TBreakpoints}` | `@between-${TBreakpoints}_${TBreakpoints}` | `@only-${TBreakpoints}`, serverValue?: null | boolean) => boolean | null;
+export declare let createUseMediaQueryWidth: <TBreakpointsConfig extends GetMediaQueryWidthResolversBreakpoints>(customBreakpoints: TBreakpointsConfig) => <TBreakpoints extends Extract<keyof TBreakpointsConfig, string>>(media: MediaQueryWidth<TBreakpoints>, serverValue?: null | boolean) => boolean | null;
 export default createUseMediaQueryWidth;

package/createUseMediaQueryWidth.esm.js

@@ -2,39 +2,20 @@ import { useState } from 'react';
 import { getMediaQueryWidthResolvers, isUndefined } from '@koine/utils';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
 
-let 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";
-        }
-        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);
-            if (!mq.addEventListener) {
-                mq.addListener(handleChange);
-                return () => {
-                    mq.removeListener(handleChange);
-                };
-            }
-            mq.addEventListener("change", handleChange);
-            return () => {
-                mq.removeEventListener("change", handleChange);
-            };
-        }, [query]);
-        return matches;
-    };
-};
+/**
+ * Use `null` instead of `false` as default value, @see https://observablehq.com/@werehamster/avoiding-hydration-mismatch-when-using-react-hooks
+ *
+ * @param customBreakpoints
+ * @returns
+ */let createUseMediaQueryWidth=n=>{let a=getMediaQueryWidthResolvers(n);return function(t,n){let[o,s]=t.substring(1).split("-");isUndefined(s)&&(s=o),isUndefined(o)&&(o="min");// with the hook creator approach these breakpoint types cannot be deduced
+// const [br1, br2] = ruleBreakpoint.split("-") as Split<
+//   typeof ruleBreakpoint,
+//   "-"
+// >;
+let[d,m]=s.split("_"),u=a[o](d,m),[c,l]=useState(isUndefined(n)?null:n);return useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(u),t=e=>{l(e.matches);};return(// Safari < 14 can't use addEventListener on a MediaQueryList
+// https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList#Browser_compatibility
+(l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(// Update the state whenever the media query match state changes
+e.addListener(t),// Clean up on unmount and if the query changes
+()=>{e.removeListener(t);}))},[u]),c}};//// without creator it would be:
 
 export { createUseMediaQueryWidth, createUseMediaQueryWidth as default };

package/extendComponent.cjs.js

@@ -4,13 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-let extendComponent = (component, defaultProps) => {
-    const NewComponent = (props) => react.createElement(component, props);
-    return Object.assign(NewComponent, {
-        ...defaultProps,
-        defaultProps,
-    });
-};
+let extendComponent=(t,o)=>// const NewComponent = forwardRef<React.ComponentProps<Component>, Component>(
+    //   (props, ref) => createElement(component, { ...props, ref })
+    // );
+    Object.assign(// FIXME: check if we need to forwardRef or not
+    o=>react.createElement(t,o),{...o,defaultProps:o});
 
 exports["default"] = extendComponent;
 exports.extendComponent = extendComponent;

package/extendComponent.d.ts

@@ -1,5 +1,5 @@
 export type ExtendableComponent<Props = any> = React.ForwardRefExoticComponent<Props> | React.ExoticComponent<Props> | React.FC<Props> | ((props: Props) => JSX.Element);
-export declare let extendComponent: <Component extends ExtendableComponent<any>, DefaultProps extends {}>(component: Component, defaultProps: DefaultProps) => ((props: import("react").ComponentProps<Component>) => import("react").FunctionComponentElement<any>) & DefaultProps & {
+export declare let extendComponent: <Component extends ExtendableComponent<any>, DefaultProps extends {}>(component: Component, defaultProps: DefaultProps) => ((props: React.ComponentProps<Component>) => import("react").FunctionComponentElement<any>) & DefaultProps & {
     defaultProps: DefaultProps;
 };
 export interface OverridableComponents {

package/extendComponent.esm.js

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

package/forms/antispam.d.ts

@@ -24,4 +24,4 @@ export declare let encodeForm: <T extends ObjectShape = {}>(validationRules: T)
     }, "">;
     encodedNames: Record<keyof T, string>;
 };
-export declare let decodeForm: <ReturnAs extends Record<string, unknown> = {}, FormData_1 extends Record<string, unknown> = {}>(formData: FormData_1) => ReturnAs;
+export declare let decodeForm: <ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData) => ReturnAs;

package/forms.cjs.js

@@ -5,33 +5,33 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var yup = require('@kuus/yup');
 var utils = require('@koine/utils');
 
-let encodeForm = (validationRules) => {
-    const encoded = {};
-    const encodedNames = {};
-    for (const name in validationRules) {
-        if (!name.startsWith("_")) {
-            const encodedName = utils.encode(name);
-            encoded[encodedName] = validationRules[name];
-            encodedNames[name] = encodedName;
-        }
-    }
-    const encodedSchema = yup.object(encoded).required();
-    return { encodedSchema, encodedNames };
-};
-let decodeForm = (formData) => {
-    const json = {};
-    for (const encodedName in formData) {
-        const decodedName = utils.decode(encodedName);
-        if (encodedName.startsWith("_")) {
-            json[encodedName.substring(1)] = formData[encodedName];
-        }
-        else if (!utils.isUndefined(formData[encodedName]) &&
-            formData[decodedName] === "") {
-            json[decodedName] = formData[encodedName];
-        }
-    }
-    return json;
-};
+/**
+ * Encode form
+ *
+ * Takes a record of yup validations and outputs a `yup` schema with encoded
+ * names (antispam technique) and a record of the encoded/decoded input `name`s.
+ *
+ * We skip the names prefixed wth an underscore which are considered programmatic
+ * form data not created by user input.
+ *
+ * FIXME: types https://github.com/jquense/yup/issues/1700
+ */let encodeForm=t=>{let o={},i={};for(let e in t)if(!e.startsWith("_")){let l=utils.encode(e);o[l]=t[e],i[e]=l;}return {encodedSchema:// we need `.required()` to correctly infer the type @see
+// https://github.com/jquense/yup/issues/946
+yup.object(o).required(),encodedNames:i}};/**
+ * Decode form data
+ *
+ * This function is meant to be used inside an api endpoint to gather an encoded
+ * form submit data and transform it to the decoded desired json data.
+ *
+ * Here too we skip encoding/decoding process for names prefixed wth an underscore
+ * which are considered programmatic form data not created by user input.
+ */let decodeForm=e=>{let r={};for(let i in e){let l=utils.decode(i);// always add underscore prefixed names as they are treated as internal
+// private inputs outside of the honeypot system, normalise them here removing
+// the underscore prefix
+i.startsWith("_")?// @ts-expect-error nevermind
+r[i.substring(1)]=e[i]:utils.isUndefined(e[i])||""!==e[l]||// @ts-expect-error nevermind
+(r[l]=e[i]);}// console.log(formData, decoded, json);
+return r};
 
 exports.decodeForm = decodeForm;
 exports.encodeForm = encodeForm;

package/forms.esm.js

@@ -1,32 +1,32 @@
 import { object } from '@kuus/yup';
 import { encode, decode, isUndefined } from '@koine/utils';
 
-let encodeForm = (validationRules) => {
-    const encoded = {};
-    const encodedNames = {};
-    for (const name in validationRules) {
-        if (!name.startsWith("_")) {
-            const encodedName = encode(name);
-            encoded[encodedName] = validationRules[name];
-            encodedNames[name] = encodedName;
-        }
-    }
-    const encodedSchema = object(encoded).required();
-    return { encodedSchema, encodedNames };
-};
-let decodeForm = (formData) => {
-    const json = {};
-    for (const encodedName in formData) {
-        const decodedName = decode(encodedName);
-        if (encodedName.startsWith("_")) {
-            json[encodedName.substring(1)] = formData[encodedName];
-        }
-        else if (!isUndefined(formData[encodedName]) &&
-            formData[decodedName] === "") {
-            json[decodedName] = formData[encodedName];
-        }
-    }
-    return json;
-};
+/**
+ * Encode form
+ *
+ * Takes a record of yup validations and outputs a `yup` schema with encoded
+ * names (antispam technique) and a record of the encoded/decoded input `name`s.
+ *
+ * We skip the names prefixed wth an underscore which are considered programmatic
+ * form data not created by user input.
+ *
+ * FIXME: types https://github.com/jquense/yup/issues/1700
+ */let encodeForm=t=>{let o={},i={};for(let e in t)if(!e.startsWith("_")){let l=encode(e);o[l]=t[e],i[e]=l;}return {encodedSchema:// we need `.required()` to correctly infer the type @see
+// https://github.com/jquense/yup/issues/946
+object(o).required(),encodedNames:i}};/**
+ * Decode form data
+ *
+ * This function is meant to be used inside an api endpoint to gather an encoded
+ * form submit data and transform it to the decoded desired json data.
+ *
+ * Here too we skip encoding/decoding process for names prefixed wth an underscore
+ * which are considered programmatic form data not created by user input.
+ */let decodeForm=e=>{let r={};for(let i in e){let l=decode(i);// always add underscore prefixed names as they are treated as internal
+// private inputs outside of the honeypot system, normalise them here removing
+// the underscore prefix
+i.startsWith("_")?// @ts-expect-error nevermind
+r[i.substring(1)]=e[i]:isUndefined(e[i])||""!==e[l]||// @ts-expect-error nevermind
+(r[l]=e[i]);}// console.log(formData, decoded, json);
+return r};
 
 export { decodeForm, encodeForm };

package/mergeRefs.cjs.js

@@ -2,18 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-let mergeRefs = (refs) => {
-    return (value) => {
-        refs.forEach((ref) => {
-            if (typeof ref === "function") {
-                ref(value);
-            }
-            else if (ref != null) {
-                ref.current = value;
-            }
-        });
-    };
-};
+let mergeRefs=e=>r=>{e.forEach(e=>{"function"==typeof e?e(r):null!=e&&(e.current=r);});};
 
 exports["default"] = mergeRefs;
 exports.mergeRefs = mergeRefs;

package/mergeRefs.d.ts

@@ -1,2 +1,2 @@
-export declare let mergeRefs: <T = Element>(refs: (import("react").MutableRefObject<T> | import("react").LegacyRef<T>)[]) => (instance: T | null) => void;
+export declare let mergeRefs: <T = Element>(refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>) => React.RefCallback<T>;
 export default mergeRefs;

package/mergeRefs.esm.js

@@ -1,14 +1,3 @@
-let mergeRefs = (refs) => {
-    return (value) => {
-        refs.forEach((ref) => {
-            if (typeof ref === "function") {
-                ref(value);
-            }
-            else if (ref != null) {
-                ref.current = value;
-            }
-        });
-    };
-};
+let mergeRefs=e=>r=>{e.forEach(e=>{"function"==typeof e?e(r):null!=e&&(e.current=r);});};
 
 export { mergeRefs as default, mergeRefs };

package/package.json

@@ -2,8 +2,8 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.80",
-    "@koine/utils": "2.0.0-beta.80"
+    "@koine/dom": "2.0.0-beta.83",
+    "@koine/utils": "2.0.0-beta.83"
   },
   "peerDependencies": {
     "@kuus/yup": "1.0.0-beta.7",
@@ -190,5 +190,5 @@
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
-  "version": "2.0.0-beta.80"
+  "version": "2.0.0-beta.83"
 }

package/useAsyncFn.cjs.js

@@ -5,29 +5,10 @@ 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];
-};
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
+ */let useAsyncFn=(o,u=[],l={loading:!1})=>{let a=react.useRef(0),d=useMountedState.useMountedState(),[i,c]=react.useState(l),g=react.useCallback((...e)=>{let t=++a.current;return i.loading||c(e=>({...e,loading:!0})),o(...e).then(e=>(d()&&t===a.current&&c({value:e,loading:!1}),e),e=>(d()&&t===a.current&&c({error:e,loading:!1}),e))},// eslint-disable-next-line react-hooks/exhaustive-deps
+u);return [i,g]};
 
 exports["default"] = useAsyncFn;
 exports.useAsyncFn = useAsyncFn;

package/useAsyncFn.esm.js

@@ -1,28 +1,9 @@
 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];
-};
+/**
+ * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useAsyncFn.ts)
+ */let useAsyncFn=(o,u=[],l={loading:!1})=>{let a=useRef(0),d=useMountedState(),[i,c]=useState(l),g=useCallback((...e)=>{let t=++a.current;return i.loading||c(e=>({...e,loading:!0})),o(...e).then(e=>(d()&&t===a.current&&c({value:e,loading:!1}),e),e=>(d()&&t===a.current&&c({error:e,loading:!1}),e))},// eslint-disable-next-line react-hooks/exhaustive-deps
+u);return [i,g]};
 
 export { useAsyncFn as default, useAsyncFn };