@koine/react 2.0.0-beta.37 → 2.0.0-beta.39

package/index.cjs.mjs

@@ -0,0 +1,2 @@
+export * from './index.cjs.js';
+export { _default as default } from './index.cjs.default.js';

package/index.d.ts

@@ -1,26 +1,3 @@
-export { classed } from "./classed.js";
-export { createUseMediaQueryWidth, type MediaQuerWidthDef, type MediaQueryWidth, } from "./createUseMediaQueryWidth.js";
-export { type ExtendableComponent, type OverridableComponents, type WithComponents, extendComponent, } from "./extendComponent.js";
-export { mergeRefs } from "./mergeRefs.js";
-export { useAsyncFn, type UseAsyncFnReturn, type UseAsyncState, } from "./useAsyncFn.js";
-export { useDateLocale } from "./useDateLocale.js";
-export { useFirstMountState } from "./useFirstMountState.js";
-export { useFixedOffset } from "./useFixedOffset.js";
-export { useFocus } from "./useFocus.js";
-export { useInterval } from "./useInterval.js";
-export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
-export { useKeyUp } from "./useKeyUp.js";
-export { useMeasure, type UseMeasureOptions, type UseMeasureReturn, } from "./useMeasure.js";
-export { useMountedState } from "./useMountedState.js";
-export { useNavigateAway, type UseNavigateAwayHandler, } from "./useNavigateAway.js";
-export { usePrevious } from "./usePrevious.js";
-export { usePreviousRef } from "./usePreviousRef.js";
-export { useScrollPosition } from "./useScrollPosition.js";
-export { useScrollThreshold } from "./useScrollThreshold.js";
-export { useSmoothScroll } from "./useSmoothScroll.js";
-export { useSpinDelay } from "./useSpinDelay.js";
-export { useTraceUpdate } from "./useTraceUpdate.js";
-export { useUpdateEffect } from "./useUpdateEffect.js";
-export { useWindowSize } from "./useWindowSize.js";
-export type { Polymorphic } from "./Polymorphic.js";
-export type { Translate, Option } from "./types.js";
+export * from "./hooks";
+export * from "./utils";
+export type { Translate, Option } from "./types";

package/index.esm.js

@@ -0,0 +1,51 @@
+import { useRef, useCallback, useEffect, useState, useLayoutEffect, useMemo, forwardRef, createElement } from 'react';
+import { isBrowser, debounce, noop, isNumber, getMediaQueryWidthResolvers, isUndefined } from '@koine/utils';
+import { listenResizeDebounced, $each, calculateFixedOffset, injectCss, on, listenScrollDebounced, off, listenScroll, getOffsetTopSlim, scrollTo, listenResize } from '@koine/dom';
+
+let useMountedState=()=>{let u=useRef(!1),n=useCallback(()=>u.current,[]);return useEffect(()=>(u.current=!0,()=>{u.current=!1;}),[]),n};
+
+let useAsyncFn=(o,l=[],u={loading:!1})=>{let a=useRef(0),i=useMountedState(),[d,c]=useState(u),g=useCallback((...r)=>{let t=++a.current;return d.loading||c(r=>({...r,loading:!0})),o(...r).then(r=>(i()&&t===a.current&&c({value:r,loading:!1}),r),r=>(i()&&t===a.current&&c({error:r,loading:!1}),r))},l);return [d,g]};
+
+let useFirstMountState=()=>{let t=useRef(!0);return t.current?(t.current=!1,!0):t.current};
+
+let useIsomorphicLayoutEffect=isBrowser?useLayoutEffect:useEffect;
+
+let n$1=e=>{injectCss("useFixedOffset",`html{scroll-padding-top: ${e}px}`);};let useFixedOffset=i=>{let c=useRef(0);return useIsomorphicLayoutEffect(()=>{let e=()=>{let e=calculateFixedOffset();c.current=e,n$1(e);};if(e(),!ResizeObserver)return listenResizeDebounced(0,e);{let e=new ResizeObserver(e=>{let r=0;e.forEach(e=>{r+=e.contentRect.height;}),c.current=r,debounce(()=>n$1(r),400,!0)();});return $each(i||"[data-fixed]",t=>{e&&e.observe(t);}),()=>{e?.disconnect();}}},[i]),c};
+
+let useFocus=()=>{let e=useRef(null);return [e,()=>{e.current&&e.current.focus();}]};
+
+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]);};
+
+let useKeyUp=(o,r=[])=>{useEffect(()=>on(window,"keyup",e=>{e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||o(e);}),[o,...r]);};
+
+let e$1;let f=e=>{let t=[];if(!e||e===document.body)return t;let{overflow:r,overflowX:n,overflowY:l}=window.getComputedStyle(e);return [r,n,l].some(e=>"auto"===e||"scroll"===e)&&t.push(e),[...t,...f(e.parentElement)]},h=["x","y","top","bottom","left","right","width","height"],p=(e,t)=>h.every(r=>e[r]===t[r]);let useMeasure=h=>{let{scroll:d=!1}=h||{},[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&&!p(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$1&&ResizeObserver&&(e$1=new ResizeObserver(y),g.current[2]=e$1,e$1.observe(t),d&&r&&r.forEach(e=>on(e,"scroll",y,{capture:!0,passive:!0})));}return useEffect(()=>d?listenScrollDebounced(0,w,100):noop,[d,w]),useEffect(()=>listenResizeDebounced(0,w,100),[w]),useEffect(()=>{x(),z();},[d]),useEffect(()=>(w(),x),[]),[e=>{e&&e!==g.current[0]&&(x(),g.current[0]=e,g.current[1]=f(e),z());},a,w]};
+
+let useNavigateAway=o=>{let n=useRef();useEffect(()=>{n.current=e=>{let r=o(e);return (r&&e.preventDefault(),"string"==typeof r)?e.returnValue=r:e.defaultPrevented?e.returnValue="":void 0};},[o]),useEffect(()=>on(window,"beforeunload",e=>n.current?.(e)),[]);};
+
+let usePrevious=(r,t)=>{let[o,u]=useState([r,t]);return o[1]!==r&&u([o[1],r]),o[0]};
+
+let usePreviousRef=t=>{let u=useRef();return useEffect(()=>{u.current=t;}),u.current};
+
+let l={x:0,y:0},n=r=>r?.getBoundingClientRect(),u=(r,e)=>{if(!isBrowser)return l;if(!e)return {x:window.scrollX,y:window.scrollY};let o=n(r?.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,y=()=>{let r=u(i,c);l(r,f.current),f.current=r,s=null;};useIsomorphicLayoutEffect(()=>{if(!isBrowser)return;let r=listenScroll(()=>{m?null===s&&(s=window.setTimeout(y,m)):y();},c?.current);return ()=>{r(),s&&clearTimeout(s);}},n);};
+
+let useScrollThreshold=(i,m)=>{let[n,f]=useState(!1),u=useCallback(()=>{if(i){let r=window.scrollY,o=r<i,e=r>i;f(e),m&&m(o,e);}},[i,m]);return useEffect(()=>{if(i){let r=listenScroll(u);return u(),r}return noop},[i,u]),n};
+
+let useSmoothScroll=i=>{let l=useFixedOffset();return useCallback((e,m,f,n,u)=>{let c;let p=!1;if(isNumber(e))c=e;else if(e){let t=document.getElementById(e);t&&(c=getOffsetTopSlim(t)-l.current,p=!0);}isNumber(c)&&scrollTo(c=c+(m||0)+(i||p?0:l.current),f,n,u);},[i,l])};
+
+var e,r;(r=e||(e={}))[r.IDLE=0]="IDLE",r[r.DELAY=1]="DELAY",r[r.DISPLAY=2]="DISPLAY",r[r.EXPIRE=3]="EXPIRE";let useSpinDelay=(e,r=500,i=200)=>{let[n,o]=useState(0),E=useRef();return useEffect(()=>{e&&0===n&&(clearTimeout(E.current),E.current=setTimeout(()=>{if(!e)return o(0);E.current=setTimeout(()=>{o(3);},i),o(2);},r),o(1)),e||2===n||(clearTimeout(E.current),o(0));},[e,n,r,i]),useEffect(()=>()=>clearTimeout(E.current),[]),2===n||3===n};
+
+let useTraceUpdate=t=>{let c=useRef(t);useEffect(()=>{let e=Object.entries(t).reduce((e,[r,t])=>(c.current[r]!==t&&(e[r]=[c.current[r],t]),e),{});Object.keys(e).length>0&&console.info("[@koine/react:useTraceUpdate] changed props:",e),c.current=t;});};
+
+let useUpdateEffect=(r,o)=>{let f=useFirstMountState();useEffect(()=>{if(!f)return r()},o);};
+
+let useWindowSize=(n,o)=>{let[d,m]=useState(0),[w,l]=useState(0);return useEffect(()=>{let e=()=>{m(window.innerWidth),l(window.innerHeight);},r=n?listenResizeDebounced(0,e,n,o):listenResize(e);return e(),r},[n,o]),[d,w]};
+
+let classed=r=>{let n=r.type||r;return function(r,...o){return forwardRef(function(e,s){let a=o.map((t,n)=>{let o="";return "function"==typeof t?o=t(e):void 0!==t&&(o=t.toString()),r[n]+o}).join(""),i="string"==typeof n,l=i?{}:e;if(i)for(let t in e)t.startsWith("$")||(l[t]=e[t]);let c=a||r[0];return c=(c.match(/class="([^"]*)/)?.[1]||c)+(e?.className?" "+e?.className:""),createElement(n,{...l,className:c||void 0,ref:s})})}};
+
+let createUseMediaQueryWidth=i=>{let o=getMediaQueryWidthResolvers(i);return function(t,i){let[s,a]=t.substring(1).split("-");isUndefined(a)&&(a=s),isUndefined(s)&&(s="min");let[m,d]=a.split("_"),l=o[s](m,d),[c,u]=useState(isUndefined(i)?null:i);return useIsomorphicLayoutEffect(()=>{let e=window.matchMedia(l),t=e=>{u(e.matches);};return (u(e.matches),e.addEventListener)?(e.addEventListener("change",t),()=>{e.removeEventListener("change",t);}):(e.addListener(t),()=>{e.removeListener(t);})},[l]),c}};
+
+let extendComponent=(t,o)=>Object.assign(o=>createElement(t,o),{...o,defaultProps:o});
+
+let mergeRefs=e=>r=>{e.forEach(e=>{"function"==typeof e?e(r):null!=e&&(e.current=r);});};
+
+export { classed, createUseMediaQueryWidth, extendComponent, mergeRefs, useAsyncFn, useFirstMountState, useFixedOffset, useFocus, useInterval, useIsomorphicLayoutEffect, useKeyUp, useMeasure, useMountedState, useNavigateAway, usePrevious, usePreviousRef, useScrollPosition, useScrollThreshold, useSmoothScroll, useSpinDelay, useTraceUpdate, useUpdateEffect, useWindowSize };