morphing-scroll 2.1.1 → 2.2.12

package/README.md

@@ -39,10 +39,16 @@ Next, import the `MorphScroll` component into your React application:
 import { MorphScroll } from "morphing-scroll";
 ```
 
+If you prefer, you can also import the entire library as a single object using the default export:
+
+```tsx
+import Morph from "morphing-scroll";
+```
+
 Start using the `MorphScroll` component by defining the required `size` prop. For better precision and control, it's recommended to begin by understanding the `objectsSize` and `progressTrigger` props, which are explained below.
 
 > **✦ Note:**  
-> `MorphScroll` exports both **CommonJS** and **ESM** builds:
+> `MorphScroll` supports both **ESM** and **CommonJS** builds:
 >
 > - **Modern bundlers** (e.g. _Vite_, _Webpack 5_, _esbuild_) use the **ESM** (`import`) build
 > - **Node.js** (and older environments) use the **CommonJS** (`require`) build
@@ -1034,7 +1040,7 @@ Start using the `MorphScroll` component by defining the required `size` prop. Fo
     <h2></h2>
 
     <details>
-      <summary><b><code>threshold</code></b>: <em>Defines when the callback <code>onVisible</code> and content visibility should be triggered.</em></summary><br />
+      <summary><b><code>threshold</code></b>: <em>Defines when the callback <code>onIntersection</code> and content visibility should be triggered.</em></summary><br />
       <ul>
         <b>Type:</b> number | number[]<br />
         <br />
@@ -1072,7 +1078,7 @@ Start using the `MorphScroll` component by defining the required `size` prop. Fo
         <br />
         <b>Description:</b> <em><br />
         If set to <mark>true</mark>, the tracked elements will always be visible, regardless of their actual intersection status.<br />
-        This is useful for testing purposes or when using the <code>onVisible</code> callback, ensuring that it reliably triggers whenever the element enters the viewport, even if all elements are already visible.</em><br />
+        This is useful for testing purposes or when using the <code>onIntersection</code> callback, ensuring that it reliably triggers whenever the element enters the viewport, even if all elements are already visible.</em><br />
         <br />
         <b>Example:</b>
 
@@ -1089,12 +1095,12 @@ Start using the `MorphScroll` component by defining the required `size` prop. Fo
     <h2></h2>
 
     <details>
-      <summary><b><code>onVisible</code></b>: <em>Callback function triggered when the element becomes visible.</em></summary><br />
+      <summary><b><code>onIntersection</code></b>: <em>Callback function triggered when the element becomes visible.</em></summary><br />
       <ul>
         <b>Type:</b> (entry: IntersectionObserverEntry) => void<br />
         <br />
         <b>Description:</b> <em><br />
-        A callback function that is called when the observed element enters the viewport or the area defined by the <code>root</code> property. This can be used to load new list items for <code>MorphScroll</code>.<br />
+        A callback function that is called when the observed element enters or leaves the viewport or the area defined by the <code>root</code> property. This can be used to load new list items for <code>MorphScroll</code>.<br />
         <br />
         ✦ Note:<br />
         The <code>IntersectionObserverEntry</code> object provides details about the intersection state, including:<br />
@@ -1111,7 +1117,9 @@ Start using the `MorphScroll` component by defining the required `size` prop. Fo
 
         ```tsx
         <IntersectionTracker
-          onVisible={(entry) => console.log(entry)}
+          onIntersection={
+            (entry) => { if (entry.isIntersecting) loadMoreItems(); }
+          }
         >
           {children}
         </IntersectionTracker>

package/cjs/index.js

@@ -1 +1 @@
-"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;r>t;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,r){let n=null;const o=(...e)=>{n&&clearTimeout(n),n=setTimeout((()=>{((...e)=>{t(...e)})(...e)}),r)};return o.cancel=()=>{n&&(clearTimeout(n),n=null)},o}(0,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,duration:m})=>{const p="sliderMenu"!==t?{onMouseDown:i,onTouchStart:i}:{},f=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,m,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})),0!=!(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},p,{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},p,{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}))}),f))})),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})})})),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){return e>t?Math.floor(e/t):1}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)},d=e=>e?"start"===e?"flex-start":"center"===e?"center":"flex-end":void 0;function m(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 p(t){const r=[],n=t=>{if(null===t||"number"==typeof t||"boolean"==typeof t||"bigint"==typeof t)r.push(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 f(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(0>=u||0>=d)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&&i>c+l?e.smoothScroll(c+l,t,e.duration):0>o&&c>0&&e.smoothScroll(c-l,t,e.duration),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 g(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 h=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")))},v="wrap-id",b=new Map,y=(e,t,r)=>{x(e);const n=setTimeout((()=>{t(),b.delete(e)}),r);b.set(e,n)},x=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=e.useMemo((()=>{if(!i)return"";const e=t(i);return`${e[0]}px ${e[1]}px ${e[2]}px ${e[3]}px`}),[i]),f=e.useCallback((([e])=>{d(e.isIntersecting),e.isIntersecting&&a&&a(e)}),[a]);return e.useEffect((()=>{const e=new IntersectionObserver(f,{root:l,threshold:s,rootMargin:p});return m.current&&e.observe(m.current),()=>{e.disconnect()}}),[f,l,s,p]),e.createElement("div",{"intersection-tracker":"",className:r,ref:m,style:o},c||u?n:null)},exports.MorphScroll=({type:x="scroll",className:E,size:j,objectsSize:O,direction:w="y",gap:S,wrapperMargin:R,wrapperMinSize:M,progressReverse:k=!1,progressTrigger:T={wheel:!0},scrollBarOnHover:z=!1,suspending:A=!1,fallback:C,scrollPosition:L,edgeGradient:F,children:N,onScrollValue:I,elementsAlign:$,elementsDirection:W="row",wrapperAlign:X,isScrolling:H,render:Y,emptyElements:B,crossCount:P})=>{var q,D,V,K,G,U;const _=n((()=>{Mt()}),40),J=n((()=>{ht()}),34),Q=function(){const t=e.useRef(null);return null===t.current&&(t.current=""+o++),t.current}();if(!j)throw Error(`Prop "size" is not provided\nMorphScroll〈♦${Q}〉`);Object.keys(T).length;const[Z,ee]=e.useState(0),te=()=>{ee((e=>"number"==typeof e&&1e3>e?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(),ve=fe(),[be,ye,xe,Ee,je,Oe,we,Se]=function(...e){return e.map(p)}(null==L?void 0:L.value,Y,j,O,B,M,X,S),Re=e.useMemo((()=>{var e,t;return{value:"number"==typeof(null==L?void 0:L.value)||"string"==typeof(null==L?void 0:L.value)?[L.value,L.value]:null!==(e=null==L?void 0:L.value)&&void 0!==e?e:[null],duration:null!==(t=null==L?void 0:L.duration)&&void 0!==t?t:200}}),[be,null==L?void 0:L.duration]),Me={color:null,size:40},ke=e.useMemo((()=>"object"==typeof F?Object.assign(Object.assign({},Me),F):Me),[F]),Te=e.useMemo((()=>Object.assign(Object.assign({},Me),"object"==typeof T.arrows?T.arrows:{})),[T.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]}),[]),Ae=e.useMemo((()=>e.Children.toArray(N).flatMap(ze).map((t=>e.isValidElement(t)&&t.key?t.key+"":null)).filter((e=>null!==e)).filter((e=>{var t;return"clear"!==(null==B?void 0:B.mode)||!(null===(t=ae.current.empty)||void 0===t?void 0:t.includes(e))}))),[N,je,null===(q=ae.current.empty)||void 0===q?void 0:q.join()]),[Ce,Le,Fe,Ne]=R?t(R):[0,0,0,0],Ie=Ce+Fe,$e=Ne+Le,[We,Xe]=e.useMemo((()=>{var e,t;return"number"==typeof S?[S,S]:Array.isArray(S)?[null!==(e=S[1])&&void 0!==e?e:0,null!==(t=S[0])&&void 0!==t?t:0]:[0,0]}),[S]),He=e.useMemo((()=>t((null==Y?void 0:Y.rootMargin)||0,"x"===w)),[ye,w]),[Ye,Be]=He?[He[2],He[0]]:[0,0],Pe=e.useMemo((()=>{const[e,t]=Array.isArray(j)?j:"number"==typeof j?[j,j]:[ge.current.width,ge.current.height];if(!T.arrows||!Te.size)return[e,t,e,t];const r=2*Te.size;let n=e,o=t;return"x"===w?n=e-r:"y"===w?o=t-r:"hybrid"===w&&(n=e-r,o=t-r),[n,o,e,t]}),[xe,Te.size,ge.current]),qe="x"===w?Pe[0]:Pe[1],De=e.useMemo((()=>O?Array.isArray(O)?O:t(O,!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"===w&&"none"!==De[0]||"size"===De[0]?Pe[0]:0,ve.current.width),e(De[1]&&"none"!==De[1]&&"size"!==De[1]?De[1]:"x"===w&&"none"!==De[1]||"size"===De[1]?Pe[1]:0,ve.current.height)]}),[Ve,ve.current]),Ge=e.useMemo((()=>{const e="x"===w,t="row"===W,r="column"===W,n=e?Pe[1]:Pe[0],o=e?Ke[1]+Xe:Ke[0]+We,l="hybrid"===w?o*(Ae.length+1)-o:n,s=Math.floor(l/o)||1,i=P&&s>=P?"hybrid"===w?Math.ceil(s/P):P:s,c=i>1&&i<Ae.length?Math.ceil(Ae.length/i):i>Ae.length?1:Ae.length,a=P&&P<Ae.length,u=e=>Number.isFinite(e)&&e>0?e:1;if("hybrid"===w){const e=a?t?P:i:t?Ae.length:1,n=a?r?P:i:r?Ae.length:1;return[u(e),u(n)]}return[u(i),u(c)]}),[Ae.length,w,Ke.join(),Pe.join(),We,$e,Ie,P]),Ue=e.useMemo((()=>{const e=Ge[0]?Ge[0]*Xe-Xe:0,t="x"===w?Ge[1]:Ge[0];return Ke[0]?(Ke[0]+Xe)*t-Xe:(null==Y?void 0:Y.type)?ve.current.width+e:he.current.width}),[Ke[0],Ge.join(),Xe,he.current.width,ve.current,ye]),_e=e.useMemo((()=>{const e=1>Ge[1]?1:Ge[0]*We-We;return Ke[1]?"x"===w?(Ke[1]+We)*Ge[0]-We:(Ke[1]+We)*Ge[1]-We:(null==Y?void 0:Y.type)?ve.current.height+e:he.current.height}),[Ke[1],Ge.join(),We,he.current.height,ve.current,ye]),Je=e.useMemo((()=>_e+Ie),[_e,Ie]),Qe=e.useMemo((()=>Ue+$e),[Ue,$e]),Ze="x"===w?Qe:Je,et="x"===w?(null===(D=oe.current)||void 0===D?void 0:D.scrollLeft)||0:(null===(V=oe.current)||void 0===V?void 0:V.scrollTop)||0,tt=et>1&&!0,rt=Ze>Math.round(et+qe);let nt=!1,ot=!1;"hybrid"===w&&(nt=((null===(K=oe.current)||void 0===K?void 0:K.scrollLeft)||0)>1&&!0,ot=Math.round(((null===(G=oe.current)||void 0===G?void 0:G.scrollLeft)||0)+Pe[0])<Qe);const lt=e.useMemo((()=>{if(!T.progressElement||!Ze)return 0;const e=Math.round(qe/Ze*qe);return!Number.isFinite(e)||0>e?0:e}),[qe,Ze,T.progressElement]),st=e.useMemo((()=>{if(!T.progressElement)return 0;const e=Math.round(Pe[0]/Qe*Pe[0]);return!Number.isFinite(e)||0>e?0:e}),[Pe[0],Qe,T.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==Y?void 0:Y.type)||1>=Ge[0])return[];const e=Array.from({length:Ae.length},((e,t)=>t)),t=Array.from({length:Ge[0]},(()=>[])),r="x"===w&&"column"===W||"x"!==w&&"row"===W;return e.forEach((e=>{const n=r?e%Ge[0]:Math.floor(e/Ge[1]);t[n]&&t[n].push(e)})),t}),[Ae.length,Ge.join(),ye,W,w]),ut=e.useMemo((()=>{if(!(null==Y?void 0:Y.type))return[{elementTop:0,elementBottom:0,left:0,right:0}];let e=[],t=0;if($){const r=Array.from({length:Ae.length},((e,t)=>t)),n=Math.abs(Math.floor(Ae.length/Ge[0])*Ge[0]-Ae.length);e=n?r.slice(-n):[],"center"===$?t=(Ke[0]+Xe)*(Ge[0]-n)/2:"end"===$&&(t=(Ke[0]+Xe)*(Ge[0]-n))}return Ae.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)return["x"===w?n:r,["hybrid","y"].includes(w)?n:r]}return[0,0]}(n,at()),l=e.length>0&&e.includes(n)?t:0,s=function(e){const t="x"===w?l:0;return e>0?t+(Ke[1]+We)*e:t}(Ge[0]>1||["hybrid","x"].includes(w)?o[1]:n),i=Ke[1]?s+Ke[1]:s,c=function(e){const t="x"===w?0:l;return e>0?t+(Ke[0]+Xe)*e:t}(1===Ge[0]&&"x"===w?n:o[0]);return{elementTop:s,elementBottom:i,left:c,right:c+Ke[0]}}))}),[N,Ke.join(),S,ye,Ge[0],W]),dt=e.useMemo((()=>(null==Pe?void 0:Pe.length)&&X?function(e,t,r,n){const[o,l="start"]="string"==typeof e?[e,e]:e,s={display:"flex"};return t[0]>r&&(s.justifyContent=d(o)),t[1]>n&&(s.alignItems=d(l)),s}(X,Pe,Qe,Je):{}),[X,Pe.join(),Je,Qe]),mt=e.useMemo((()=>[c(Qe,Pe[0]),c(Je,Pe[1])]),[Qe,Je,Pe.join()]),pt=e.useMemo((()=>"x"===w?mt[0]:mt[1]),[w,mt[0],mt[1]]),ft=e.useCallback((e=>{if(!z)return;const t=()=>((e,t,r,n)=>{e&&e.querySelectorAll(".ms-bar").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,0,e,y);"mouseleave"===e.type?!["thumb","slider","wrapp"].includes(ce.current)&&t():t()}),[z,x,ce.current,ne.current]),gt=e.useCallback((e=>{oe.current&&(({arrowType:e,scrollElement:t,wrapSize:r,scrollSize:n,smoothScroll:o,duration:l})=>{const s=r[0],i=r[1],c=t.scrollTop,u=t.scrollLeft,d=["top","bottom"].includes(e)?i:s,m=(e,t)=>o(a(e,0,d),t,l);"top"===e&&c>0?m(c-n[1],"y"):"left"===e&&u>0&&m(u-n[0],"x"),"bottom"===e&&c+n[1]!==i?m(c+n[1],"y"):"right"===e&&u+n[0]!==s&&m(u+n[0],"x")})({arrowType:e,scrollElement:oe.current,wrapSize:[Qe,Je],scrollSize:Pe,smoothScroll:Ot,duration:Re.duration})}),[oe.current,Pe.join(),Qe,Je,Re.duration]),ht=e.useCallback((()=>{u(x,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&&l*(r+1)>o;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,w)}),[Pe.join(),w,oe,ne,se,x]),vt=e.useCallback((()=>{const e=oe.current;e&&(null==I||I(e.scrollLeft,e.scrollTop),de.current=!0,null==H||H(!0),y("handleScroll-anim",(()=>{de.current=!1,null==H||H(!1),(null==Y?void 0:Y.type)?te():_()}),200),"slider"===x&&J(),(null==Y?void 0:Y.type)||_(),te())}),[w,I,H,ye,x,J]),bt=a(et/it*(qe-lt),0,qe-lt),yt=a(((null===(U=oe.current)||void 0===U?void 0:U.scrollLeft)||0)/ct*(Pe[0]-Pe[0]/Qe*Pe[0]),0,Pe[0]-st),xt=e.useCallback(m(ge,te),[]),Et=e.useCallback(m(he,te,$e,Ie),[$e,Ie]),jt=e.useCallback(m(ve,te),[]),Ot=e.useCallback(((e,t,r,n)=>{const o=oe.current;return o?function(e,t,r,n,o){let l;if(!t&&!n)return null;const s=performance.now(),i=t.scrollTop,c=t.scrollLeft,a=u=>{const d=Math.min((u-s)/r,1);"y"===e?t.scrollTop=i+(n-i)*d:"x"===e&&(t.scrollLeft=c+(n-c)*d),1>d?l=requestAnimationFrame(a):null==o||o()};return l=requestAnimationFrame(a),()=>cancelAnimationFrame(l)}(t,o,r,e,n):null}),[oe]),wt=e.useCallback(((e,t="mousedown",r)=>{const n=e||("scroll"===x?"thumb":"slider");if("wrapp"===e&&!T.content||["thumb","slider"].includes(n)&&!T.progressElement)return;u(x,re.current,se);let o=null;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=>f(Object.assign(Object.assign({},e),{mouseEvent:t}))),{signal:r}),document.addEventListener("mouseup",(r=>g(Object.assign(Object.assign({},e),{mouseEvent:r,controller:t}))),{signal:r})):"touchstart"===e.eventType&&(document.addEventListener("touchmove",(t=>{t.preventDefault(),f(Object.assign(Object.assign({},e),{mouseEvent:t}))}),{signal:r,passive:!1}),document.addEventListener("touchend",(r=>g(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:x,scrollBarOnHover:z,mouseOnEl:h,mouseOnRefHandle:ft,triggerUpdate:te,direction:w,smoothScroll:Ot,sizeLocal:[Pe[0],Pe[1]],clicked:n,numForSliderRef:me,isScrollingRef:de,prevCoordsRef:pe,thumbSize:"x"===o?st:lt,axisFromAtr:o,duration:Re.duration})}),[x,T.content,T.progressElement,Pe.join(),lt,st,Re.duration]),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(v)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});let o=n.nextNode();for(;o;){const e=o,l=e.getAttribute(v);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==Y?void 0:Y.type)}),[ye]),kt=e.useCallback((e=>{(null==B?void 0:B.clickTrigger)&&((e,t,r,n)=>{e.target.closest(r.selector)&&t("emptyKeys-anim",(()=>{n()}),r.delay||0)})(e,y,B.clickTrigger,Mt)}),[je]),Tt=e.useCallback(((e,t,r)=>{if(ie.current){if(ie.current!==Ae[0])return void(ie.current=Ae[0])}else ie.current=Ae[0];const n=Ot(t,e,Re.duration);n&&r.push(n)}),[Ae[0],Re.duration]),zt=e.useMemo((()=>{const e=Object.assign(Object.assign(Object.assign(Object.assign({margin:R?`${Ce}px ${Le}px ${Fe}px ${Ne}px`:"",height:De[1]&&"none"!==De[1]?_e+"px":"fit-content",width:De[0]&&"none"!==De[0]?Ue+"px":"fit-content"},T.content&&{cursor:"grab"}),S&&!(null==Y?void 0:Y.type)&&{gap:`${We}px ${Xe}px`}),M&&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"}}(M,w,Pe,$e,Ie)),X&&{flexShrink:0});if(null==Y?void 0:Y.type)return Object.assign(Object.assign({},e),{position:"relative"});const t=De[1]?"wrap":void 0,r=1===Ge[0]?"y"===w?"column":"row":W;return Object.assign(Object.assign({},e),{display:"flex",flexDirection:r,flexWrap:t,justifyContent:d($)})}),[R,[Ce,Le,Fe,Ne,$e,Ie].join(),De[1],_e,Ue,T.content,Se,[We,Xe].join(),null==Y?void 0:Y.type,Oe,w,Pe.join(),we,Ge[0],W,$]);e.useEffect((()=>{(B||(null==Y?void 0:Y.type))&&(B||null===ae.current.empty||(ae.current.empty=null),_())}),[je,null==Y?void 0:Y.type,ye,de.current,Ae.length]),e.useEffect((()=>(((null==Y?void 0:Y.type)||H)&&(H&&H(!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=T.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(){let o=0;"x"===n?(t.scrollLeft+=.4*(r.targetScrollX-t.scrollLeft),o=Math.abs(t.scrollLeft-r.targetScrollX)):(t.scrollTop+=.4*(r.targetScrollY-t.scrollTop),o=Math.abs(t.scrollTop-r.targetScrollY)),o>2.5?r.animationFrameId=requestAnimationFrame(e):(r.animating=!1,null!==r.animationFrameId&&(cancelAnimationFrame(r.animationFrameId),r.animationFrameId=null))})))}(t,e,ue.current,w):e=>e.preventDefault();return e.addEventListener("wheel",t,{passive:!1}),()=>{e.removeEventListener("wheel",t)}}),[w,T.wheel]),e.useEffect((()=>{if(!Re.value)return;const e=[];return("hybrid"===w?["x","y"]:[w]).forEach((t=>{const r="x"===t?0:1;"end"===Re.value[r]&&Tt(t,"x"===t?ct:it,e)})),()=>{e.forEach((e=>e()))}}),[Re.value.join(),be,it,ct,Qe,Je]),e.useEffect((()=>{if(!Re.value)return;const e=[];return("hybrid"===w?["x","y"]:[w]).forEach((t=>{const r="x"===t?0:1;"number"==typeof Re.value[r]&&Tt(t,Re.value[r],e)})),()=>{e.forEach((e=>e()))}}),[be,null==L?void 0:L.updater]);const At=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==Y?void 0:Y.type)&&Object.assign({position:"absolute",top:r+"px",left:n+"px"},!Ke[0]&&1===Ge[0]&&{transform:"translateX(-50%)"})),i=A?e.createElement(e.Suspense,{fallback:C},o):o,c=(null===(l=null==B?void 0:B.clickTrigger)||void 0===l?void 0:l.selector)&&kt;return e.createElement("div",Object.assign({key:t},Y||B?{[v]:""+t}:{},{className:"ms-object-box",style:s,onClick:c}),i)}),[A,!!C,Ke.join(),oe.current,ye,je,Ge[0]]),Ct=e.createElement("div",{className:"ms-objects-wrapper",ref:le,onMouseDown:Rt,style:zt},Ae.map(((t,n)=>{var o,l,s;const i=e.Children.toArray(N).find((r=>e.isValidElement(r)&&r.key===t)),c=(null==Y?void 0:Y.stopLoadOnScroll)&&de.current&&!ae.current.loaded.includes(""+t)?C:(null===(o=ae.current.empty)||void 0===o?void 0:o.includes(t))?"object"==typeof(null==B?void 0:B.mode)?B.mode.fallback:C: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==Y?void 0:Y.type))return At(t,0,0,a);{const{elementTop:e,elementBottom:r,left:o,right:i}=ut[n],c="x"===w?Ye:Be,u=qe+c>("x"===w?o:e)-et&&("x"===w?i:r)-et>0-c,d="hybrid"!==w||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 At(t,e,o,a)}}))),Lt=[{positionType:"x"===w?"left":"top",visibility:tt},{positionType:"x"===w?"right":"bottom",visibility:rt},..."hybrid"===w?[{positionType:"left",visibility:nt},{positionType:"right",visibility:ot}]:[]],Ft=e.createElement("div",{"morph-scroll":`〈♦${Q}〉`,className:E,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"},T.arrows&&Te.size&&("x"===w?{left:Te.size+"px"}:"y"===w?{top:Te.size+"px"}:{top:Te.size+"px",left:Te.size+"px"}))},e.createElement("div",{className:"ms-element",ref:oe,onScroll:vt,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"}[T.wheel||T.content?w:"hide"]}),"scroll"!==x||"boolean"!=typeof T.progressElement||!1===T.progressElement?{scrollbarWidth:"none"}:{})},Ke[0]&&Ke[1]?Ct:e.createElement(r,{onResize:Et,style:Object.assign({},dt)},Ct)),F&&Lt.map((({positionType:t,visibility:r})=>e.createElement(s,{key:"edge-"+t,edgeGradient:ke,visibility:r,edgeType:t}))),T.progressElement&&!0!==T.progressElement&&[{shouldRender:Ze>lt,direction:w,thumbSize:lt,thumbSpace:bt,objLengthPerSize:pt,progressReverseIndex:0},{shouldRender:"hybrid"===w&&Qe>st,direction:"x",thumbSize:st,thumbSpace:yt,objLengthPerSize:mt[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e)).map((t=>e.createElement(l,{key:t.direction,type:x,direction:t.direction,progressReverse:"boolean"==typeof k?k:k[t.progressReverseIndex],size:Pe,progressTrigger:T,scrollBarOnHover:z,scrollBarEvent:"sliderMenu"===x?Ot:St,thumbSize:t.thumbSize,thumbSpace:t.thumbSpace,objLengthPerSize:t.objLengthPerSize,sliderCheckLocal:ht,duration:Re.duration})))),T.arrows&&Lt.map((({positionType:t,visibility:r})=>e.createElement(i,{key:"arrow-"+t,activity:r,arrows:Te,arrowType:t,handleArrow:gt,size:"hybrid"===w?Pe[0]+2*Te.size:Pe[0]}))));return"auto"===j?e.createElement(r,{measure:"outer",onResize:xt},Ft):Ft},exports.ResizeTracker=r;
+"use strict";const e=require("./shared");module.exports=Object.assign(Object.assign({},e),{default:e.default||e});

package/esm/index.js

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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "morphing-scroll",
-  "version": "2.1.1",
+  "version": "2.2.12",
   "description": "React library for custom object scrolling and scrollbar styling〈♦〉",
   "author": "Georg Schilin",
   "license": "MIT",
-  "main": "cjs/index.js",
-  "module": "esm/index.js",
+  "main": "./cjs/index.js",
+  "module": "./esm/index.js",
   "exports": {
     "import": "./esm/index.js",
     "require": "./cjs/index.js"

package/shared/index.js

@@ -0,0 +1 @@
+import e,{useMemo as t,useEffect as r,useRef as n}from"react";const o=(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;r>t;t++)e.push(n[t%4]);n=e}return n},l=({className:t,children:r,style:n,root:l,threshold:s,rootMargin:i,visibleContent:c=!1,onIntersection:a})=>{const[u,d]=e.useState(!1),m=e.useRef(null),p=e.useMemo((()=>{if(!i)return"";const e=o(i);return`${e[0]}px ${e[1]}px ${e[2]}px ${e[3]}px`}),[i]),f=e.useCallback((([e])=>{d(e.isIntersecting),a&&a({time:e.time,rootBounds:e.rootBounds,boundingClientRect:e.boundingClientRect,intersectionRect:e.intersectionRect,isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,target:e.target})}),[a]);return e.useEffect((()=>{const e=new IntersectionObserver(f,{root:l,threshold:s,rootMargin:p});return m.current&&e.observe(m.current),()=>{e.disconnect()}}),[f,l,s,p]),e.createElement("div",{"intersection-tracker":"",className:t,ref:m,style:n},c||u?r:null)};l.displayName="IntersectionTracker";const s=({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 i(e,n){const o=t((()=>function(t,r){let n=null;const o=(...t)=>{n&&clearTimeout(n),n=setTimeout((()=>{((...t)=>{e(...t)})(...t)}),r)};return o.cancel=()=>{n&&(clearTimeout(n),n=null)},o}(0,n)),[n]);return r((()=>()=>{o.cancel()}),[o]),o}s.displayName="ResizeTracker";let c=1;const a=({type:t,direction:r,progressReverse:n,size:o,progressTrigger:l,scrollBarOnHover:s,scrollBarEvent:i,thumbSize:c,thumbSpace:a,objLengthPerSize:u,sliderCheckLocal:d,duration:m})=>{const p="sliderMenu"!==t?{onMouseDown:i,onTouchStart:i}:{},f=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,m,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})),0!=!(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},p,{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},p,{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}))}),f))};a.displayName="ScrollBar";var u=e.memo(a);const d=({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})})};d.displayName="Edge";var m=e.memo(d);const p=({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)};p.displayName="Arrow";var f=e.memo(p);function g(e,t){return e>t?Math.floor(e/t):1}function h(e,t=0,r=1/0){return Math.max(t,Math.min(Math.round(e),r))}const y=(e,t,r)=>{if(!t)return;const n=t.querySelectorAll("."+("scroll"===e?"ms-thumb":"ms-slider"));n.length>0&&(r.current=n)},v=e=>e?"start"===e?"flex-start":"center"===e?"center":"flex-end":void 0;function b(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 x(t){const r=[],n=t=>{if(null===t||"number"==typeof t||"boolean"==typeof t||"bigint"==typeof t)r.push(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 E(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(0>=u||0>=d)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&&i>c+l?e.smoothScroll(c+l,t,e.duration):0>o&&c>0&&e.smoothScroll(c-l,t,e.duration),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 j(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 O=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")))},w="wrap-id",S=new Map,R=(e,t,r)=>{M(e);const n=setTimeout((()=>{t(),S.delete(e)}),r);S.set(e,n)},M=e=>{const t=S.get(e);t&&(clearTimeout(t),S.delete(e))},k=({type:t="scroll",className:r,size:l,objectsSize:a,direction:d="y",gap:p,wrapperMargin:M,wrapperMinSize:k,progressReverse:T=!1,progressTrigger:z={wheel:!0},scrollBarOnHover:A=!1,suspending:C=!1,fallback:L,scrollPosition:F,edgeGradient:N,children:I,onScrollValue:$,elementsAlign:W,elementsDirection:X="row",wrapperAlign:B,isScrolling:H,render:Y,emptyElements:P,crossCount:q})=>{var D,V,K,G,U,_;const J=i((()=>{kt()}),40),Q=i((()=>{yt()}),34),Z=function(){const e=n(null);return null===e.current&&(e.current=""+c++),e.current}();if(!l)throw Error(`Prop "size" is not provided\nMorphScroll〈♦${Z}〉`);Object.keys(z).length;const[ee,te]=e.useState(0),re=()=>{te((e=>"number"==typeof e&&1e3>e?e+1:0))},ne=e.useRef(null),oe=e.useRef(null),le=e.useRef(null),se=e.useRef(null),ie=e.useRef([]),ce=e.useRef(null),ae=e.useRef("none"),ue=e.useRef({loaded:[],empty:[]}),de=e.useRef({targetScrollY:0,targetScrollX:0,animating:!1,animationFrameId:0}),me=e.useRef(!1),pe=e.useRef(0),fe=e.useRef(null);function ge(){return e.useRef({width:0,height:0})}const he=ge(),ye=ge(),ve=ge(),[be,xe,Ee,je,Oe,we,Se,Re]=function(...e){return e.map(x)}(null==F?void 0:F.value,Y,l,a,P,k,B,p),Me=e.useMemo((()=>{var e,t;return{value:"number"==typeof(null==F?void 0:F.value)||"string"==typeof(null==F?void 0:F.value)?[F.value,F.value]:null!==(e=null==F?void 0:F.value)&&void 0!==e?e:[null],duration:null!==(t=null==F?void 0:F.duration)&&void 0!==t?t:200}}),[be,null==F?void 0:F.duration]),ke={color:null,size:40},Te=e.useMemo((()=>"object"==typeof N?Object.assign(Object.assign({},ke),N):ke),[N]),ze=e.useMemo((()=>Object.assign(Object.assign({},ke),"object"==typeof z.arrows?z.arrows:{})),[z.arrows]),Ae=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(Ae):[r]}return[t]}),[]),Ce=e.useMemo((()=>e.Children.toArray(I).flatMap(Ae).map((t=>e.isValidElement(t)&&t.key?t.key+"":null)).filter((e=>null!==e)).filter((e=>{var t;return"clear"!==(null==P?void 0:P.mode)||!(null===(t=ue.current.empty)||void 0===t?void 0:t.includes(e))}))),[I,Oe,null===(D=ue.current.empty)||void 0===D?void 0:D.join()]),[Le,Fe,Ne,Ie]=M?o(M):[0,0,0,0],$e=Le+Ne,We=Ie+Fe,[Xe,Be]=e.useMemo((()=>{var e,t;return"number"==typeof p?[p,p]:Array.isArray(p)?[null!==(e=p[1])&&void 0!==e?e:0,null!==(t=p[0])&&void 0!==t?t:0]:[0,0]}),[p]),He=e.useMemo((()=>o((null==Y?void 0:Y.rootMargin)||0,"x"===d)),[xe,d]),[Ye,Pe]=He?[He[2],He[0]]:[0,0],qe=e.useMemo((()=>{const[e,t]=Array.isArray(l)?l:"number"==typeof l?[l,l]:[he.current.width,he.current.height];if(!z.arrows||!ze.size)return[e,t,e,t];const r=2*ze.size;let n=e,o=t;return"x"===d?n=e-r:"y"===d?o=t-r:"hybrid"===d&&(n=e-r,o=t-r),[n,o,e,t]}),[Ee,ze.size,he.current]),De="x"===d?qe[0]:qe[1],Ve=e.useMemo((()=>a?Array.isArray(a)?a:o(a,!0,2):[null,null]),[je]),Ke=JSON.stringify(Ve),Ge=e.useMemo((()=>{const e=(e,t)=>"number"==typeof e?e:"firstChild"===e?t:0;return[e(Ve[0]&&"none"!==Ve[0]&&"size"!==Ve[0]?Ve[0]:"y"===d&&"none"!==Ve[0]||"size"===Ve[0]?qe[0]:0,ve.current.width),e(Ve[1]&&"none"!==Ve[1]&&"size"!==Ve[1]?Ve[1]:"x"===d&&"none"!==Ve[1]||"size"===Ve[1]?qe[1]:0,ve.current.height)]}),[Ke,ve.current]),Ue=e.useMemo((()=>{const e="x"===d,t="row"===X,r="column"===X,n=e?qe[1]:qe[0],o=e?Ge[1]+Be:Ge[0]+Xe,l="hybrid"===d?o*(Ce.length+1)-o:n,s=Math.floor(l/o)||1,i=q&&s>=q?"hybrid"===d?Math.ceil(s/q):q:s,c=i>1&&i<Ce.length?Math.ceil(Ce.length/i):i>Ce.length?1:Ce.length,a=q&&q<Ce.length,u=e=>Number.isFinite(e)&&e>0?e:1;if("hybrid"===d){const e=a?t?q:i:t?Ce.length:1,n=a?r?q:i:r?Ce.length:1;return[u(e),u(n)]}return[u(i),u(c)]}),[Ce.length,d,Ge.join(),qe.join(),Xe,We,$e,q]),_e=e.useMemo((()=>{const e=Ue[0]?Ue[0]*Be-Be:0,t="x"===d?Ue[1]:Ue[0];return Ge[0]?(Ge[0]+Be)*t-Be:(null==Y?void 0:Y.type)?ve.current.width+e:ye.current.width}),[Ge[0],Ue.join(),Be,ye.current.width,ve.current,xe]),Je=e.useMemo((()=>{const e=1>Ue[1]?1:Ue[0]*Xe-Xe;return Ge[1]?"x"===d?(Ge[1]+Xe)*Ue[0]-Xe:(Ge[1]+Xe)*Ue[1]-Xe:(null==Y?void 0:Y.type)?ve.current.height+e:ye.current.height}),[Ge[1],Ue.join(),Xe,ye.current.height,ve.current,xe]),Qe=e.useMemo((()=>Je+$e),[Je,$e]),Ze=e.useMemo((()=>_e+We),[_e,We]),et="x"===d?Ze:Qe,tt="x"===d?(null===(V=le.current)||void 0===V?void 0:V.scrollLeft)||0:(null===(K=le.current)||void 0===K?void 0:K.scrollTop)||0,rt=tt>1&&!0,nt=et>Math.round(tt+De);let ot=!1,lt=!1;"hybrid"===d&&(ot=((null===(G=le.current)||void 0===G?void 0:G.scrollLeft)||0)>1&&!0,lt=Math.round(((null===(U=le.current)||void 0===U?void 0:U.scrollLeft)||0)+qe[0])<Ze);const st=e.useMemo((()=>{if(!z.progressElement||!et)return 0;const e=Math.round(De/et*De);return!Number.isFinite(e)||0>e?0:e}),[De,et,z.progressElement]),it=e.useMemo((()=>{if(!z.progressElement)return 0;const e=Math.round(qe[0]/Ze*qe[0]);return!Number.isFinite(e)||0>e?0:e}),[qe[0],Ze,z.progressElement]),ct=e.useMemo((()=>De?et-De:et),[et,De]),at=e.useMemo((()=>qe[0]?Ze-qe[0]:Ze),[Ze,qe[0]]),ut=e.useCallback((()=>{if(!(null==Y?void 0:Y.type)||1>=Ue[0])return[];const e=Array.from({length:Ce.length},((e,t)=>t)),t=Array.from({length:Ue[0]},(()=>[])),r="x"===d&&"column"===X||"x"!==d&&"row"===X;return e.forEach((e=>{const n=r?e%Ue[0]:Math.floor(e/Ue[1]);t[n]&&t[n].push(e)})),t}),[Ce.length,Ue.join(),xe,X,d]),dt=e.useMemo((()=>{if(!(null==Y?void 0:Y.type))return[{elementTop:0,elementBottom:0,left:0,right:0}];let e=[],t=0;if(W){const r=Array.from({length:Ce.length},((e,t)=>t)),n=Math.abs(Math.floor(Ce.length/Ue[0])*Ue[0]-Ce.length);e=n?r.slice(-n):[],"center"===W?t=(Ge[0]+Be)*(Ue[0]-n)/2:"end"===W&&(t=(Ge[0]+Be)*(Ue[0]-n))}return Ce.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)return["x"===d?n:r,["hybrid","y"].includes(d)?n:r]}return[0,0]}(n,ut()),l=e.length>0&&e.includes(n)?t:0,s=function(e){const t="x"===d?l:0;return e>0?t+(Ge[1]+Xe)*e:t}(Ue[0]>1||["hybrid","x"].includes(d)?o[1]:n),i=Ge[1]?s+Ge[1]:s,c=function(e){const t="x"===d?0:l;return e>0?t+(Ge[0]+Be)*e:t}(1===Ue[0]&&"x"===d?n:o[0]);return{elementTop:s,elementBottom:i,left:c,right:c+Ge[0]}}))}),[I,Ge.join(),p,xe,Ue[0],X]),mt=e.useMemo((()=>(null==qe?void 0:qe.length)&&B?function(e,t,r,n){const[o,l="start"]="string"==typeof e?[e,e]:e,s={display:"flex"};return t[0]>r&&(s.justifyContent=v(o)),t[1]>n&&(s.alignItems=v(l)),s}(B,qe,Ze,Qe):{}),[B,qe.join(),Qe,Ze]),pt=e.useMemo((()=>[g(Ze,qe[0]),g(Qe,qe[1])]),[Ze,Qe,qe.join()]),ft=e.useMemo((()=>"x"===d?pt[0]:pt[1]),[d,pt[0],pt[1]]),gt=e.useCallback((e=>{if(!A)return;const t=()=>((e,t,r,n)=>{e&&e.querySelectorAll(".ms-bar").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"))}))})(oe.current,0,e,R);"mouseleave"===e.type?!["thumb","slider","wrapp"].includes(ae.current)&&t():t()}),[A,t,ae.current,oe.current]),ht=e.useCallback((e=>{le.current&&(({arrowType:e,scrollElement:t,wrapSize:r,scrollSize:n,smoothScroll:o,duration:l})=>{const s=r[0],i=r[1],c=t.scrollTop,a=t.scrollLeft,u=["top","bottom"].includes(e)?i:s,d=(e,t)=>o(h(e,0,u),t,l);"top"===e&&c>0?d(c-n[1],"y"):"left"===e&&a>0&&d(a-n[0],"x"),"bottom"===e&&c+n[1]!==i?d(c+n[1],"y"):"right"===e&&a+n[0]!==s&&d(a+n[0],"x")})({arrowType:e,scrollElement:le.current,wrapSize:[Ze,Qe],scrollSize:qe,smoothScroll:wt,duration:Me.duration})}),[le.current,qe.join(),Ze,Qe,Me.duration]),yt=e.useCallback((()=>{y(t,ne.current,ie);const e=le.current;oe.current&&e&&0!==ie.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&&l*(r+1)>o;e.classList.toggle("active",s)}))}c.length>0&&u(c,r,e,n),a.length>0&&u(a,r,e,"x")}()})(e,ie.current,qe,d)}),[qe.join(),d,le,oe,ie,t]),vt=e.useCallback((()=>{const e=le.current;e&&(null==$||$(e.scrollLeft,e.scrollTop),me.current=!0,null==H||H(!0),R("handleScroll-anim",(()=>{me.current=!1,null==H||H(!1),(null==Y?void 0:Y.type)?re():J()}),200),"slider"===t&&Q(),(null==Y?void 0:Y.type)||J(),re())}),[d,$,H,xe,t,Q]),bt=h(tt/ct*(De-st),0,De-st),xt=h(((null===(_=le.current)||void 0===_?void 0:_.scrollLeft)||0)/at*(qe[0]-qe[0]/Ze*qe[0]),0,qe[0]-it),Et=i(b(he,re),40),jt=i(b(ye,re,We,$e),40),Ot=i(b(ve,re),40),wt=e.useCallback(((e,t,r,n)=>{const o=le.current;return o?function(e,t,r,n,o){let l;if(!t&&!n)return null;const s=performance.now(),i=t.scrollTop,c=t.scrollLeft,a=u=>{const d=Math.min((u-s)/r,1);"y"===e?t.scrollTop=i+(n-i)*d:"x"===e&&(t.scrollLeft=c+(n-c)*d),1>d?l=requestAnimationFrame(a):null==o||o()};return l=requestAnimationFrame(a),()=>cancelAnimationFrame(l)}(t,o,r,e,n):null}),[le]),St=e.useCallback(((e,r="mousedown",n)=>{const o=e||("scroll"===t?"thumb":"slider");if("wrapp"===e&&!z.content||["thumb","slider"].includes(o)&&!z.progressElement)return;y(t,ne.current,ie);let l=null;n&&(l=n.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=>E(Object.assign(Object.assign({},e),{mouseEvent:t}))),{signal:r}),document.addEventListener("mouseup",(r=>j(Object.assign(Object.assign({},e),{mouseEvent:r,controller:t}))),{signal:r})):"touchstart"===e.eventType&&(document.addEventListener("touchmove",(t=>{t.preventDefault(),E(Object.assign(Object.assign({},e),{mouseEvent:t}))}),{signal:r,passive:!1}),document.addEventListener("touchend",(r=>j(Object.assign(Object.assign({},e),{mouseEvent:r,controller:t}))),{signal:r})),document.body.style.cursor="grabbing"}({eventType:r,scrollElementRef:le.current,objectsWrapperRef:se.current,scrollBar:n||null,clickedObject:ae,scrollContentRef:oe.current,scrollStateRef:de.current,type:t,scrollBarOnHover:A,mouseOnEl:O,mouseOnRefHandle:gt,triggerUpdate:re,direction:d,smoothScroll:wt,sizeLocal:[qe[0],qe[1]],clicked:o,numForSliderRef:pe,isScrollingRef:me,prevCoordsRef:fe,thumbSize:"x"===l?it:st,axisFromAtr:l,duration:Me.duration})}),[t,z.content,z.progressElement,qe.join(),st,it,Me.duration]),Rt=e.useCallback((e=>{St(null,e.type,e.target)}),[St]),Mt=e.useCallback((()=>{St("wrapp")}),[St]),kt=e.useCallback((()=>{ne.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(w)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});let o=n.nextNode();for(;o;){const e=o,l=e.getAttribute(w);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()})(ne.current,ue,re,null==Y?void 0:Y.type)}),[xe]),Tt=e.useCallback((e=>{(null==P?void 0:P.clickTrigger)&&((e,t,r,n)=>{e.target.closest(r.selector)&&t("emptyKeys-anim",(()=>{n()}),r.delay||0)})(e,R,P.clickTrigger,kt)}),[Oe]),zt=e.useCallback(((e,t,r)=>{if(ce.current){if(ce.current!==Ce[0])return void(ce.current=Ce[0])}else ce.current=Ce[0];const n=wt(t,e,Me.duration);n&&r.push(n)}),[Ce[0],Me.duration]),At=e.useMemo((()=>{const e=Object.assign(Object.assign(Object.assign(Object.assign({margin:M?`${Le}px ${Fe}px ${Ne}px ${Ie}px`:"",height:Ve[1]&&"none"!==Ve[1]?Je+"px":"fit-content",width:Ve[0]&&"none"!==Ve[0]?_e+"px":"fit-content"},z.content&&{cursor:"grab"}),p&&!(null==Y?void 0:Y.type)&&{gap:`${Xe}px ${Be}px`}),k&&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"}}(k,d,qe,We,$e)),B&&{flexShrink:0});if(null==Y?void 0:Y.type)return Object.assign(Object.assign({},e),{position:"relative"});const t=Ve[1]?"wrap":void 0,r=1===Ue[0]?"y"===d?"column":"row":X;return Object.assign(Object.assign({},e),{display:"flex",flexDirection:r,flexWrap:t,justifyContent:v(W)})}),[M,[Le,Fe,Ne,Ie,We,$e].join(),Ve[1],Je,_e,z.content,Re,[Xe,Be].join(),null==Y?void 0:Y.type,we,d,qe.join(),Se,Ue[0],X,W]);e.useEffect((()=>{(P||(null==Y?void 0:Y.type))&&(P||null===ue.current.empty||(ue.current.empty=null),J())}),[Oe,null==Y?void 0:Y.type,xe,me.current,Ce.length]),e.useEffect((()=>(((null==Y?void 0:Y.type)||H)&&(H&&H(!1),re()),yt(),()=>{de.current.animationFrameId&&cancelAnimationFrame(de.current.animationFrameId),(()=>{for(const e of S.values())clearTimeout(e);S.clear()})()})),[]),e.useEffect((()=>{const e=le.current;if(!e)return;const t=z.wheel?t=>function(e,t,r,n){e.preventDefault(),r.animating||(r.targetScrollX=t.scrollLeft,r.targetScrollY=t.scrollTop),"x"===n?r.targetScrollX=h(r.targetScrollX+e.deltaY,0,t.scrollWidth-t.clientWidth+2):r.targetScrollY=h(r.targetScrollY+e.deltaY,0,t.scrollHeight-t.clientHeight+2),r.animating||(r.animating=!0,r.animationFrameId=requestAnimationFrame((function e(){let o=0;"x"===n?(t.scrollLeft+=.4*(r.targetScrollX-t.scrollLeft),o=Math.abs(t.scrollLeft-r.targetScrollX)):(t.scrollTop+=.4*(r.targetScrollY-t.scrollTop),o=Math.abs(t.scrollTop-r.targetScrollY)),o>2.5?r.animationFrameId=requestAnimationFrame(e):(r.animating=!1,null!==r.animationFrameId&&(cancelAnimationFrame(r.animationFrameId),r.animationFrameId=null))})))}(t,e,de.current,d):e=>e.preventDefault();return e.addEventListener("wheel",t,{passive:!1}),()=>{e.removeEventListener("wheel",t)}}),[d,z.wheel]),e.useEffect((()=>{if(!Me.value)return;const e=[];return("hybrid"===d?["x","y"]:[d]).forEach((t=>{const r="x"===t?0:1;"end"===Me.value[r]&&zt(t,"x"===t?at:ct,e)})),()=>{e.forEach((e=>e()))}}),[Me.value.join(),be,ct,at,Ze,Qe]),e.useEffect((()=>{if(!Me.value)return;const e=[];return("hybrid"===d?["x","y"]:[d]).forEach((t=>{const r="x"===t?0:1;"number"==typeof Me.value[r]&&zt(t,Me.value[r],e)})),()=>{e.forEach((e=>e()))}}),[be,null==F?void 0:F.updater]);const Ct=e.useCallback(((t,r,n,o)=>{var l;const s=Object.assign({width:Ge[0]?Ge[0]+"px":void 0,height:Ge[1]?Ge[1]+"px":void 0},(null==Y?void 0:Y.type)&&Object.assign({position:"absolute",top:r+"px",left:n+"px"},!Ge[0]&&1===Ue[0]&&{transform:"translateX(-50%)"})),i=C?e.createElement(e.Suspense,{fallback:L},o):o,c=(null===(l=null==P?void 0:P.clickTrigger)||void 0===l?void 0:l.selector)&&Tt;return e.createElement("div",Object.assign({key:t},Y||P?{[w]:""+t}:{},{className:"ms-object-box",style:s,onClick:c}),i)}),[C,!!L,Ge.join(),le.current,xe,Oe,Ue[0]]),Lt=e.createElement("div",{className:"ms-objects-wrapper",ref:se,onMouseDown:Mt,style:At},Ce.map(((t,r)=>{var n,o,l;const i=e.Children.toArray(I).find((r=>e.isValidElement(r)&&r.key===t)),c=(null==Y?void 0:Y.stopLoadOnScroll)&&me.current&&!ue.current.loaded.includes(""+t)?L:(null===(n=ue.current.empty)||void 0===n?void 0:n.includes(t))?"object"==typeof(null==P?void 0:P.mode)?P.mode.fallback:L:i,a="number"==typeof Ve[0]&&"number"==typeof Ve[1]||"firstChild"!==Ve[0]&&"firstChild"!==Ve[1]||0!==r?c:e.createElement(s,{onResize:Ot},c);if(!(null==Y?void 0:Y.type))return Ct(t,0,0,a);{const{elementTop:e,elementBottom:n,left:s,right:i}=dt[r],c="x"===d?Ye:Pe,u=De+c>("x"===d?s:e)-tt&&("x"===d?i:n)-tt>0-c,m="hybrid"!==d||qe[0]+Ye>s-((null===(o=le.current)||void 0===o?void 0:o.scrollLeft)||0)&&i-((null===(l=le.current)||void 0===l?void 0:l.scrollLeft)||0)>0-Ye;if(u&&m)return Ct(t,e,s,a)}}))),Ft=[{positionType:"x"===d?"left":"top",visibility:rt},{positionType:"x"===d?"right":"bottom",visibility:nt},..."hybrid"===d?[{positionType:"left",visibility:ot},{positionType:"right",visibility:lt}]:[]],Nt=e.createElement("div",{"morph-scroll":`〈♦${Z}〉`,className:r,ref:ne,style:{width:qe[2]+"px",height:qe[3]+"px"}},e.createElement("div",{className:"ms-content",ref:oe,onMouseEnter:gt,onMouseLeave:gt,onTouchStart:gt,onTouchEnd:gt,style:Object.assign({position:"relative",width:qe[0]+"px",height:qe[1]+"px"},z.arrows&&ze.size&&("x"===d?{left:ze.size+"px"}:"y"===d?{top:ze.size+"px"}:{top:ze.size+"px",left:ze.size+"px"}))},e.createElement("div",{className:"ms-element",ref:le,onScroll:vt,style:Object.assign(Object.assign(Object.assign({width:"100%",height:"100%"},mt),{overflow:{x:Ze>qe[0]?"scroll hidden":"hidden",y:Qe>qe[1]?"hidden scroll":"hidden",hybrid:`${Ze>qe[0]?"scroll":"hidden"} ${Qe>qe[1]?"scroll":"hidden"}`,hide:"hidden"}[z.wheel||z.content?d:"hide"]}),"scroll"!==t||"boolean"!=typeof z.progressElement||!1===z.progressElement?{scrollbarWidth:"none"}:{})},Ge[0]&&Ge[1]?Lt:e.createElement(s,{onResize:jt,style:Object.assign({},mt)},Lt)),N&&Ft.map((({positionType:t,visibility:r})=>e.createElement(m,{key:"edge-"+t,edgeGradient:Te,visibility:r,edgeType:t}))),z.progressElement&&!0!==z.progressElement&&[{shouldRender:et>st,direction:d,thumbSize:st,thumbSpace:bt,objLengthPerSize:ft,progressReverseIndex:0},{shouldRender:"hybrid"===d&&Ze>it,direction:"x",thumbSize:it,thumbSpace:xt,objLengthPerSize:pt[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e)).map((r=>e.createElement(u,{key:r.direction,type:t,direction:r.direction,progressReverse:"boolean"==typeof T?T:T[r.progressReverseIndex],size:qe,progressTrigger:z,scrollBarOnHover:A,scrollBarEvent:"sliderMenu"===t?wt:Rt,thumbSize:r.thumbSize,thumbSpace:r.thumbSpace,objLengthPerSize:r.objLengthPerSize,sliderCheckLocal:yt,duration:Me.duration})))),z.arrows&&Ft.map((({positionType:t,visibility:r})=>e.createElement(f,{key:"arrow-"+t,activity:r,arrows:ze,arrowType:t,handleArrow:ht,size:"hybrid"===d?qe[0]+2*ze.size:qe[0]}))));return"auto"===l?e.createElement(s,{measure:"outer",onResize:Et},Nt):Nt};k.displayName="MorphScroll";const T={MorphScroll:k,ResizeTracker:s,IntersectionTracker:l};export{l as IntersectionTracker,k as MorphScroll,s as ResizeTracker,T as default};

package/types/index.d.ts

@@ -106,6 +106,14 @@ declare const IntersectionTracker: React.FC<IntersectionTrackerT>;
  * ### Links:
  * [MorphScroll Documentation](https://www.npmjs.com/package/morphing-scroll#-morphscroll)
  */
+
 declare const MorphScroll: React.FC<MorphScrollT>;
 
+declare const Morph: {
+  MorphScroll: React.FC<MorphScrollT>;
+  ResizeTracker: React.FC<ResizeTrackerT>;
+  IntersectionTracker: React.FC<IntersectionTrackerT>;
+};
+
 export { MorphScroll, ResizeTracker, IntersectionTracker };
+export default Morph;

package/types/intersectionTracker.d.ts

@@ -105,7 +105,9 @@ type IntersectionTrackerT = {
    * @example
    * ```tsx
    * <IntersectionTracker
-   *   onVisible={(entry) => console.log(entry)}
+   *   onIntersection={(entry) => {
+   *     if (entry.isIntersecting) loadMoreItems();
+   *   }}
    * >
    *   {children}
    * </IntersectionTracker>
@@ -113,7 +115,7 @@ type IntersectionTrackerT = {
    *
    * @link https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry
    */
-  onVisible?: (entry: IntersectionObserverEntry) => void;
+  onIntersection?: (entry: IntersectionObserverEntry) => void;
 };
 
 export default IntersectionTrackerT;