morphing-scroll 1.5.22 → 2.1.0

package/index.js

@@ -1 +1 @@
-"use strict";var e=require("react");const t=(e,t)=>{if(void 0!==e)return"number"==typeof e?[e,e,e,e]:2===e.length?t?[e[0],e[1],e[0],e[1]]:[e[1],e[0],e[1],e[0]]:4===e.length?t?[e[1],e[0],e[3],e[2]]:e:void 0},r=({style:r,root:n,children:l,threshold:s,rootMargin:o,visibleContent:i=!1,onVisible:a})=>{const[c,u]=e.useState(!1),d=e.useRef(null),p=t(o),m=p?`${p[0]}px ${p[1]}px ${p[2]}px ${p[3]}px`:"",h=e.useCallback((([e])=>{u(e.isIntersecting)}),[]),g=e.useMemo((()=>e.Children.toArray(l).filter((t=>e.isValidElement(t)))),[l]),f=e.useMemo((()=>{var e;return g.length>0&&null!==(e=g[0].key)&&void 0!==e?e:null}),[g]);e.useEffect((()=>{const e=new IntersectionObserver(h,{root:n,threshold:s,rootMargin:m});return d.current&&e.observe(d.current),()=>{e.disconnect()}}),[n,s,m]),e.useEffect((()=>{c&&a&&c&&a&&a(f||"")}),[c,a,f]);const v=i||c?l:null;return e.createElement("div",{ref:d,"intersection-tracker":"〈♦〉",style:r},v)},n=({measure:t="inner",style:r,onResize:n,children:l})=>{const s=e.useRef(null),[o,i]=e.useState({});e.useEffect((()=>{const e=s.current;if(!e)return;const t=new ResizeObserver((e=>{for(const t of e)i(t.contentRect),n&&n(t.contentRect)}));return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}),[t,n]);const a={minWidth:"100%",minHeight:"100%"},c={width:"max-content",height:"max-content"},u={inner:Object.assign({},c),outer:Object.assign({},a),all:Object.assign(Object.assign({},a),c)};return e.createElement("div",{ref:s,"resize-tracker":"〈♦〉",style:Object.assign(Object.assign({},u[t]),r)},l(o))};let l=1;exports.IntersectionTracker=r,exports.MorphScroll=({type:s="scroll",className:o="",size:i,objectsSize:a,direction:c="y",gap:u,padding:d,progressReverse:p=!1,progressTrigger:m={wheel:!0},progressVisibility:h="visible",suspending:g=!1,fallback:f=null,scrollTop:v,edgeGradient:b,objectsWrapFullMinSize:y=!1,children:x,onScrollValue:w,elementsAlign:j=!1,contentAlign:E,isScrolling:O,stopLoadOnScroll:M=!1,render:k={type:"default"},emptyElements:$})=>{var C,T,R;const z=e.useReducer((()=>({})),{})[1],A=e.useRef(null),S=e.useRef(null),B=e.useRef(null),N=e.useRef(null),Y=e.useRef(null),V=e.useRef(null),q=e.useRef(null),F=e.useRef("none"),L=e.useRef(0),I=e.useRef([]),W=e.useRef(0),X=e.useRef(null),D=e.useRef(""),[H,G]=e.useState(!1),[P,J]=e.useState({width:0,height:0}),[K,Q]=e.useState({width:0,height:0}),[U,Z]=e.useState({width:0,height:0}),_=function(){const t=e.useRef(null);return null===t.current&&(t.current="."+l++),t.current}(),ee={value:null!==(C=null==v?void 0:v.value)&&void 0!==C?C:null,duration:null!==(T=null==v?void 0:v.duration)&&void 0!==T?T:200},te={position:"absolute",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer"},re={color:null,size:40},ne=e.useCallback((t=>{if(null==t)return[];if(e.isValidElement(t)){const r=t;return r.type===e.Fragment?e.Children.toArray(r.props.children).flatMap(ne):[r]}return[t]}),[]),le="clear"===(null==$?void 0:$.mode),se=e.useMemo((()=>le?D.current:""),[le,D.current]),oe=e.useMemo((()=>e.Children.toArray(x).flatMap(ne).filter(Boolean).filter((t=>!le||!e.isValidElement(t)||!D.current.includes(t.key)))),[x,le,se]),ie=e.useMemo((()=>{if("end"!==ee.value)return null;if(oe.length>0){const t=oe[0];if(e.isValidElement(t))return t.key}return null}),[oe,ee.value]),ae=Object.assign(Object.assign({},{size:40}),"object"==typeof m.arrows?m.arrows:{}),ce="object"==typeof b?Object.assign(Object.assign({},re),b):re,ue=Object.assign({position:"absolute",left:0,width:"100%",pointerEvents:"none",transition:"opacity 0.1s ease-in-out",height:`${ce.size}px`},ce.color&&{background:`linear-gradient(${ce.color}, transparent)`}),[de,pe,me,he]=t(d,"x"===c)||[0,0,0,0],ge=de+me,fe=he+pe,[ve,be]=e.useMemo((()=>{var e,t,r,n;return"number"==typeof u?[u,u]:Array.isArray(u)?"x"===c?[null!==(e=u[0])&&void 0!==e?e:0,null!==(t=u[1])&&void 0!==t?t:0]:[null!==(r=u[1])&&void 0!==r?r:0,null!==(n=u[0])&&void 0!==n?n:0]:[0,0]}),[u,c]),ye=e.useMemo((()=>["number"==typeof a[0]?a[0]:"none"===a[0]?null:"firstChild"===a[0]?U.width:null,"number"==typeof a[1]?a[1]:"none"===a[1]?null:"firstChild"===a[1]?U.height:null]),[a,U]),xe="x"===c?ye[0]:ye[1],we="x"===c?ye[1]:ye[0],je=e.useMemo((()=>t("default"!==k.type&&k.rootMargin||0,"x"===c)),[k,c]),[Ee,Oe]=je?[je[2],je[0]]:[0,0],Me=e.useMemo((()=>{const[e,t]=i&&Array.isArray(i)?i:[P.width,P.height];return m.arrows&&ae.size?"x"===c?[e?e-2*ae.size:e,t,e,t]:[e,t?t-2*ae.size:t,e,t]:[e,t,e,t]}),[i,c,ae.size,P]),ke="x"===c?Me[0]:Me[1],$e="x"===c?Me[1]:Me[0],Ce=e.useMemo((()=>{const e=we?we+ve:null;return e?Math.floor(($e-fe)/e):1}),[we,$e,ve,fe]),Te=e.useMemo((()=>{if("virtual"!==k.type||Ce<=1)return[];const e=oe.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:Ce},(()=>[]));return e.forEach((e=>{t[e%Ce].push(e)})),t}),[x,Ce,k.type]),Re=e.useMemo((()=>Ce>1?Math.ceil(oe.length/Ce):oe.length),[oe.length,Ce]),ze=e.useMemo((()=>{const e=Ce||1;return we?we*e+(e-1)*be:"virtual"!==k.type?K.width:(U.width+be)*e-be}),[we,Ce,be,K,U,k.type]),Ae=e.useMemo((()=>{const e=Re-1,t=e<=0?0:e*ve;return xe?xe*Re+t:"virtual"!==k.type?K.height:U.height+t}),[xe,Re,ve,K,U,k.type]),Se=e.useMemo((()=>Ae?Ae+ge:0),[Ae,ge]),Be=e.useMemo((()=>ze?ze+fe:0),[ze,fe]),Ne=(null===(R=B.current)||void 0===R?void 0:R.scrollTop)||0,Ye=Math.round(Ne+ke)!==Se,Ve=e.useMemo((()=>"hidden"===h&&Se||0===Ae?0:ke?Math.round(ke/Se*ke):0),[ke,Se,h]),qe=e.useMemo((()=>ke?Se-ke:Se),[Se,ke]),Fe=e.useMemo((()=>Me[0]&&Me[1]?Me[0]/2-Me[1]/2:0),[Me]),Le=e.useMemo((()=>{let e=[],t=0;if("virtual"===k.type&&j){const r=Array.from({length:oe.length},((e,t)=>t)),n=Math.abs(Math.floor(oe.length/Ce)*Ce-oe.length);e=n?r.slice(-n):[],"center"===j?t=((null!=we?we:0)+be)*(Ce-n)/2:"end"===j&&(t=((null!=we?we:0)+be)*(Ce-n))}return oe.map(((r,n)=>{const l=function(e,t){if(!t)return[0,e];for(let r=0;r<t.length;r++){const n=t[r].indexOf(e);if(-1!==n)return[r,n]}return[0,0]}(n,Te),s=function(e){return 0!==e?((null!=xe?xe:0)+ve)*e+de:de}("virtual"===k.type?Ce>1?l[1]:n:0),o="virtual"===k.type&&ye[1]?s+ye[1]:0,i="virtual"===k.type&&we?we*l[0]+be*l[0]+he+(j&&e.length>0&&e.includes(n)?t:0):0;return{elementTop:s,elementBottom:o,left:i}}))}),[x,Te,ye,u,k.type,Ce]),Ie=e.useMemo((()=>{var e,t;if(!E)return{};const[r,n="start"]=E,l="start"===r?"flex-start":"center"===r?"center":"flex-end",s="start"===n?"flex-start":"center"===n?"center":"flex-end",o=null!==(e=Me[0])&&void 0!==e?e:0,i=null!==(t=Me[1])&&void 0!==t?t:0,a="x"===c?o>Se:i>Se,u={};return("x"===c?i>Be:o>Be)&&(u.justifyContent="x"===c?s:l),a&&(u.alignItems="x"===c?l:s),u}),[E,c,Me,Se,Be]),We=e.useCallback((e=>(e?Math.ceil:Math.floor)(Se/ke)),[ke,Se]),Xe=e=>{e&&(e.style.cursor="grabbing")},De=e=>{e&&"grabbing"===e.style.cursor&&(e.style.cursor="grab")},He=(e,t)=>{if(e){const r=e.querySelector(`.${t}`);r&&(r.style.opacity="0")}},Ge=e.useCallback((e=>{const t=B.current,r=N.current;if(!t||!r)return;const n=r.clientHeight,l=We(),s=e=>rt(e);"first"===e&&t.scrollTop>0&&s(t.scrollTop<=ke?0:t.scrollTop-ke),"last"===e&&l&&t.scrollTop+ke!==n&&s(t.scrollTop+ke>=ke*l?n:t.scrollTop+ke)}),[B,N,We]),Pe=e.useCallback((()=>{const e=B.current;if(e&&S.current&&V.current){function t(){var t;const r=null===(t=V.current)||void 0===t?void 0:t.querySelectorAll(".sliderElem");r&&r.forEach(((t,r)=>{var n,l;const s=(null!==(n=null==e?void 0:e.scrollTop)&&void 0!==n?n:0)>=ke*r&&(null!==(l=null==e?void 0:e.scrollTop)&&void 0!==l?l:0)<ke*(r+1);t.classList.toggle("active",s)}))}t()}}),[ke,Se]),Je=e.useCallback((()=>{const e=B.current;if(!e)return;const t=M||O;if(!H&&(null==O||O(!0)),t&&G(!0),X.current&&clearTimeout(X.current),X.current=setTimeout((()=>{t&&G(!1),null==O||O(!1),"default"!==k.type&&ot()}),200),0!==Ve&&"hidden"!==h){const t=Math.abs(Math.round(e.scrollTop/qe*(ke-Ve)));t!==W.current&&"slider"!==s&&(W.current=Ve+t>ke?ke-Ve:t),w&&w(e.scrollTop)}b&&Pe(),"default"!==k.type&&ot(!1),z()}),[ke,Ve,W,h,w,Pe,b,O,M,$,k]),Ke=e.useCallback((e=>{const t=B.current,r=We();if(t&&r){if(["thumb","wrapp"].includes(F.current)){const n="thumb"===F.current?1:-1;t.scrollTop+=("x"===c?e.movementX:e.movementY)*r*n}if("slider"===F.current){const r=N.current;if(!r)return;const n=r.clientHeight,l=e=>rt(e,(()=>{L.current=0,z()})),s=e=>{const r=t.scrollTop+e*ke;l(e>0?Math.min(r,n-ke):Math.max(r,0))};e.movementY>0&&L.current<1?(L.current+=e.movementY,L.current>=1&&t.scrollTop+ke!=n&&s(1)):e.movementY<0&&L.current>-1&&(L.current-=Math.abs(e.movementY),L.current<=-1&&0!=t.scrollTop&&s(-1))}}}),[c,B,We]),Qe=e.useCallback((e=>{if(window.removeEventListener("mousemove",Ke),window.removeEventListener("mouseup",Qe),document.body.style.removeProperty("cursor"),De(N.current),De(Y.current),F.current="none","hover"===h){let t=e.target,r=!1;for(;t&&t!==document.body;){if(t===S.current){r=!0;break}t=t.parentNode}r||He(S.current,"scroll"===s?"scrollBar":"sliderBar")}z()}),[Ke,A,h,s]),Ue=e.useCallback((e=>{F.current=e,z(),window.addEventListener("mousemove",Ke),window.addEventListener("mouseup",Qe),document.body.style.cursor="grabbing"}),[Ke,Qe,A]),Ze=e.useCallback((e=>{var t,r;const n={width:null!==(t=e.width)&&void 0!==t?t:0,height:null!==(r=e.height)&&void 0!==r?r:0};P.width===n.width&&P.height===n.height||J(n)}),[ge,P]),_e=e.useCallback((e=>{var t,r;const n={width:(null!==(t=e.width)&&void 0!==t?t:0)-fe,height:(null!==(r=e.height)&&void 0!==r?r:0)-ge};K.width===n.width&&K.height===n.height||Q(n)}),[fe,ge,K]),et=e.useCallback((e=>{var t,r;const n={width:null!==(t=e.width)&&void 0!==t?t:0,height:null!==(r=e.height)&&void 0!==r?r:0};U.width===n.width&&U.height===n.height||Z(n)}),[U]);let tt;const rt=e.useCallback(((e,t)=>{const r=B.current;if(!r)return null;const n=r.scrollTop;let l=null;const s=o=>{null===l&&(l=o);const i=Math.round(o-l),a=Math.min(i/ee.duration,1)||0;r.scrollTop=n+(e-n)*a,i<=ee.duration?tt=requestAnimationFrame(s):null==t||t()};return tt=requestAnimationFrame(s),()=>cancelAnimationFrame(tt)}),[B,ee.duration,ee.value]),nt=e.useCallback((e=>{"lazy"===k.type&&k.onVisible?(k.onVisible(e),ot()):ot()}),[k]),lt=(t,n,l,s,o)=>{const i=g?e.createElement(e.Suspense,{fallback:f},s):s,a=Object.assign({width:we?`${we}px`:"",height:xe?`${xe}px`:""},"x"===c&&{display:"flex"}),u=Object.assign({width:ye[0]?`${ye[0]}px`:""},"x"===c&&{transform:"rotate(-90deg) scaleX(-1)"}),d={root:B.current,rootMargin:"lazy"===k.type?k.rootMargin:je,style:"virtual"===k.type?Object.assign(Object.assign(Object.assign(Object.assign({},a),{position:"absolute",top:`${t}px`}),n&&{left:`${n}px`}),!we&&1===Ce&&{transform:"translateX(-50%)"}):a,onVisible:nt},p=e.createElement("div",Object.assign({},l?{"wrap-id":l}:{},{onClick:it,style:u,key:o}),i);return"virtual"===k.type?e.createElement("div",{key:o,style:Object.assign(Object.assign(Object.assign({position:"absolute",top:`${t}px`},n&&{left:`${n}px`}),!we&&1===Ce&&{transform:"translateX(-50%)"}),a)},p):"lazy"===k.type?e.createElement(r,Object.assign({key:o},d),p):e.createElement("div",{key:o,style:a},p)},st=e.useCallback((()=>document.querySelectorAll(`[wrap-id^="${_}-"]`)),[]),ot=e.useCallback(((e=!0)=>{if(!$)return;const t=Array.from(st()).filter((e=>0===e.children.length)).map((e=>{var t;return null===(t=e.getAttribute("wrap-id"))||void 0===t?void 0:t.split("-")[1]})).filter(Boolean).join("/");D.current?t&&!D.current.includes(t)&&(D.current=`${D.current}/${t}`):D.current=t,e&&z()}),[D.current]),it=e.useCallback((e=>{var t;if(!(null===(t=null==$?void 0:$.clickTrigger)||void 0===t?void 0:t.selector))return;e.target.closest(null==$?void 0:$.clickTrigger.selector)&&(X.current&&clearTimeout(X.current),X.current=setTimeout((()=>{ot()}),$.clickTrigger.delay))}),[$]);e.useEffect((()=>{ot()}),[oe.length]),e.useEffect((()=>{"virtual"===k.type&&z(),Pe()}),[]),e.useEffect((()=>{if(B.current&&oe.length>0){let e;return"end"===ee.value&&Se>ke?(q.current||(q.current=ie),e=q.current===ie?rt(qe):null,q.current=ie):"number"==typeof ee.value&&(e=rt(ee.value)),()=>{e&&e(),X.current&&clearTimeout(X.current),I.current=[]}}}),[null==v?void 0:v.updater,ee.value,rt,qe]),e.useEffect((()=>{if(M){const e=Array.from(st(),(e=>e.getAttribute("wrap-id")));I.current=e}}),[M]);const at=e.createElement("div",{className:"objectsWrapper",ref:N,onMouseDown:()=>{m.content&&(Ue("wrapp"),Xe(N.current))},style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({height:"virtual"===k.type&&Se||"none"!==a[1]?`${Se}px`:"fit-content",width:Be?`${Be}px`:""},m.content&&{cursor:"grab"}),"virtual"===k.type&&{position:"relative"}),"virtual"!==k.type&&{display:"flex",alignContent:"center"}),"virtual"!==k.type&&"y"===c&&{alignItems:"center"}),"virtual"!==k.type&&Ce>1&&{flexWrap:"wrap"}),"virtual"!==k.type&&Ce<=1&&{flexDirection:"column"}),u&&"virtual"!==k.type&&{gap:`${ve}px ${be}px`}),j&&"virtual"!==k.type&&{justifyContent:"start"===j?"flex-start":"center"===j?"center":"flex-end"}),y&&{minHeight:ke-ge+"px"})},oe.map(((t,r)=>{var l,s,o;const i=t.key||"",u=M&&!I.current.includes(`${_}-${i}`)&&H?f:"fallback"===(null==$?void 0:$.mode)&&D.current.includes(i)?null!==(l=$.element)&&void 0!==l?l:f:t,d="number"==typeof a[0]&&"number"==typeof a[1]||"firstChild"!==a[0]&&"firstChild"!==a[1]||0!==r?u:e.createElement(n,{onResize:et},(()=>u));if("virtual"!==k.type)return lt(0,0,`${_}-${i}`,d,i);{const{elementTop:e,elementBottom:t,left:n}=Le[r];if(("x"===c?null!==(s=Me[0])&&void 0!==s?s:0:null!==(o=Me[1])&&void 0!==o?o:0)+Ee>e-Ne&&t-Ne>0-Oe)return lt(e,n,`${_}-${i}`,d,i)}}))),ct=e.createElement("div",{"morph-scroll":"〈♦〉",className:`${o&&o}`,ref:A,style:{width:`${Me[2]}px`,height:`${Me[3]}px`}},e.createElement("div",{className:"scrollContent",ref:S,onMouseEnter:()=>"hover"===h&&((e,t)=>{if(e){const r=e.querySelector(`.${t}`);r&&(r.style.opacity="1")}})(S.current,"scroll"===s?"scrollBar":"sliderBar"),onMouseLeave:()=>"hover"===h&&"thumb"!==F.current&&"slider"!==F.current&&He(S.current,"scroll"===s?"scrollBar":"sliderBar"),style:Object.assign(Object.assign({position:"relative",width:`${$e}px`,height:`${ke}px`},"x"===c&&{transform:`rotate(-90deg) translate(${Fe}px, ${Fe}px) scaleX(-1)`}),m.arrows&&ae.size&&("x"===c?{left:`${ae.size}px`}:{top:`${ae.size}px`}))},e.createElement("div",{className:"scrollElement",ref:B,onScroll:Je,style:Object.assign(Object.assign(Object.assign({display:"flex",width:"100%",height:"100%"},Ie),m.wheel?{overflow:"hidden scroll"}:{overflow:"hidden hidden"}),"boolean"!=typeof m.progressElement||!1===m.progressElement?{scrollbarWidth:"none"}:{})},"none"!==a[0]&&"none"!==a[1]?at:e.createElement(n,{onResize:_e},(()=>at))),b&&e.createElement("div",{className:"edge",style:Object.assign(Object.assign({},ue),{top:0,opacity:Ne>1?1:0})}),b&&e.createElement("div",{className:"edge",style:Object.assign(Object.assign({},ue),{bottom:0,opacity:Ye?1:0,transform:"scaleY(-1)"})}),m.arrows&&e.createElement(e.Fragment,null,e.createElement("div",{className:"arrowBox"+(Ne>1?" active":""),style:Object.assign(Object.assign({},te),{top:0,transform:"translateY(-100%)",height:`${ae.size}px`}),onClick:()=>Ge("first")},ae.element),e.createElement("div",{className:"arrowBox"+(Ye?" active":""),style:Object.assign(Object.assign({},te),{bottom:0,transform:"translateY(100%) scaleY(-1)",height:`${ae.size}px`}),onClick:()=>Ge("last")},ae.element)),"hidden"!==h&&Ve<Ae&&"boolean"!=typeof m.progressElement&&e.createElement(e.Fragment,null,"slider"!==s?e.createElement("div",{className:"scrollBar",style:Object.assign(Object.assign(Object.assign(Object.assign({position:"absolute",top:0},p?{left:0}:{right:0}),{width:"fit-content",height:"100%"}),!1!=!m.progressElement&&{pointerEvents:"none"}),"hover"===h&&{opacity:0,transition:"opacity 0.1s ease-in-out"})},e.createElement("div",{ref:Y,className:"scrollBarThumb",onMouseDown:()=>{m.progressElement&&(Ue("thumb"),Xe(Y.current))},style:Object.assign({height:`${Ve}px`,willChange:"transform",transform:`translateY(${W.current}px)`},m.progressElement&&{cursor:"grab"})},m.progressElement)):e.createElement("div",{className:"sliderBar",style:Object.assign(Object.assign(Object.assign({position:"absolute",top:"50%",transform:"translateY(-50%)"},p?{left:0}:{right:0}),!m.progressElement&&{pointerEvents:"none"}),"hover"===h&&{opacity:0,transition:"opacity 0.1s ease-in-out"}),ref:V,onMouseDown:()=>Ue("slider")},Array.from({length:We()||0},((t,r)=>e.createElement("div",{key:r,className:"sliderElem",style:{width:"fit-content"}},m.progressElement)))))));return i?ct:e.createElement(n,{measure:"outer",onResize:Ze},(()=>ct))},exports.ResizeTracker=n;
+"use strict";var e=require("react");const t=(e,t=!1,r)=>{let n=[];if(n=Array.isArray(e)?2===e.length?[e[1],e[0],e[1],e[0]]:[...e]:[e,e,e,e],t&&(n=[n[1],n[0],n[3],n[2]]),r){const e=[];for(let t=0;t<r;t++)e.push(n[t%4]);n=e}return n},r=({className:t,children:r,style:n,measure:o="inner",onResize:l})=>{const s=e.useRef(null);e.useEffect((()=>{const e=s.current;if(!e)return;const t=new ResizeObserver((e=>{for(const t of e)l&&l(t.contentRect)}));return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}),[o,l]);const i={minWidth:"100%",minHeight:"100%"},c={width:"max-content",height:"max-content"},a={inner:Object.assign({},c),outer:Object.assign({},i),all:Object.assign(Object.assign({},i),c)};return e.createElement("div",{"resize-tracker":"",className:t,ref:s,style:Object.assign(Object.assign({},a[o]),n)},r)};function n(t,r){const n=e.useMemo((()=>function(e,t){let r=null;const n=(...n)=>{r&&clearTimeout(r),r=setTimeout((()=>{e(...n)}),t)};return n.cancel=()=>{r&&(clearTimeout(r),r=null)},n}(((...e)=>t(...e)),r)),[r]);return e.useEffect((()=>()=>{n.cancel()}),[n]),n}let o=1;var l=e.memo((({type:t,direction:r,progressReverse:n,size:o,progressTrigger:l,scrollBarOnHover:s,scrollBarEvent:i,thumbSize:c,thumbSpace:a,objLengthPerSize:u,sliderCheckLocal:d})=>{const m="sliderMenu"!==t?{onMouseDown:i,onTouchStart:i}:{},p=e.useMemo((()=>{if("scroll"===t||!r)return;const n=["hybrid","y"].includes(r)?"y":"x",s="x"===n?o[0]:o[1];return Array.from({length:u},((r,o)=>e.createElement("div",{key:o,className:"sliderElem",style:Object.assign({},"sliderMenu"===t&&{cursor:"pointer"}),onClick:"sliderMenu"===t?()=>{i(s*o,n,d)}:void 0},Array.isArray(null==l?void 0:l.progressElement)?l.progressElement[o]:null==l?void 0:l.progressElement)))}),[u,r,o,t,i,null==l?void 0:l.progressElement]);return e.createElement(e.Fragment,null,"scroll"===t?e.createElement("div",{className:"ms-bar",style:Object.assign(Object.assign(Object.assign({position:"absolute",width:"fit-content"},"x"===r?Object.assign({transformOrigin:"left top",height:`${o[0]}px`},n?{top:0,transform:"rotate(-90deg) translateX(-100%)"}:{transform:"rotate(-90deg)"}):Object.assign({top:0,height:"100%"},n?{left:0}:{right:0})),!1!=!(null==l?void 0:l.progressElement)&&{pointerEvents:"none"}),s&&{opacity:0,transition:"opacity 0.1s ease-in-out"})},e.createElement("div",Object.assign({className:"ms-thumb","data-direction":["hybrid","y"].includes(r)?"y":r},m,{style:Object.assign({height:`${c}px`,willChange:"transform",transform:`translateY(${a}px)`},(null==l?void 0:l.progressElement)&&{cursor:"grab"})}),null==l?void 0:l.progressElement)):u>1&&(null==l?void 0:l.progressElement)&&e.createElement("div",Object.assign({className:"ms-slider","data-direction":["hybrid","y"].includes(r)?"y":r},m,{style:Object.assign(Object.assign(Object.assign({position:"absolute",display:"flex"},"slider"===t&&{cursor:"grab"}),s&&{opacity:0,transition:"opacity 0.1s ease-in-out"}),"x"===r?Object.assign({transformOrigin:"left top",left:"50%",transform:"translateX(-50%)"},n?{top:0}:{bottom:0}):Object.assign({flexDirection:"column",top:"50%",transform:"translateY(-50%)"},n?{left:0}:{right:0}))}),p))}));var s=e.memo((({edgeGradient:t,visibility:r,edgeType:n})=>{if(!t)return null;const o=Object.assign(Object.assign(Object.assign(Object.assign({position:"absolute",pointerEvents:"none",transition:"opacity 0.1s ease-in-out"},t.color&&{background:t.color&&`linear-gradient(${"right"===n||"left"===n?"90deg, ":""}${t.color}, transparent)`}),"right"===n||"left"===n?{height:"100%",width:`${t.size}px`,top:0}:{width:"100%",height:`${t.size}px`,left:0}),n?{[n]:0}:{}),"right"===n?{transform:"scaleX(-1)"}:"bottom"===n?{transform:"scaleY(-1)"}:{});return e.createElement("div",{className:"ms-edge"+(n?` ${n}`:""),style:Object.assign(Object.assign({},o),{opacity:r?1:0})})}));var i=e.memo((({activity:t,arrows:r,arrowType:n,handleArrow:o,size:l})=>{const s=Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer",width:`${r.size}px`},n?{[n]:0}:{}),"top"===n&&{transform:"rotate(-90deg) translateX(-100%)",transformOrigin:"left top"}),"bottom"===n&&{transform:"rotate(90deg) translateX(-100%)",transformOrigin:"left bottom"}),"left"===n&&{transform:"scaleX(-1)"}),["top","bottom"].includes(n)?{height:`${l}px`}:{height:"100%",top:0});return e.createElement("div",{className:`ms-arrow-box ${n}${t?" active":""}`,style:Object.assign({},s),onClick:()=>o(n)},r.element)}));function c(e,t){if(e<=t)return 1;return Math.floor(e/t)}function a(e,t=0,r=1/0){return Math.max(t,Math.min(Math.round(e),r))}const u=(e,t,r)=>{if(!t)return;const n=t.querySelectorAll("."+("scroll"===e?"ms-thumb":"ms-slider"));n.length>0&&(r.current=n)};function d(e,t,r=0,n=0){return o=>{var l,s,i,c;const a={width:(null!==(l=o.width)&&void 0!==l?l:0)-r,height:(null!==(s=o.height)&&void 0!==s?s:0)-n};(null===(i=e.current)||void 0===i?void 0:i.width)===a.width&&(null===(c=e.current)||void 0===c?void 0:c.height)===a.height||(e.current=a,t())}}function m(t){const r=[],n=t=>{if(null===t||"number"==typeof t||"boolean"==typeof t||"bigint"==typeof t)r.push(String(t));else if("string"==typeof t)r.push(t);else if("function"==typeof t)r.push("<function>");else if(e.isValidElement(t))r.push("<react-node>");else if(Array.isArray(t))t.forEach(n);else if("object"==typeof t){const e=Object.entries(t).sort((([e],[t])=>e.localeCompare(t)));for(const[,t]of e)n(t)}else void 0===t&&r.push("<undefined>")};return n(t),r.join("/")}function p(e){var t,r,n;const o={x:"touches"in e.mouseEvent?e.mouseEvent.touches[0].clientX:e.mouseEvent.clientX,y:"touches"in e.mouseEvent?e.mouseEvent.touches[0].clientY:e.mouseEvent.clientY,leftover:null!==(r=null===(t=e.prevCoordsRef.current)||void 0===t?void 0:t.leftover)&&void 0!==r?r:0},l=null!==(n=e.prevCoordsRef.current)&&void 0!==n?n:o,s={x:o.x-l.x,y:o.y-l.y};e.prevCoordsRef.current=o;const i=t=>{if(!e.scrollElementRef||!e.objectsWrapperRef)return;let r=0;const n="x"===t?"movementX"in e.mouseEvent?e.mouseEvent.movementX:s.x:"movementY"in e.mouseEvent?e.mouseEvent.movementY:s.y,o=e.scrollElementRef;if("thumb"===e.clicked){const s=e.objectsWrapperRef,i=getComputedStyle(s),c="x"===t?o.clientWidth:o.clientHeight,a="x"===t?s.clientWidth+parseFloat(i.marginLeft)+parseFloat(i.marginRight):s.clientHeight+parseFloat(i.marginTop)+parseFloat(i.marginBottom),u=c-e.thumbSize,d=a-c;if(u<=0||d<=0)return;const m=n*(d/u)+l.leftover,p=Math.trunc(m),f=m-p;e.prevCoordsRef.current.leftover=f,r=p}else r=-n;"x"===t?(o.scrollLeft+=r,e.scrollStateRef.targetScrollX=o.scrollLeft):(o.scrollTop+=r,e.scrollStateRef.targetScrollY=o.scrollTop)},c=t=>{const r=e.objectsWrapperRef;if(!r)return;const n="slider"===e.type&&"wrapp"===e.clicked?-1:1,o=s[t]*n,l="x"===t?e.sizeLocal[0]:e.sizeLocal[1],i="x"===t?r.offsetWidth:r.offsetHeight,c="x"===t?e.scrollElementRef.scrollLeft:e.scrollElementRef.scrollTop;e.numForSliderRef.current+=Math.abs(o),e.numForSliderRef.current>6&&!e.isScrollingRef.current&&(o>0&&c+l<i?e.smoothScroll(c+l,t):o<0&&c>0&&e.smoothScroll(c-l,t),e.numForSliderRef.current=0)},a=t=>{"thumb"===e.clicked?i(t):"wrapp"===e.clicked?"slider"===e.type?c(t):i(t):"slider"===e.clicked&&c(t)};"hybrid"===e.direction?"wrapp"===e.clicked?(a("x"),a("y")):e.axisFromAtr&&a(e.axisFromAtr):a(e.direction||"y")}function f(e){if(e.controller.abort(),document.body.style.removeProperty("cursor"),["thumb","slider"].includes(e.clicked)&&e.mouseOnEl(e.scrollBar),"wrapp"===e.clicked&&e.mouseOnEl(e.objectsWrapperRef),e.clickedObject.current="none",e.scrollBarOnHover){let t=e.mouseEvent.target,r=!1;for(;t&&t!==document.body;){if(t===e.scrollContentRef){r=!0;break}t=t.parentNode}r||e.mouseOnRefHandle(e.mouseEvent)}e.prevCoordsRef.current=null,e.triggerUpdate()}const g=e=>{e&&("grab"===e.style.cursor?(e.style.cursor="grabbing",e.classList.add("active")):"grabbing"===e.style.cursor&&(e.style.cursor="grab",e.classList.remove("active")))},h="wrap-id",b=new Map,v=(e,t,r)=>{y(e);const n=setTimeout((()=>{t(),b.delete(e)}),r);b.set(e,n)},y=e=>{const t=b.get(e);t&&(clearTimeout(t),b.delete(e))};exports.IntersectionTracker=({className:r,children:n,style:o,root:l,threshold:s,rootMargin:i,visibleContent:c=!1,onVisible:a})=>{const[u,d]=e.useState(!1),m=e.useRef(null),p=i?t(i):null,f=p?`${p[0]}px ${p[1]}px ${p[2]}px ${p[3]}px`:"",g=e.useCallback((([e])=>{d(e.isIntersecting),e.isIntersecting&&a&&a(e)}),[a]);e.useEffect((()=>{const e=new IntersectionObserver(g,{root:l,threshold:s,rootMargin:f});return m.current&&e.observe(m.current),()=>{e.disconnect()}}),[g,l,s,f]);const h=c||u?n:null;return e.createElement("div",{"intersection-tracker":"",className:r,ref:m,style:o},h)},exports.MorphScroll=({type:y="scroll",className:x="",size:E,objectsSize:j,direction:O="y",gap:w,wrapperMargin:S,wrapperMinSize:R,progressReverse:M=!1,progressTrigger:k={wheel:!0},scrollBarOnHover:T=!1,suspending:z=!1,fallback:$=null,scrollPosition:A,edgeGradient:C,children:L,onScrollValue:F,elementsAlign:N=!1,elementsDirection:I="row",wrapperAlign:W,isScrolling:X,render:H,emptyElements:Y,crossCount:B})=>{var P,q,D,V,K,G;const U=n((()=>{Mt()}),40),_=n((()=>{ht()}),34),J=function(){const t=e.useRef(null);return null===t.current&&(t.current=""+o++),t.current}(),Q=e=>`Prop "${e}" is not provided\nMorphScroll〈♦${J}〉`;if(!E)throw new Error(Q("size"));0===Object.keys(k).length&&console.error(Q("progressTrigger"));const[Z,ee]=e.useState(0),te=()=>{ee((e=>"number"==typeof e&&e<1e3?e+1:0))},re=e.useRef(null),ne=e.useRef(null),oe=e.useRef(null),le=e.useRef(null),se=e.useRef([]),ie=e.useRef(null),ce=e.useRef("none"),ae=e.useRef({loaded:[],empty:[]}),ue=e.useRef({targetScrollY:0,targetScrollX:0,animating:!1,animationFrameId:0}),de=e.useRef(!1),me=e.useRef(0),pe=e.useRef(null);function fe(){return e.useRef({width:0,height:0})}const ge=fe(),he=fe(),be=fe(),[ve,ye,xe,Ee,je,Oe,we,Se]=function(...e){return e.map(m)}(A,H,E,j,Y,R,W,w),Re=e.useMemo((()=>{var e,t;return{value:"number"==typeof(null==A?void 0:A.value)||"string"==typeof(null==A?void 0:A.value)?[A.value,A.value]:null!==(e=null==A?void 0:A.value)&&void 0!==e?e:[null],duration:null!==(t=null==A?void 0:A.duration)&&void 0!==t?t:200}}),[ve]),Me={color:null,size:40},ke=e.useMemo((()=>"object"==typeof C?Object.assign(Object.assign({},Me),C):Me),[C]),Te=e.useMemo((()=>Object.assign(Object.assign({},Me),"object"==typeof k.arrows?k.arrows:{})),[k.arrows]),ze=e.useCallback((t=>{if(null==t)return[];if(e.isValidElement(t)){const r=t;return r.type===e.Fragment?e.Children.toArray(r.props.children).flatMap(ze):[r]}return[t]}),[]),$e=e.useMemo((()=>e.Children.toArray(L).flatMap(ze).map((t=>e.isValidElement(t)&&t.key?String(t.key):null)).filter((e=>null!==e)).filter((e=>{var t;return"clear"!==(null==Y?void 0:Y.mode)||!(null===(t=ae.current.empty)||void 0===t?void 0:t.includes(e))}))),[L,je,null===(P=ae.current.empty)||void 0===P?void 0:P.join()]),[Ae,Ce,Le,Fe]=S?t(S):[0,0,0,0],Ne=Ae+Le,Ie=Fe+Ce,[We,Xe]=e.useMemo((()=>{var e,t;return"number"==typeof w?[w,w]:Array.isArray(w)?[null!==(e=w[1])&&void 0!==e?e:0,null!==(t=w[0])&&void 0!==t?t:0]:[0,0]}),[w]),He=e.useMemo((()=>t((null==H?void 0:H.rootMargin)||0,"x"===O)),[ye,O]),[Ye,Be]=He?[He[2],He[0]]:[0,0],Pe=e.useMemo((()=>{const[e,t]=Array.isArray(E)?E:"number"==typeof E?[E,E]:[ge.current.width,ge.current.height];if(!k.arrows||!Te.size)return[e,t,e,t];const r=2*Te.size;let n=e,o=t;return"x"===O?n=e-r:"y"===O?o=t-r:"hybrid"===O&&(n=e-r,o=t-r),[n,o,e,t]}),[xe,Te.size,ge.current]),qe="x"===O?Pe[0]:Pe[1],De=e.useMemo((()=>j?Array.isArray(j)?j:t(j,!0,2):[null,null]),[Ee]),Ve=JSON.stringify(De),Ke=e.useMemo((()=>{const e=(e,t)=>"number"==typeof e?e:"firstChild"===e?t:0;return[e(De[0]&&"none"!==De[0]&&"size"!==De[0]?De[0]:"y"===O&&"none"!==De[0]||"size"===De[0]?Pe[0]:0,be.current.width),e(De[1]&&"none"!==De[1]&&"size"!==De[1]?De[1]:"x"===O&&"none"!==De[1]||"size"===De[1]?Pe[1]:0,be.current.height)]}),[Ve,be.current]),Ge=e.useMemo((()=>{const e="x"===O,t="row"===I,r="column"===I,n=e?Pe[1]:Pe[0],o=e?Ke[1]+Xe:Ke[0]+We,l="hybrid"===O?o*($e.length+1)-o:n,s=Math.floor(l/o)||1,i=B&&B<=s?"hybrid"===O?Math.ceil(s/B):B:s,c=i>1&&i<$e.length?Math.ceil($e.length/i):$e.length,a=B&&B<$e.length,u=e=>Number.isFinite(e)&&e>0?e:1;if("hybrid"===O){const e=a?t?B:i:t?$e.length:1,n=a?r?B:i:r?$e.length:1;return[u(e),u(n)]}return[u(i),u(c)]}),[$e.length,O,Ke.join(),Pe.join(),We,Ie,Ne,B]),Ue=e.useMemo((()=>{const e=Ge[0]?Ge[0]*Xe-Xe:0,t="x"===O?Ge[1]:Ge[0];return Ke[0]?(Ke[0]+Xe)*t-Xe:(null==H?void 0:H.type)?be.current.width+e:he.current.width}),[Ke[0],Ge.join(),Xe,he.current.width,be.current,ye]),_e=e.useMemo((()=>{const e=Ge[1]<1?1:Ge[0]*We-We;return Ke[1]?"x"===O?(Ke[1]+We)*Ge[0]-We:(Ke[1]+We)*Ge[1]-We:(null==H?void 0:H.type)?be.current.height+e:he.current.height}),[Ke[1],Ge.join(),We,he.current.height,be.current,ye]),Je=e.useMemo((()=>_e+Ne),[_e,Ne]),Qe=e.useMemo((()=>Ue+Ie),[Ue,Ie]),Ze="x"===O?Qe:Je,et="x"===O?(null===(q=oe.current)||void 0===q?void 0:q.scrollLeft)||0:(null===(D=oe.current)||void 0===D?void 0:D.scrollTop)||0,tt=et>1&&!0,rt=Math.round(et+qe)<Ze;let nt=!1,ot=!1;"hybrid"===O&&(nt=((null===(V=oe.current)||void 0===V?void 0:V.scrollLeft)||0)>1&&!0,ot=Math.round(((null===(K=oe.current)||void 0===K?void 0:K.scrollLeft)||0)+Pe[0])<Qe);const lt=e.useMemo((()=>{if(!k.progressElement||!Ze)return 0;const e=Math.round(qe/Ze*qe);return!Number.isFinite(e)||e<0?0:e}),[qe,Ze,k.progressElement]),st=e.useMemo((()=>{if(!k.progressElement)return 0;const e=Math.round(Pe[0]/Qe*Pe[0]);return!Number.isFinite(e)||e<0?0:e}),[Pe[0],Qe,k.progressElement]),it=e.useMemo((()=>qe?Ze-qe:Ze),[Ze,qe]),ct=e.useMemo((()=>Pe[0]?Qe-Pe[0]:Qe),[Qe,Pe[0]]),at=e.useCallback((()=>{if(!(null==H?void 0:H.type)||Ge[0]<=1)return[];const e=Array.from({length:$e.length},((e,t)=>t)),t=Array.from({length:Ge[0]},(()=>[])),r="x"===O&&"column"===I||"x"!==O&&"row"===I;return e.forEach((e=>{const n=r?e%Ge[0]:Math.floor(e/Ge[1]);t[n]&&t[n].push(e)})),t}),[$e.length,Ge.join(),ye,I,O]),ut=e.useMemo((()=>{if(!(null==H?void 0:H.type))return[{elementTop:0,elementBottom:0,left:0,right:0}];let e=[],t=0;if(N){const r=Array.from({length:$e.length},((e,t)=>t)),n=Math.abs(Math.floor($e.length/Ge[0])*Ge[0]-$e.length);e=n?r.slice(-n):[],"center"===N?t=(Ke[0]+Xe)*(Ge[0]-n)/2:"end"===N&&(t=(Ke[0]+Xe)*(Ge[0]-n))}return $e.map(((r,n)=>{const o=function(e,t){for(let r=0;r<t.length;r++){const n=t[r].indexOf(e);if(-1!==n){const e=["hybrid","y"].includes(O)?n:r;return["x"===O?n:r,e]}}return[0,0]}(n,at()),l=e.length>0&&e.includes(n)?t:0,s=function(e){const t="x"===O?l:0;return e>0?t+(Ke[1]+We)*e:t}(Ge[0]>1||["hybrid","x"].includes(O)?o[1]:n),i=Ke[1]?s+Ke[1]:s,c=function(e){const t="x"===O?0:l;return e>0?t+(Ke[0]+Xe)*e:t}(1===Ge[0]&&"x"===O?n:o[0]),a=c+Ke[0];return{elementTop:s,elementBottom:i,left:c,right:a}}))}),[L,Ke.join(),w,ye,Ge[0],I]),dt=e.useMemo((()=>(null==Pe?void 0:Pe.length)&&W?function(e,t,r,n){const[o,l="start"]="string"==typeof e?[e,e]:e,s=e=>"start"===e?"flex-start":"center"===e?"center":"flex-end",i={display:"flex"};return t[0]>r&&(i.justifyContent=s(o)),t[1]>n&&(i.alignItems=s(l)),i}(W,Pe,Qe,Je):{}),[W,Pe.join(),Je,Qe]),mt=e.useMemo((()=>[c(Qe,Pe[0]),c(Je,Pe[1])]),[Qe,Je,Pe.join()]),pt=e.useMemo((()=>"x"===O?mt[0]:mt[1]),[O,mt[0],mt[1]]),ft=e.useCallback((e=>{if(!T)return;const t=()=>((e,t,r,n)=>{if(!e)return;e.querySelectorAll(`.${t}`).forEach(((e,t)=>{const o=e;["mouseleave","mouseup","touchend"].includes(r.type)?(o.style.opacity="0",o.classList.remove("hover"),o.classList.add("leave"),n(`mouseOnRef${t}-anim`,(()=>o.classList.remove("leave")),200)):(o.style.opacity="1",o.classList.add("hover"))}))})(ne.current,"ms-bar",e,v);"mouseleave"===e.type?!["thumb","slider","wrapp"].includes(ce.current)&&t():t()}),[T,y,ce.current,ne.current]),gt=e.useCallback((e=>{oe.current&&(({arrowType:e,scrollElement:t,wrapSize:r,scrollSize:n,smoothScroll:o})=>{const l=r[0],s=r[1],i=t.scrollTop,c=t.scrollLeft,u=["top","bottom"].includes(e)?s:l,d=(e,t)=>o(a(e,0,u),t);"top"===e&&i>0?d(i-n[1],"y"):"left"===e&&c>0&&d(c-n[0],"x"),"bottom"===e&&i+n[1]!==s?d(i+n[1],"y"):"right"===e&&c+n[0]!==l&&d(c+n[0],"x")})({arrowType:e,scrollElement:oe.current,wrapSize:[Qe,Je],scrollSize:Pe,smoothScroll:Ot})}),[oe.current,Pe.join(),Qe,Je]),ht=e.useCallback((()=>{u(y,re.current,se);const e=oe.current;ne.current&&e&&0!==se.current.length&&((e,t,r,n)=>{!function(){var o,l,s,i;const c=null!==(l=null===(o=t[0])||void 0===o?void 0:o.querySelectorAll(".sliderElem"))&&void 0!==l?l:[],a=null!==(i=null===(s=t[1])||void 0===s?void 0:s.querySelectorAll(".sliderElem"))&&void 0!==i?i:[];function u(e,t,r,n){const o="x"===n?r.scrollLeft:r.scrollTop;e.forEach(((e,r)=>{const l="x"===n?t[0]:t[1],s=o>=l*r&&o<l*(r+1);e.classList.toggle("active",s)}))}c.length>0&&u(c,r,e,n),a.length>0&&u(a,r,e,"x")}()})(e,se.current,Pe,O)}),[Pe.join(),O,oe,ne,se,y]),bt=e.useCallback((()=>{const e=oe.current;e&&(null==F||F(e.scrollLeft,e.scrollTop),de.current=!0,null==X||X(!0),v("handleScroll-anim",(()=>{de.current=!1,null==X||X(!1),(null==H?void 0:H.type)?te():U()}),200),"slider"===y&&_(),(null==H?void 0:H.type)||U(),te())}),[O,F,X,ye,y,_]),vt=a(et/it*(qe-lt),0,qe-lt),yt=a(((null===(G=oe.current)||void 0===G?void 0:G.scrollLeft)||0)/ct*(Pe[0]-Pe[0]/Qe*Pe[0]),0,Pe[0]-st),xt=e.useCallback(d(ge,te),[]),Et=e.useCallback(d(he,te,Ie,Ne),[Ie,Ne]),jt=e.useCallback(d(be,te),[]),Ot=e.useCallback(((e,t,r)=>{const n=oe.current;return n?function(e,t,r,n,o){let l;if(!t)return null;const s=performance.now(),i=t.scrollTop,c=t.scrollLeft,a=u=>{const d=u-s,m=Math.min(d/r,1);"y"===e?t.scrollTop=i+(n-i)*m:"x"===e&&(t.scrollLeft=c+(n-c)*m),m<1?l=requestAnimationFrame(a):null==o||o()};return l=requestAnimationFrame(a),()=>cancelAnimationFrame(l)}(t,n,Re.duration,e,r):null}),[oe,Re.duration]),wt=e.useCallback(((e,t="mousedown",r)=>{const n=e||("scroll"===y?"thumb":"slider");if("wrapp"===e&&!k.content||["thumb","slider"].includes(n)&&!k.progressElement)return;u(y,re.current,se);let o=null;if(r){o=r.getAttribute("data-direction")}!function(e){const t=new AbortController,{signal:r}=t;e.clickedObject.current=e.clicked,e.triggerUpdate(),"mousedown"===e.eventType?(["thumb","slider"].includes(e.clicked)&&e.mouseOnEl(e.scrollBar),"wrapp"===e.clicked&&e.mouseOnEl(e.objectsWrapperRef),document.addEventListener("mousemove",(t=>p(Object.assign(Object.assign({},e),{mouseEvent:t}))),{signal:r}),document.addEventListener("mouseup",(r=>f(Object.assign(Object.assign({},e),{mouseEvent:r,controller:t}))),{signal:r})):"touchstart"===e.eventType&&(document.addEventListener("touchmove",(t=>{t.preventDefault(),p(Object.assign(Object.assign({},e),{mouseEvent:t}))}),{signal:r,passive:!1}),document.addEventListener("touchend",(r=>f(Object.assign(Object.assign({},e),{mouseEvent:r,controller:t}))),{signal:r})),document.body.style.cursor="grabbing"}({eventType:t,scrollElementRef:oe.current,objectsWrapperRef:le.current,scrollBar:r||null,clickedObject:ce,scrollContentRef:ne.current,scrollStateRef:ue.current,type:y,scrollBarOnHover:T,mouseOnEl:g,mouseOnRefHandle:ft,triggerUpdate:te,direction:O,smoothScroll:Ot,sizeLocal:[Pe[0],Pe[1]],clicked:n,numForSliderRef:me,isScrollingRef:de,prevCoordsRef:pe,thumbSize:"x"===o?st:lt,axisFromAtr:o})}),[y,k.content,k.progressElement,Pe.join(),lt,st]),St=e.useCallback((e=>{wt(null,e.type,e.target)}),[wt]),Rt=e.useCallback((()=>{wt("wrapp")}),[wt]),Mt=e.useCallback((()=>{re.current&&((e,t,r,n)=>{const{allIds:o,emptyKeysRaw:l}=(()=>{const t=[],r=[],n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>e instanceof Element&&e.hasAttribute(h)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});let o=n.nextNode();for(;o;){const e=o,l=e.getAttribute(h);l&&(t.push(l),0===e.children.length&&r.push(l)),o=n.nextNode()}return{allIds:t,emptyKeysRaw:r}})(),s=new Set(t.current.loaded);o.forEach((e=>s.add(e)));let i=null;if(t.current.empty){const e=new Set(t.current.empty);l.forEach((t=>e.add(t))),i=Array.from(e)}t.current={loaded:"lazy"===n?Array.from(s):o.map((e=>e)),empty:i},r()})(re.current,ae,te,null==H?void 0:H.type)}),[ye]),kt=e.useCallback((e=>{(null==Y?void 0:Y.clickTrigger)&&((e,t,r,n)=>{e.target.closest(r.selector)&&t("emptyKeys-anim",(()=>{n()}),r.delay||0)})(e,v,Y.clickTrigger,Mt)}),[je]),Tt=e.useCallback(((e,t,r,n,o,l)=>{if(ie.current||(ie.current=$e[0]),ie.current===$e[0]&&null!==t){if("end"===t&&r>n){const t=Ot(o,e);t&&l.push(t)}else if("number"==typeof t){const r=Ot(t,e);r&&l.push(r)}ie.current=$e[0]}}),[$e[0]]),zt=e.useMemo((()=>{const e=Object.assign(Object.assign(Object.assign(Object.assign({margin:S?`${Ae}px ${Ce}px ${Le}px ${Fe}px`:"",height:De[1]&&"none"!==De[1]?`${_e}px`:"fit-content",width:De[0]&&"none"!==De[0]?`${Ue}px`:"fit-content"},k.content&&{cursor:"grab"}),w&&!(null==H?void 0:H.type)&&{gap:`${We}px ${Xe}px`}),R&&function(e,t,r,n,o){const l=(e,t)=>"full"===e?("x"===t?r[0]:r[1])-("x"===t?n:o):e;if("hybrid"!==t&&!Array.isArray(e)){const r=`${l(e,t)}px`;return"x"===t?{minWidth:r}:{minHeight:r}}let s,i;return Array.isArray(e)?[s,i]=e:s=i=e,{minWidth:`${l(s,"x")}px`,minHeight:`${l(i,"y")}px`}}(R,O,Pe,Ie,Ne)),W&&{flexShrink:0});if(null==H?void 0:H.type)return Object.assign(Object.assign({},e),{position:"relative"});const t=Ge[0]>1&&"hybrid"===O,r=t?I:"x"===O?"row":"column",n=De[1]?"wrap":void 0,o=t&&N?"start"===N?"flex-start":"center"===N?"center":"flex-end":void 0,l=t?void 0:"center";return Object.assign(Object.assign(Object.assign(Object.assign({},e),{display:"flex",flexDirection:r,flexWrap:n}),o&&{justifyContent:o}),l&&{alignItems:l})}),[S,[Ae,Ce,Le,Fe,Ie,Ne].join(),De[1],_e,Ue,k.content,Se,[We,Xe].join(),null==H?void 0:H.type,Oe,O,Pe.join(),we,Ge[0],I,N]);e.useEffect((()=>{(Y||(null==H?void 0:H.type))&&(Y||null===ae.current.empty||(ae.current.empty=null),U())}),[je,null==H?void 0:H.type,ye,de.current,$e.length]),e.useEffect((()=>(((null==H?void 0:H.type)||X)&&(X&&X(!1),te()),ht(),()=>{ue.current.animationFrameId&&cancelAnimationFrame(ue.current.animationFrameId),(()=>{for(const e of b.values())clearTimeout(e);b.clear()})()})),[]),e.useEffect((()=>{const e=oe.current;if(!e)return;const t=k.wheel?t=>function(e,t,r,n){e.preventDefault(),r.animating||(r.targetScrollX=t.scrollLeft,r.targetScrollY=t.scrollTop),"x"===n?r.targetScrollX=a(r.targetScrollX+e.deltaY,0,t.scrollWidth-t.clientWidth+2):r.targetScrollY=a(r.targetScrollY+e.deltaY,0,t.scrollHeight-t.clientHeight+2),r.animating||(r.animating=!0,r.animationFrameId=requestAnimationFrame((function e(){const o=.4;let l=0;"x"===n?(t.scrollLeft+=(r.targetScrollX-t.scrollLeft)*o,l=Math.abs(t.scrollLeft-r.targetScrollX)):(t.scrollTop+=(r.targetScrollY-t.scrollTop)*o,l=Math.abs(t.scrollTop-r.targetScrollY)),l>2.5?r.animationFrameId=requestAnimationFrame(e):(r.animating=!1,null!==r.animationFrameId&&(cancelAnimationFrame(r.animationFrameId),r.animationFrameId=null))})))}(t,e,ue.current,O):e=>e.preventDefault();return e.addEventListener("wheel",t,{passive:!1}),()=>{e.removeEventListener("wheel",t)}}),[O,k.wheel]),e.useEffect((()=>{if(!Re.value||0===$e.length)return;const e=[];return("hybrid"===O?["x","y"]:[O]).forEach((t=>{const r="x"===t?0:1;"end"===Re.value[r]&&Tt(t,"end","x"===t?Qe:Je,Pe[r],"x"===t?ct:it,e)})),()=>{e.forEach((e=>e()))}}),[Re.value.join(),$e[0],$e.length,it]),e.useEffect((()=>{if(!Re.value||0===$e.length)return;const e=[];return("hybrid"===O?["x","y"]:[O]).forEach((t=>{const r="x"===t?0:1;"number"==typeof Re.value[r]&&Tt(t,Re.value[r],"x"===t?Qe:Je,Pe[r],"x"===t?ct:it,e)})),()=>{e.forEach((e=>e()))}}),[Re.value.join(),null==A?void 0:A.updater]);const $t=e.useCallback(((t,r,n,o)=>{var l;const s=Object.assign({width:Ke[0]?`${Ke[0]}px`:void 0,height:Ke[1]?`${Ke[1]}px`:void 0},(null==H?void 0:H.type)&&Object.assign({position:"absolute",top:`${r}px`,left:`${n}px`},!Ke[0]&&1===Ge[0]&&{transform:"translateX(-50%)"})),i=z?e.createElement(e.Suspense,{fallback:$},o):o,c=(null===(l=null==Y?void 0:Y.clickTrigger)||void 0===l?void 0:l.selector)&&kt;return e.createElement("div",Object.assign({key:t},H||Y?{[h]:`${t}`}:{},{className:"ms-object-box",style:s,onClick:c}),i)}),[z,!!$,Ke.join(),oe.current,ye,je,Ge[0]]),At=e.createElement("div",{className:"ms-objects-wrapper",ref:le,onMouseDown:Rt,style:zt},$e.map(((t,n)=>{var o,l,s;const i=e.Children.toArray(L).find((r=>e.isValidElement(r)&&r.key===t)),c=(null==H?void 0:H.stopLoadOnScroll)&&de.current&&!ae.current.loaded.includes(`${t}`)?$:(null===(o=ae.current.empty)||void 0===o?void 0:o.includes(t))?"object"==typeof(null==Y?void 0:Y.mode)?Y.mode.fallback:$:i,a="number"==typeof De[0]&&"number"==typeof De[1]||"firstChild"!==De[0]&&"firstChild"!==De[1]||0!==n?c:e.createElement(r,{onResize:jt},c);if(!(null==H?void 0:H.type))return $t(t,0,0,a);{const{elementTop:e,elementBottom:r,left:o,right:i}=ut[n],c="x"===O?Ye:Be,u=qe+c>("x"===O?o:e)-et&&("x"===O?i:r)-et>0-c,d="hybrid"!==O||Pe[0]+Ye>o-((null===(l=oe.current)||void 0===l?void 0:l.scrollLeft)||0)&&i-((null===(s=oe.current)||void 0===s?void 0:s.scrollLeft)||0)>0-Ye;if(u&&d)return $t(t,e,o,a)}}))),Ct=[{positionType:"x"===O?"left":"top",visibility:tt},{positionType:"x"===O?"right":"bottom",visibility:rt},..."hybrid"===O?[{positionType:"left",visibility:nt},{positionType:"right",visibility:ot}]:[]],Lt=e.createElement("div",{"morph-scroll":`〈♦${J}〉`,className:`${x&&x}`,ref:re,style:{width:`${Pe[2]}px`,height:`${Pe[3]}px`}},e.createElement("div",{className:"ms-content",ref:ne,onMouseEnter:ft,onMouseLeave:ft,onTouchStart:ft,onTouchEnd:ft,style:Object.assign({position:"relative",width:`${Pe[0]}px`,height:`${Pe[1]}px`},k.arrows&&Te.size&&("x"===O?{left:`${Te.size}px`}:"y"===O?{top:`${Te.size}px`}:{top:`${Te.size}px`,left:`${Te.size}px`}))},e.createElement("div",{className:"ms-element",ref:oe,onScroll:bt,style:Object.assign(Object.assign(Object.assign({width:"100%",height:"100%"},dt),{overflow:{x:""+(Qe>Pe[0]?"scroll hidden":"hidden"),y:""+(Je>Pe[1]?"hidden scroll":"hidden"),hybrid:`${Qe>Pe[0]?"scroll":"hidden"} ${Je>Pe[1]?"scroll":"hidden"}`,hide:"hidden"}[k.wheel||k.content?O:"hide"]}),"scroll"!==y||"boolean"!=typeof k.progressElement||!1===k.progressElement?{scrollbarWidth:"none"}:{})},Ke[0]&&Ke[1]?At:e.createElement(r,{onResize:Et,style:Object.assign({},dt)},At)),C&&Ct.map((({positionType:t,visibility:r})=>e.createElement(s,{key:`edge-${t}`,edgeGradient:ke,visibility:r,edgeType:t}))),k.progressElement&&!0!==k.progressElement&&[{shouldRender:lt<Ze,direction:O,thumbSize:lt,thumbSpace:vt,objLengthPerSize:pt,progressReverseIndex:0},{shouldRender:"hybrid"===O&&st<Qe,direction:"x",thumbSize:st,thumbSpace:yt,objLengthPerSize:mt[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e)).map((t=>e.createElement(l,{key:t.direction,type:y,direction:t.direction,progressReverse:"boolean"==typeof M?M:M[t.progressReverseIndex],size:Pe,progressTrigger:k,scrollBarOnHover:T,scrollBarEvent:"sliderMenu"===y?Ot:St,thumbSize:t.thumbSize,thumbSpace:t.thumbSpace,objLengthPerSize:t.objLengthPerSize,sliderCheckLocal:ht})))),k.arrows&&Ct.map((({positionType:t,visibility:r})=>e.createElement(i,{key:`arrow-${t}`,activity:r,arrows:Te,arrowType:t,handleArrow:gt,size:"hybrid"===O?Pe[0]+2*Te.size:Pe[0]}))));return"auto"===E?e.createElement(r,{measure:"outer",onResize:xt},Lt):Lt},exports.ResizeTracker=r;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "morphing-scroll",
-  "version": "1.5.22",
+  "version": "2.1.0",
   "description": "Library for using various methods of scrolling objects〈♦〉",
   "author": "Georg Schilin",
   "license": "MIT",
   "main": "index.js",
   "type": "commonjs",
-  "types": "./index.d.ts",
+  "types": "./types/index.d.ts",
   "keywords": [
     "react",
     "scroll"

package/types/index.d.ts

@@ -0,0 +1,111 @@
+import React from "react";
+
+import ResizeTrackerT from "./resizeTracker";
+import IntersectionTrackerT from "./intersectionTracker";
+import MorphScrollT from "./morphScroll";
+
+/**
+ * ### ResizeTracker component〈♦〉
+ *
+ * ---
+ * ### Props:
+ * - `className`
+ * - `children`
+ * - `style`
+ * - `measure`
+ * - `onResize`
+ *
+ * _More information in props or links!_
+ *
+ * ---
+ * ### Returns:
+ * _React component._
+ *
+ * ---
+ * ### Links:
+ * [ResizeTracker Documentation](https://github.com/voodoofugu/morphing-scroll?tab=readme-ov-file#-resizetracker)
+ *
+ * [MDN Reference for Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
+ */
+declare const ResizeTracker: React.FC<ResizeTrackerT>;
+
+/**
+ * ### IntersectionTracker component〈♦〉
+ *
+ * ---
+ * ### Props:
+ * - `className`
+ * - `children`
+ * - `style`
+ * - `root`
+ * - `rootMargin`
+ * - `threshold`
+ * - `visibleContent`
+ * - `onVisible`
+ *
+ * _More information in props or links!_
+ *
+ * ---
+ * ### Returns:
+ * _React component._
+ *
+ * ---
+ * ### Links:
+ * [IntersectionTracker Documentation](https://github.com/voodoofugu/morphing-scroll?tab=readme-ov-file#-intersectiontracker)
+ *
+ * [MDN Reference for Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ */
+declare const IntersectionTracker: React.FC<IntersectionTrackerT>;
+
+/**
+ * ### MorphScroll component〈♦〉
+ *
+ * ---
+ * ### Props:
+ * ##### - GENERAL SETTINGS:
+ * - `className`
+ * - `children`
+ *
+ * ##### - SCROLL SETTINGS:
+ * - `type`
+ * - `direction`
+ * - `scrollPosition`
+ * - `onScrollValue`
+ * - `isScrolling`
+ *
+ * ##### - VISUAL SETTINGS:
+ * - `size` - ***REQUIRED***
+ * - `objectsSize`
+ * - `crossCount`
+ * - `gap`
+ * - `wrapperMargin`
+ * - `wrapperMinSize`
+ * - `wrapperAlign`
+ * - `elementsAlign`
+ * - `elementsDirection`
+ * - `edgeGradient`
+ *
+ * ##### - PROGRESSBAR:
+ * - `progressTrigger`
+ * - `progressReverse`
+ * - `scrollBarOnHover`
+ *
+ * ##### - OPTIMIZATIONS:
+ * - `render`
+ * - `emptyElements`
+ * - `suspending`
+ * - `fallback`
+ *
+ * _More information in props or links!_
+ *
+ * ---
+ * ### Returns:
+ * _React component._
+ *
+ * ---
+ * ### Links:
+ * [MorphScroll Documentation](https://github.com/voodoofugu/morphing-scroll?tab=readme-ov-file#-morphscroll)
+ */
+declare const MorphScroll: React.FC<MorphScrollT>;
+
+export { MorphScroll, ResizeTracker, IntersectionTracker };

package/types/intersectionTracker.d.ts

@@ -0,0 +1,119 @@
+type IntersectionTrackerT = {
+  /**---
+   * Custom class name.
+   * ___
+   * @example
+   * ```tsx
+   * <IntersectionTracker
+   *   className="custom-class"
+   * >
+   *   {children}
+   * </IntersectionTracker>
+   * ```
+   */
+  className?: string;
+  /**---
+   * Custom user content.
+   * ___
+   * @example
+   * ```tsx
+   * <IntersectionTracker>
+   *   {children}
+   * </IntersectionTracker>
+   * ```
+   * */
+  children?: React.ReactNode;
+  /**---
+   * Custom inline styles.
+   * ___
+   * @example
+   * ```tsx
+   * <IntersectionTracker
+   *  style={{ backgroundColor: "yellow" }}
+   * >
+   *  {children}
+   * </IntersectionTracker>
+   * ```
+   */
+  style?: React.CSSProperties;
+  /**---
+   * The root element for `IntersectionObserver`.
+   * ___
+   * @default document viewport
+   *
+   * @example
+   * ```tsx
+   * <IntersectionTracker
+   *   root={document.getElementById("observer-container")}
+   * >
+   *   {children}
+   * </IntersectionTracker>
+   * ```
+   */
+  root?: Element | null;
+  /**---
+   * The margin for the root element of the `IntersectionObserver`.
+   * ___
+   * @note
+   * *It can be 1 number or an array of 2 or 4 numbers*
+   *
+   * @example
+   * ```tsx
+   * <IntersectionTracker
+   *   rootMargin={10}
+   * >
+   *   {children}
+   * </IntersectionTracker>
+   * ```
+   */
+  rootMargin?: number | number[];
+  /**---
+   * Visibility threshold for triggering intersection events.
+   * ___
+   * @note
+   * *A value between `0` (out of view) and `1` (fully visible) can be single or an array*
+   *
+   * @example
+   * ```tsx
+   * <IntersectionTracker
+   *   threshold={0.5}
+   * >
+   *   {children}
+   * </IntersectionTracker>
+   * ```
+   */
+  threshold?: number | number[];
+  /**---
+   * Renders children regardless of their visibility in the viewport.
+   * ___
+   * @default false
+   *
+   * @example
+   * ```tsx
+   * <IntersectionTracker
+   *   visibleContent
+   * >
+   *   {children}
+   * </IntersectionTracker>
+   * ```
+   */
+  visibleContent?: boolean;
+  /**---
+   * Callback function triggered when `threshold` is met.
+   * ___
+   *
+   * @example
+   * ```tsx
+   * <IntersectionTracker
+   *   onVisible={(entry) => console.log(entry)}
+   * >
+   *   {children}
+   * </IntersectionTracker>
+   * ```
+   *
+   * @link https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry
+   */
+  onVisible?: (entry: IntersectionObserverEntry) => void;
+};
+
+export default IntersectionTrackerT;