morphing-scroll 2.5.3 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +232 -215
- package/cjs/index.js +1 -1
- package/esm/index.js +1 -1
- package/package.json +1 -1
- package/types/index.d.ts +95 -48
- package/types/intersectionTracker.d.ts +27 -31
- package/types/morphScroll.d.ts +142 -156
- package/types/resizeTracker.d.ts +17 -21
package/cjs/index.js
CHANGED
|
@@ -1 +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),h=e.useMemo((()=>{if(!i)return"";const e=t(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: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 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))};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 h=(e,t,r)=>{if(!t)return;const n=t.querySelectorAll("."+("scroll"===e?"ms-thumb":"ms-slider"));n.length>0&&(r.current=n)},p=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 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 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="wrap-id";function O(e,t,r){return t?m(Math.round(e/t*e),r,e):0}function k(e,t,r,n){return t?m(e/t*(r-n),0,r-n):0}const S=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")))},R=({className:r,children:l,type:i="scroll",direction:a="y",scrollPosition:v,onScrollValue:x,isScrolling:R,size:M,objectsSize:A,crossCount:z,gap:T,wrapperMargin:C,wrapperMinSize:L,wrapperAlign:F,elementsAlign:N,elementsDirection:I="row",edgeGradient:q,progressTrigger:B={wheel:!0},progressReverse:$=!1,scrollBarOnHover:W=!1,scrollBarEdge:X,thumbMinSize:Y,render:H,emptyElements:P,suspending:D=!1,fallback:K})=>{var _,V,U,G,J;const Q=function(){const t=e.useRef(null);return null===t.current&&(t.current=""+o++),t.current}();if(!M)throw Error(`Prop "size" is not provided\nMorphScroll〈♦${Q}〉`);Object.keys(B).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),he=e.useRef(null),pe=e.useRef(!1);function fe(){return e.useRef({width:0,height:0})}const ge=fe(),ye=fe(),be=fe(),[ve,xe,Ee,je,we,Oe,ke,Se,Re,Me,Ae]=function(...e){return e.map(g)}(null==v?void 0:v.value,H,M,A,P,L,F,T,B,ae.current.empty,X),ze=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}}),[ve,null==v?void 0:v.duration]),Te={color:null,size:40},Ce=e.useMemo((()=>"object"==typeof q?Object.assign(Object.assign({},Te),q):Te),[q]),Le=e.useMemo((()=>Object.assign(Object.assign({},Te),"object"==typeof B.arrows?B.arrows:{})),[Re]),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(l).flatMap(Fe).map((t=>e.isValidElement(t)&&t.key?t.key+"":null)).filter((e=>null!==e)).filter((e=>{var t;return"clear"!==(null==P?void 0:P.mode)||!(null===(t=ae.current.empty)||void 0===t?void 0:t.includes(e))}))),[l,Fe,we,Me]),[Ie,qe,Be,$e]=C?t(C):[0,0,0,0],We=Ie+Be,Xe=$e+qe,[Ye,He]=e.useMemo((()=>{var e,t;return"number"==typeof T?[T,T]:Array.isArray(T)?[null!==(e=T[1])&&void 0!==e?e:0,null!==(t=T[0])&&void 0!==t?t:0]:[0,0]}),[T]),Pe=e.useMemo((()=>t((null==H?void 0:H.rootMargin)||0,"x"===a)),[xe,a]),[De,Ke]=Pe?[Pe[2],Pe[0]]:[0,0],_e=e.useMemo((()=>{const[e,t]=Array.isArray(M)?M:"number"==typeof M?[M,M]:[ge.current.width,ge.current.height];if(!B.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]}),[Ee,Re,a,Le.size,ge.current.height,ge.current.width]),Ve="x"===a?_e[0]:_e[1],Ue=e.useMemo((()=>{if(!X)return[0,0];if("number"==typeof X){const e=2*X;return[e,e]}if(Array.isArray(X)){const[e=0,t]=X;return[2*e,2*(null!=t?t:e)]}return[0,0]}),[Ae]),Ge="x"===a?Ue[0]:Ue[1],Je=e.useMemo((()=>[_e[0]-Ue[0],_e[1]-Ue[1]]),[Ue.join(),_e[0],_e[1]]),Qe="x"===a?Je[0]:Je[1],Ze=e.useMemo((()=>A?Array.isArray(A)?A:t(A,!0,2):[null,null]),[je]),et=e.useMemo((()=>{const e=(e,t)=>"number"==typeof e?e:"firstChild"===e?t:0;return[e(Ze[0]&&"none"!==Ze[0]&&"size"!==Ze[0]?Ze[0]:"y"===a&&"none"!==Ze[0]||"size"===Ze[0]?_e[0]:0,be.current.width),e(Ze[1]&&"none"!==Ze[1]&&"size"!==Ze[1]?Ze[1]:"x"===a&&"none"!==Ze[1]||"size"===Ze[1]?_e[1]:0,be.current.height)]}),[Ze.join(),a,be.current.width,be.current.height,_e.join()]),tt=e.useMemo((()=>{const e="x"===a,t="row"===I,r="column"===I,n=e?_e[1]:_e[0],o=e?et[1]+He:et[0]+Ye,l="hybrid"===a?o*(Ne.length+1)-o:n,s=Math.floor(l/o)||1,i=z&&s>=z?"hybrid"===a?Math.ceil(s/z):z:s,c=i>1&&i<Ne.length?Math.ceil(Ne.length/i):i>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:i:t?Ne.length:1,n=u?r?z:i:r?Ne.length:1;return[d(e),d(n)]}return[d(i),d(c)]}),[I,He,Ye,et.join(),Ne.length,a,_e.join(),z]),rt=e.useMemo((()=>{const e=tt[0]?tt[0]*He-He:0,t="x"===a?tt[1]:tt[0];return et[0]?(et[0]+He)*t-He:(null==H?void 0:H.type)?be.current.width+e:ye.current.width}),[a,et[0],tt.join(),He,ye.current.width,be.current.width,null==H?void 0:H.type]),nt=e.useMemo((()=>{const e=1>tt[1]?1:tt[0]*Ye-Ye;return et[1]?"x"===a?(et[1]+Ye)*tt[0]-Ye:(et[1]+Ye)*tt[1]-Ye:(null==H?void 0:H.type)?be.current.height+e:ye.current.height}),[a,et[1],tt.join(),Ye,ye.current.height,be.current.height,null==H?void 0:H.type]),ot=e.useMemo((()=>nt+We),[nt,We]),lt=e.useMemo((()=>rt+Xe),[rt,Xe]),st="x"===a?lt:ot,it="x"===a?(null===(_=oe.current)||void 0===_?void 0:_.scrollLeft)||0:(null===(V=oe.current)||void 0===V?void 0:V.scrollTop)||0,ct=it>1&&!0,at=st>Math.round(it+Ve);let ut=!1,dt=!1;"hybrid"===a&&(ut=((null===(U=oe.current)||void 0===U?void 0:U.scrollLeft)||0)>1&&!0,dt=Math.round(((null===(G=oe.current)||void 0===G?void 0:G.scrollLeft)||0)+_e[0])<lt);const mt=e.useMemo((()=>null!=Y?Y:30),[Y]),ht=e.useCallback((({withLimit:e=!0,xSize:t})=>B.progressElement&&st?t?O(e?Je[0]:_e[0],e?lt-Ue[0]:lt,mt):O(e?Qe:Ve,e?st-Ge:st,mt):0),[Re,st,Qe,Ge,Ue[0],Ve,_e[0],Je[0],lt,mt]),pt=e.useMemo((()=>Ve?st-Ve:st),[st,Ve]),ft=e.useMemo((()=>_e[0]?lt-_e[0]:lt),[lt,_e[0]]),gt=e.useCallback((()=>{if(!(null==H?void 0:H.type)||1>=tt[0])return[];const e=Array.from({length:Ne.length},((e,t)=>t)),t=Array.from({length:tt[0]},(()=>[])),r="x"===a&&"column"===I||"x"!==a&&"row"===I;return e.forEach((e=>{const n=r?e%tt[0]:Math.floor(e/tt[1]);t[n]&&t[n].push(e)})),t}),[Ne.length,tt.join(),null==H?void 0:H.type,I,a]),yt=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/tt[0])*tt[0]-Ne.length);e=n?r.slice(-n):[],"center"===N?t=(et[0]+He)*(tt[0]-n)/2:"end"===N&&(t=(et[0]+He)*(tt[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,gt()),l=e.length>0&&e.includes(n)?t:0,s=function(e){const t="x"===a?l:0;return e>0?t+(et[1]+Ye)*e:t}(tt[0]>1||["hybrid","x"].includes(a)?o[1]:n),i=et[1]?s+et[1]:s,c=function(e){const t="x"===a?0:l;return e>0?t+(et[0]+He)*e:t}(1===tt[0]&&"x"===a?n:o[0]);return{elementTop:s,elementBottom:i,left:c,right:c+et[0]}}))}),[a,tt[0],et.join(),Ye,He,null==H?void 0:H.type,I,N,gt,Ne.join()]),bt=e.useMemo((()=>(null==_e?void 0:_e.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=p(o)),t[1]>n&&(s.alignItems=p(l)),s}(F,_e,lt,ot):{}),[F,_e.join(),ot,lt]),vt=e.useMemo((()=>[d(lt,_e[0]),d(ot,_e[1])]),[lt,ot,_e.join()]),xt=e.useMemo((()=>"x"===a?vt[0]:vt[1]),[a,vt[0],vt[1]]),Et=e.useCallback(f(ge,te),[ge.current.height,ge.current.width]),jt=e.useCallback(f(ye,te,Xe,We),[ye.current.height,ye.current.width,Xe,We]),wt=e.useCallback(f(be,te),[be.current.height,be.current.width]),Ot=e.useCallback(((e,t,r,n)=>{const o=oe.current;return o?function(e,t,r,n,o){let l;if(!t&&!n)return null;const s=performance.now(),i=t.scrollTop,c=t.scrollLeft,a=u=>{const d=Math.min((u-s)/r,1);"y"===e?t.scrollTop=i+(n-i)*d:"x"===e&&(t.scrollLeft=c+(n-c)*d),1>d?l=requestAnimationFrame(a):null==o||o()};return l=requestAnimationFrame(a),()=>cancelAnimationFrame(l)}(t,o,r,e,n):null}),[]),kt=e.useCallback(((e,t,r)=>{if(ie.current){if(ie.current!==Ne[0])return void(ie.current=Ne[0])}else ie.current=Ne[0];const n=Ot(t,e,ze.duration);n&&r.push(n)}),[Ne[0],ze.duration,Ot]),St=e.useMemo((()=>{const e=Object.assign(Object.assign(Object.assign(Object.assign({margin:C?`${Ie}px ${qe}px ${Be}px ${$e}px`:"",height:Ze[1]&&"none"!==Ze[1]?nt+"px":"fit-content",width:Ze[0]&&"none"!==Ze[0]?rt+"px":"fit-content"},B.content&&{cursor:"grab"}),T&&!(null==H?void 0:H.type)&&{gap:`${Ye}px ${He}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 s,i;return Array.isArray(e)?[s,i]=e:s=i=e,{minWidth:l(s,"x")+"px",minHeight:l(i,"y")+"px"}}(L,a,_e,Xe,We)),F&&{flexShrink:0});if(null==H?void 0:H.type)return Object.assign(Object.assign({},e),{position:"relative"});const t=Ze[1]?"wrap":void 0,r=1===tt[0]?"y"===a?"column":"row":I;return Object.assign(Object.assign({},e),{display:"flex",flexDirection:r,flexWrap:t,justifyContent:p(N)})}),[C,ke,Oe,[Ie,qe,Be,$e,Xe,We,Ye,He].join(),_e.join(),Se,Ze[1],nt,rt,B.content,Se,null==H?void 0:H.type,a,tt[0],I,N]),Rt=e.useCallback((e=>{if(!W)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"))}))})(ne.current,0,e);"mouseleave"===e.type?!["thumb","slider","wrapp"].includes(ce.current)&&t():t()}),[W]),Mt=e.useCallback(((e,t="mousedown",r)=>{const n=e||("scroll"===i?"thumb":"slider");if("wrapp"===e&&!B.content||["thumb","slider"].includes(n)&&!B.progressElement)return;h(i,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=>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:oe.current,objectsWrapperRef:le.current,scrollBar:r||null,clickedObject:ce,scrollContentRef:ne.current,scrollStateRef:ue.current,type:i,scrollBarOnHover:W,mouseOnEl:S,mouseOnRefHandle:Rt,triggerUpdate:te,direction:a,smoothScroll:Ot,sizeLocal:[_e[0],_e[1]],clicked:n,numForSliderRef:me,isScrollingRef:de,prevCoordsRef:he,thumbSize:ht("x"===o?{xSize:!0}:{}),axisFromAtr:o,duration:ze.duration,scrollBarEdge:Ue})}),[a,i,B.content,B.progressElement,_e.join(),ht({}),ht({xSize:!0}),ze.duration,Ot,Rt,W,Ue.join()]),At=e.useCallback((e=>{Mt(null,e.type,e.target)}),[Mt]),zt=e.useCallback((()=>{Mt("wrapp")}),[Mt]),Tt=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(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:oe.current,wrapSize:[lt,ot],scrollSize:_e,smoothScroll:Ot,duration:ze.duration})}),[_e.join(),lt,ot,ze.duration,Ot]),Ct=e.useCallback((()=>{h(i,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,_e,a)}),[_e.join(),a,oe,ne,i]),Lt=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(w)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});let o=n.nextNode();for(;o;){const e=o,l=e.getAttribute(w);l&&(t.push(l),0===e.children.length&&r.push(l)),o=n.nextNode()}return{allIds:t,emptyKeysRaw:r}})(),s=new Set(t.current.loaded);o.forEach((e=>s.add(e)));let i=null;if(t.current.empty){const e=new Set(t.current.empty);l.forEach((t=>e.add(t))),i=Array.from(e)}t.current={loaded:"lazy"===n?Array.from(s):o.map((e=>e)),empty:i},r()})(re.current,ae,te,null==H?void 0:H.type)}),[xe]),Ft=e.useCallback((e=>{(null==P?void 0:P.clickTrigger)&&((e,t,r)=>{const n=e.target;if(!n.closest(t.selector))return;const o=n.closest(`[${w}]`);o&&o.classList.add("remove"),j((()=>{o&&o.classList.remove("remove"),r()}),t.delay||0)})(e,P.clickTrigger,Lt)}),[we,Lt]),Nt=e.useCallback((()=>{j((()=>{const e=oe.current;e&&(null==x||x(e.scrollLeft,e.scrollTop),de.current=!0,null==R||R(!0),j((()=>{de.current=!1,null==R||R(!1),Lt()}),200),"slider"===i&&j((()=>Ct()),33),te())}),6)}),[x,R,i,Ct,Lt]),It=k(it,pt,Qe,ht({})),qt=k((null===(J=oe.current)||void 0===J?void 0:J.scrollLeft)||0,ft,Je[0],ht({xSize:!0})),Bt=e.useCallback((e=>{const t="object"==typeof B.wheel&&"string"==typeof B.wheel.changeDirectionKey?B.wheel.changeDirectionKey:"KeyX";e.code!==t||"hybrid"!==a||pe.current||(e.stopPropagation(),pe.current=!0,te())}),[a,JSON.stringify(B.wheel)]),$t=e.useCallback((e=>{pe.current&&(e.stopPropagation(),pe.current=!1,te())}),[]);e.useEffect((()=>{(P||(null==H?void 0:H.type))&&(P||null===ae.current.empty||(ae.current.empty=null),Lt())}),[we,null==H?void 0:H.type,Lt]),e.useEffect((()=>{const e=ue.current.animationFrameId;return((null==H?void 0:H.type)||R)&&R&&(R(!1),te()),Ct(),()=>{e&&cancelAnimationFrame(e),["timeout"].forEach((e=>E[e].clearAll()))}}),[]),e.useEffect((()=>{const e=oe.current;if(!e)return;const t=e=>e.preventDefault(),r="hybrid"===a&&"object"==typeof B.wheel&&B.wheel.changeDirection?"x":a,n="hybrid"===a&&nt+We<=_e[1]||pe.current?["hybrid","y"].includes(r)?"x":"y":r,o=B.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,ue.current,n)}:t;return e.addEventListener("wheel",o,{passive:!1}),()=>{e.removeEventListener("wheel",o)}}),[a,Re,nt,_e[1],We,pe.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]&&kt(t,"x"===t?ft:pt,e)})),()=>{e.forEach((e=>e()))}}),[a,ze.value.join(),ve,pt,ft,lt,ot]),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]&&kt(t,ze.value[r],e)})),()=>{e.forEach((e=>e()))}}),[ve,null==v?void 0:v.updater,a,kt,ze.value.join()]);const Wt=e.useCallback(((t,r,n,o)=>{var l;const s=Object.assign({width:et[0]?et[0]+"px":void 0,height:et[1]?et[1]+"px":void 0},(null==H?void 0:H.type)&&Object.assign({position:"absolute",top:r+"px",left:n+"px"},!et[0]&&1===tt[0]&&{transform:"translateX(-50%)"})),i=D?e.createElement(e.Suspense,{fallback:K},o):o,c=(null===(l=null==P?void 0:P.clickTrigger)||void 0===l?void 0:l.selector)&&Ft;return e.createElement("div",Object.assign({key:t},H||P?{[w]:""+t}:{},{className:"ms-object-box",style:s,onClick:c}),i)}),[D,!!K,et.join(),xe,we,tt[0],Ft]),Xt=e.useMemo((()=>[{positionType:"x"===a?"left":"top",visibility:ct},{positionType:"x"===a?"right":"bottom",visibility:at},..."hybrid"===a?[{positionType:"left",visibility:ut},{positionType:"right",visibility:dt}]:[]]),[ct,at,a,ut,dt]),Yt=e.useMemo((()=>({width:_e[2]+"px",height:_e[3]+"px"})),[_e]),Ht=e.useMemo((()=>[{shouldRender:ht({withLimit:!1})<Ve,direction:a,thumbSize:ht({}),thumbSpace:It,objLengthPerSize:xt,progressReverseIndex:0},{shouldRender:"hybrid"===a&&ht({withLimit:!1,xSize:!0})<Je[0],direction:"x",thumbSize:ht({xSize:!0}),thumbSpace:qt,objLengthPerSize:vt[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e))),[ht,Qe,a,Je[0],It,qt,xt,vt]),Pt=e.useMemo((()=>{const e={position:"relative",width:_e[0]+"px",height:_e[1]+"px"};return B.arrows&&Le.size&&("x"===a?e.left=Le.size+"px":"y"===a?e.top=Le.size+"px":(e.top=Le.size+"px",e.left=Le.size+"px")),e}),[_e,Re,Le.size,a]),Dt=e.useMemo((()=>{var e;return null!==(e={x:lt>_e[0]?"scroll hidden":"hidden",y:ot>_e[1]?"hidden scroll":"hidden",hybrid:`${lt>_e[0]?"scroll":"hidden"} ${ot>_e[1]?"scroll":"hidden"}`,hide:"hidden"}[B.wheel||B.content?a:"hide"])&&void 0!==e?e:"hidden"}),[lt,ot,_e[0],_e[1],Re,a]),Kt=e.useMemo((()=>q?Xt.map((({positionType:t,visibility:r})=>e.createElement(c,{key:"edge-"+t,edgeGradient:Ce,visibility:r,edgeType:t}))):null),[q,Xt,Ce]),_t=e.useMemo((()=>B.arrows?Xt.map((({positionType:t,visibility:r})=>e.createElement(u,{key:"arrow-"+t,activity:r,arrows:Le,arrowType:t,handleArrow:Tt,size:"hybrid"===a?_e[0]+2*Le.size:_e[0]}))):null),[B.arrows,Xt,Le,Tt,_e[0],a]),Vt=e.useMemo((()=>B.progressElement&&!0!==B.progressElement?Ht.map((t=>{const r="boolean"==typeof $?$:$[t.progressReverseIndex];return e.createElement(s,{key:t.direction+"",type:i,direction:t.direction,progressReverse:r,size:Je,progressTrigger:B,scrollBarOnHover:W,scrollBarEvent:"sliderMenu"===i?Ot:At,thumbSize:t.thumbSize,thumbSpace:t.thumbSpace,objLengthPerSize:t.objLengthPerSize,sliderCheckLocal:Ct,duration:ze.duration})})):null),[B.progressElement,Ht,i,$,Je,B,W,Ot,At,Ct,ze.duration]),Ut=e.createElement("div",{className:"ms-objects-wrapper",ref:le,onMouseDown:zt,style:St},Ne.map(((t,r)=>{var o,s,i;const c=e.Children.toArray(l).find((r=>e.isValidElement(r)&&r.key===t)),u=(null==H?void 0:H.stopLoadOnScroll)&&de.current&&!ae.current.loaded.includes(""+t)?K:(null===(o=ae.current.empty)||void 0===o?void 0:o.includes(t))?"object"==typeof(null==P?void 0:P.mode)?P.mode.fallback:K:c,d="number"==typeof Ze[0]&&"number"==typeof Ze[1]||"firstChild"!==Ze[0]&&"firstChild"!==Ze[1]||0!==r?u:e.createElement(n,{onResize:wt},u);if(!(null==H?void 0:H.type))return Wt(t,0,0,d);{const{elementTop:e,elementBottom:n,left:o,right:l}=yt[r],c="x"===a?De:Ke,u=Ve+c>("x"===a?o:e)-it&&("x"===a?l:n)-it>0-c,m="hybrid"!==a||_e[0]+De>o-((null===(s=oe.current)||void 0===s?void 0:s.scrollLeft)||0)&&l-((null===(i=oe.current)||void 0===i?void 0:i.scrollLeft)||0)>0-De;if(u&&m)return Wt(t,e,o,d)}}))),Gt=e.createElement("div",{"morph-scroll":`〈♦${Q}〉`,className:r,ref:re,style:Yt},e.createElement("div",{className:"ms-content",ref:ne,onMouseEnter:Rt,onMouseLeave:Rt,onTouchStart:Rt,onTouchEnd:Rt,style:Pt},e.createElement("div",{className:"ms-element",ref:oe,onScroll:Nt,onKeyDown:Bt,onKeyUp:$t,style:Object.assign(Object.assign(Object.assign({width:"100%",height:"100%",outline:"none"},bt),{overflow:Dt}),"scroll"!==i||"boolean"!=typeof B.progressElement||!1===B.progressElement?{scrollbarWidth:"none"}:{})},et[0]&&et[1]?Ut:e.createElement(n,{onResize:jt,style:bt},Ut)),Kt,Vt),_t);return"auto"===M?e.createElement(n,{measure:"outer",onResize:Et},Gt):Gt};R.displayName="MorphScroll";const M={MorphScroll:R,ResizeTracker:n,IntersectionTracker:r};exports.IntersectionTracker=r,exports.MorphScroll=R,exports.ResizeTracker=n,exports.default=M;
|
|
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),f=e.useMemo((()=>{if(!i)return"";const e=t(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:f});return m.current&&e.observe(m.current),()=>{e.disconnect()}}),[p,l,s,f]),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 f=e.useRef(null),p=e.useRef(null);e.useEffect((()=>{if(matchMedia("(pointer: coarse)").matches||!(null==l?void 0:l.wheel))return;const e=f.current;if(!e)return;const t="y"===e.getAttribute("data-direction")?"y":"x";let r=e.previousElementSibling;for(;r&&!r.classList.contains("ms-element");)r=r.previousElementSibling;const n=e=>{e.preventDefault(),null==r||r.scrollBy(Object.assign(Object.assign({},"y"===t?{top:e.deltaY}:{left:e.deltaY}),{behavior:"auto"}))};return e.addEventListener("wheel",n,{passive:!1}),()=>e.removeEventListener("wheel",n)}),[]),e.useEffect((()=>{const e=p.current;if(!e||"sliderMenu"===t)return;const r=window.matchMedia("(pointer: coarse)").matches?"touchstart":"mousedown",n=e=>{e.preventDefault(),e.stopPropagation(),i(e)};return e.addEventListener(r,n,{passive:!1}),()=>{e.removeEventListener(r,n)}}),[i]);const 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",ref:f,"data-direction":["hybrid","y"].includes(r)?"y":"x",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",{className:"ms-thumb",ref: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",{className:"ms-slider",ref: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?"270deg, ":""}${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}:{}),"left"===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,r,n){return new(r||(r=Promise))((function(o,l){function s(e){try{c(n.next(e))}catch(e){l(e)}}function i(e){try{c(n.throw(e))}catch(e){l(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(s,i)}c((n=n.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;let m=0;const f={tasks:[],timer:null,running:new Set},p=new Map,h={scheduleNext(){if(null!==f.timer&&(clearTimeout(f.timer),f.timer=null),0===f.tasks.length)return;const e=f.tasks[0],t=Math.max(0,e.runAt-performance.now());f.timer=window.setTimeout((()=>{f.timer=null;const e=performance.now(),t=[];for(;f.tasks.length&&f.tasks[0].runAt<=e&&!f.running.has(f.tasks[0].id);)t.push(f.tasks.shift());t.forEach((e=>{f.running.add(e.id);try{e.callback()}finally{f.running.delete(e.id)}})),h.scheduleNext()}),t)},clearAll(){null!==f.timer&&(clearTimeout(f.timer),f.timer=null),f.tasks=[],f.running.clear()}},g=(e,t,r,n)=>{const o=r||"task_"+m++;if(0===t)return e(),o;const l=n||"default",s=performance.now()+t;if("exclusive"===l){if(f.running.has(o)||f.tasks.some((e=>e.id===o)))return o;f.running.add(o);try{e()}finally{const e=window.setTimeout((()=>{f.running.delete(o),p.delete(o)}),t);p.set(o,e)}return o}r&&(f.tasks=f.tasks.filter((e=>e.id!==o)));const i={id:o,runAt:s,callback:()=>{f.running.add(o);try{e()}finally{f.running.delete(o)}}};return function(e,t){let r=0,n=e.length;for(;n>r;){const o=r+n>>1;e[o].runAt<t.runAt?r=o+1:n=o}e.splice(r,0,t)}(f.tasks,i),h.scheduleNext(),o},y=e=>{if(!e)return h.clearAll(),p.forEach((e=>clearTimeout(e))),void p.clear();(Array.isArray(e)?e:[e]).forEach((e=>{f.running.delete(e);const t=p.get(e);void 0!==t&&(clearTimeout(t),p.delete(e)),f.tasks=f.tasks.filter((t=>t.id!==e)),0===f.tasks.length?h.clearAll():h.scheduleNext()}))};function b(e,t){return e>t?Math.floor(e/t):1}function v(e,t=0,r=1/0){return Math.max(t,Math.min(Math.round(e),r))}const x=(e,t,r)=>{if(!t)return;const n=t.querySelectorAll("."+("scroll"===e?"ms-thumb":"ms-slider"));n.length>0&&(r.current=n)},E=e=>e?"start"===e?"flex-start":"center"===e?"center":"flex-end":void 0;function w(e,t,r=0,n=0){return o=>{var l,s,i,c;let a=!1;const u={width:(null!==(l=o.width)&&void 0!==l?l:0)-r,height:(null!==(s=o.height)&&void 0!==s?s:0)-n},d=0===u.width&&0===u.height;d&&!a&&(a=!0),(null===(i=e.current)||void 0===i?void 0:i.width)===u.width&&(null===(c=e.current)||void 0===c?void 0:c.height)===u.height||d&&a||(e.current=u,t())}}function j(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("/")}const S=(e,t)=>{if(e)if("grab"===e.style.cursor){if("mousedown"===t){const e=document.createElement("style");e.id="ms-cursor-lock",e.innerHTML="* {\n cursor: grabbing !important;\n }",document.head.appendChild(e)}e.style.cursor="grabbing",e.classList.add("active")}else if("grabbing"===e.style.cursor){if("mousedown"===t){const e=document.getElementById("ms-cursor-lock");e&&e.remove()}e.style.cursor="grab",e.classList.remove("active")}},R=(e,t,r,n)=>{const o=e;["thumb","slider"].includes(t)?S("slider"===t?null==r?void 0:r.closest(".ms-slider"):r,o):"wrapp"===t&&S(n,o)},M=(e,t,r)=>{var n,o,l,s,i;const c=r.scrollElementRef;if(!c)return;const a={x:"touches"in r.mouseEvent?r.mouseEvent.touches[0].clientX:r.mouseEvent.clientX,y:"touches"in r.mouseEvent?r.mouseEvent.touches[0].clientY:r.mouseEvent.clientY,leftover:null!==(o=null===(n=r.prevCoordsRef.current)||void 0===n?void 0:n.leftover)&&void 0!==o?o:0},u=null!==(l=r.prevCoordsRef.current)&&void 0!==l?l:a,d={x:a.x-u.x,y:a.y-u.y};r.prevCoordsRef.current=a;const m="wrapp"===r.clicked?-d[e]:d[e],f="y"===e?"scrollTop":"scrollLeft";if("thumb"===r.clicked)return void((e,t,r,n,o)=>{if(!t.scrollElementRef||!t.objectsWrapperRef)return;const l=t.scrollElementRef,s="x"===e?0:1;if(!Number.isFinite(o[s]))return;const i=t.objectsWrapperWH[s]+t["x"===e?"fullMarginX":"fullMarginY"],c=(t.scrollElementWH[s]-t.scrollBarEdge[s]-t.thumbSize)*o[s],a=i-t.scrollElementWH[s];if(0>=c||0>=a)return;const u=r*(a/c)+n.leftover,d=Math.trunc(u);if(t.prevCoordsRef.current&&(t.prevCoordsRef.current.leftover=u-d),"x"===e){const e="number"==typeof t.scrollStateRef.targetScrollX?t.scrollStateRef.targetScrollX:l.scrollLeft,r=l.scrollWidth-l.clientWidth;t.scrollStateRef.targetScrollX=v(e+d,0,r)}else{const e="number"==typeof t.scrollStateRef.targetScrollY?t.scrollStateRef.targetScrollY:l.scrollTop,r=l.scrollHeight-l.clientHeight;t.scrollStateRef.targetScrollY=v(e+d,0,r)}l.scrollLeft!==t.scrollStateRef.targetScrollX&&(l.scrollLeft=t.scrollStateRef.targetScrollX),l.scrollTop!==t.scrollStateRef.targetScrollY&&(l.scrollTop=t.scrollStateRef.targetScrollY)})(e,r,m,u,t);"slider"===r.type&&(r.numForSliderRef.current+=m);const p="x"===e?0:1;if("wrapp"===r.clicked){if(!Number.isFinite(t[p]))return;return void(c[f]+=m/t[p])}const h=c[f],g=Math.round((null===(i=null===(s=c.closest(".ms-content"))||void 0===s?void 0:s.querySelector(".ms-slider-element.active"))||void 0===i?void 0:i.getBoundingClientRect()["x"===e?"width":"height"])||1);if(Math.abs(r.numForSliderRef.current)>=g){const t=m>0&&h+r.sizeLocal[p]<r.wrapElWH[p]?h+r.sizeLocal[p]:0>m&&h>0?h-r.sizeLocal[p]:null;r.numForSliderRef.current=0,r.smoothScroll(t,e,10)}};function k(e){e.rafID.current&&(cancelAnimationFrame(e.rafID.current),e.rafID.current=NaN,y("smoothScrollBlock"));const t=e.scrollElementRef;t&&(e.scrollStateRef.targetScrollX=t.scrollLeft,e.scrollStateRef.targetScrollY=t.scrollTop);let r=0,n=0,o=[],l=[],s=[],i=[];if("thumb"===e.clicked){const t=getComputedStyle(e.objectsWrapperRef),s=e=>{const r=e=>parseFloat(e);return"x"===e?r(t.marginLeft)+r(t.marginRight):r(t.marginTop)+r(t.marginBottom)};r=s("x"),n=s("y"),o=[e.scrollElementRef.clientWidth,e.scrollElementRef.clientHeight],l=[e.objectsWrapperRef.clientWidth,e.objectsWrapperRef.clientHeight]}"slider"===e.type&&(s=[e.objectsWrapperRef.clientWidth,e.objectsWrapperRef.clientHeight]),["scroll","slider"].includes(e.type)&&(i=function(e){const t=e.getBoundingClientRect();return[t.width/e.clientWidth,t.height/e.clientHeight]}(e.scrollElementRef));const c=new AbortController,{signal:a}=c;e.clickedObject.current=e.clicked,e.triggerUpdate();R(e.eventType,e.clicked,e.scrollBar,e.objectsWrapperRef),document.addEventListener("pointermove",(t=>{return"touches"in(c=t)&&c.preventDefault(),void function(e){const t=e.direction||"y";"hybrid"===t?("wrapp"===e.clicked?["x","y"]:[e.axisFromAtr]).forEach((t=>t&&M(t,e.visualDiff,e))):M(t,e.visualDiff,e)}(Object.assign(Object.assign({},e),{mouseEvent:c,fullMarginX:r,fullMarginY:n,scrollElementWH:o,objectsWrapperWH:l,wrapElWH:s,visualDiff:i}));var c}),{passive:!1,signal:a}),document.addEventListener("pointerup",(t=>function(e){if(e.controller.abort(),R(e.eventType,e.clicked,e.scrollBar,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)}if("slider"===e.type){const t=e.scrollElementRef;if(!t)return;const r=e.numForSliderRef.current,n="y"===e.direction?"scrollTop":"scrollLeft",o="y"===e.direction?t.clientHeight:t.clientWidth,l=e=>o*Math[e](t[n]/o);if(Math.abs(r)>20){const t=l(r>0?"ceil":"floor");e.smoothScroll(t,"y"===e.direction?"y":"x",e.duration)}else{const t=l(r>0?"floor":"ceil");e.smoothScroll(t,"y"===e.direction?"y":"x",e.duration)}e.numForSliderRef.current=0}e.prevCoordsRef.current=null,e.triggerUpdate()}(Object.assign(Object.assign({},e),{mouseEvent:t,controller:c}))),{signal:a})}const O="wrap-id";function A(e,t,r){return t?v(Math.round(e/t*e),r,e):0}function L(e,t,r,n){return t?v(e/t*(r-n),0,r-n):0}const z=({className:r,children:l,type:i="scroll",direction:a="y",scrollPosition:m,onScrollValue:f,isScrolling:p,size:h,objectsSize:S,crossCount:R,gap:M,wrapperMargin:z,wrapperMinSize:T,wrapperAlign:C,elementsAlign:N,elementsDirection:W="row",edgeGradient:F,progressTrigger:H={wheel:!0},progressReverse:I=!1,scrollBarOnHover:B=!1,scrollBarEdge:Y,thumbMinSize:X,render:$,emptyElements:D,suspending:P=!1,fallback:q})=>{var K,V,_,U,G;const J=function(){const t=e.useRef(null);return null===t.current&&(t.current=""+o++),t.current}();if(!h)throw Error(`Prop "size" is not provided\nMorphScroll〈♦${J}〉`);Object.keys(H).length;const[,Q]=e.useState({}),Z=()=>Q({}),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(!0),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),fe=e.useRef(!1),pe=e.useRef(NaN);function he(){return e.useRef({width:0,height:0})}const ge=he(),ye=he(),be=he(),[ve,xe,Ee,we,je,Se,Re,Me,ke,Oe,Ae]=function(...e){return e.map(j)}(m,$,h,S,D,T,C,M,H,ce.current.empty,Y),Le=e.useMemo((()=>{var e,t;let r=[null],n=200,o=null;if(null!=m)if("number"==typeof m||"end"===m)r=[m,m];else if(Array.isArray(m))r=m;else if("object"==typeof m){const l=m.value;"number"==typeof l||"end"===l?r=[l,l]:Array.isArray(l)&&(r=l),n=null!==(e=m.duration)&&void 0!==e?e:200,o=null!==(t=m.updater)&&void 0!==t?t:null}return{value:r,duration:n,updater:o}}),[ve]),ze={color:null,size:40},Te=e.useMemo((()=>"object"==typeof F?Object.assign(Object.assign({},ze),F):"string"==typeof F?{color:F,size:40}:ze),[F]),Ce=e.useMemo((()=>{const t=H.arrows,r={size:40,contentReduce:!0,loop:!1};return e.isValidElement(t)?Object.assign(Object.assign({},r),{element:t}):"object"==typeof t&&null!==t?Object.assign(Object.assign({},r),t):r}),[ke]),Ne=e.useCallback((t=>{if(null==t)return[];if(e.isValidElement(t)){const r=t;return r.type===e.Fragment?e.Children.toArray(r.props.children).flatMap(Ne):[r]}return[t]}),[]),We=e.useMemo((()=>e.Children.toArray(l).flatMap(Ne).map((t=>e.isValidElement(t)&&t.key?t.key+"":null)).filter((e=>null!==e)).filter((e=>{var t;return"clear"!==(null==D?void 0:D.mode)||!(null===(t=ce.current.empty)||void 0===t?void 0:t.includes(e))}))),[l,Ne,je,Oe]),[Fe,He,Ie,Be]=z?t(z):[0,0,0,0],Ye=Fe+Ie,Xe=Be+He,[$e,De]=e.useMemo((()=>{var e,t;return"number"==typeof M?[M,M]:Array.isArray(M)?[null!==(e=M[1])&&void 0!==e?e:0,null!==(t=M[0])&&void 0!==t?t:0]:[0,0]}),[M]),Pe=e.useMemo((()=>{const e={type:void 0,rootMargin:0,stopLoadOnScroll:!1};if("string"==typeof $)return Object.assign(Object.assign({},e),{type:$});if("object"==typeof $&&null!==$){const{type:e,rootMargin:t=0,stopLoadOnScroll:r=!1}=$;return{type:e,rootMargin:t,stopLoadOnScroll:r}}return e}),[xe]),qe=e.useMemo((()=>t(Pe.rootMargin,"x"===a)),[Pe.rootMargin,a]),[Ke,Ve]=qe?[qe[2],qe[0]]:[0,0],_e=e.useMemo((()=>{const[e,t]=Array.isArray(h)?h:"number"==typeof h?[h,h]:[ge.current.width,ge.current.height];if(!H.arrows||!Ce.size||!Ce.contentReduce)return[e,t,e,t];const r=2*Ce.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]}),[Ee,ke,a,Ce,ge.current.height,ge.current.width]),Ue="x"===a?_e[0]:_e[1],Ge=e.useMemo((()=>{if(!Y)return[0,0];if("number"==typeof Y){const e=2*Y;return[e,e]}if(Array.isArray(Y)){const[e=0,t]=Y;return[2*e,2*(null!=t?t:e)]}return[0,0]}),[Ae]),Je="x"===a?Ge[0]:Ge[1],Qe=e.useMemo((()=>[_e[0]-Ge[0],_e[1]-Ge[1]]),[Ge.join(),_e[0],_e[1]]),Ze="x"===a?Qe[0]:Qe[1],et=e.useMemo((()=>S?Array.isArray(S)?S:t(S,!0,2):[null,null]),[we]),tt=e.useMemo((()=>{const e=(e,t)=>"number"==typeof e?e:"firstChild"===e?t:0;return[e(et[0]&&"none"!==et[0]&&"size"!==et[0]?et[0]:"y"===a&&"none"!==et[0]||"size"===et[0]?_e[0]:0,be.current.width),e(et[1]&&"none"!==et[1]&&"size"!==et[1]?et[1]:"x"===a&&"none"!==et[1]||"size"===et[1]?_e[1]:0,be.current.height)]}),[et.join(),a,be.current.width,be.current.height,_e.join()]),rt=e.useMemo((()=>{const e="x"===a,t="row"===W,r="column"===W,n=e?_e[1]:_e[0],o=e?tt[1]+De:tt[0]+$e,l="hybrid"===a?o*(We.length+1)-o:n,s=Math.floor(l/o)||1,i=R&&s>=R?"hybrid"===a?Math.ceil(s/R):R:s,c=i>1&&i<We.length?Math.ceil(We.length/i):i>We.length?1:We.length,u=R&&R<We.length,d=e=>Number.isFinite(e)&&e>0?e:1;if("hybrid"===a){const e=u?t?R:i:t?We.length:1,n=u?r?R:i:r?We.length:1;return[d(e),d(n)]}return[d(i),d(c)]}),[W,De,$e,tt.join(),We.length,a,_e.join(),R]),nt=e.useMemo((()=>{const e=rt[0]?rt[0]*De-De:0,t="x"===a?rt[1]:rt[0];return tt[0]?(tt[0]+De)*t-De:Pe.type?be.current.width+e:ye.current.width}),[a,tt[0],rt.join(),De,ye.current.width,be.current.width,Pe.type]),ot=e.useMemo((()=>{const e=1>rt[1]?1:rt[0]*$e-$e;return tt[1]?"x"===a?(tt[1]+$e)*rt[0]-$e:(tt[1]+$e)*rt[1]-$e:Pe.type?be.current.height+e:ye.current.height}),[a,tt[1],rt.join(),$e,ye.current.height,be.current.height,Pe.type]),lt=e.useMemo((()=>ot+Ye),[ot,Ye]),st=e.useMemo((()=>nt+Xe),[nt,Xe]),it="x"===a?st:lt,ct="x"===a?(null===(K=re.current)||void 0===K?void 0:K.scrollLeft)||0:(null===(V=re.current)||void 0===V?void 0:V.scrollTop)||0,at=ct>1&&!0,ut=it>Math.round(ct+Ue);let dt=!1,mt=!1;"hybrid"===a&&(dt=((null===(_=re.current)||void 0===_?void 0:_.scrollLeft)||0)>1&&!0,mt=Math.round(((null===(U=re.current)||void 0===U?void 0:U.scrollLeft)||0)+_e[0])<st);const ft=e.useMemo((()=>null!=X?X:30),[X]),pt=e.useCallback((({withLimit:e=!0,xSize:t})=>H.progressElement&&it?t?A(e?Qe[0]:_e[0],e?st-Ge[0]:st,ft):A(e?Ze:Ue,e?it-Je:it,ft):0),[ke,it,Ze,Je,Ge[0],Ue,_e[0],Qe[0],st,ft]),ht=e.useMemo((()=>Ue?it-Ue:it),[it,Ue]),gt=e.useMemo((()=>_e[0]?st-_e[0]:st),[st,_e[0]]),yt=e.useCallback((()=>{if(!Pe.type||1>=rt[0])return[];const e=Array.from({length:We.length},((e,t)=>t)),t=Array.from({length:rt[0]},(()=>[])),r="x"===a&&"column"===W||"x"!==a&&"row"===W;return e.forEach((e=>{const n=r?e%rt[0]:Math.floor(e/rt[1]);t[n]&&t[n].push(e)})),t}),[We.length,rt.join(),Pe.type,W,a]),bt=e.useMemo((()=>{if(!Pe.type)return[{elementTop:0,elementBottom:0,left:0,right:0}];let e=[],t=0;if(N){const r=Array.from({length:We.length},((e,t)=>t)),n=Math.abs(Math.floor(We.length/rt[0])*rt[0]-We.length);e=n?r.slice(-n):[],"center"===N?t=(tt[0]+De)*(rt[0]-n)/2:"end"===N&&(t=(tt[0]+De)*(rt[0]-n))}return We.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,yt()),l=e.length>0&&e.includes(n)?t:0,s=function(e){const t="x"===a?l:0;return e>0?t+(tt[1]+$e)*e:t}(rt[0]>1||["hybrid","x"].includes(a)?o[1]:n),i=tt[1]?s+tt[1]:s,c=function(e){const t="x"===a?0:l;return e>0?t+(tt[0]+De)*e:t}(1===rt[0]&&"x"===a?n:o[0]);return{elementTop:s,elementBottom:i,left:c,right:c+tt[0]}}))}),[a,rt[0],tt.join(),$e,De,Pe.type,W,N,yt,We.join()]),vt=e.useMemo((()=>(null==_e?void 0:_e.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=E(o)),t[1]>n&&(s.alignItems=E(l)),s}(C,_e,st,lt):{}),[C,_e.join(),lt,st]),xt=e.useMemo((()=>[b(st,_e[0]),b(lt,_e[1])]),[st,lt,_e.join()]),Et=e.useMemo((()=>"x"===a?xt[0]:xt[1]),[a,xt[0],xt[1]]),wt=e.useCallback(w(ge,Z),[]),jt=e.useCallback(w(ye,Z,Xe,Ye),[Xe,Ye]),St=e.useCallback(w(be,Z),[]),Rt=e.useCallback(((e,t,r)=>{const n=re.current;return n&&null!==e?function(e,t,r,n,o){return d(this,void 0,void 0,(function*(){if(!t||null==n)return null;const l="y"===e?"scrollTop":"scrollLeft",s=t[l];return s!==n?null===r?(yield function(e){return d(this,void 0,void 0,(function*(){for(;e.scrollHeight<=e.clientHeight&&e.scrollWidth<=e.clientWidth;)yield new Promise((e=>requestAnimationFrame(e)))}))}(t),void(t[l]=n)):void g((()=>{const e=performance.now(),i=()=>{const c=performance.now(),a=r?Math.min((c-e)/r,1):1;t[l]=s+(n-s)*a,1>a&&(o.current=requestAnimationFrame(i))};i()}),r,"smoothScrollBlock","exclusive"):void 0}))}(t,n,se.current?null:r,e,pe):null}),[se.current]),Mt=e.useCallback(((e,t)=>{if(le.current){if(le.current!==We[0])return void(le.current=We[0])}else le.current=We[0];Rt(t,e,Le.duration)}),[We[0],Le.duration,Rt]),kt=e.useMemo((()=>{const e=Object.assign(Object.assign(Object.assign(Object.assign({margin:z?`${Fe}px ${He}px ${Ie}px ${Be}px`:"",height:et[1]&&"none"!==et[1]?ot+"px":"fit-content",width:et[0]&&"none"!==et[0]?nt+"px":"fit-content"},H.content&&{cursor:"grab"}),M&&!Pe.type&&{gap:`${$e}px ${De}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,a,_e,Xe,Ye)),C&&{flexShrink:0});if(Pe.type)return Object.assign(Object.assign({},e),{position:"relative"});const t=et[1]?"wrap":void 0,r=1===rt[0]?"y"===a?"column":"row":W;return Object.assign(Object.assign({},e),{display:"flex",flexDirection:r,flexWrap:t,justifyContent:E(N)})}),[z,Re,Se,[Fe,He,Ie,Be,Xe,Ye,$e,De].join(),_e.join(),Me,et[1],ot,nt,H.content,Me,Pe.type,a,rt[0],W,N]),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"),g((()=>n.classList.remove("leave")),200)):(n.style.opacity="1",n.classList.add("hover"))}))})(te.current,0,e);"mouseleave"===e.type?!["thumb","slider","wrapp"].includes(ie.current)&&t():t()}),[B]),At=e.useCallback(((e,t="mousedown",r)=>{var n;const o=e||("scroll"===i?"thumb":"slider");if("wrapp"===e&&!H.content||["thumb","slider"].includes(o)&&!H.progressElement)return;x(i,ee.current,oe);let l=null;r&&(l=null===(n=r.closest(".ms-bar"))||void 0===n?void 0:n.getAttribute("data-direction")),k({eventType:t,scrollElementRef:re.current,objectsWrapperRef:ne.current,scrollBar:r||null,clickedObject:ie,scrollContentRef:te.current,scrollStateRef:ae.current,type:i,scrollBarOnHover:B,mouseOnRefHandle:Ot,triggerUpdate:Z,direction:a,smoothScroll:Rt,sizeLocal:[_e[0],_e[1]],clicked:o,numForSliderRef:de,prevCoordsRef:me,thumbSize:pt("x"===l?{xSize:!0}:{}),axisFromAtr:l,duration:Le.duration,scrollBarEdge:Ge,rafID:pe})}),[a,i,H.content,H.progressElement,_e.join(),pt({}),pt({xSize:!0}),Le.duration,Rt,Ot,B,Ge.join()]),Lt=e.useCallback((e=>{At(null,e.type,e.target)}),[At]),zt=e.useCallback((e=>{re.current&&(({arrowType:e,scrollElement:t,wrapSize:r,scrollSize:n,smoothScroll:o,duration:l,loop:s})=>{const i=r[0],c=r[1],a=["top","bottom"].includes(e)?c:i,u=t.scrollTop,d=t.scrollLeft,m=t=>{o(t,["top","bottom"].includes(e)?"y":"x",l)};switch(e){case"top":u>0?m(u-n[1]):s&&m(a);break;case"left":d>0?m(d-n[0]):s&&m(a);break;case"right":d+n[0]<i?m(d+n[0]):s&&m(0);break;case"bottom":u+n[1]<c?m(u+n[1]):s&&m(0)}})({arrowType:e,scrollElement:re.current,wrapSize:[st,lt],scrollSize:_e,smoothScroll:Rt,duration:Le.duration,loop:Ce.loop})}),[_e.join(),st,lt,Le.duration,Rt,Ce.loop]),Tt=e.useCallback((()=>{if(!_e[0]||!_e[1])return;x(i,ee.current,oe);const e=re.current;te.current&&e&&0!==oe.current.length&&g((()=>((e,t,r,n)=>{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,_e,a)),33)}),[_e.join(),a,re,te,i]),Ct=e.useCallback((()=>{ee.current&&((e,t,r,n)=>{var o,l;const{allIds:s,emptyKeysRaw:i}=(()=>{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}})(),c=new Set(null===(o=t.current)||void 0===o?void 0:o.loaded);s.forEach((e=>c.add(e)));let a=null;if(null===(l=t.current)||void 0===l?void 0:l.empty){const e=new Set(t.current.empty);i.forEach((t=>e.add(t))),a=Array.from(e)}t.current={loaded:"lazy"===n?Array.from(c):s.map((e=>e)),empty:a},r()})(ee.current,ce,Z,Pe.type)}),[xe]),Nt=e.useCallback((e=>{(null==D?void 0:D.clickTrigger)&&((e,t,r)=>{const{selector:n,delay:o=0}="string"==typeof t?{selector:t}:t,l=e.target;if(!l.closest(n))return;const s=l.closest(`[${O}]`);s&&s.classList.add("remove"),g((()=>{s&&s.classList.remove("remove"),r()}),o)})(e,D.clickTrigger,Ct)}),[je,Ct]),Wt=e.useCallback((()=>{g((()=>{const e=ee.current,t=re.current;e&&t&&(null==f||f(t.scrollLeft,t.scrollTop),ue.current=!0,null==p||p(!0),g((()=>{ue.current=!1,null==p||p(!1),Ct()}),200),"scroll"!==i&&Tt(),requestAnimationFrame(Z))}),6)}),[f,p,i,Tt,Ct]),Ft=L(ct,ht,Ze,pt({})),Ht=L((null===(G=re.current)||void 0===G?void 0:G.scrollLeft)||0,gt,Qe[0],pt({xSize:!0})),It=e.useCallback((e=>{const t="object"==typeof H.wheel&&"string"==typeof H.wheel.changeDirectionKey?H.wheel.changeDirectionKey:"KeyX";e.code!==t||"hybrid"!==a||fe.current||(e.stopPropagation(),fe.current=!0,Z())}),[a,JSON.stringify(H.wheel)]),Bt=e.useCallback((e=>{fe.current&&(e.stopPropagation(),fe.current=!1,Z())}),[]);e.useEffect((()=>{(D||Pe.type)&&(D||null===ce.current.empty||(ce.current.empty=null),Ct())}),[je,Pe.type,Ct]),e.useEffect((()=>{if(matchMedia("(pointer: coarse)").matches)return;const e=re.current;if(!e)return;const t="hybrid"===a&&"object"==typeof H.wheel&&H.wheel.changeDirection?"x":a,r="hybrid"===a&&ot+Ye<=_e[1]||fe.current?["hybrid","y"].includes(t)?"x":"y":t,n=e=>{e.preventDefault(),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=v(t.targetScrollX+e.deltaY,0,n.scrollWidth-n.clientWidth+2):t.targetScrollY=v(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,r)};return H.wheel&&e.addEventListener("wheel",n,{passive:!1}),()=>{e.removeEventListener("wheel",n)}}),[a,ke,ot,_e[1],Ye,fe.current]),e.useEffect((()=>{Le.value&&("hybrid"===a?["x","y"]:[a]).forEach((e=>{const t="x"===e?0:1;"end"===Le.value[t]&&Mt(e,"x"===e?gt:ht)}))}),[a,Le.value.join(),ve,ht,gt,st,lt]),e.useEffect((()=>{Le.value&&("hybrid"===a?["x","y"]:[a]).forEach((e=>{const t="x"===e?0:1,r=Le.value[t];"number"==typeof r&&Mt(e,r)}))}),[ve,Le.updater,a,Mt,Le.value.join()]),e.useEffect((()=>{const e=ae.current.animationFrameId;return(Pe.type||p)&&p&&(p(!1),Z()),requestAnimationFrame((()=>se.current=!1)),()=>{e&&cancelAnimationFrame(e),y()}}),[]),e.useEffect((()=>{const e=re.current;if(!e)return;const t=window.matchMedia("(pointer: coarse)").matches?"touchstart":"mousedown";if("touchstart"===t&&"slider"!==i)return;const r=t=>{"touchstart"===t.type?e.style.touchAction="none":e.style.touchAction&&e.style.removeProperty("touch-action"),t.preventDefault(),At("wrapp",t.type)};return e.addEventListener(t,r,{passive:!1}),()=>{e.removeEventListener(t,r),e.style.removeProperty("touch-action")}}),[i]),e.useEffect((()=>{"scroll"!==i&&Tt()}),[_e.join()]);const Yt=e.useCallback(((t,r,n,o)=>{const l=Object.assign({width:tt[0]?tt[0]+"px":void 0,height:tt[1]?tt[1]+"px":void 0},Pe.type&&Object.assign({position:"absolute",top:r+"px",left:n+"px"},!tt[0]&&1===rt[0]&&{transform:"translateX(-50%)"})),s=P?e.createElement(e.Suspense,{fallback:q},o):o;return e.createElement("div",Object.assign({key:t},Pe.type||D?{[O]:""+t}:{},{className:"ms-object-box",style:l,onClick:Nt}),s)}),[P,!!q,tt.join(),xe,je,rt[0],Nt,Pe.type]),Xt=e.useMemo((()=>[{positionType:"x"===a?"left":"top",visibility:at},{positionType:"x"===a?"right":"bottom",visibility:ut},..."hybrid"===a?[{positionType:"left",visibility:dt},{positionType:"right",visibility:mt}]:[]]),[at,ut,a,dt,mt]),$t=e.useMemo((()=>({width:_e[2]+"px",height:_e[3]+"px"})),[_e]),Dt=e.useMemo((()=>[{shouldRender:pt({withLimit:!1})<Ue,direction:a,thumbSize:pt({}),thumbSpace:Ft,objLengthPerSize:Et,progressReverseIndex:0},{shouldRender:"hybrid"===a&&pt({withLimit:!1,xSize:!0})<Qe[0],direction:"x",thumbSize:pt({xSize:!0}),thumbSpace:Ht,objLengthPerSize:xt[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e))),[pt,Ze,a,Qe[0],Ft,Ht,Et,xt]),Pt=e.useMemo((()=>{const e={position:"relative",width:_e[0]+"px",height:_e[1]+"px"};return H.arrows&&Ce.contentReduce&&Ce.size&&("x"===a?e.left=Ce.size+"px":"y"===a?e.top=Ce.size+"px":(e.top=Ce.size+"px",e.left=Ce.size+"px")),e}),[_e,ke,Ce,a]),qt=e.useMemo((()=>{var e;return null!==(e={x:st>_e[0]?"scroll hidden":"hidden",y:lt>_e[1]?"hidden scroll":"hidden",hybrid:`${st>_e[0]?"scroll":"hidden"} ${lt>_e[1]?"scroll":"hidden"}`,hide:"hidden"}[H.wheel||H.content?a:"hide"])&&void 0!==e?e:"hidden"}),[st,lt,_e,ke,a]),Kt=e.useMemo((()=>F?Xt.map((({positionType:t,visibility:r})=>e.createElement(c,{key:"edge-"+t,edgeGradient:Te,visibility:r,edgeType:t}))):null),[F,Xt,Te]),Vt=e.useMemo((()=>H.arrows?Xt.map((({positionType:t,visibility:r})=>e.createElement(u,{key:"arrow-"+t,activity:r,arrows:Ce,arrowType:t,handleArrow:zt,size:"hybrid"===a?_e[0]+2*Ce.size:_e[0]}))):null),[H.arrows,Xt,Ce,zt,_e[0],a,ue.current]),_t=e.useMemo((()=>H.progressElement&&!0!==H.progressElement?Dt.map((t=>{const r="boolean"==typeof I?I:I[t.progressReverseIndex];return e.createElement(s,{key:t.direction+"",type:i,direction:t.direction,progressReverse:r,size:Qe,progressTrigger:H,scrollBarOnHover:B,scrollBarEvent:"sliderMenu"===i?Rt:Lt,thumbSize:t.thumbSize,thumbSpace:t.thumbSpace,objLengthPerSize:t.objLengthPerSize,sliderCheckLocal:Tt,duration:Le.duration})})):null),[H.progressElement,Dt,i,I,Qe,H,B,Rt,Lt,Tt,Le.duration]),Ut=e.createElement("div",{className:"ms-objects-wrapper",ref:ne,style:kt},We.map(((t,r)=>{var o,s,i;const c=e.Children.toArray(l).find((r=>e.isValidElement(r)&&r.key===t)),u=Pe.stopLoadOnScroll&&ue.current&&!ce.current.loaded.includes(""+t)?q:(null===(o=ce.current.empty)||void 0===o?void 0:o.includes(t))?"object"==typeof(null==D?void 0:D.mode)?D.mode.fallback:q:c,d="number"==typeof et[0]&&"number"==typeof et[1]||"firstChild"!==et[0]&&"firstChild"!==et[1]||0!==r?u:e.createElement(n,{onResize:St},u);if(!Pe.type)return Yt(t,0,0,d);{const{elementTop:e,elementBottom:n,left:o,right:l}=bt[r],c="x"===a?Ke:Ve,u=Ue+c>("x"===a?o:e)-ct&&("x"===a?l:n)-ct>0-c,m="hybrid"!==a||_e[0]+Ke>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-Ke;if(u&&m)return Yt(t,e,o,d)}}))),Gt=e.createElement("div",{"morph-scroll":`〈♦${J}〉`,className:r,ref:ee,style:$t},e.createElement("div",{className:"ms-content",ref:te,onMouseEnter:Ot,onMouseLeave:Ot,onTouchStart:Ot,onTouchEnd:Ot,style:Pt},e.createElement("div",{className:"ms-element",ref:re,onScroll:Wt,onKeyDown:It,onKeyUp:Bt,style:Object.assign(Object.assign(Object.assign({width:"100%",height:"100%",outline:"none"},vt),{overflow:qt}),"scroll"!==i||"boolean"!=typeof H.progressElement||!1===H.progressElement?{scrollbarWidth:"none"}:{})},tt[0]&&tt[1]?Ut:e.createElement(n,{onResize:jt,style:vt},Ut)),Kt,_t),Vt);return"auto"===h?e.createElement(n,{measure:"outer",onResize:wt},Gt):Gt};z.displayName="MorphScroll";const T={MorphScroll:z,ResizeTracker:n,IntersectionTracker:r};exports.IntersectionTracker=r,exports.MorphScroll=z,exports.ResizeTracker=n,exports.default=T;
|
package/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
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="wrap-id";function S(e,t,r){return t?h(Math.round(e/t*e),r,e):0}function k(e,t,r,n){return t?h(e/t*(r-n),0,r-n):0}const R=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")))},M=({className:n,children:s,type:c="scroll",direction:u="y",scrollPosition:x,onScrollValue:E,isScrolling:M,size:A,objectsSize:z,crossCount:C,gap:L,wrapperMargin:T,wrapperMinSize:F,wrapperAlign:N,elementsAlign:I,elementsDirection:q="row",edgeGradient:B,progressTrigger:$={wheel:!0},progressReverse:W=!1,scrollBarOnHover:X=!1,scrollBarEdge:Y,thumbMinSize:H,render:P,emptyElements:D,suspending:K=!1,fallback:V})=>{var U,_,G,J,Q;const Z=function(){const e=t(null);return null===e.current&&(e.current=""+l++),e.current}();if(!A)throw Error(`Prop "size" is not provided\nMorphScroll〈♦${Z}〉`);Object.keys($).length;const[ee,te]=e.useState(0),re=()=>{te((e=>"number"==typeof e&&1e3>e?e+1:0))},ne=e.useRef(null),oe=e.useRef(null),le=e.useRef(null),se=e.useRef(null),ie=e.useRef([]),ce=e.useRef(null),ae=e.useRef("none"),ue=e.useRef({loaded:[],empty:[]}),de=e.useRef({targetScrollY:0,targetScrollX:0,animating:!1,animationFrameId:0}),me=e.useRef(!1),he=e.useRef(0),pe=e.useRef(null),fe=e.useRef(!1);function ge(){return e.useRef({width:0,height:0})}const ye=ge(),be=ge(),ve=ge(),[xe,Ee,je,we,Oe,Se,ke,Re,Me,Ae,ze]=function(...e){return e.map(y)}(null==x?void 0:x.value,P,A,z,D,F,N,L,$,ue.current.empty,Y),Ce=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}}),[xe,null==x?void 0:x.duration]),Le={color:null,size:40},Te=e.useMemo((()=>"object"==typeof B?Object.assign(Object.assign({},Le),B):Le),[B]),Fe=e.useMemo((()=>Object.assign(Object.assign({},Le),"object"==typeof $.arrows?$.arrows:{})),[Me]),Ne=e.useCallback((t=>{if(null==t)return[];if(e.isValidElement(t)){const r=t;return r.type===e.Fragment?e.Children.toArray(r.props.children).flatMap(Ne):[r]}return[t]}),[]),Ie=e.useMemo((()=>e.Children.toArray(s).flatMap(Ne).map((t=>e.isValidElement(t)&&t.key?t.key+"":null)).filter((e=>null!==e)).filter((e=>{var t;return"clear"!==(null==D?void 0:D.mode)||!(null===(t=ue.current.empty)||void 0===t?void 0:t.includes(e))}))),[s,Ne,Oe,Ae]),[qe,Be,$e,We]=T?r(T):[0,0,0,0],Xe=qe+$e,Ye=We+Be,[He,Pe]=e.useMemo((()=>{var e,t;return"number"==typeof L?[L,L]:Array.isArray(L)?[null!==(e=L[1])&&void 0!==e?e:0,null!==(t=L[0])&&void 0!==t?t:0]:[0,0]}),[L]),De=e.useMemo((()=>r((null==P?void 0:P.rootMargin)||0,"x"===u)),[Ee,u]),[Ke,Ve]=De?[De[2],De[0]]:[0,0],Ue=e.useMemo((()=>{const[e,t]=Array.isArray(A)?A:"number"==typeof A?[A,A]:[ye.current.width,ye.current.height];if(!$.arrows||!Fe.size)return[e,t,e,t];const r=2*Fe.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]}),[je,Me,u,Fe.size,ye.current.height,ye.current.width]),_e="x"===u?Ue[0]:Ue[1],Ge=e.useMemo((()=>{if(!Y)return[0,0];if("number"==typeof Y){const e=2*Y;return[e,e]}if(Array.isArray(Y)){const[e=0,t]=Y;return[2*e,2*(null!=t?t:e)]}return[0,0]}),[ze]),Je="x"===u?Ge[0]:Ge[1],Qe=e.useMemo((()=>[Ue[0]-Ge[0],Ue[1]-Ge[1]]),[Ge.join(),Ue[0],Ue[1]]),Ze="x"===u?Qe[0]:Qe[1],et=e.useMemo((()=>z?Array.isArray(z)?z:r(z,!0,2):[null,null]),[we]),tt=e.useMemo((()=>{const e=(e,t)=>"number"==typeof e?e:"firstChild"===e?t:0;return[e(et[0]&&"none"!==et[0]&&"size"!==et[0]?et[0]:"y"===u&&"none"!==et[0]||"size"===et[0]?Ue[0]:0,ve.current.width),e(et[1]&&"none"!==et[1]&&"size"!==et[1]?et[1]:"x"===u&&"none"!==et[1]||"size"===et[1]?Ue[1]:0,ve.current.height)]}),[et.join(),u,ve.current.width,ve.current.height,Ue.join()]),rt=e.useMemo((()=>{const e="x"===u,t="row"===q,r="column"===q,n=e?Ue[1]:Ue[0],o=e?tt[1]+Pe:tt[0]+He,l="hybrid"===u?o*(Ie.length+1)-o:n,s=Math.floor(l/o)||1,i=C&&s>=C?"hybrid"===u?Math.ceil(s/C):C:s,c=i>1&&i<Ie.length?Math.ceil(Ie.length/i):i>Ie.length?1:Ie.length,a=C&&C<Ie.length,d=e=>Number.isFinite(e)&&e>0?e:1;if("hybrid"===u){const e=a?t?C:i:t?Ie.length:1,n=a?r?C:i:r?Ie.length:1;return[d(e),d(n)]}return[d(i),d(c)]}),[q,Pe,He,tt.join(),Ie.length,u,Ue.join(),C]),nt=e.useMemo((()=>{const e=rt[0]?rt[0]*Pe-Pe:0,t="x"===u?rt[1]:rt[0];return tt[0]?(tt[0]+Pe)*t-Pe:(null==P?void 0:P.type)?ve.current.width+e:be.current.width}),[u,tt[0],rt.join(),Pe,be.current.width,ve.current.width,null==P?void 0:P.type]),ot=e.useMemo((()=>{const e=1>rt[1]?1:rt[0]*He-He;return tt[1]?"x"===u?(tt[1]+He)*rt[0]-He:(tt[1]+He)*rt[1]-He:(null==P?void 0:P.type)?ve.current.height+e:be.current.height}),[u,tt[1],rt.join(),He,be.current.height,ve.current.height,null==P?void 0:P.type]),lt=e.useMemo((()=>ot+Xe),[ot,Xe]),st=e.useMemo((()=>nt+Ye),[nt,Ye]),it="x"===u?st:lt,ct="x"===u?(null===(U=le.current)||void 0===U?void 0:U.scrollLeft)||0:(null===(_=le.current)||void 0===_?void 0:_.scrollTop)||0,at=ct>1&&!0,ut=it>Math.round(ct+_e);let dt=!1,mt=!1;"hybrid"===u&&(dt=((null===(G=le.current)||void 0===G?void 0:G.scrollLeft)||0)>1&&!0,mt=Math.round(((null===(J=le.current)||void 0===J?void 0:J.scrollLeft)||0)+Ue[0])<st);const ht=e.useMemo((()=>null!=H?H:30),[H]),pt=e.useCallback((({withLimit:e=!0,xSize:t})=>$.progressElement&&it?t?S(e?Qe[0]:Ue[0],e?st-Ge[0]:st,ht):S(e?Ze:_e,e?it-Je:it,ht):0),[Me,it,Ze,Je,Ge[0],_e,Ue[0],Qe[0],st,ht]),ft=e.useMemo((()=>_e?it-_e:it),[it,_e]),gt=e.useMemo((()=>Ue[0]?st-Ue[0]:st),[st,Ue[0]]),yt=e.useCallback((()=>{if(!(null==P?void 0:P.type)||1>=rt[0])return[];const e=Array.from({length:Ie.length},((e,t)=>t)),t=Array.from({length:rt[0]},(()=>[])),r="x"===u&&"column"===q||"x"!==u&&"row"===q;return e.forEach((e=>{const n=r?e%rt[0]:Math.floor(e/rt[1]);t[n]&&t[n].push(e)})),t}),[Ie.length,rt.join(),null==P?void 0:P.type,q,u]),bt=e.useMemo((()=>{if(!(null==P?void 0:P.type))return[{elementTop:0,elementBottom:0,left:0,right:0}];let e=[],t=0;if(I){const r=Array.from({length:Ie.length},((e,t)=>t)),n=Math.abs(Math.floor(Ie.length/rt[0])*rt[0]-Ie.length);e=n?r.slice(-n):[],"center"===I?t=(tt[0]+Pe)*(rt[0]-n)/2:"end"===I&&(t=(tt[0]+Pe)*(rt[0]-n))}return Ie.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,yt()),l=e.length>0&&e.includes(n)?t:0,s=function(e){const t="x"===u?l:0;return e>0?t+(tt[1]+He)*e:t}(rt[0]>1||["hybrid","x"].includes(u)?o[1]:n),i=tt[1]?s+tt[1]:s,c=function(e){const t="x"===u?0:l;return e>0?t+(tt[0]+Pe)*e:t}(1===rt[0]&&"x"===u?n:o[0]);return{elementTop:s,elementBottom:i,left:c,right:c+tt[0]}}))}),[u,rt[0],tt.join(),He,Pe,null==P?void 0:P.type,q,I,yt,Ie.join()]),vt=e.useMemo((()=>(null==Ue?void 0:Ue.length)&&N?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}(N,Ue,st,lt):{}),[N,Ue.join(),lt,st]),xt=e.useMemo((()=>[m(st,Ue[0]),m(lt,Ue[1])]),[st,lt,Ue.join()]),Et=e.useMemo((()=>"x"===u?xt[0]:xt[1]),[u,xt[0],xt[1]]),jt=e.useCallback(g(ye,re),[ye.current.height,ye.current.width]),wt=e.useCallback(g(be,re,Ye,Xe),[be.current.height,be.current.width,Ye,Xe]),Ot=e.useCallback(g(ve,re),[ve.current.height,ve.current.width]),St=e.useCallback(((e,t,r,n)=>{const o=le.current;return o?function(e,t,r,n,o){let l;if(!t&&!n)return null;const s=performance.now(),i=t.scrollTop,c=t.scrollLeft,a=u=>{const d=Math.min((u-s)/r,1);"y"===e?t.scrollTop=i+(n-i)*d:"x"===e&&(t.scrollLeft=c+(n-c)*d),1>d?l=requestAnimationFrame(a):null==o||o()};return l=requestAnimationFrame(a),()=>cancelAnimationFrame(l)}(t,o,r,e,n):null}),[]),kt=e.useCallback(((e,t,r)=>{if(ce.current){if(ce.current!==Ie[0])return void(ce.current=Ie[0])}else ce.current=Ie[0];const n=St(t,e,Ce.duration);n&&r.push(n)}),[Ie[0],Ce.duration,St]),Rt=e.useMemo((()=>{const e=Object.assign(Object.assign(Object.assign(Object.assign({margin:T?`${qe}px ${Be}px ${$e}px ${We}px`:"",height:et[1]&&"none"!==et[1]?ot+"px":"fit-content",width:et[0]&&"none"!==et[0]?nt+"px":"fit-content"},$.content&&{cursor:"grab"}),L&&!(null==P?void 0:P.type)&&{gap:`${He}px ${Pe}px`}),F&&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"}}(F,u,Ue,Ye,Xe)),N&&{flexShrink:0});if(null==P?void 0:P.type)return Object.assign(Object.assign({},e),{position:"relative"});const t=et[1]?"wrap":void 0,r=1===rt[0]?"y"===u?"column":"row":q;return Object.assign(Object.assign({},e),{display:"flex",flexDirection:r,flexWrap:t,justifyContent:f(I)})}),[T,ke,Se,[qe,Be,$e,We,Ye,Xe,He,Pe].join(),Ue.join(),Re,et[1],ot,nt,$.content,Re,null==P?void 0:P.type,u,rt[0],q,I]),Mt=e.useCallback((e=>{if(!X)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"))}))})(oe.current,0,e);"mouseleave"===e.type?!["thumb","slider","wrapp"].includes(ae.current)&&t():t()}),[X]),At=e.useCallback(((e,t="mousedown",r)=>{const n=e||("scroll"===c?"thumb":"slider");if("wrapp"===e&&!$.content||["thumb","slider"].includes(n)&&!$.progressElement)return;p(c,ne.current,ie);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:le.current,objectsWrapperRef:se.current,scrollBar:r||null,clickedObject:ae,scrollContentRef:oe.current,scrollStateRef:de.current,type:c,scrollBarOnHover:X,mouseOnEl:R,mouseOnRefHandle:Mt,triggerUpdate:re,direction:u,smoothScroll:St,sizeLocal:[Ue[0],Ue[1]],clicked:n,numForSliderRef:he,isScrollingRef:me,prevCoordsRef:pe,thumbSize:pt("x"===o?{xSize:!0}:{}),axisFromAtr:o,duration:Ce.duration,scrollBarEdge:Ge})}),[u,c,$.content,$.progressElement,Ue.join(),pt({}),pt({xSize:!0}),Ce.duration,St,Mt,X,Ge.join()]),zt=e.useCallback((e=>{At(null,e.type,e.target)}),[At]),Ct=e.useCallback((()=>{At("wrapp")}),[At]),Lt=e.useCallback((e=>{le.current&&(({arrowType:e,scrollElement:t,wrapSize:r,scrollSize:n,smoothScroll:o,duration:l})=>{const s=r[0],i=r[1],c=t.scrollTop,a=t.scrollLeft,u=["top","bottom"].includes(e)?i:s,d=(e,t)=>o(h(e,0,u),t,l);"top"===e&&c>0?d(c-n[1],"y"):"left"===e&&a>0&&d(a-n[0],"x"),"bottom"===e&&c+n[1]!==i?d(c+n[1],"y"):"right"===e&&a+n[0]!==s&&d(a+n[0],"x")})({arrowType:e,scrollElement:le.current,wrapSize:[st,lt],scrollSize:Ue,smoothScroll:St,duration:Ce.duration})}),[Ue.join(),st,lt,Ce.duration,St]),Tt=e.useCallback((()=>{p(c,ne.current,ie);const e=le.current;oe.current&&e&&0!==ie.current.length&&((e,t,r,n)=>{!function(){var o,l,s,i;const c=null!==(l=null===(o=t[0])||void 0===o?void 0:o.querySelectorAll(".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,ie.current,Ue,u)}),[Ue.join(),u,le,oe,c]),Ft=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}})(),s=new Set(t.current.loaded);o.forEach((e=>s.add(e)));let i=null;if(t.current.empty){const e=new Set(t.current.empty);l.forEach((t=>e.add(t))),i=Array.from(e)}t.current={loaded:"lazy"===n?Array.from(s):o.map((e=>e)),empty:i},r()})(ne.current,ue,re,null==P?void 0:P.type)}),[Ee]),Nt=e.useCallback((e=>{(null==D?void 0:D.clickTrigger)&&((e,t,r)=>{const n=e.target;if(!n.closest(t.selector))return;const o=n.closest(`[${O}]`);o&&o.classList.add("remove"),w((()=>{o&&o.classList.remove("remove"),r()}),t.delay||0)})(e,D.clickTrigger,Ft)}),[Oe,Ft]),It=e.useCallback((()=>{w((()=>{const e=le.current;e&&(null==E||E(e.scrollLeft,e.scrollTop),me.current=!0,null==M||M(!0),w((()=>{me.current=!1,null==M||M(!1),Ft()}),200),"slider"===c&&w((()=>Tt()),33),re())}),6)}),[E,M,c,Tt,Ft]),qt=k(ct,ft,Ze,pt({})),Bt=k((null===(Q=le.current)||void 0===Q?void 0:Q.scrollLeft)||0,gt,Qe[0],pt({xSize:!0})),$t=e.useCallback((e=>{const t="object"==typeof $.wheel&&"string"==typeof $.wheel.changeDirectionKey?$.wheel.changeDirectionKey:"KeyX";e.code!==t||"hybrid"!==u||fe.current||(e.stopPropagation(),fe.current=!0,re())}),[u,JSON.stringify($.wheel)]),Wt=e.useCallback((e=>{fe.current&&(e.stopPropagation(),fe.current=!1,re())}),[]);e.useEffect((()=>{(D||(null==P?void 0:P.type))&&(D||null===ue.current.empty||(ue.current.empty=null),Ft())}),[Oe,null==P?void 0:P.type,Ft]),e.useEffect((()=>{const e=de.current.animationFrameId;return((null==P?void 0:P.type)||M)&&M&&(M(!1),re()),Tt(),()=>{e&&cancelAnimationFrame(e),["timeout"].forEach((e=>j[e].clearAll()))}}),[]),e.useEffect((()=>{const e=le.current;if(!e)return;const t=e=>e.preventDefault(),r="hybrid"===u&&"object"==typeof $.wheel&&$.wheel.changeDirection?"x":u,n="hybrid"===u&&ot+Xe<=Ue[1]||fe.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=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,de.current,n)}:t;return e.addEventListener("wheel",o,{passive:!1}),()=>{e.removeEventListener("wheel",o)}}),[u,Me,ot,Ue[1],Xe,fe.current]),e.useEffect((()=>{if(!Ce.value)return;const e=[];return("hybrid"===u?["x","y"]:[u]).forEach((t=>{const r="x"===t?0:1;"end"===Ce.value[r]&&kt(t,"x"===t?gt:ft,e)})),()=>{e.forEach((e=>e()))}}),[u,Ce.value.join(),xe,ft,gt,st,lt]),e.useEffect((()=>{if(!Ce.value)return;const e=[];return("hybrid"===u?["x","y"]:[u]).forEach((t=>{const r="x"===t?0:1;"number"==typeof Ce.value[r]&&kt(t,Ce.value[r],e)})),()=>{e.forEach((e=>e()))}}),[xe,null==x?void 0:x.updater,u,kt,Ce.value.join()]);const Xt=e.useCallback(((t,r,n,o)=>{var l;const s=Object.assign({width:tt[0]?tt[0]+"px":void 0,height:tt[1]?tt[1]+"px":void 0},(null==P?void 0:P.type)&&Object.assign({position:"absolute",top:r+"px",left:n+"px"},!tt[0]&&1===rt[0]&&{transform:"translateX(-50%)"})),i=K?e.createElement(e.Suspense,{fallback:V},o):o,c=(null===(l=null==D?void 0:D.clickTrigger)||void 0===l?void 0:l.selector)&&Nt;return e.createElement("div",Object.assign({key:t},P||D?{[O]:""+t}:{},{className:"ms-object-box",style:s,onClick:c}),i)}),[K,!!V,tt.join(),Ee,Oe,rt[0],Nt]),Yt=e.useMemo((()=>[{positionType:"x"===u?"left":"top",visibility:at},{positionType:"x"===u?"right":"bottom",visibility:ut},..."hybrid"===u?[{positionType:"left",visibility:dt},{positionType:"right",visibility:mt}]:[]]),[at,ut,u,dt,mt]),Ht=e.useMemo((()=>({width:Ue[2]+"px",height:Ue[3]+"px"})),[Ue]),Pt=e.useMemo((()=>[{shouldRender:pt({withLimit:!1})<_e,direction:u,thumbSize:pt({}),thumbSpace:qt,objLengthPerSize:Et,progressReverseIndex:0},{shouldRender:"hybrid"===u&&pt({withLimit:!1,xSize:!0})<Qe[0],direction:"x",thumbSize:pt({xSize:!0}),thumbSpace:Bt,objLengthPerSize:xt[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e))),[pt,Ze,u,Qe[0],qt,Bt,Et,xt]),Dt=e.useMemo((()=>{const e={position:"relative",width:Ue[0]+"px",height:Ue[1]+"px"};return $.arrows&&Fe.size&&("x"===u?e.left=Fe.size+"px":"y"===u?e.top=Fe.size+"px":(e.top=Fe.size+"px",e.left=Fe.size+"px")),e}),[Ue,Me,Fe.size,u]),Kt=e.useMemo((()=>{var e;return null!==(e={x:st>Ue[0]?"scroll hidden":"hidden",y:lt>Ue[1]?"hidden scroll":"hidden",hybrid:`${st>Ue[0]?"scroll":"hidden"} ${lt>Ue[1]?"scroll":"hidden"}`,hide:"hidden"}[$.wheel||$.content?u:"hide"])&&void 0!==e?e:"hidden"}),[st,lt,Ue[0],Ue[1],Me,u]),Vt=e.useMemo((()=>B?Yt.map((({positionType:t,visibility:r})=>e.createElement(a,{key:"edge-"+t,edgeGradient:Te,visibility:r,edgeType:t}))):null),[B,Yt,Te]),Ut=e.useMemo((()=>$.arrows?Yt.map((({positionType:t,visibility:r})=>e.createElement(d,{key:"arrow-"+t,activity:r,arrows:Fe,arrowType:t,handleArrow:Lt,size:"hybrid"===u?Ue[0]+2*Fe.size:Ue[0]}))):null),[$.arrows,Yt,Fe,Lt,Ue[0],u]),_t=e.useMemo((()=>$.progressElement&&!0!==$.progressElement?Pt.map((t=>{const r="boolean"==typeof W?W:W[t.progressReverseIndex];return e.createElement(i,{key:t.direction+"",type:c,direction:t.direction,progressReverse:r,size:Qe,progressTrigger:$,scrollBarOnHover:X,scrollBarEvent:"sliderMenu"===c?St:zt,thumbSize:t.thumbSize,thumbSpace:t.thumbSpace,objLengthPerSize:t.objLengthPerSize,sliderCheckLocal:Tt,duration:Ce.duration})})):null),[$.progressElement,Pt,c,W,Qe,$,X,St,zt,Tt,Ce.duration]),Gt=e.createElement("div",{className:"ms-objects-wrapper",ref:se,onMouseDown:Ct,style:Rt},Ie.map(((t,r)=>{var n,l,i;const c=e.Children.toArray(s).find((r=>e.isValidElement(r)&&r.key===t)),a=(null==P?void 0:P.stopLoadOnScroll)&&me.current&&!ue.current.loaded.includes(""+t)?V:(null===(n=ue.current.empty)||void 0===n?void 0:n.includes(t))?"object"==typeof(null==D?void 0:D.mode)?D.mode.fallback:V:c,d="number"==typeof et[0]&&"number"==typeof et[1]||"firstChild"!==et[0]&&"firstChild"!==et[1]||0!==r?a:e.createElement(o,{onResize:Ot},a);if(!(null==P?void 0:P.type))return Xt(t,0,0,d);{const{elementTop:e,elementBottom:n,left:o,right:s}=bt[r],c="x"===u?Ke:Ve,a=_e+c>("x"===u?o:e)-ct&&("x"===u?s:n)-ct>0-c,m="hybrid"!==u||Ue[0]+Ke>o-((null===(l=le.current)||void 0===l?void 0:l.scrollLeft)||0)&&s-((null===(i=le.current)||void 0===i?void 0:i.scrollLeft)||0)>0-Ke;if(a&&m)return Xt(t,e,o,d)}}))),Jt=e.createElement("div",{"morph-scroll":`〈♦${Z}〉`,className:n,ref:ne,style:Ht},e.createElement("div",{className:"ms-content",ref:oe,onMouseEnter:Mt,onMouseLeave:Mt,onTouchStart:Mt,onTouchEnd:Mt,style:Dt},e.createElement("div",{className:"ms-element",ref:le,onScroll:It,onKeyDown:$t,onKeyUp:Wt,style:Object.assign(Object.assign(Object.assign({width:"100%",height:"100%",outline:"none"},vt),{overflow:Kt}),"scroll"!==c||"boolean"!=typeof $.progressElement||!1===$.progressElement?{scrollbarWidth:"none"}:{})},tt[0]&&tt[1]?Gt:e.createElement(o,{onResize:wt,style:vt},Gt)),Vt,_t),Ut);return"auto"===A?e.createElement(o,{measure:"outer",onResize:jt},Jt):Jt};M.displayName="MorphScroll";const A={MorphScroll:M,ResizeTracker:o,IntersectionTracker:n};export{n as IntersectionTracker,M as MorphScroll,o as ResizeTracker,A as default};
|
|
1
|
+
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),f=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:f});return m.current&&e.observe(m.current),()=>{e.disconnect()}}),[p,l,s,f]),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 f=e.useRef(null),p=e.useRef(null);e.useEffect((()=>{if(matchMedia("(pointer: coarse)").matches||!(null==l?void 0:l.wheel))return;const e=f.current;if(!e)return;const t="y"===e.getAttribute("data-direction")?"y":"x";let r=e.previousElementSibling;for(;r&&!r.classList.contains("ms-element");)r=r.previousElementSibling;const n=e=>{e.preventDefault(),null==r||r.scrollBy(Object.assign(Object.assign({},"y"===t?{top:e.deltaY}:{left:e.deltaY}),{behavior:"auto"}))};return e.addEventListener("wheel",n,{passive:!1}),()=>e.removeEventListener("wheel",n)}),[]),e.useEffect((()=>{const e=p.current;if(!e||"sliderMenu"===t)return;const r=window.matchMedia("(pointer: coarse)").matches?"touchstart":"mousedown",n=e=>{e.preventDefault(),e.stopPropagation(),i(e)};return e.addEventListener(r,n,{passive:!1}),()=>{e.removeEventListener(r,n)}}),[i]);const 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",ref:f,"data-direction":["hybrid","y"].includes(r)?"y":"x",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",{className:"ms-thumb",ref: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",{className:"ms-slider",ref: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?"270deg, ":""}${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}:{}),"left"===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,r,n){return new(r||(r=Promise))((function(o,l){function s(e){try{c(n.next(e))}catch(e){l(e)}}function i(e){try{c(n.throw(e))}catch(e){l(e)}}function c(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(s,i)}c((n=n.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;let f=0;const p={tasks:[],timer:null,running:new Set},h=new Map,g={scheduleNext(){if(null!==p.timer&&(clearTimeout(p.timer),p.timer=null),0===p.tasks.length)return;const e=p.tasks[0],t=Math.max(0,e.runAt-performance.now());p.timer=window.setTimeout((()=>{p.timer=null;const e=performance.now(),t=[];for(;p.tasks.length&&p.tasks[0].runAt<=e&&!p.running.has(p.tasks[0].id);)t.push(p.tasks.shift());t.forEach((e=>{p.running.add(e.id);try{e.callback()}finally{p.running.delete(e.id)}})),g.scheduleNext()}),t)},clearAll(){null!==p.timer&&(clearTimeout(p.timer),p.timer=null),p.tasks=[],p.running.clear()}},y=(e,t,r,n)=>{const o=r||"task_"+f++;if(0===t)return e(),o;const l=n||"default",s=performance.now()+t;if("exclusive"===l){if(p.running.has(o)||p.tasks.some((e=>e.id===o)))return o;p.running.add(o);try{e()}finally{const e=window.setTimeout((()=>{p.running.delete(o),h.delete(o)}),t);h.set(o,e)}return o}r&&(p.tasks=p.tasks.filter((e=>e.id!==o)));const i={id:o,runAt:s,callback:()=>{p.running.add(o);try{e()}finally{p.running.delete(o)}}};return function(e,t){let r=0,n=e.length;for(;n>r;){const o=r+n>>1;e[o].runAt<t.runAt?r=o+1:n=o}e.splice(r,0,t)}(p.tasks,i),g.scheduleNext(),o},b=e=>{if(!e)return g.clearAll(),h.forEach((e=>clearTimeout(e))),void h.clear();(Array.isArray(e)?e:[e]).forEach((e=>{p.running.delete(e);const t=h.get(e);void 0!==t&&(clearTimeout(t),h.delete(e)),p.tasks=p.tasks.filter((t=>t.id!==e)),0===p.tasks.length?g.clearAll():g.scheduleNext()}))};function v(e,t){return e>t?Math.floor(e/t):1}function x(e,t=0,r=1/0){return Math.max(t,Math.min(Math.round(e),r))}const E=(e,t,r)=>{if(!t)return;const n=t.querySelectorAll("."+("scroll"===e?"ms-thumb":"ms-slider"));n.length>0&&(r.current=n)},w=e=>e?"start"===e?"flex-start":"center"===e?"center":"flex-end":void 0;function j(e,t,r=0,n=0){return o=>{var l,s,i,c;let a=!1;const u={width:(null!==(l=o.width)&&void 0!==l?l:0)-r,height:(null!==(s=o.height)&&void 0!==s?s:0)-n},d=0===u.width&&0===u.height;d&&!a&&(a=!0),(null===(i=e.current)||void 0===i?void 0:i.width)===u.width&&(null===(c=e.current)||void 0===c?void 0:c.height)===u.height||d&&a||(e.current=u,t())}}function S(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("/")}const R=(e,t)=>{if(e)if("grab"===e.style.cursor){if("mousedown"===t){const e=document.createElement("style");e.id="ms-cursor-lock",e.innerHTML="* {\n cursor: grabbing !important;\n }",document.head.appendChild(e)}e.style.cursor="grabbing",e.classList.add("active")}else if("grabbing"===e.style.cursor){if("mousedown"===t){const e=document.getElementById("ms-cursor-lock");e&&e.remove()}e.style.cursor="grab",e.classList.remove("active")}},M=(e,t,r,n)=>{const o=e;["thumb","slider"].includes(t)?R("slider"===t?null==r?void 0:r.closest(".ms-slider"):r,o):"wrapp"===t&&R(n,o)},k=(e,t,r)=>{var n,o,l,s,i;const c=r.scrollElementRef;if(!c)return;const a={x:"touches"in r.mouseEvent?r.mouseEvent.touches[0].clientX:r.mouseEvent.clientX,y:"touches"in r.mouseEvent?r.mouseEvent.touches[0].clientY:r.mouseEvent.clientY,leftover:null!==(o=null===(n=r.prevCoordsRef.current)||void 0===n?void 0:n.leftover)&&void 0!==o?o:0},u=null!==(l=r.prevCoordsRef.current)&&void 0!==l?l:a,d={x:a.x-u.x,y:a.y-u.y};r.prevCoordsRef.current=a;const m="wrapp"===r.clicked?-d[e]:d[e],f="y"===e?"scrollTop":"scrollLeft";if("thumb"===r.clicked)return void((e,t,r,n,o)=>{if(!t.scrollElementRef||!t.objectsWrapperRef)return;const l=t.scrollElementRef,s="x"===e?0:1;if(!Number.isFinite(o[s]))return;const i=t.objectsWrapperWH[s]+t["x"===e?"fullMarginX":"fullMarginY"],c=(t.scrollElementWH[s]-t.scrollBarEdge[s]-t.thumbSize)*o[s],a=i-t.scrollElementWH[s];if(0>=c||0>=a)return;const u=r*(a/c)+n.leftover,d=Math.trunc(u);if(t.prevCoordsRef.current&&(t.prevCoordsRef.current.leftover=u-d),"x"===e){const e="number"==typeof t.scrollStateRef.targetScrollX?t.scrollStateRef.targetScrollX:l.scrollLeft,r=l.scrollWidth-l.clientWidth;t.scrollStateRef.targetScrollX=x(e+d,0,r)}else{const e="number"==typeof t.scrollStateRef.targetScrollY?t.scrollStateRef.targetScrollY:l.scrollTop,r=l.scrollHeight-l.clientHeight;t.scrollStateRef.targetScrollY=x(e+d,0,r)}l.scrollLeft!==t.scrollStateRef.targetScrollX&&(l.scrollLeft=t.scrollStateRef.targetScrollX),l.scrollTop!==t.scrollStateRef.targetScrollY&&(l.scrollTop=t.scrollStateRef.targetScrollY)})(e,r,m,u,t);"slider"===r.type&&(r.numForSliderRef.current+=m);const p="x"===e?0:1;if("wrapp"===r.clicked){if(!Number.isFinite(t[p]))return;return void(c[f]+=m/t[p])}const h=c[f],g=Math.round((null===(i=null===(s=c.closest(".ms-content"))||void 0===s?void 0:s.querySelector(".ms-slider-element.active"))||void 0===i?void 0:i.getBoundingClientRect()["x"===e?"width":"height"])||1);if(Math.abs(r.numForSliderRef.current)>=g){const t=m>0&&h+r.sizeLocal[p]<r.wrapElWH[p]?h+r.sizeLocal[p]:0>m&&h>0?h-r.sizeLocal[p]:null;r.numForSliderRef.current=0,r.smoothScroll(t,e,10)}};function O(e){e.rafID.current&&(cancelAnimationFrame(e.rafID.current),e.rafID.current=NaN,b("smoothScrollBlock"));const t=e.scrollElementRef;t&&(e.scrollStateRef.targetScrollX=t.scrollLeft,e.scrollStateRef.targetScrollY=t.scrollTop);let r=0,n=0,o=[],l=[],s=[],i=[];if("thumb"===e.clicked){const t=getComputedStyle(e.objectsWrapperRef),s=e=>{const r=e=>parseFloat(e);return"x"===e?r(t.marginLeft)+r(t.marginRight):r(t.marginTop)+r(t.marginBottom)};r=s("x"),n=s("y"),o=[e.scrollElementRef.clientWidth,e.scrollElementRef.clientHeight],l=[e.objectsWrapperRef.clientWidth,e.objectsWrapperRef.clientHeight]}"slider"===e.type&&(s=[e.objectsWrapperRef.clientWidth,e.objectsWrapperRef.clientHeight]),["scroll","slider"].includes(e.type)&&(i=function(e){const t=e.getBoundingClientRect();return[t.width/e.clientWidth,t.height/e.clientHeight]}(e.scrollElementRef));const c=new AbortController,{signal:a}=c;e.clickedObject.current=e.clicked,e.triggerUpdate();M(e.eventType,e.clicked,e.scrollBar,e.objectsWrapperRef),document.addEventListener("pointermove",(t=>{return"touches"in(c=t)&&c.preventDefault(),void function(e){const t=e.direction||"y";"hybrid"===t?("wrapp"===e.clicked?["x","y"]:[e.axisFromAtr]).forEach((t=>t&&k(t,e.visualDiff,e))):k(t,e.visualDiff,e)}(Object.assign(Object.assign({},e),{mouseEvent:c,fullMarginX:r,fullMarginY:n,scrollElementWH:o,objectsWrapperWH:l,wrapElWH:s,visualDiff:i}));var c}),{passive:!1,signal:a}),document.addEventListener("pointerup",(t=>function(e){if(e.controller.abort(),M(e.eventType,e.clicked,e.scrollBar,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)}if("slider"===e.type){const t=e.scrollElementRef;if(!t)return;const r=e.numForSliderRef.current,n="y"===e.direction?"scrollTop":"scrollLeft",o="y"===e.direction?t.clientHeight:t.clientWidth,l=e=>o*Math[e](t[n]/o);if(Math.abs(r)>20){const t=l(r>0?"ceil":"floor");e.smoothScroll(t,"y"===e.direction?"y":"x",e.duration)}else{const t=l(r>0?"floor":"ceil");e.smoothScroll(t,"y"===e.direction?"y":"x",e.duration)}e.numForSliderRef.current=0}e.prevCoordsRef.current=null,e.triggerUpdate()}(Object.assign(Object.assign({},e),{mouseEvent:t,controller:c}))),{signal:a})}const A="wrap-id";function L(e,t,r){return t?x(Math.round(e/t*e),r,e):0}function z(e,t,r,n){return t?x(e/t*(r-n),0,r-n):0}const C=({className:n,children:s,type:c="scroll",direction:u="y",scrollPosition:f,onScrollValue:p,isScrolling:h,size:g,objectsSize:R,crossCount:M,gap:k,wrapperMargin:C,wrapperMinSize:T,wrapperAlign:N,elementsAlign:W,elementsDirection:F="row",edgeGradient:H,progressTrigger:I={wheel:!0},progressReverse:B=!1,scrollBarOnHover:Y=!1,scrollBarEdge:X,thumbMinSize:$,render:D,emptyElements:P,suspending:q=!1,fallback:K})=>{var V,U,_,G,J;const Q=function(){const e=t(null);return null===e.current&&(e.current=""+l++),e.current}();if(!g)throw Error(`Prop "size" is not provided\nMorphScroll〈♦${Q}〉`);Object.keys(I).length;const[,Z]=e.useState({}),ee=()=>Z({}),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(!0),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),fe=e.useRef(null),pe=e.useRef(!1),he=e.useRef(NaN);function ge(){return e.useRef({width:0,height:0})}const ye=ge(),be=ge(),ve=ge(),[xe,Ee,we,je,Se,Re,Me,ke,Oe,Ae,Le]=function(...e){return e.map(S)}(f,D,g,R,P,T,N,k,I,ae.current.empty,X),ze=e.useMemo((()=>{var e,t;let r=[null],n=200,o=null;if(null!=f)if("number"==typeof f||"end"===f)r=[f,f];else if(Array.isArray(f))r=f;else if("object"==typeof f){const l=f.value;"number"==typeof l||"end"===l?r=[l,l]:Array.isArray(l)&&(r=l),n=null!==(e=f.duration)&&void 0!==e?e:200,o=null!==(t=f.updater)&&void 0!==t?t:null}return{value:r,duration:n,updater:o}}),[xe]),Ce={color:null,size:40},Te=e.useMemo((()=>"object"==typeof H?Object.assign(Object.assign({},Ce),H):"string"==typeof H?{color:H,size:40}:Ce),[H]),Ne=e.useMemo((()=>{const t=I.arrows,r={size:40,contentReduce:!0,loop:!1};return e.isValidElement(t)?Object.assign(Object.assign({},r),{element:t}):"object"==typeof t&&null!==t?Object.assign(Object.assign({},r),t):r}),[Oe]),We=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(We):[r]}return[t]}),[]),Fe=e.useMemo((()=>e.Children.toArray(s).flatMap(We).map((t=>e.isValidElement(t)&&t.key?t.key+"":null)).filter((e=>null!==e)).filter((e=>{var t;return"clear"!==(null==P?void 0:P.mode)||!(null===(t=ae.current.empty)||void 0===t?void 0:t.includes(e))}))),[s,We,Se,Ae]),[He,Ie,Be,Ye]=C?r(C):[0,0,0,0],Xe=He+Be,$e=Ye+Ie,[De,Pe]=e.useMemo((()=>{var e,t;return"number"==typeof k?[k,k]:Array.isArray(k)?[null!==(e=k[1])&&void 0!==e?e:0,null!==(t=k[0])&&void 0!==t?t:0]:[0,0]}),[k]),qe=e.useMemo((()=>{const e={type:void 0,rootMargin:0,stopLoadOnScroll:!1};if("string"==typeof D)return Object.assign(Object.assign({},e),{type:D});if("object"==typeof D&&null!==D){const{type:e,rootMargin:t=0,stopLoadOnScroll:r=!1}=D;return{type:e,rootMargin:t,stopLoadOnScroll:r}}return e}),[Ee]),Ke=e.useMemo((()=>r(qe.rootMargin,"x"===u)),[qe.rootMargin,u]),[Ve,Ue]=Ke?[Ke[2],Ke[0]]:[0,0],_e=e.useMemo((()=>{const[e,t]=Array.isArray(g)?g:"number"==typeof g?[g,g]:[ye.current.width,ye.current.height];if(!I.arrows||!Ne.size||!Ne.contentReduce)return[e,t,e,t];const r=2*Ne.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]}),[we,Oe,u,Ne,ye.current.height,ye.current.width]),Ge="x"===u?_e[0]:_e[1],Je=e.useMemo((()=>{if(!X)return[0,0];if("number"==typeof X){const e=2*X;return[e,e]}if(Array.isArray(X)){const[e=0,t]=X;return[2*e,2*(null!=t?t:e)]}return[0,0]}),[Le]),Qe="x"===u?Je[0]:Je[1],Ze=e.useMemo((()=>[_e[0]-Je[0],_e[1]-Je[1]]),[Je.join(),_e[0],_e[1]]),et="x"===u?Ze[0]:Ze[1],tt=e.useMemo((()=>R?Array.isArray(R)?R:r(R,!0,2):[null,null]),[je]),rt=e.useMemo((()=>{const e=(e,t)=>"number"==typeof e?e:"firstChild"===e?t:0;return[e(tt[0]&&"none"!==tt[0]&&"size"!==tt[0]?tt[0]:"y"===u&&"none"!==tt[0]||"size"===tt[0]?_e[0]:0,ve.current.width),e(tt[1]&&"none"!==tt[1]&&"size"!==tt[1]?tt[1]:"x"===u&&"none"!==tt[1]||"size"===tt[1]?_e[1]:0,ve.current.height)]}),[tt.join(),u,ve.current.width,ve.current.height,_e.join()]),nt=e.useMemo((()=>{const e="x"===u,t="row"===F,r="column"===F,n=e?_e[1]:_e[0],o=e?rt[1]+Pe:rt[0]+De,l="hybrid"===u?o*(Fe.length+1)-o:n,s=Math.floor(l/o)||1,i=M&&s>=M?"hybrid"===u?Math.ceil(s/M):M:s,c=i>1&&i<Fe.length?Math.ceil(Fe.length/i):i>Fe.length?1:Fe.length,a=M&&M<Fe.length,d=e=>Number.isFinite(e)&&e>0?e:1;if("hybrid"===u){const e=a?t?M:i:t?Fe.length:1,n=a?r?M:i:r?Fe.length:1;return[d(e),d(n)]}return[d(i),d(c)]}),[F,Pe,De,rt.join(),Fe.length,u,_e.join(),M]),ot=e.useMemo((()=>{const e=nt[0]?nt[0]*Pe-Pe:0,t="x"===u?nt[1]:nt[0];return rt[0]?(rt[0]+Pe)*t-Pe:qe.type?ve.current.width+e:be.current.width}),[u,rt[0],nt.join(),Pe,be.current.width,ve.current.width,qe.type]),lt=e.useMemo((()=>{const e=1>nt[1]?1:nt[0]*De-De;return rt[1]?"x"===u?(rt[1]+De)*nt[0]-De:(rt[1]+De)*nt[1]-De:qe.type?ve.current.height+e:be.current.height}),[u,rt[1],nt.join(),De,be.current.height,ve.current.height,qe.type]),st=e.useMemo((()=>lt+Xe),[lt,Xe]),it=e.useMemo((()=>ot+$e),[ot,$e]),ct="x"===u?it:st,at="x"===u?(null===(V=ne.current)||void 0===V?void 0:V.scrollLeft)||0:(null===(U=ne.current)||void 0===U?void 0:U.scrollTop)||0,ut=at>1&&!0,dt=ct>Math.round(at+Ge);let mt=!1,ft=!1;"hybrid"===u&&(mt=((null===(_=ne.current)||void 0===_?void 0:_.scrollLeft)||0)>1&&!0,ft=Math.round(((null===(G=ne.current)||void 0===G?void 0:G.scrollLeft)||0)+_e[0])<it);const pt=e.useMemo((()=>null!=$?$:30),[$]),ht=e.useCallback((({withLimit:e=!0,xSize:t})=>I.progressElement&&ct?t?L(e?Ze[0]:_e[0],e?it-Je[0]:it,pt):L(e?et:Ge,e?ct-Qe:ct,pt):0),[Oe,ct,et,Qe,Je[0],Ge,_e[0],Ze[0],it,pt]),gt=e.useMemo((()=>Ge?ct-Ge:ct),[ct,Ge]),yt=e.useMemo((()=>_e[0]?it-_e[0]:it),[it,_e[0]]),bt=e.useCallback((()=>{if(!qe.type||1>=nt[0])return[];const e=Array.from({length:Fe.length},((e,t)=>t)),t=Array.from({length:nt[0]},(()=>[])),r="x"===u&&"column"===F||"x"!==u&&"row"===F;return e.forEach((e=>{const n=r?e%nt[0]:Math.floor(e/nt[1]);t[n]&&t[n].push(e)})),t}),[Fe.length,nt.join(),qe.type,F,u]),vt=e.useMemo((()=>{if(!qe.type)return[{elementTop:0,elementBottom:0,left:0,right:0}];let e=[],t=0;if(W){const r=Array.from({length:Fe.length},((e,t)=>t)),n=Math.abs(Math.floor(Fe.length/nt[0])*nt[0]-Fe.length);e=n?r.slice(-n):[],"center"===W?t=(rt[0]+Pe)*(nt[0]-n)/2:"end"===W&&(t=(rt[0]+Pe)*(nt[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,bt()),l=e.length>0&&e.includes(n)?t:0,s=function(e){const t="x"===u?l:0;return e>0?t+(rt[1]+De)*e:t}(nt[0]>1||["hybrid","x"].includes(u)?o[1]:n),i=rt[1]?s+rt[1]:s,c=function(e){const t="x"===u?0:l;return e>0?t+(rt[0]+Pe)*e:t}(1===nt[0]&&"x"===u?n:o[0]);return{elementTop:s,elementBottom:i,left:c,right:c+rt[0]}}))}),[u,nt[0],rt.join(),De,Pe,qe.type,F,W,bt,Fe.join()]),xt=e.useMemo((()=>(null==_e?void 0:_e.length)&&N?function(e,t,r,n){const[o,l="start"]="string"==typeof e?[e,e]:e,s={display:"flex"};return t[0]>r&&(s.justifyContent=w(o)),t[1]>n&&(s.alignItems=w(l)),s}(N,_e,it,st):{}),[N,_e.join(),st,it]),Et=e.useMemo((()=>[v(it,_e[0]),v(st,_e[1])]),[it,st,_e.join()]),wt=e.useMemo((()=>"x"===u?Et[0]:Et[1]),[u,Et[0],Et[1]]),jt=e.useCallback(j(ye,ee),[]),St=e.useCallback(j(be,ee,$e,Xe),[$e,Xe]),Rt=e.useCallback(j(ve,ee),[]),Mt=e.useCallback(((e,t,r)=>{const n=ne.current;return n&&null!==e?function(e,t,r,n,o){return m(this,void 0,void 0,(function*(){if(!t||null==n)return null;const l="y"===e?"scrollTop":"scrollLeft",s=t[l];return s!==n?null===r?(yield function(e){return m(this,void 0,void 0,(function*(){for(;e.scrollHeight<=e.clientHeight&&e.scrollWidth<=e.clientWidth;)yield new Promise((e=>requestAnimationFrame(e)))}))}(t),void(t[l]=n)):void y((()=>{const e=performance.now(),i=()=>{const c=performance.now(),a=r?Math.min((c-e)/r,1):1;t[l]=s+(n-s)*a,1>a&&(o.current=requestAnimationFrame(i))};i()}),r,"smoothScrollBlock","exclusive"):void 0}))}(t,n,ie.current?null:r,e,he):null}),[ie.current]),kt=e.useCallback(((e,t)=>{if(se.current){if(se.current!==Fe[0])return void(se.current=Fe[0])}else se.current=Fe[0];Mt(t,e,ze.duration)}),[Fe[0],ze.duration,Mt]),Ot=e.useMemo((()=>{const e=Object.assign(Object.assign(Object.assign(Object.assign({margin:C?`${He}px ${Ie}px ${Be}px ${Ye}px`:"",height:tt[1]&&"none"!==tt[1]?lt+"px":"fit-content",width:tt[0]&&"none"!==tt[0]?ot+"px":"fit-content"},I.content&&{cursor:"grab"}),k&&!qe.type&&{gap:`${De}px ${Pe}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,_e,$e,Xe)),N&&{flexShrink:0});if(qe.type)return Object.assign(Object.assign({},e),{position:"relative"});const t=tt[1]?"wrap":void 0,r=1===nt[0]?"y"===u?"column":"row":F;return Object.assign(Object.assign({},e),{display:"flex",flexDirection:r,flexWrap:t,justifyContent:w(W)})}),[C,Me,Re,[He,Ie,Be,Ye,$e,Xe,De,Pe].join(),_e.join(),ke,tt[1],lt,ot,I.content,ke,qe.type,u,nt[0],F,W]),At=e.useCallback((e=>{if(!Y)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"),y((()=>n.classList.remove("leave")),200)):(n.style.opacity="1",n.classList.add("hover"))}))})(re.current,0,e);"mouseleave"===e.type?!["thumb","slider","wrapp"].includes(ce.current)&&t():t()}),[Y]),Lt=e.useCallback(((e,t="mousedown",r)=>{var n;const o=e||("scroll"===c?"thumb":"slider");if("wrapp"===e&&!I.content||["thumb","slider"].includes(o)&&!I.progressElement)return;E(c,te.current,le);let l=null;r&&(l=null===(n=r.closest(".ms-bar"))||void 0===n?void 0:n.getAttribute("data-direction")),O({eventType:t,scrollElementRef:ne.current,objectsWrapperRef:oe.current,scrollBar:r||null,clickedObject:ce,scrollContentRef:re.current,scrollStateRef:ue.current,type:c,scrollBarOnHover:Y,mouseOnRefHandle:At,triggerUpdate:ee,direction:u,smoothScroll:Mt,sizeLocal:[_e[0],_e[1]],clicked:o,numForSliderRef:me,prevCoordsRef:fe,thumbSize:ht("x"===l?{xSize:!0}:{}),axisFromAtr:l,duration:ze.duration,scrollBarEdge:Je,rafID:he})}),[u,c,I.content,I.progressElement,_e.join(),ht({}),ht({xSize:!0}),ze.duration,Mt,At,Y,Je.join()]),zt=e.useCallback((e=>{Lt(null,e.type,e.target)}),[Lt]),Ct=e.useCallback((e=>{ne.current&&(({arrowType:e,scrollElement:t,wrapSize:r,scrollSize:n,smoothScroll:o,duration:l,loop:s})=>{const i=r[0],c=r[1],a=["top","bottom"].includes(e)?c:i,u=t.scrollTop,d=t.scrollLeft,m=t=>{o(t,["top","bottom"].includes(e)?"y":"x",l)};switch(e){case"top":u>0?m(u-n[1]):s&&m(a);break;case"left":d>0?m(d-n[0]):s&&m(a);break;case"right":d+n[0]<i?m(d+n[0]):s&&m(0);break;case"bottom":u+n[1]<c?m(u+n[1]):s&&m(0)}})({arrowType:e,scrollElement:ne.current,wrapSize:[it,st],scrollSize:_e,smoothScroll:Mt,duration:ze.duration,loop:Ne.loop})}),[_e.join(),it,st,ze.duration,Mt,Ne.loop]),Tt=e.useCallback((()=>{if(!_e[0]||!_e[1])return;E(c,te.current,le);const e=ne.current;re.current&&e&&0!==le.current.length&&y((()=>((e,t,r,n)=>{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,_e,u)),33)}),[_e.join(),u,ne,re,c]),Nt=e.useCallback((()=>{te.current&&((e,t,r,n)=>{var o,l;const{allIds:s,emptyKeysRaw:i}=(()=>{const t=[],r=[],n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>e instanceof Element&&e.hasAttribute(A)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});let o=n.nextNode();for(;o;){const e=o,l=e.getAttribute(A);l&&(t.push(l),0===e.children.length&&r.push(l)),o=n.nextNode()}return{allIds:t,emptyKeysRaw:r}})(),c=new Set(null===(o=t.current)||void 0===o?void 0:o.loaded);s.forEach((e=>c.add(e)));let a=null;if(null===(l=t.current)||void 0===l?void 0:l.empty){const e=new Set(t.current.empty);i.forEach((t=>e.add(t))),a=Array.from(e)}t.current={loaded:"lazy"===n?Array.from(c):s.map((e=>e)),empty:a},r()})(te.current,ae,ee,qe.type)}),[Ee]),Wt=e.useCallback((e=>{(null==P?void 0:P.clickTrigger)&&((e,t,r)=>{const{selector:n,delay:o=0}="string"==typeof t?{selector:t}:t,l=e.target;if(!l.closest(n))return;const s=l.closest(`[${A}]`);s&&s.classList.add("remove"),y((()=>{s&&s.classList.remove("remove"),r()}),o)})(e,P.clickTrigger,Nt)}),[Se,Nt]),Ft=e.useCallback((()=>{y((()=>{const e=te.current,t=ne.current;e&&t&&(null==p||p(t.scrollLeft,t.scrollTop),de.current=!0,null==h||h(!0),y((()=>{de.current=!1,null==h||h(!1),Nt()}),200),"scroll"!==c&&Tt(),requestAnimationFrame(ee))}),6)}),[p,h,c,Tt,Nt]),Ht=z(at,gt,et,ht({})),It=z((null===(J=ne.current)||void 0===J?void 0:J.scrollLeft)||0,yt,Ze[0],ht({xSize:!0})),Bt=e.useCallback((e=>{const t="object"==typeof I.wheel&&"string"==typeof I.wheel.changeDirectionKey?I.wheel.changeDirectionKey:"KeyX";e.code!==t||"hybrid"!==u||pe.current||(e.stopPropagation(),pe.current=!0,ee())}),[u,JSON.stringify(I.wheel)]),Yt=e.useCallback((e=>{pe.current&&(e.stopPropagation(),pe.current=!1,ee())}),[]);e.useEffect((()=>{(P||qe.type)&&(P||null===ae.current.empty||(ae.current.empty=null),Nt())}),[Se,qe.type,Nt]),e.useEffect((()=>{if(matchMedia("(pointer: coarse)").matches)return;const e=ne.current;if(!e)return;const t="hybrid"===u&&"object"==typeof I.wheel&&I.wheel.changeDirection?"x":u,r="hybrid"===u&<+Xe<=_e[1]||pe.current?["hybrid","y"].includes(t)?"x":"y":t,n=e=>{e.preventDefault(),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=x(t.targetScrollX+e.deltaY,0,n.scrollWidth-n.clientWidth+2):t.targetScrollY=x(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,r)};return I.wheel&&e.addEventListener("wheel",n,{passive:!1}),()=>{e.removeEventListener("wheel",n)}}),[u,Oe,lt,_e[1],Xe,pe.current]),e.useEffect((()=>{ze.value&&("hybrid"===u?["x","y"]:[u]).forEach((e=>{const t="x"===e?0:1;"end"===ze.value[t]&&kt(e,"x"===e?yt:gt)}))}),[u,ze.value.join(),xe,gt,yt,it,st]),e.useEffect((()=>{ze.value&&("hybrid"===u?["x","y"]:[u]).forEach((e=>{const t="x"===e?0:1,r=ze.value[t];"number"==typeof r&&kt(e,r)}))}),[xe,ze.updater,u,kt,ze.value.join()]),e.useEffect((()=>{const e=ue.current.animationFrameId;return(qe.type||h)&&h&&(h(!1),ee()),requestAnimationFrame((()=>ie.current=!1)),()=>{e&&cancelAnimationFrame(e),b()}}),[]),e.useEffect((()=>{const e=ne.current;if(!e)return;const t=window.matchMedia("(pointer: coarse)").matches?"touchstart":"mousedown";if("touchstart"===t&&"slider"!==c)return;const r=t=>{"touchstart"===t.type?e.style.touchAction="none":e.style.touchAction&&e.style.removeProperty("touch-action"),t.preventDefault(),Lt("wrapp",t.type)};return e.addEventListener(t,r,{passive:!1}),()=>{e.removeEventListener(t,r),e.style.removeProperty("touch-action")}}),[c]),e.useEffect((()=>{"scroll"!==c&&Tt()}),[_e.join()]);const Xt=e.useCallback(((t,r,n,o)=>{const l=Object.assign({width:rt[0]?rt[0]+"px":void 0,height:rt[1]?rt[1]+"px":void 0},qe.type&&Object.assign({position:"absolute",top:r+"px",left:n+"px"},!rt[0]&&1===nt[0]&&{transform:"translateX(-50%)"})),s=q?e.createElement(e.Suspense,{fallback:K},o):o;return e.createElement("div",Object.assign({key:t},qe.type||P?{[A]:""+t}:{},{className:"ms-object-box",style:l,onClick:Wt}),s)}),[q,!!K,rt.join(),Ee,Se,nt[0],Wt,qe.type]),$t=e.useMemo((()=>[{positionType:"x"===u?"left":"top",visibility:ut},{positionType:"x"===u?"right":"bottom",visibility:dt},..."hybrid"===u?[{positionType:"left",visibility:mt},{positionType:"right",visibility:ft}]:[]]),[ut,dt,u,mt,ft]),Dt=e.useMemo((()=>({width:_e[2]+"px",height:_e[3]+"px"})),[_e]),Pt=e.useMemo((()=>[{shouldRender:ht({withLimit:!1})<Ge,direction:u,thumbSize:ht({}),thumbSpace:Ht,objLengthPerSize:wt,progressReverseIndex:0},{shouldRender:"hybrid"===u&&ht({withLimit:!1,xSize:!0})<Ze[0],direction:"x",thumbSize:ht({xSize:!0}),thumbSpace:It,objLengthPerSize:Et[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e))),[ht,et,u,Ze[0],Ht,It,wt,Et]),qt=e.useMemo((()=>{const e={position:"relative",width:_e[0]+"px",height:_e[1]+"px"};return I.arrows&&Ne.contentReduce&&Ne.size&&("x"===u?e.left=Ne.size+"px":"y"===u?e.top=Ne.size+"px":(e.top=Ne.size+"px",e.left=Ne.size+"px")),e}),[_e,Oe,Ne,u]),Kt=e.useMemo((()=>{var e;return null!==(e={x:it>_e[0]?"scroll hidden":"hidden",y:st>_e[1]?"hidden scroll":"hidden",hybrid:`${it>_e[0]?"scroll":"hidden"} ${st>_e[1]?"scroll":"hidden"}`,hide:"hidden"}[I.wheel||I.content?u:"hide"])&&void 0!==e?e:"hidden"}),[it,st,_e,Oe,u]),Vt=e.useMemo((()=>H?$t.map((({positionType:t,visibility:r})=>e.createElement(a,{key:"edge-"+t,edgeGradient:Te,visibility:r,edgeType:t}))):null),[H,$t,Te]),Ut=e.useMemo((()=>I.arrows?$t.map((({positionType:t,visibility:r})=>e.createElement(d,{key:"arrow-"+t,activity:r,arrows:Ne,arrowType:t,handleArrow:Ct,size:"hybrid"===u?_e[0]+2*Ne.size:_e[0]}))):null),[I.arrows,$t,Ne,Ct,_e[0],u,de.current]),_t=e.useMemo((()=>I.progressElement&&!0!==I.progressElement?Pt.map((t=>{const r="boolean"==typeof B?B:B[t.progressReverseIndex];return e.createElement(i,{key:t.direction+"",type:c,direction:t.direction,progressReverse:r,size:Ze,progressTrigger:I,scrollBarOnHover:Y,scrollBarEvent:"sliderMenu"===c?Mt:zt,thumbSize:t.thumbSize,thumbSpace:t.thumbSpace,objLengthPerSize:t.objLengthPerSize,sliderCheckLocal:Tt,duration:ze.duration})})):null),[I.progressElement,Pt,c,B,Ze,I,Y,Mt,zt,Tt,ze.duration]),Gt=e.createElement("div",{className:"ms-objects-wrapper",ref:oe,style:Ot},Fe.map(((t,r)=>{var n,l,i;const c=e.Children.toArray(s).find((r=>e.isValidElement(r)&&r.key===t)),a=qe.stopLoadOnScroll&&de.current&&!ae.current.loaded.includes(""+t)?K:(null===(n=ae.current.empty)||void 0===n?void 0:n.includes(t))?"object"==typeof(null==P?void 0:P.mode)?P.mode.fallback:K:c,d="number"==typeof tt[0]&&"number"==typeof tt[1]||"firstChild"!==tt[0]&&"firstChild"!==tt[1]||0!==r?a:e.createElement(o,{onResize:Rt},a);if(!qe.type)return Xt(t,0,0,d);{const{elementTop:e,elementBottom:n,left:o,right:s}=vt[r],c="x"===u?Ve:Ue,a=Ge+c>("x"===u?o:e)-at&&("x"===u?s:n)-at>0-c,m="hybrid"!==u||_e[0]+Ve>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-Ve;if(a&&m)return Xt(t,e,o,d)}}))),Jt=e.createElement("div",{"morph-scroll":`〈♦${Q}〉`,className:n,ref:te,style:Dt},e.createElement("div",{className:"ms-content",ref:re,onMouseEnter:At,onMouseLeave:At,onTouchStart:At,onTouchEnd:At,style:qt},e.createElement("div",{className:"ms-element",ref:ne,onScroll:Ft,onKeyDown:Bt,onKeyUp:Yt,style:Object.assign(Object.assign(Object.assign({width:"100%",height:"100%",outline:"none"},xt),{overflow:Kt}),"scroll"!==c||"boolean"!=typeof I.progressElement||!1===I.progressElement?{scrollbarWidth:"none"}:{})},rt[0]&&rt[1]?Gt:e.createElement(o,{onResize:St,style:xt},Gt)),Vt,_t),Ut);return"auto"===g?e.createElement(o,{measure:"outer",onResize:jt},Jt):Jt};C.displayName="MorphScroll";const T={MorphScroll:C,ResizeTracker:o,IntersectionTracker:n};export{n as IntersectionTracker,C as MorphScroll,o as ResizeTracker,T as default};
|
package/package.json
CHANGED
package/types/index.d.ts
CHANGED
|
@@ -5,34 +5,26 @@ import IntersectionTrackerT from "./intersectionTracker";
|
|
|
5
5
|
import MorphScrollT from "./morphScroll";
|
|
6
6
|
|
|
7
7
|
/** ---
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
8
|
+
* ## 
|
|
9
|
+
* ### ***ResizeTracker***:
|
|
10
|
+
* React component.
|
|
11
11
|
* ### Props:
|
|
12
12
|
* - `className`
|
|
13
13
|
* - `children`
|
|
14
14
|
* - `style`
|
|
15
15
|
* - `measure`
|
|
16
16
|
* - `onResize`
|
|
17
|
-
*
|
|
18
|
-
* _More information in props or links!_
|
|
19
|
-
*
|
|
20
|
-
* ---
|
|
21
|
-
* ### Returns:
|
|
22
|
-
* _React component._
|
|
23
|
-
*
|
|
24
|
-
* ---
|
|
25
17
|
* ### Links:
|
|
26
|
-
* [ResizeTracker Documentation](https://www.npmjs.com/package/morphing-scroll
|
|
18
|
+
* [ResizeTracker Documentation](https://www.npmjs.com/package/morphing-scroll)
|
|
27
19
|
*
|
|
28
20
|
* [MDN Reference for Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
29
21
|
*/
|
|
30
22
|
declare const ResizeTracker: React.FC<ResizeTrackerT>;
|
|
31
23
|
|
|
32
24
|
/** ---
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
25
|
+
* ## 
|
|
26
|
+
* ### ***IntersectionTracker***:
|
|
27
|
+
* React component.
|
|
36
28
|
* ### Props:
|
|
37
29
|
* - `className`
|
|
38
30
|
* - `children`
|
|
@@ -42,38 +34,30 @@ declare const ResizeTracker: React.FC<ResizeTrackerT>;
|
|
|
42
34
|
* - `threshold`
|
|
43
35
|
* - `visibleContent`
|
|
44
36
|
* - `onVisible`
|
|
45
|
-
*
|
|
46
|
-
* _More information in props or links!_
|
|
47
|
-
*
|
|
48
|
-
* ---
|
|
49
|
-
* ### Returns:
|
|
50
|
-
* _React component._
|
|
51
|
-
*
|
|
52
|
-
* ---
|
|
53
37
|
* ### Links:
|
|
54
|
-
* [IntersectionTracker Documentation](https://www.npmjs.com/package/morphing-scroll
|
|
38
|
+
* [IntersectionTracker Documentation](https://www.npmjs.com/package/morphing-scroll)
|
|
55
39
|
*
|
|
56
40
|
* [MDN Reference for Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
|
|
57
41
|
*/
|
|
58
42
|
declare const IntersectionTracker: React.FC<IntersectionTrackerT>;
|
|
59
43
|
|
|
60
44
|
/** ---
|
|
61
|
-
*
|
|
62
|
-
*
|
|
63
|
-
*
|
|
45
|
+
* ## 
|
|
46
|
+
* ### ***MorphScroll***:
|
|
47
|
+
* React component.
|
|
64
48
|
* ### Props:
|
|
65
|
-
* #####
|
|
49
|
+
* ##### — GENERAL SETTINGS —
|
|
66
50
|
* - `className`
|
|
67
51
|
* - `children`
|
|
68
52
|
*
|
|
69
|
-
* #####
|
|
53
|
+
* ##### — SCROLL SETTINGS —
|
|
70
54
|
* - `type`
|
|
71
55
|
* - `direction`
|
|
72
56
|
* - `scrollPosition`
|
|
73
57
|
* - `onScrollValue`
|
|
74
58
|
* - `isScrolling`
|
|
75
59
|
*
|
|
76
|
-
* #####
|
|
60
|
+
* ##### — VISUAL SETTINGS —
|
|
77
61
|
* - `size` - ***REQUIRED***
|
|
78
62
|
* - `objectsSize`
|
|
79
63
|
* - `crossCount`
|
|
@@ -84,46 +68,109 @@ declare const IntersectionTracker: React.FC<IntersectionTrackerT>;
|
|
|
84
68
|
* - `elementsAlign`
|
|
85
69
|
* - `elementsDirection`
|
|
86
70
|
* - `edgeGradient`
|
|
87
|
-
*
|
|
88
|
-
* ##### - PROGRESSBAR:
|
|
89
71
|
* - `progressTrigger`
|
|
90
72
|
* - `progressReverse`
|
|
91
73
|
* - `scrollBarOnHover`
|
|
74
|
+
* - `scrollBarEdge`
|
|
75
|
+
* - `thumbMinSize`
|
|
92
76
|
*
|
|
93
|
-
* #####
|
|
77
|
+
* ##### — OPTIMIZATIONS —
|
|
94
78
|
* - `render`
|
|
95
79
|
* - `emptyElements`
|
|
96
80
|
* - `suspending`
|
|
97
81
|
* - `fallback`
|
|
98
|
-
*
|
|
99
|
-
* _More information in props or links!_
|
|
100
|
-
*
|
|
101
|
-
* ---
|
|
102
|
-
* ### Returns:
|
|
103
|
-
* _React component._
|
|
104
|
-
*
|
|
105
|
-
* ---
|
|
106
82
|
* ### Links:
|
|
107
|
-
* [MorphScroll Documentation](https://www.npmjs.com/package/morphing-scroll
|
|
83
|
+
* [MorphScroll Documentation](https://www.npmjs.com/package/morphing-scroll)
|
|
108
84
|
*/
|
|
109
|
-
|
|
110
85
|
declare const MorphScroll: React.FC<MorphScrollT>;
|
|
111
86
|
|
|
112
87
|
/** ---
|
|
113
|
-
*
|
|
88
|
+
* ## 
|
|
89
|
+
* ### ***Morph***:
|
|
90
|
+
* content of the library
|
|
114
91
|
*
|
|
115
|
-
* ---
|
|
116
92
|
* ### Returns:
|
|
117
93
|
* - `ResizeTracker`: *component that monitors changes to an element’s size.*
|
|
118
94
|
* - `IntersectionTracker`: *component for tracking the intersection of an element with the viewport.*
|
|
119
95
|
* - `MorphScroll`: *is the main component of the library responsible for displaying your data.*
|
|
120
96
|
*/
|
|
121
97
|
declare const Morph: {
|
|
122
|
-
/**
|
|
98
|
+
/** ---
|
|
99
|
+
* ## 
|
|
100
|
+
* ### ***MorphScroll***:
|
|
101
|
+
* React component.
|
|
102
|
+
* ### Props:
|
|
103
|
+
* ##### — GENERAL SETTINGS —
|
|
104
|
+
* - `className`
|
|
105
|
+
* - `children`
|
|
106
|
+
*
|
|
107
|
+
* ##### — SCROLL SETTINGS —
|
|
108
|
+
* - `type`
|
|
109
|
+
* - `direction`
|
|
110
|
+
* - `scrollPosition`
|
|
111
|
+
* - `onScrollValue`
|
|
112
|
+
* - `isScrolling`
|
|
113
|
+
*
|
|
114
|
+
* ##### — VISUAL SETTINGS —
|
|
115
|
+
* - `size` - ***REQUIRED***
|
|
116
|
+
* - `objectsSize`
|
|
117
|
+
* - `crossCount`
|
|
118
|
+
* - `gap`
|
|
119
|
+
* - `wrapperMargin`
|
|
120
|
+
* - `wrapperMinSize`
|
|
121
|
+
* - `wrapperAlign`
|
|
122
|
+
* - `elementsAlign`
|
|
123
|
+
* - `elementsDirection`
|
|
124
|
+
* - `edgeGradient`
|
|
125
|
+
* - `progressTrigger`
|
|
126
|
+
* - `progressReverse`
|
|
127
|
+
* - `scrollBarOnHover`
|
|
128
|
+
* - `scrollBarEdge`
|
|
129
|
+
* - `thumbMinSize`
|
|
130
|
+
*
|
|
131
|
+
* ##### — OPTIMIZATIONS —
|
|
132
|
+
* - `render`
|
|
133
|
+
* - `emptyElements`
|
|
134
|
+
* - `suspending`
|
|
135
|
+
* - `fallback`
|
|
136
|
+
* ### Links:
|
|
137
|
+
* [MorphScroll Documentation](https://www.npmjs.com/package/morphing-scroll)
|
|
138
|
+
*/
|
|
123
139
|
MorphScroll: React.FC<MorphScrollT>;
|
|
124
|
-
/**
|
|
140
|
+
/** ---
|
|
141
|
+
* ## 
|
|
142
|
+
* ### ***ResizeTracker***:
|
|
143
|
+
* React component.
|
|
144
|
+
* ### Props:
|
|
145
|
+
* - `className`
|
|
146
|
+
* - `children`
|
|
147
|
+
* - `style`
|
|
148
|
+
* - `measure`
|
|
149
|
+
* - `onResize`
|
|
150
|
+
* ### Links:
|
|
151
|
+
* [ResizeTracker Documentation](https://www.npmjs.com/package/morphing-scroll)
|
|
152
|
+
*
|
|
153
|
+
* [MDN Reference for Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
154
|
+
*/
|
|
125
155
|
ResizeTracker: React.FC<ResizeTrackerT>;
|
|
126
|
-
/**
|
|
156
|
+
/** ---
|
|
157
|
+
* ## 
|
|
158
|
+
* ### ***IntersectionTracker***:
|
|
159
|
+
* React component.
|
|
160
|
+
* ### Props:
|
|
161
|
+
* - `className`
|
|
162
|
+
* - `children`
|
|
163
|
+
* - `style`
|
|
164
|
+
* - `root`
|
|
165
|
+
* - `rootMargin`
|
|
166
|
+
* - `threshold`
|
|
167
|
+
* - `visibleContent`
|
|
168
|
+
* - `onVisible`
|
|
169
|
+
* ### Links:
|
|
170
|
+
* [IntersectionTracker Documentation](https://www.npmjs.com/package/morphing-scroll)
|
|
171
|
+
*
|
|
172
|
+
* [MDN Reference for Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
|
|
173
|
+
*/
|
|
127
174
|
IntersectionTracker: React.FC<IntersectionTrackerT>;
|
|
128
175
|
};
|
|
129
176
|
|