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

package/useNavigateAway.esm.js

@@ -1,52 +1,6 @@
 import { useRef, useEffect } from 'react';
 import { on } from '@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=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();
-// };
-[]);};
+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)),[]);};
 
 export { useNavigateAway as default, useNavigateAway };

package/useScrollPosition.cjs.js

@@ -7,13 +7,7 @@ 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};/**
- * @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);};
+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);};
 
 exports.default = useScrollPosition;
 exports.useScrollPosition = useScrollPosition;

package/useScrollPosition.esm.js

@@ -3,12 +3,6 @@ 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};/**
- * @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);};
+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);};
 
 export { useScrollPosition as default, useScrollPosition };

package/useScrollThreshold.cjs.js

@@ -6,10 +6,7 @@ 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,// * -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};
+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};
 
 exports.default = useScrollThreshold;
 exports.useScrollThreshold = useScrollThreshold;

package/useScrollThreshold.esm.js

@@ -2,9 +2,6 @@ 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,// * -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};
+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};
 
 export { useScrollThreshold as default, useScrollThreshold };

package/useScrollTo.cjs.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var utils = require('@koine/utils');
 
-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);};
+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);};
 
 exports.default = useScrollTo;
 exports.useScrollTo = useScrollTo;

package/useScrollTo.esm.js

@@ -1,7 +1,5 @@
 import { isBrowser } from '@koine/utils';
 
-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);};
+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);};
 
 export { useScrollTo as default, useScrollTo };

package/useSmoothScroll.cjs.js

@@ -7,12 +7,7 @@ var utils = require('@koine/utils');
 var dom = require('@koine/dom');
 var useFixedOffset = require('./useFixedOffset.cjs.js');
 
-/**
- *
- * @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])};
+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

@@ -3,11 +3,6 @@ import { isNumber } from '@koine/utils';
 import { getOffsetTopSlim, scrollTo } from '@koine/dom';
 import { useFixedOffset } from './useFixedOffset.esm.js';
 
-/**
- *
- * @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])};
+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 };

package/useSpinDelay.cjs.js

@@ -4,18 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-/**
- * Wraps your booleans only returning true after the `delay`, and for a minimum
- * time of `minDuration`. This way you're sure that you don't show unnecessary
- * or very short living spinners.
- *
- * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
- *
- * - Smaller footprint and options object as argument
- *
- * @param delay [500]
- * @param minDuration [200]
- */let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=react.useState(0),l=react.useRef();return react.useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),react.useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
+let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=react.useState(0),l=react.useRef();return react.useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),react.useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
 
 exports.default = useSpinDelay;
 exports.useSpinDelay = useSpinDelay;

package/useSpinDelay.esm.js

@@ -1,16 +1,5 @@
 import { useState, useRef, useEffect } from 'react';
 
-/**
- * Wraps your booleans only returning true after the `delay`, and for a minimum
- * time of `minDuration`. This way you're sure that you don't show unnecessary
- * or very short living spinners.
- *
- * @borrows [smeijer/spin-delay](https://github.com/smeijer/spin-delay)
- *
- * - Smaller footprint and options object as argument
- *
- * @param delay [500]
- * @param minDuration [200]
- */let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=useState(0),l=useRef();return useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
+let useSpinDelay=(u,c=500,i=200)=>{let[n,o]=useState(0),l=useRef();return useEffect(()=>{u&&0===n&&(clearTimeout(l.current),l.current=setTimeout(()=>{if(!u)return o(0);l.current=setTimeout(()=>{o(3);},i),o(2);},c),o(1)),u||2===n||(clearTimeout(l.current),o(0));},[u,n,c,i]),useEffect(()=>()=>clearTimeout(l.current),[]),2===n||3===n};
 
 export { useSpinDelay as default, useSpinDelay };

package/useTraceUpdate.cjs.js

@@ -4,10 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var react = require('react');
 
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */let useTraceUpdate=r=>{let c=react.useRef(r);react.useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&// @ts-expect-error Does not matter here...
-    (e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
+let useTraceUpdate=r=>{let c=react.useRef(r);react.useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&(e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
 
 exports.default = useTraceUpdate;
 exports.useTraceUpdate = useTraceUpdate;

package/useTraceUpdate.esm.js

@@ -1,8 +1,5 @@
 import { useRef, useEffect } from 'react';
 
-/**
- * @see https://stackoverflow.com/a/51082563/9122820
- */let useTraceUpdate=r=>{let c=useRef(r);useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&// @ts-expect-error Does not matter here...
-    (e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
+let useTraceUpdate=r=>{let c=useRef(r);useEffect(()=>{let e=Object.entries(r).reduce((e,[t,r])=>(c.current[t]!==r&&(e[t]=[c.current[t],r]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=r;});};
 
 export { useTraceUpdate as default, useTraceUpdate };

package/useUpdateEffect.cjs.js

@@ -5,10 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var useFirstMountState = require('./useFirstMountState.cjs.js');
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */let useUpdateEffect=(r,f)=>{let o=useFirstMountState.useFirstMountState();react.useEffect(()=>{if(!o)return r()},// eslint-disable-next-line react-hooks/exhaustive-deps
-f);};
+let useUpdateEffect=(r,f)=>{let o=useFirstMountState.useFirstMountState();react.useEffect(()=>{if(!o)return r()},f);};
 
 exports.default = useUpdateEffect;
 exports.useUpdateEffect = useUpdateEffect;

package/useUpdateEffect.esm.js

@@ -1,9 +1,6 @@
 import { useEffect } from 'react';
 import { useFirstMountState } from './useFirstMountState.esm.js';
 
-/**
- * @borrows [streamich/react-use](https://github.com/streamich/react-use/blob/master/src/useUpdateEffect.ts)
- */let useUpdateEffect=(r,f)=>{let o=useFirstMountState();useEffect(()=>{if(!o)return r()},// eslint-disable-next-line react-hooks/exhaustive-deps
-f);};
+let useUpdateEffect=(r,f)=>{let o=useFirstMountState();useEffect(()=>{if(!o)return r()},f);};
 
 export { useUpdateEffect as default, useUpdateEffect };

package/useWindowSize.cjs.js

@@ -5,15 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var react = require('react');
 var dom = require('@koine/dom');
 
-/**
- * # Use `window` size
- *
- * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
- *
- * @returns An array with:
- * 1) _width_: using `window.innerWidth`
- * 2) _height_: using `window.innerHeight`
- */let useWindowSize=(o,n)=>{let[d,w]=react.useState(0),[m,u]=react.useState(0);return react.useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?dom.listenResizeDebounced(0,e,o,n):dom.listenResize(e);return e(),i},[o,n]),[d,m]};
+let useWindowSize=(o,n)=>{let[d,w]=react.useState(0),[m,u]=react.useState(0);return react.useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?dom.listenResizeDebounced(0,e,o,n):dom.listenResize(e);return e(),i},[o,n]),[d,m]};
 
 exports.default = useWindowSize;
 exports.useWindowSize = useWindowSize;

package/useWindowSize.d.ts

@@ -1,12 +1,12 @@
-import { debounce } from "@koine/utils";
+import { debounce as _debounce } from "@koine/utils";
 /**
  * # Use `window` size
  *
- * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
+ * @param args Optionally pass {@link _debounce} arguments (`wait` and `immediate`)
  *
  * @returns An array with:
  * 1) _width_: using `window.innerWidth`
  * 2) _height_: using `window.innerHeight`
  */
-export declare let useWindowSize: (wait?: Parameters<typeof debounce>[1], immediate?: Parameters<typeof debounce>[2]) => readonly [number, number];
+export declare let useWindowSize: (wait?: Parameters<typeof _debounce>[1], immediate?: Parameters<typeof _debounce>[2]) => readonly [number, number];
 export default useWindowSize;

package/useWindowSize.esm.js

@@ -1,14 +1,6 @@
 import { useState, useEffect } from 'react';
 import { listenResizeDebounced, listenResize } from '@koine/dom';
 
-/**
- * # Use `window` size
- *
- * @param args Optionally pass {@link debounce} arguments (`wait` and `immediate`)
- *
- * @returns An array with:
- * 1) _width_: using `window.innerWidth`
- * 2) _height_: using `window.innerHeight`
- */let useWindowSize=(o,n)=>{let[d,w]=useState(0),[m,u]=useState(0);return useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?listenResizeDebounced(0,e,o,n):listenResize(e);return e(),i},[o,n]),[d,m]};
+let useWindowSize=(o,n)=>{let[d,w]=useState(0),[m,u]=useState(0);return useEffect(()=>{let e=()=>{w(window.innerWidth),u(window.innerHeight);},i=o?listenResizeDebounced(0,e,o,n):listenResize(e);return e(),i},[o,n]),[d,m]};
 
 export { useWindowSize as default, useWindowSize };