@koine/react 2.0.0-beta.133 → 2.0.0-beta.135

package/classed.esm.js

@@ -1,46 +1,5 @@
 import { forwardRef, createElement } from 'react';
 
-// 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>;
+let classed=r=>{let s=r.type||r;return function(r,...a){return forwardRef(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)t.startsWith("$")||(i[t]=e[t]);let c=o||r[0];return c=(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),createElement(s,{...i,className:c||void 0,ref:n})})}};
 
 export { classed, classed as default };

package/createUseMediaQueryWidth.cjs.js

@@ -6,21 +6,7 @@ var react = require('react');
 var utils = require('@koine/utils');
 var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
 
-/**
- * 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:
+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");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 (l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(e.addListener(t),()=>{e.removeListener(t);})},[u]),c}};
 
 exports.createUseMediaQueryWidth = createUseMediaQueryWidth;
 exports.default = createUseMediaQueryWidth;

package/createUseMediaQueryWidth.esm.js

@@ -2,20 +2,6 @@ import { useState } from 'react';
 import { getMediaQueryWidthResolvers, isUndefined } from '@koine/utils';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
 
-/**
- * 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:
+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");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 (l(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(e.addListener(t),()=>{e.removeListener(t);})},[u]),c}};
 
 export { createUseMediaQueryWidth, createUseMediaQueryWidth as default };

package/extendComponent.cjs.js

@@ -4,11 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-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});
+let extendComponent=(t,o)=>Object.assign(o=>react.createElement(t,o),{...o,defaultProps:o});
 
 exports.default = extendComponent;
 exports.extendComponent = extendComponent;

package/extendComponent.esm.js

@@ -1,9 +1,5 @@
 import { createElement } from 'react';
 
-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});
+let extendComponent=(t,o)=>Object.assign(o=>createElement(t,o),{...o,defaultProps:o});
 
 export { extendComponent as default, extendComponent };

package/forms/antispam.cjs.js

@@ -3,33 +3,7 @@
 var yup = require('@kuus/yup');
 var utils = require('@koine/utils');
 
-/**
- * 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};
+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:yup.object(o).required(),encodedNames:i}};let decodeForm=e=>{let r={};for(let i in e){let l=utils.decode(i);i.startsWith("_")?r[i.substring(1)]=e[i]:utils.isUndefined(e[i])||""!==e[l]||(r[l]=e[i]);}return r};
 
 exports.decodeForm = decodeForm;
 exports.encodeForm = encodeForm;

package/forms/antispam.d.ts

@@ -10,7 +10,7 @@ import { type ObjectShape } from "@kuus/yup";
  *
  * FIXME: types https://github.com/jquense/yup/issues/1700
  */
-export declare let encodeForm: <T extends ObjectShape = {}>(validationRules: T) => {
+export declare let encodeForm: <T extends ObjectShape = ObjectShape>(validationRules: T) => {
     encodedSchema: import("@kuus/yup").ObjectSchema<{
         [x: string]: T[keyof T] extends import("@kuus/yup").ISchema<any, any, any, any> ? T[keyof T]["__outputType"] : T[keyof T] extends {
             readonly key: string;
@@ -44,4 +44,4 @@ export declare let encodeForm: <T extends ObjectShape = {}>(validationRules: T)
  * Here too we skip encoding/decoding process for names prefixed wth an underscore
  * which are considered programmatic form data not created by user input.
  */
-export declare let decodeForm: <ReturnAs extends Record<string, unknown> = {}, FormData extends Record<string, unknown> = {}>(formData: FormData) => ReturnAs;
+export declare let decodeForm: <ReturnAs extends Record<string, unknown> = Record<string, unknown>, FormData extends Record<string, unknown> = Record<string, unknown>>(formData: FormData) => ReturnAs;

package/forms/antispam.esm.js

@@ -1,32 +1,6 @@
 import { object } from '@kuus/yup';
 import { encode, decode, isUndefined } from '@koine/utils';
 
-/**
- * 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};
+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:object(o).required(),encodedNames:i}};let decodeForm=e=>{let r={};for(let i in e){let l=decode(i);i.startsWith("_")?r[i.substring(1)]=e[i]:isUndefined(e[i])||""!==e[l]||(r[l]=e[i]);}return r};
 
 export { decodeForm, encodeForm };

package/package.json

@@ -2,8 +2,8 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.133",
-    "@koine/utils": "2.0.0-beta.133"
+    "@koine/dom": "2.0.0-beta.135",
+    "@koine/utils": "2.0.0-beta.135"
   },
   "peerDependencies": {
     "@kuus/yup": "1.0.0-beta.7",
@@ -223,5 +223,5 @@
   "module": "./index.esm.js",
   "main": "./index.cjs.js",
   "types": "./index.esm.d.ts",
-  "version": "2.0.0-beta.133"
+  "version": "2.0.0-beta.135"
 }

package/useAsyncFn.cjs.js

@@ -5,10 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var useMountedState = require('./useMountedState.cjs.js');
 
-/**
- * @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]};
+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))},u);return [i,g]};
 
 exports.default = useAsyncFn;
 exports.useAsyncFn = useAsyncFn;

package/useAsyncFn.esm.js

@@ -1,9 +1,6 @@
 import { useRef, useState, useCallback } from 'react';
 import { useMountedState } from './useMountedState.esm.js';
 
-/**
- * @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]};
+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))},u);return [i,g]};
 
 export { useAsyncFn as default, useAsyncFn };

package/useFirstMountState.cjs.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
- */let useFirstMountState=()=>{let r=react.useRef(!0);return r.current?(r.current=!1,!0):r.current};
+let useFirstMountState=()=>{let r=react.useRef(!0);return r.current?(r.current=!1,!0):r.current};
 
 exports.default = useFirstMountState;
 exports.useFirstMountState = useFirstMountState;

package/useFirstMountState.esm.js

@@ -1,7 +1,5 @@
 import { useRef } from 'react';
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useFirstMountState.ts)
- */let useFirstMountState=()=>{let r=useRef(!0);return r.current?(r.current=!1,!0):r.current};
+let useFirstMountState=()=>{let r=useRef(!0);return r.current?(r.current=!1,!0):r.current};
 
 export { useFirstMountState as default, useFirstMountState };

package/useFixedOffset.cjs.js

@@ -7,18 +7,7 @@ var utils = require('@koine/utils');
 var dom = require('@koine/dom');
 var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
 
-let n=e=>{dom.injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};/**
- * # Use fixed offset
- *
- * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
- *
- * @see https://web.dev/resize-observer/
- *
- * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */let useFixedOffset=i=>{let l=react.useRef(0);return useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{let e=()=>{let e=dom.calculateFixedOffset();l.current=e,// inject this CSS make the hashed deeplinks position the scroll at the
-// right offset
-n(e);};if(e(),!ResizeObserver)return dom.listenResizeDebounced(0,e);{// const elements = domAll("[data-fixed]");
-let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),l.current=r,utils.debounce(()=>n(r),400,!0)();});return dom.domEach(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
+let n=e=>{dom.injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};let useFixedOffset=i=>{let l=react.useRef(0);return useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{let e=()=>{let e=dom.calculateFixedOffset();l.current=e,n(e);};if(e(),!ResizeObserver)return dom.listenResizeDebounced(0,e);{let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),l.current=r,utils.debounce(()=>n(r),400,!0)();});return dom.domEach(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
 
 exports.default = useFixedOffset;
 exports.useFixedOffset = useFixedOffset;

package/useFixedOffset.esm.js

@@ -3,17 +3,6 @@ import { debounce } from '@koine/utils';
 import { listenResizeDebounced, domEach, calculateFixedOffset, injectCss } from '@koine/dom';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
 
-let n=e=>{injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};/**
- * # Use fixed offset
- *
- * Maybe use [ResizeObserver polyfill](https://github.com/juggle/resize-observer)
- *
- * @see https://web.dev/resize-observer/
- *
- * @param selector By default `[data-fixed]`: anyhting with the data attribute `data-fixed`
- */let useFixedOffset=i=>{let l=useRef(0);return useIsomorphicLayoutEffect(()=>{let e=()=>{let e=calculateFixedOffset();l.current=e,// inject this CSS make the hashed deeplinks position the scroll at the
-// right offset
-n(e);};if(e(),!ResizeObserver)return listenResizeDebounced(0,e);{// const elements = domAll("[data-fixed]");
-let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),l.current=r,debounce(()=>n(r),400,!0)();});return domEach(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
+let n=e=>{injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};let useFixedOffset=i=>{let l=useRef(0);return useIsomorphicLayoutEffect(()=>{let e=()=>{let e=calculateFixedOffset();l.current=e,n(e);};if(e(),!ResizeObserver)return listenResizeDebounced(0,e);{let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),l.current=r,debounce(()=>n(r),400,!0)();});return domEach(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),l};
 
 export { useFixedOffset as default, useFixedOffset };

package/useFocus.cjs.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-/**
- * @see https://stackoverflow.com/a/54159564/1938970
- */let useFocus=()=>{let r=react.useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
+let useFocus=()=>{let r=react.useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
 
 exports.default = useFocus;
 exports.useFocus = useFocus;

package/useFocus.esm.js

@@ -1,7 +1,5 @@
 import { useRef } from 'react';
 
-/**
- * @see https://stackoverflow.com/a/54159564/1938970
- */let useFocus=()=>{let r=useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
+let useFocus=()=>{let r=useRef(null);return [r,()=>{r.current&&r.current.focus();}]};
 
 export { useFocus as default, useFocus };

package/useInterval.cjs.js

@@ -5,12 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var utils = require('@koine/utils');
 
-/**
- * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
- *
- * We just add `deps` array argument and typescript support
- */let useInterval=(n,l,u=[])=>{let o=react.useRef();react.useEffect(()=>{o.current=n;},// eslint-disable-next-line react-hooks/exhaustive-deps
-[n,...u]),react.useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return utils.noop},[l]);};
+let useInterval=(n,l,u=[])=>{let o=react.useRef();react.useEffect(()=>{o.current=n;},[n,...u]),react.useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return utils.noop},[l]);};
 
 exports.default = useInterval;
 exports.useInterval = useInterval;

package/useInterval.esm.js

@@ -1,11 +1,6 @@
 import { useRef, useEffect } from 'react';
 import { noop } from '@koine/utils';
 
-/**
- * @borrows [dan abramov](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
- *
- * We just add `deps` array argument and typescript support
- */let useInterval=(n,l,u=[])=>{let o=useRef();useEffect(()=>{o.current=n;},// eslint-disable-next-line react-hooks/exhaustive-deps
-[n,...u]),useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return noop},[l]);};
+let useInterval=(n,l,u=[])=>{let o=useRef();useEffect(()=>{o.current=n;},[n,...u]),useEffect(()=>{if(null!==l){let r=setInterval(function(){o.current&&o.current();},l);return ()=>clearInterval(r)}return noop},[l]);};
 
 export { useInterval as default, useInterval };

package/useIsomorphicLayoutEffect.cjs.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var utils = require('@koine/utils');
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts)
- */let useIsomorphicLayoutEffect=utils.isBrowser?react.useLayoutEffect:react.useEffect;
+let useIsomorphicLayoutEffect=utils.isBrowser?react.useLayoutEffect:react.useEffect;
 
 exports.default = useIsomorphicLayoutEffect;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;

package/useIsomorphicLayoutEffect.esm.js

@@ -1,8 +1,6 @@
 import { useLayoutEffect, useEffect } from 'react';
 import { isBrowser } from '@koine/utils';
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useIsomorphicLayoutEffect.ts)
- */let useIsomorphicLayoutEffect=isBrowser?useLayoutEffect:useEffect;
+let useIsomorphicLayoutEffect=isBrowser?useLayoutEffect:useEffect;
 
 export { useIsomorphicLayoutEffect as default, useIsomorphicLayoutEffect };

package/useKeyUp.cjs.js

@@ -5,12 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var dom = require('@koine/dom');
 
-let useKeyUp=(o,r=[])=>{react.useEffect(()=>dom.on(window,"keyup",e=>{// const { key } = event;
-    // be sure we do not intercept keys combinations maybe used for other
-    // actions like native browser navigation shortcuts
-    // @see https://stackoverflow.com/a/37559790/1938970
-    e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),// eslint-disable-next-line react-hooks/exhaustive-deps
-[o,...r]);};
+let useKeyUp=(o,r=[])=>{react.useEffect(()=>dom.on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
 
 exports.default = useKeyUp;
 exports.useKeyUp = useKeyUp;

package/useKeyUp.esm.js

@@ -1,11 +1,6 @@
 import { useEffect } from 'react';
 import { on } from '@koine/dom';
 
-let useKeyUp=(o,r=[])=>{useEffect(()=>on(window,"keyup",e=>{// const { key } = event;
-    // be sure we do not intercept keys combinations maybe used for other
-    // actions like native browser navigation shortcuts
-    // @see https://stackoverflow.com/a/37559790/1938970
-    e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),// eslint-disable-next-line react-hooks/exhaustive-deps
-[o,...r]);};
+let useKeyUp=(o,r=[])=>{useEffect(()=>on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
 
 export { useKeyUp as default, useKeyUp };

package/useMeasure.cjs.js

@@ -6,39 +6,7 @@ var react = require('react');
 var utils = require('@koine/utils');
 var dom = require('@koine/dom');
 
-let e;let m=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:u}=window.getComputedStyle(e);return [r,n,u].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...m(e.parentElement)]},p=["x","y","top","bottom","left","right","width","height"],d=(e,t)=>p.every(r=>e[r]===t[r]);// offsetSize?: boolean;
-/**
- * Use measure hook
- *
- * @borrows [pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
- */let useMeasure=p=>{let{scroll:h=!1}=/* offsetSize = false */p||{},[a,b]=react.useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),// keep all state in a ref
-g=react.useRef([// element
-null,// scrollContainers
-null,// resizeObserver
-null,// lastBounds
-a]),// make sure to update state only as long as the component is truly mounted
-v=react.useRef(!1);react.useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);// memoize handlers, so event-listeners know when they should update
-let[w,,/* resizeChange */y]=react.useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();// if (element instanceof HTMLElement && offsetSize) {
-//   size.height = element.offsetHeight;
-//   size.width = element.offsetWidth;
-// }
-Object.freeze(n),v.current&&!d(r,n)&&(g.current[3]=n,b(n));},t=utils.debounce(e);return [e,t,t]},[b]);/* , offsetSize */// cleanup current scroll-listeners / observers
-function x(){let[,e,t]=g.current;e&&(e.forEach(e=>dom.off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}// add scroll-listeners / observers
-function z(){let[t,r]=g.current;t&&!e&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),h&&r&&r.forEach(e=>dom.on(e,"scroll",y,{capture:!0,passive:!0})));}return(// add general event listeners
-// useOnWindowScroll(forceRefresh, Boolean(scroll));
-// useOnWindowResize(() => {
-//   debugger;
-//   forceRefresh();
-// });
-react.useEffect(()=>h?dom.listenScrollDebounced(0,w,100):utils.noop,[h,w]),react.useEffect(()=>// const listener = listenResizeDebounced(onWindowResize);
-    // return listener;
-    dom.listenResizeDebounced(0,w,100),[w]),// respond to changes that are relevant for the listeners
-react.useEffect(()=>{x(),z();},// eslint-disable-next-line react-hooks/exhaustive-deps
-[h]),/* , scrollChange, resizeChange */react.useEffect(()=>(// operate on mount, @kuus on the original version there is no call on mount?
-    w(),// remove all listeners when the components unmounts
-    x),// eslint-disable-next-line react-hooks/exhaustive-deps
-[]),[// the ref we expose to the user
-e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=m(e),z());},a,w])};
+let e;let m=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:u}=window.getComputedStyle(e);return [r,n,u].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...m(e.parentElement)]},p=["x","y","top","bottom","left","right","width","height"],d=(e,t)=>p.every(r=>e[r]===t[r]);let useMeasure=p=>{let{scroll:h=!1}=p||{},[a,b]=react.useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),g=react.useRef([null,null,null,a]),v=react.useRef(!1);react.useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);let[w,,y]=react.useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();Object.freeze(n),v.current&&!d(r,n)&&(g.current[3]=n,b(n));},t=utils.debounce(e);return [e,t,t]},[b]);function x(){let[,e,t]=g.current;e&&(e.forEach(e=>dom.off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}function z(){let[t,r]=g.current;t&&!e&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),h&&r&&r.forEach(e=>dom.on(e,"scroll",y,{capture:!0,passive:!0})));}return react.useEffect(()=>h?dom.listenScrollDebounced(0,w,100):utils.noop,[h,w]),react.useEffect(()=>dom.listenResizeDebounced(0,w,100),[w]),react.useEffect(()=>{x(),z();},[h]),react.useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=m(e),z());},a,w]};
 
 exports.default = useMeasure;
 exports.useMeasure = useMeasure;

package/useMeasure.esm.js

@@ -2,38 +2,6 @@ import { useState, useRef, useEffect, useMemo } from 'react';
 import { debounce, noop } from '@koine/utils';
 import { listenScrollDebounced, listenResizeDebounced, off, on } from '@koine/dom';
 
-let e;let m=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:u}=window.getComputedStyle(e);return [r,n,u].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...m(e.parentElement)]},p=["x","y","top","bottom","left","right","width","height"],d=(e,t)=>p.every(r=>e[r]===t[r]);// offsetSize?: boolean;
-/**
- * Use measure hook
- *
- * @borrows [pmndrs/react-use-measure](https://github.com/pmndrs/react-use-measure)
- */let useMeasure=p=>{let{scroll:h=!1}=/* offsetSize = false */p||{},[a,b]=useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),// keep all state in a ref
-g=useRef([// element
-null,// scrollContainers
-null,// resizeObserver
-null,// lastBounds
-a]),// make sure to update state only as long as the component is truly mounted
-v=useRef(!1);useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);// memoize handlers, so event-listeners know when they should update
-let[w,,/* resizeChange */y]=useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();// if (element instanceof HTMLElement && offsetSize) {
-//   size.height = element.offsetHeight;
-//   size.width = element.offsetWidth;
-// }
-Object.freeze(n),v.current&&!d(r,n)&&(g.current[3]=n,b(n));},t=debounce(e);return [e,t,t]},[b]);/* , offsetSize */// cleanup current scroll-listeners / observers
-function x(){let[,e,t]=g.current;e&&(e.forEach(e=>off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}// add scroll-listeners / observers
-function z(){let[t,r]=g.current;t&&!e&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),h&&r&&r.forEach(e=>on(e,"scroll",y,{capture:!0,passive:!0})));}return(// add general event listeners
-// useOnWindowScroll(forceRefresh, Boolean(scroll));
-// useOnWindowResize(() => {
-//   debugger;
-//   forceRefresh();
-// });
-useEffect(()=>h?listenScrollDebounced(0,w,100):noop,[h,w]),useEffect(()=>// const listener = listenResizeDebounced(onWindowResize);
-    // return listener;
-    listenResizeDebounced(0,w,100),[w]),// respond to changes that are relevant for the listeners
-useEffect(()=>{x(),z();},// eslint-disable-next-line react-hooks/exhaustive-deps
-[h]),/* , scrollChange, resizeChange */useEffect(()=>(// operate on mount, @kuus on the original version there is no call on mount?
-    w(),// remove all listeners when the components unmounts
-    x),// eslint-disable-next-line react-hooks/exhaustive-deps
-[]),[// the ref we expose to the user
-e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=m(e),z());},a,w])};
+let e;let m=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:u}=window.getComputedStyle(e);return [r,n,u].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...m(e.parentElement)]},p=["x","y","top","bottom","left","right","width","height"],d=(e,t)=>p.every(r=>e[r]===t[r]);let useMeasure=p=>{let{scroll:h=!1}=p||{},[a,b]=useState({left:0,top:0,width:0,height:0,bottom:0,right:0,x:0,y:0}),g=useRef([null,null,null,a]),v=useRef(!1);useEffect(()=>(v.current=!0,()=>void(v.current=!1)),[]);let[w,,y]=useMemo(()=>{let e=(...e)=>{let[t,,,r]=g.current;if(!t)return;let n=t.getBoundingClientRect();Object.freeze(n),v.current&&!d(r,n)&&(g.current[3]=n,b(n));},t=debounce(e);return [e,t,t]},[b]);function x(){let[,e,t]=g.current;e&&(e.forEach(e=>off(e,"scroll",y)),g.current[1]=null),t&&(t.disconnect(),g.current[2]=null);}function z(){let[t,r]=g.current;t&&!e&&ResizeObserver&&(e=new ResizeObserver(y),g.current[2]=e,e.observe(t),h&&r&&r.forEach(e=>on(e,"scroll",y,{capture:!0,passive:!0})));}return useEffect(()=>h?listenScrollDebounced(0,w,100):noop,[h,w]),useEffect(()=>listenResizeDebounced(0,w,100),[w]),useEffect(()=>{x(),z();},[h]),useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=m(e),z());},a,w]};
 
 export { useMeasure as default, useMeasure };

package/useMountedState.cjs.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
- */let useMountedState=()=>{let u=react.useRef(!1),n=react.useCallback(()=>u.current,[]);return react.useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
+let useMountedState=()=>{let u=react.useRef(!1),n=react.useCallback(()=>u.current,[]);return react.useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
 
 exports.default = useMountedState;
 exports.useMountedState = useMountedState;

package/useMountedState.esm.js

@@ -1,7 +1,5 @@
 import { useRef, useCallback, useEffect } from 'react';
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useMountedState.ts)
- */let useMountedState=()=>{let u=useRef(!1),n=useCallback(()=>u.current,[]);return useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
+let useMountedState=()=>{let u=useRef(!1),n=useCallback(()=>u.current,[]);return useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
 
 export { useMountedState as default, useMountedState };

package/useNavigateAway.cjs.js

@@ -5,53 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var dom = require('@koine/dom');
 
-//   string | boolean,
-//   (() => unknown) | undefined,
-//   (() => unknown) | undefined,
-// ];
-// type UseNavigateAwayPagehideHandler = (event: PageTransitionEvent) => unknown;
-/**
- * @resources
- *
- * About browser's specs see:
- * - https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
- * - https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW5
- * - https://stackoverflow.com/questions/58009424/pagehide-event-on-google-chrome
- *
- * About react see:
- * - https://github.com/jacobbuck/react-beforeunload
- * - https://github.com/dioscarey/react-beforeunload-component
- *
- * About next.js see:
- * - https://github.com/vercel/next.js/issues/2476
- * - https://github.com/vercel/next.js/issues/2694
- *
- * For the callback technique see:
- * - https://stackoverflow.com/a/11835394/1938970
- */let useNavigateAway=a=>{let o=react.useRef();// const pagehideHandlerRef = useRef<UseNavigateAwayPagehideHandler | undefined>();
-react.useEffect(()=>{o.current=e=>{let t=a(e);return(// Handle legacy `event.returnValue` property
-// https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
-(t&&e.preventDefault(),"string"==typeof t)?e.returnValue=t:// Chrome doesn't support `event.preventDefault()` on `BeforeUnloadEvent`,
-// instead it requires `event.returnValue` to be set
-// https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload#browser_compatibility
-e.defaultPrevented?e.returnValue="":void 0)};},// pagehideHandlerRef.current = (event) => {
-//   const returnValue = handler?.(event);
-//   if (event.persisted) {
-//     // If the event's persisted property is `true` the page is about
-//     // to enter the Back-Forward Cache, which is also in the frozen state.
-//   } else {
-//     // If the event's persisted property is not `true` the page is
-//     // about to be unloaded.
-//   }
-// };
-[a]),react.useEffect(()=>dom.on(window,"beforeunload",e=>o.current?.(e)),// const listenerPagehide = on(window, "pagehide", (event) =>
-//   pagehideHandlerRef.current?.(event)
-// );
-// return () => {
-//   listenerBeforeunload();
-//   // listenerPagehide();
-// };
-[]);};
+let useNavigateAway=a=>{let o=react.useRef();react.useEffect(()=>{o.current=e=>{let t=a(e);return (t&&e.preventDefault(),"string"==typeof t)?e.returnValue=t:e.defaultPrevented?e.returnValue="":void 0};},[a]),react.useEffect(()=>dom.on(window,"beforeunload",e=>o.current?.(e)),[]);};
 
 exports.default = useNavigateAway;
 exports.useNavigateAway = useNavigateAway;