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

package/forms.cjs.js

@@ -5,7 +5,33 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var yup = require('@kuus/yup');
 var utils = require('@koine/utils');
 
-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};
+/**
+ * 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,6 +1,32 @@
 import { object } from '@kuus/yup';
 import { encode, decode, isUndefined } from '@koine/utils';
 
-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};
+/**
+ * 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/package.json

@@ -2,8 +2,8 @@
   "name": "@koine/react",
   "sideEffects": false,
   "dependencies": {
-    "@koine/dom": "2.0.0-beta.82",
-    "@koine/utils": "2.0.0-beta.82"
+    "@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.82"
+  "version": "2.0.0-beta.83"
 }

package/useAsyncFn.cjs.js

@@ -5,7 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var useMountedState = require('./useMountedState.cjs.js');
 
-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]};
+/**
+ * @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,6 +1,9 @@
 import { useRef, useState, useCallback } from 'react';
 import { useMountedState } from './useMountedState.esm.js';
 
-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]};
+/**
+ * @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 };

package/useFirstMountState.cjs.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-let useFirstMountState=()=>{let r=react.useRef(!0);return r.current?(r.current=!1,!0):r.current};
+/**
+ * @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};
 
 exports["default"] = useFirstMountState;
 exports.useFirstMountState = useFirstMountState;

package/useFirstMountState.esm.js

@@ -1,5 +1,7 @@
 import { useRef } from 'react';
 
-let useFirstMountState=()=>{let r=useRef(!0);return r.current?(r.current=!1,!0):r.current};
+/**
+ * @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};
 
 export { useFirstMountState as default, useFirstMountState };

package/useFixedOffset.cjs.js

@@ -7,7 +7,18 @@ 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}`);};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};
+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};
 
 exports["default"] = useFixedOffset;
 exports.useFixedOffset = useFixedOffset;

package/useFixedOffset.esm.js

@@ -3,6 +3,17 @@ 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}`);};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};
+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};
 
 export { useFixedOffset as default, useFixedOffset };

package/useFocus.cjs.js

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

package/useInterval.cjs.js

@@ -5,7 +5,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var utils = require('@koine/utils');
 
-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]);};
+/**
+ * @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]);};
 
 exports["default"] = useInterval;
 exports.useInterval = useInterval;

package/useInterval.esm.js

@@ -1,6 +1,11 @@
 import { useRef, useEffect } from 'react';
 import { noop } from '@koine/utils';
 
-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]);};
+/**
+ * @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]);};
 
 export { useInterval as default, useInterval };

package/useIsomorphicLayoutEffect.cjs.js

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

package/useIsomorphicLayoutEffect.esm.js

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

package/useKeyUp.cjs.js

@@ -5,7 +5,12 @@ 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=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
+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]);};
 
 exports["default"] = useKeyUp;
 exports.useKeyUp = useKeyUp;

package/useKeyUp.esm.js

@@ -1,6 +1,11 @@
 import { useEffect } from 'react';
 import { on } from '@koine/dom';
 
-let useKeyUp=(o,r=[])=>{useEffect(()=>on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
+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]);};
 
 export { useKeyUp as default, useKeyUp };

package/useMeasure.cjs.js

@@ -6,7 +6,39 @@ 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]);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]};
+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])};
 
 exports["default"] = useMeasure;
 exports.useMeasure = useMeasure;

package/useMeasure.esm.js

@@ -2,6 +2,38 @@ 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]);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]};
+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])};
 
 export { useMeasure as default, useMeasure };

package/useMountedState.cjs.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-let useMountedState=()=>{let u=react.useRef(!1),n=react.useCallback(()=>u.current,[]);return react.useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
+/**
+ * @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};
 
 exports["default"] = useMountedState;
 exports.useMountedState = useMountedState;

package/useMountedState.esm.js

@@ -1,5 +1,7 @@
 import { useRef, useCallback, useEffect } from 'react';
 
-let useMountedState=()=>{let u=useRef(!1),n=useCallback(()=>u.current,[]);return useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
+/**
+ * @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};
 
 export { useMountedState as default, useMountedState };

package/useNavigateAway.cjs.js

@@ -5,7 +5,53 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var dom = require('@koine/dom');
 
-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)),[]);};
+//   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();
+// };
+[]);};
 
 exports["default"] = useNavigateAway;
 exports.useNavigateAway = useNavigateAway;

package/useNavigateAway.esm.js

@@ -1,6 +1,52 @@
 import { useRef, useEffect } from 'react';
 import { on } from '@koine/dom';
 
-let useNavigateAway=a=>{let o=useRef();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]),useEffect(()=>on(window,"beforeunload",e=>o.current?.(e)),[]);};
+//   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=useRef();// const pagehideHandlerRef = useRef<UseNavigateAwayPagehideHandler | undefined>();
+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]),useEffect(()=>on(window,"beforeunload",e=>o.current?.(e)),// const listenerPagehide = on(window, "pagehide", (event) =>
+//   pagehideHandlerRef.current?.(event)
+// );
+// return () => {
+//   listenerBeforeunload();
+//   // listenerPagehide();
+// };
+[]);};
 
 export { useNavigateAway as default, useNavigateAway };

package/useScrollPosition.cjs.js

@@ -7,7 +7,13 @@ var utils = require('@koine/utils');
 var dom = require('@koine/dom');
 var useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.cjs.js');
 
-let l={x:0,y:0},n=t=>t?.getBoundingClientRect(),u=(t,e)=>{if(!utils.isBrowser)return l;if(!e)return {x:window.scrollX,y:window.scrollY};let o=n(t?.current||document.body),u=n(e.current);return o?u?{x:(u.x||0)-(o.x||0),y:(u.y||0)-(o.y||0)}:{x:o.left,y:o.top}:l};let useScrollPosition=(l,n=[],i,c,m)=>{let f=react.useRef(u(null,c)),s=null,d=()=>{let t=u(i,c);l(t,f.current),f.current=t,s=null;};useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{if(!utils.isBrowser)return;let t=dom.listenScroll(()=>{m?null===s&&(s=window.setTimeout(d,m)):d();},c?.current);return ()=>{t(),s&&clearTimeout(s);}},n);};
+let l={x:0,y:0},n=t=>t?.getBoundingClientRect(),u=(t,e)=>{if(!utils.isBrowser)return l;if(!e)return {x:window.scrollX,y:window.scrollY};let o=n(t?.current||document.body),u=n(e.current);return o?u?{x:(u.x||0)-(o.x||0),y:(u.y||0)-(o.y||0)}:{x:o.left,y:o.top}:l};/**
+ * @borrows [@n8tb1t/use-scroll-position@2.0.3](https://github.com/n8tb1t/use-scroll-position) by `n8tb1t <n8tb1t@gmail.com>`
+ *
+ * We've just:
+ * - reused internal helper functions
+ * - compacted object arguments in functions as plain argument list to improve compression
+ */let useScrollPosition=(l,n=[],i,c,m)=>{let f=react.useRef(u(null,c)),s=null,d=()=>{let t=u(i,c);l(t,f.current),f.current=t,s=null;};useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(()=>{if(!utils.isBrowser)return;let t=dom.listenScroll(()=>{m?null===s&&(s=window.setTimeout(d,m)):d();},c?.current);return ()=>{t(),s&&clearTimeout(s);}},n);};
 
 exports["default"] = useScrollPosition;
 exports.useScrollPosition = useScrollPosition;

package/useScrollPosition.esm.js

@@ -3,6 +3,12 @@ import { isBrowser } from '@koine/utils';
 import { listenScroll } from '@koine/dom';
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.esm.js';
 
-let l={x:0,y:0},n=t=>t?.getBoundingClientRect(),u=(t,e)=>{if(!isBrowser)return l;if(!e)return {x:window.scrollX,y:window.scrollY};let o=n(t?.current||document.body),u=n(e.current);return o?u?{x:(u.x||0)-(o.x||0),y:(u.y||0)-(o.y||0)}:{x:o.left,y:o.top}:l};let useScrollPosition=(l,n=[],i,c,m)=>{let f=useRef(u(null,c)),s=null,d=()=>{let t=u(i,c);l(t,f.current),f.current=t,s=null;};useIsomorphicLayoutEffect(()=>{if(!isBrowser)return;let t=listenScroll(()=>{m?null===s&&(s=window.setTimeout(d,m)):d();},c?.current);return ()=>{t(),s&&clearTimeout(s);}},n);};
+let l={x:0,y:0},n=t=>t?.getBoundingClientRect(),u=(t,e)=>{if(!isBrowser)return l;if(!e)return {x:window.scrollX,y:window.scrollY};let o=n(t?.current||document.body),u=n(e.current);return o?u?{x:(u.x||0)-(o.x||0),y:(u.y||0)-(o.y||0)}:{x:o.left,y:o.top}:l};/**
+ * @borrows [@n8tb1t/use-scroll-position@2.0.3](https://github.com/n8tb1t/use-scroll-position) by `n8tb1t <n8tb1t@gmail.com>`
+ *
+ * We've just:
+ * - reused internal helper functions
+ * - compacted object arguments in functions as plain argument list to improve compression
+ */let useScrollPosition=(l,n=[],i,c,m)=>{let f=useRef(u(null,c)),s=null,d=()=>{let t=u(i,c);l(t,f.current),f.current=t,s=null;};useIsomorphicLayoutEffect(()=>{if(!isBrowser)return;let t=listenScroll(()=>{m?null===s&&(s=window.setTimeout(d,m)):d();},c?.current);return ()=>{t(),s&&clearTimeout(s);}},n);};
 
 export { useScrollPosition as default, useScrollPosition };

package/useScrollThreshold.cjs.js

@@ -6,7 +6,10 @@ var react = require('react');
 var utils = require('@koine/utils');
 var dom = require('@koine/dom');
 
-let useScrollThreshold=(i,m)=>{let[u,f]=react.useState(!1),n=react.useCallback(()=>{if(i){let r=window.scrollY,e=r<i,o=r>i;f(o),m&&m(e,o);}},[i,m]);return react.useEffect(()=>{if(i){let r=dom.listenScroll(n);return n(),r}return utils.noop},[i,n]),u};
+let useScrollThreshold=(i,m)=>{let[u,f]=react.useState(!1),n=react.useCallback(()=>{if(i){let r=window.scrollY,// * -1;
+e=r<i,o=r>i;// console.log("useScrollThreshold setIsBelow", isBelow, posY, threshold);
+f(o),m&&m(e,o);}},[i,m]);return react.useEffect(()=>{if(i){// const listener = listenScrollThrottled(0, handler, 50);
+let r=dom.listenScroll(n);return n(),r}return utils.noop},[i,n]),u};
 
 exports["default"] = useScrollThreshold;
 exports.useScrollThreshold = useScrollThreshold;

package/useScrollThreshold.esm.js

@@ -2,6 +2,9 @@ import { useState, useCallback, useEffect } from 'react';
 import { noop } from '@koine/utils';
 import { listenScroll } from '@koine/dom';
 
-let useScrollThreshold=(i,m)=>{let[u,f]=useState(!1),n=useCallback(()=>{if(i){let r=window.scrollY,e=r<i,o=r>i;f(o),m&&m(e,o);}},[i,m]);return useEffect(()=>{if(i){let r=listenScroll(n);return n(),r}return noop},[i,n]),u};
+let useScrollThreshold=(i,m)=>{let[u,f]=useState(!1),n=useCallback(()=>{if(i){let r=window.scrollY,// * -1;
+e=r<i,o=r>i;// console.log("useScrollThreshold setIsBelow", isBelow, posY, threshold);
+f(o),m&&m(e,o);}},[i,m]);return useEffect(()=>{if(i){// const listener = listenScrollThrottled(0, handler, 50);
+let r=listenScroll(n);return n(),r}return noop},[i,n]),u};
 
 export { useScrollThreshold as default, useScrollThreshold };

package/useScrollTo.cjs.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var utils = require('@koine/utils');
 
-let useScrollTo=(o="",t=0)=>{if(!utils.isBrowser)return;let l=document.getElementById(o),r=0;if(l&&l.offsetParent)do r+=l.offsetTop;while(l=l.offsetParent)r-=t,r-=0,window.scroll(0,r);};
+let useScrollTo=(o="",t=0)=>{// FIXME: is the useHeader still needed?
+// const [, , headerHeight] = useHeader();
+if(!utils.isBrowser)return;let l=document.getElementById(o),r=0;if(l&&l.offsetParent)do r+=l.offsetTop;while(l=l.offsetParent)r-=t,r-=/* headerHeight || */0,window.scroll(0,r);};
 
 exports["default"] = useScrollTo;
 exports.useScrollTo = useScrollTo;

package/useScrollTo.esm.js

@@ -1,5 +1,7 @@
 import { isBrowser } from '@koine/utils';
 
-let useScrollTo=(o="",t=0)=>{if(!isBrowser)return;let l=document.getElementById(o),r=0;if(l&&l.offsetParent)do r+=l.offsetTop;while(l=l.offsetParent)r-=t,r-=0,window.scroll(0,r);};
+let useScrollTo=(o="",t=0)=>{// FIXME: is the useHeader still needed?
+// const [, , headerHeight] = useHeader();
+if(!isBrowser)return;let l=document.getElementById(o),r=0;if(l&&l.offsetParent)do r+=l.offsetTop;while(l=l.offsetParent)r-=t,r-=/* headerHeight || */0,window.scroll(0,r);};
 
 export { useScrollTo as default, useScrollTo };

package/useSmoothScroll.cjs.js

@@ -8,7 +8,12 @@ var dom = require('@koine/dom');
 var useFixedOffset = require('./useFixedOffset.cjs.js');
 require('./useIsomorphicLayoutEffect.cjs.js');
 
-let useSmoothScroll=m=>{let i=useFixedOffset.useFixedOffset();return react.useCallback((e,l,f,u,n)=>{let c;let p=!1;if(utils.isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=dom.getOffsetTopSlim(t)-i.current,p=!0);}utils.isNumber(c)&&dom.scrollTo(c=c+(l||0)+(m||p?0:i.current),f,u,n);},[m,i])};
+/**
+ *
+ * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
+ * selector we will keep into account the _fixedOffset_ despite this option.
+ * @returns
+ */let useSmoothScroll=m=>{let i=useFixedOffset.useFixedOffset();return react.useCallback((e,l,f,u,n)=>{let c;let p=!1;if(utils.isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=dom.getOffsetTopSlim(t)-i.current,p=!0);}utils.isNumber(c)&&dom.scrollTo(c=c+(l||0)+(m||p?0:i.current),f,u,n);},[m,i])};
 
 exports["default"] = useSmoothScroll;
 exports.useSmoothScroll = useSmoothScroll;

package/useSmoothScroll.esm.js

@@ -4,6 +4,11 @@ import { getOffsetTopSlim, scrollTo } from '@koine/dom';
 import { useFixedOffset } from './useFixedOffset.esm.js';
 import './useIsomorphicLayoutEffect.esm.js';
 
-let useSmoothScroll=m=>{let i=useFixedOffset();return useCallback((e,l,f,u,n)=>{let c;let p=!1;if(isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=getOffsetTopSlim(t)-i.current,p=!0);}isNumber(c)&&scrollTo(c=c+(l||0)+(m||p?0:i.current),f,u,n);},[m,i])};
+/**
+ *
+ * @param disregardAutomaticFixedOffset When the `to` scroll argument is a DOM
+ * selector we will keep into account the _fixedOffset_ despite this option.
+ * @returns
+ */let useSmoothScroll=m=>{let i=useFixedOffset();return useCallback((e,l,f,u,n)=>{let c;let p=!1;if(isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=getOffsetTopSlim(t)-i.current,p=!0);}isNumber(c)&&scrollTo(c=c+(l||0)+(m||p?0:i.current),f,u,n);},[m,i])};
 
 export { useSmoothScroll as default, useSmoothScroll };