morphing-scroll 2.3.0 → 2.4.0

package/README.md

@@ -581,7 +581,7 @@ This parameter allows you to add custom arrows to the progress bar. You can eith
 ✦ Note:<br />
 <ul>
   <li><code>progressTrigger</code> can only create or provide elements, but you must make the design for them yourself.</li>
-  <li>The Library scroll element automatically receives <code>:focus</code> when you start scrolling with the mouse wheel.</li>
+  <li>The Library scroll element in browser automatically receives <code>:focus</code> when you start scrolling with the mouse wheel.</li>
 </ul></em><br />
 <b>Example:</b>
 
@@ -601,7 +601,7 @@ This parameter allows you to add custom arrows to the progress bar. You can eith
 
 <h2></h2>
 
-<details><summary><b><code>progressReverse</code></b>: <em>Reverse the progress bar position.</em></summary><br /><ul><div>
+<details><summary><b><code>progressReverse</code></b>: <em>Reverse your progress bar position.</em></summary><br /><ul><div>
 <b>Type:</b><br />
 boolean | boolean[]<br />
 <br />
@@ -631,7 +631,7 @@ This parameter changes the position of the progress bar based on the direction p
 
 <h2></h2>
 
-<details><summary><b><code>scrollBarOnHover</code></b>: <em>Hover visibility of the <b>progress bar</b>.</em></summary><br /><ul><div>
+<details><summary><b><code>scrollBarOnHover</code></b>: <em>Progress bar hover visibility.</em></summary><br /><ul><div>
 <b>Type:</b><br />
 boolean<br />
 <br />
@@ -656,6 +656,31 @@ When you use it, the <b>"hover"</b> class is applied to the <b>.ms-bar</b> when
 
 <h2></h2>
 
+<details><summary><b><code>scrollBarEdge</code></b>: <em>Scroll bar margin at its edges.</em></summary><br /><ul><div>
+<b>Type:</b><br />
+number | number[]<br />
+<br />
+<b>Description:</b> <em><br />
+Defines the margin (in pixels) applied to the edges of the scroll bar, effectively reducing its size.<br />
+If you use <code>direction="hybrid"</code>, you can also pass an array of numbers to control each bar individually.<br />
+<br />
+✦ Note:<br />
+This parameter is only used when <code>type="scroll"</code> is set.</em><br />
+<br />
+<b>Example:</b>
+
+```tsx
+<MorphScroll {...props} scrollBarEdge={10}>
+  {children}
+</MorphScroll>
+```
+
+![banner](https://raw.githubusercontent.com/voodoofugu/morphing-scroll/refs/heads/main/src/assets/banner-scrollBarEdge.png)
+
+</div></ul></details>
+
+<h2></h2>
+
 ##### **OPTIMIZATIONS**:
 
 <details><summary><b><code>render</code></b>: <em>Rendering strategy for performance optimization.</em></summary><br /><ul><div>

package/cjs/index.js

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphing-scroll",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React library for custom object scrolling and scrollbar styling",
   "author": "Georg Schilin",
   "license": "MIT",

package/types/morphScroll.d.ts

@@ -336,7 +336,7 @@ type MorphScrollT = {
   };
   /**---
    * ![logo](https://github.com/voodoofugu/morphing-scroll/raw/main/src/assets/morphing-scroll-logo.png)
-   * Reverse the progress bar position.
+   * Reverse your progress bar position.
    * ___
    * @default false
    *
@@ -355,7 +355,7 @@ type MorphScrollT = {
   progressReverse?: boolean | boolean[];
   /**---
    * ![logo](https://github.com/voodoofugu/morphing-scroll/raw/main/src/assets/morphing-scroll-logo.png)
-   * Hover visibility of the progress bar.
+   * Progress bar hover visibility.
    * ___
    * @default false
    *
@@ -369,6 +369,24 @@ type MorphScrollT = {
    * ```
    */
   scrollBarOnHover?: boolean;
+  /**---
+   * ![logo](https://github.com/voodoofugu/morphing-scroll/raw/main/src/assets/morphing-scroll-logo.png)
+   * Scroll bar margin at its edges.
+   * ___
+   * @note
+   * - *Used when: `type="scroll"`*
+   * - *When `direction="hybrid"` you can set an array of values*
+   *
+   * @example
+   * ```tsx
+   * <MorphScroll {...props}
+   *   scrollBarEdge={10}
+   * >
+   *   {children}
+   * </MorphScroll>
+   * ```
+   */
+  scrollBarEdge?: number | number[];
 
   // Optimization
   /**---