morphing-scroll 2.10.2 → 2.10.3
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/dist/cjs/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("keytask-core");const n=(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},o=({className:r,children:o,style:i,root:l,threshold:s,rootMargin:c,visibleContent:a=!1,onIntersection:u})=>{const[d,m]=t.useState(!1),f=t.useRef(null),h=t.useMemo((()=>{if(!c)return"";const e=n(c);return`${e[0]}px ${e[1]}px ${e[2]}px ${e[3]}px`}),[c]),p=t.useCallback((([e])=>{m(e.isIntersecting),u&&u({time:e.time,rootBounds:e.rootBounds,boundingClientRect:e.boundingClientRect,intersectionRect:e.intersectionRect,isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,target:e.target})}),[u]);return t.useEffect((()=>{const e=new IntersectionObserver(p,{root:l,threshold:s,rootMargin:h});return f.current&&e.observe(f.current),()=>{e.disconnect()}}),[p,l,s,h]),e.jsx("div",{"intersection-tracker":"",className:r,ref:f,style:i,children:a||d?o:null})};o.displayName="IntersectionTracker";const i=({className:r,children:n,style:o,measure:i="inner",onResize:l})=>{const s=t.useRef(null);t.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()}}),[i,l]);const c={width:"max-content",height:"max-content"},a={inner:{...c},outer:{width:"100%",height:"100%"},all:{minWidth:"100%",minHeight:"100%",...c}};return e.jsx("div",{"resize-tracker":"",className:r,ref:s,style:{willChange:"width, height",...a[i],...o},children:n})};i.displayName="ResizeTracker";let l=1;function s(e,t=0,r=1/0,n=!0){return Math.max(t,Math.min(n?Math.round(e):e,r))}const c="wrap-id";function a(e,t,r,n,o){t.matches(":focus")||t.focus(),n.animating||(n.targetScrollX=s(t.scrollLeft,0,r[0]),n.targetScrollY=s(t.scrollTop,0,r[1])),"x"===o?n.targetScrollX=s(n.targetScrollX+e.deltaY,0,r[0]):n.targetScrollY=s(n.targetScrollY+e.deltaY,0,r[1]),n.animating||(n.animating=!0,n.animationFrameId=requestAnimationFrame((function e(){let i;if("x"===o){const e=s(t.scrollLeft+.4*(n.targetScrollX-t.scrollLeft),0,r[0]);t.scrollLeft=e,i=Math.abs(e-n.targetScrollX)}else{const e=s(t.scrollTop+.4*(n.targetScrollY-t.scrollTop),0,r[1]);t.scrollTop=e,i=Math.abs(e-n.targetScrollY)}i>2.5?n.animationFrameId=requestAnimationFrame(e):("x"===o?t.scrollLeft=s(n.targetScrollX,0,r[0]):t.scrollTop=s(n.targetScrollY,0,r[1]),n.animating=!1,n.animationFrameId=null)})))}const u=({type:r,direction:n,progressReverse:o,size:i,progressTrigger:l,scrollBarOnHover:s,scrollBarEvent:c,thumbSize:u,thumbSpace:d,objLengthPerSize:m,sliderCheckLocal:f,duration:h,isTouched:p,scrollStateRef:g,scrollEl:y,scrollBarsRef:x,triggerUpdate:b,overscroll:v,maxScrollSize:w})=>{const M=t.useRef(null),S=t.useRef(null),E=["hybrid","y"].includes(n)?"y":"x",k=Math.abs(v.current[E])*(u/200),L=u-k,j=0>v.current[E]?d+k:d,R=t.useMemo((()=>{if("scroll"===r)return;const t=i["x"===E?0:1];return Array.from({length:m},((n,o)=>e.jsx("div",{className:"ms-slider-element",style:{..."sliderMenu"===r&&{cursor:"pointer"}},onClick:"sliderMenu"===r?()=>{c(t*o,E,h,f)}:void 0,children:Array.isArray(l[0].progressElement)?l[0].progressElement[o]:l[0].progressElement},o)))}),[m,r,l[1],h,f,i[0],i[1],c]),A=t.useMemo((()=>"x"!==n?"y":"x"),[n]),z=i["x"===A?0:1],T="scroll"!==r?"":u+2*d>z?"flex-end":"flex-start";t.useEffect((()=>{if(p||!l[0].wheel)return;const e=M.current,t=y.current;if(!e||!t)return;let r=e.previousElementSibling;for(;r&&!r.classList.contains("ms-element");)r=r.previousElementSibling;const n=e=>a(e,t,w,g.current,A);return e.addEventListener("wheel",n,{passive:!1}),()=>e.removeEventListener("wheel",n)}),[A]),t.useEffect((()=>{const e="slider"===r?M.current:S.current;if(!e||"sliderMenu"===r)return;const t=e=>c(e);return e.addEventListener("pointerdown",t),()=>e.removeEventListener("pointerdown",t)}),[c,r]),t.useEffect((()=>{const e=M.current;if(e)return x.current.add(e),b(),()=>{x.current.delete(e)}}),[u]);const C={position:"absolute",...s&&{opacity:0,transition:"opacity 0.2s ease-in-out"}};return e.jsx(t.Fragment,{children:"scroll"===r?e.jsx("div",{className:"ms-bar ms-"+A,ref:M,"data-direction":A,style:{...C,width:"fit-content",height:z+"px",..."x"===n?{transformOrigin:"left top",left:"50%",...o?{top:0,transform:"rotate(-90deg) translate(-100%, -50%)"}:{transform:"rotate(-90deg) translateY(-50%)"}}:{top:"50%",transform:"translateY(-50%)",...o?{left:0}:{right:0}}},children:e.jsx("div",{className:"ms-thumb",ref:S,style:{height:L+"px",transform:`translateY(${j}px)`,...l[0].progressElement&&{cursor:"grab"},display:"flex",alignItems:T},children:l[0].progressElement})}):m>1&&l[0].progressElement&&e.jsx("div",{className:"ms-slider ms-"+A,ref:M,"data-direction":A,style:{...C,display:"flex",..."slider"===r&&{cursor:"grab"},..."x"===n?{transformOrigin:"left top",left:"50%",transform:"translateX(-50%)",...o?{top:0}:{bottom:0}}:{flexDirection:"column",top:"50%",transform:"translateY(-50%)",...o?{left:0}:{right:0}}},children:R})})};u.displayName="ScrollBar";const d=({edgeGradient:t,visibility:r,edgeType:n,size:o})=>{const i={position:"absolute",[n]:0,pointerEvents:"none",transition:"opacity 0.2s ease-in-out","--edge-visibility":r?1:0,opacity:"var(--edge-visibility)",...t.color&&{background:t.color&&`linear-gradient(${["left","right"].includes(n)?"270deg, ":""}${t.color}, transparent)`},...["left","right"].includes(n)?{height:"100%",width:t.size+"px",top:0}:{width:"100%",height:t.size+"px",left:0},..."left"===n?{transform:"scaleX(-1)"}:"bottom"===n?{transform:"scaleY(-1)"}:{}},l=`ms-edge ${n}${r?"":" ms-disabled"}`;return e.jsx("div",{className:l,style:i})};d.displayName="Edge";var m=t.memo(d);const f=({visibility:r,arrows:n,arrowType:o,handleArrow:i,size:l})=>{const s=t.useRef(null),c={position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer",width:n.size+"px",...o?{[o]:0}:{},..."top"===o&&{transform:"rotate(-90deg) translateX(-100%)",transformOrigin:"left top"},..."bottom"===o&&{transform:"rotate(90deg) translateX(-100%)",transformOrigin:"left bottom"},..."left"===o&&{transform:"scaleX(-1)"},...["top","bottom"].includes(o)?{height:l+"px"}:{height:"100%",top:0}};return t.useEffect((()=>{const e=s.current;if(!e)return;const t=()=>i(o);return e.addEventListener("click",t),()=>{e.removeEventListener("click",t)}}),[i,o]),e.jsx("div",{className:`ms-arrow-box ${o}${r?" active":""}`,ref:s,style:c,children:n.element})};f.displayName="Arrow";var h=t.memo(f);const p=e=>{const t=e.getAttribute("data-direction");e.style.opacity="0",e.classList.remove("hover"),e.classList.add("leave"),r.cancelTask("remove"+t),r.setTask((()=>e.classList.remove("leave")),200,"remove"+t)},g=e=>{const t=e.getAttribute("data-direction");r.cancelTask("remove"+t),e.style.opacity="1",e.classList.remove("leave"),e.classList.add("hover")},y=function(){let e=null,t=0;const r=new Map,n=()=>{r.forEach(((e,t)=>{e()||r.delete(t)})),e=0!==r.size?requestAnimationFrame(n):null};return{start:(o,i)=>{const l=i??++t;return r.delete(l),r.set(l,o),null===e&&(e=requestAnimationFrame(n)),l},stop:t=>{void 0!==t?(r.delete(t),0===r.size&&null!==e&&(cancelAnimationFrame(e),e=null)):(r.clear(),null!==e&&(cancelAnimationFrame(e),e=null))},isRunning:e=>void 0===e?r.size>0:r.has(e)}}(),x=(e,t,r)=>{const n=e.current[t],o=performance.now();y.start((()=>{const i=performance.now(),l=Math.min((i-o)/140,1);return 1>l?(e.current[t]=n*(1-l),r(),!0):(e.current[t]=0,r(),!1)}))};let b,v={x:0,y:0},w={x:0,y:0},M={x:0,y:0,t:0,distX:0,distY:0},S=null;const E=(e,t,r,n)=>{if(!e)return;let o=null;["thumb","slider"].includes(e)?o="slider"===e?t?.closest(".ms-slider"):t:"wrapp"===e&&(o=r),((e,t)=>{if(!e)return;const r=window.matchMedia("(pointer: coarse)").matches;if("start"===t){if(!r){let e=document.getElementById("ms-cursor-lock");e||(e=document.createElement("style"),e.id="ms-cursor-lock",e.textContent="\n * {\n cursor: grabbing !important;\n user-select: none;\n }\n ",document.head.appendChild(e))}e.style.cursor="grabbing",e.classList.add("active")}else{if(!r){const e=document.getElementById("ms-cursor-lock");e&&e.remove()}e.style.cursor="grab",e.classList.remove("active")}})(o,n)},k=(e,t,r,n)=>{"x"===e?(r.scrollStateRef.targetScrollX=n,t.scrollLeft!==n&&(t.scrollLeft=n)):(r.scrollStateRef.targetScrollY=n,t.scrollTop!==n&&(t.scrollTop=n))},L=(e,t,r,n)=>{const o=n.scrollElement;if(!o)return;const i="x"===e,l={x:n.event.clientX,y:n.event.clientY};if(!l)return;const c=(e,t,r)=>{if(0===e)return 0;const o="x"===t?n.sizeLocal[0]:n.sizeLocal[1],i=.14*Math.max(600,o),l=Math.abs(e);return s(e*i/(i+(r?-l:l)),-150,150)};if(!S)return void(S={x:{value:l.x,rest:0,raw:c(n.overscrollRef.current.x,"x",!0)},y:{value:l.y,rest:0,raw:c(n.overscrollRef.current.y,"y",!0)}});const a=S,u={x:l.x-a.x.value,y:l.y-a.y.value},d=Math.abs(v[e]);if(d>2?n.isDraggingRef.current=!0:3>d&&(v[e]+=u[e]),n.isTouched){const e=performance.now();if(M.t){const t=Math.max(e-M.t,8);M={x:.8*M.x+u.x/t*.2,y:.8*M.y+u.y/t*.2,t:e,distX:(M.distX??0)+Math.abs(u.x),distY:(M.distY??0)+Math.abs(u.y)}}else M.t=e}const m="wrapp"===n.clickedObject.current?-u[e]:u[e],f=i?"scrollLeft":"scrollTop",h=i?0:1,p=(t,r,l)=>{const a=S[e],u=i?n.maxScrollSize[0]:n.maxScrollSize[1];if(!Number.isFinite(t)||!Number.isFinite(r))return void(S=null);if(0!==a.raw){const t=a.raw;return a.raw+=.6*r,l&&(n.overscrollRef.current[e]=c(a.raw,e),n.triggerUpdate()),Math.sign(a.raw)!==Math.sign(t)?(a.raw=0,void(l&&(n.overscrollRef.current[e]=0,n.triggerUpdate()))):void 0}if(0>=u)return void k(e,o,n,0);const d=o[f];if(0>=d&&0>t||d>=u&&t>0)return a.raw+=r,void(l&&(n.overscrollRef.current[e]=c(a.raw,e),n.triggerUpdate()));const m=s(o[f]+t,0,u);k(e,o,n,m)};if("thumb"===n.clickedObject.current&&"slider"!==n.type){const r=m*t+a[e].rest,n=Math.trunc(r);return a[e].rest=r-n,void p(n,m,!1)}if("slider"===n.type&&(w[e]+=m),"wrapp"===n.clickedObject.current)return void p(m/r[h],u[e],!0);const g=o[f];if(n.sliderElSize&&Math.abs(w[e])<n.sliderElSize[i?0:1])return;const y=e=>{const t=o[i?"clientWidth":"clientHeight"]+n.gap[h];return t*(Math.floor(Math.max(0,g)/t)+e)},x=m>0&&g+n.sizeLocal[h]<n.wrapElWH[h]?y(1):0>m&&g>0?y(-1):null;w[e]=0,n.smoothScroll(x,e,10)};function j(e){y.stop(),["x","y"].forEach((t=>{e.rafScrollAnim.cancel(),r.cancelTask("smoothScrollBlock"+t)}));const t=e.scrollElement;if(!t)return;e.scrollStateRef.targetScrollX=t.scrollLeft,e.scrollStateRef.targetScrollY=t.scrollTop,M={x:0,y:0,t:0,distX:0,distY:0};const n=[t.scrollWidth,t.scrollHeight],o=["scroll","slider"].includes(e.type)?function(e){const t=e.getBoundingClientRect();return[t.width/e.clientWidth,t.height/e.clientHeight]}(t):[];let i=1;if("thumb"===e.clickedObject.current&&e.axisFromAtr){const t="x"===e.axisFromAtr?0:1,r=(e.sizeLocal[t]-e.scrollBarEdge[t]-e.thumbSize)*o[t];i=e.maxScrollSize[t]/r,Number.isFinite(i)&&i>0||(i=1)}E(e.clickedObject.current,e.target,t,"start"),b?.abort();const l=new AbortController;b=l;const{signal:c}=l;document.addEventListener("pointermove",(t=>{(t=>{let r;if("thumb"===e.clickedObject.current&&"slider"===e.type){const t=e.target?.closest(".ms-slider");if(!t)return;const n=r=>{const n=t.getBoundingClientRect();return Math.round(("x"===r?n.width:n.height)/e.objLengthPerSize["x"===r?0:1])};r=[n("x"),n("y")]}!function(e){const t=e.direction||"y";"hybrid"===t?["wrapp","slider"].includes(e.clickedObject.current)?["x","y"].forEach((t=>L(t,e.thumbRatio,e.visualDiff,e))):e.axisFromAtr&&L(e.axisFromAtr,e.thumbRatio,e.visualDiff,e):L(e.axisFromAtr?e.axisFromAtr:t,e.thumbRatio,e.visualDiff,e);const r={x:e.event.clientX,y:e.event.clientY};S&&(S.x.value=r.x,S.y.value=r.y)}({...e,event:t,wrapElWH:n,visualDiff:o,thumbRatio:i,sliderElSize:r})})(t)}),{signal:c});const a=t=>{e.isDraggingRef.current=!1,function(e){b?.abort();const t=e.scrollElement;if(t){if(E(e.clickedObject.current,e.target,t,"end"),"slider"===e.type&&"thumb"!==e.clickedObject.current){const r=w,n=(r,n)=>{const o="x"===r,i=o?e.maxScrollSize[0]:e.maxScrollSize[1],l=t[o?"scrollLeft":"scrollTop"],s=o?e.gap[0]:e.gap[1],c=t[o?"clientWidth":"clientHeight"]+s,a=(Math[n?n>0?"floor":"ceil":"round"](l/c)+(n??0))*c;a>i||0>a||e.smoothScroll(a,r,e.duration)},o=(e,t)=>{Math.abs(t)>20?n(e,t>0?1:-1):n(e)};0===r.x&&0===r.y?"hybrid"===e.direction?["x","y"].forEach((e=>o(e,r[e]))):o(e.direction,r[e.direction]):Object.entries(r).forEach((([e,t])=>{0!==t&&o(e,t)}))}if(e.isTouched&&"scroll"===e.type&&"slider"!==e.clickedObject.current){const r=r=>{const n=M[r]*e.thumbRatio,o="x"===r?M.distX:M.distY;80>performance.now()-M.t&&Math.abs(n)>.05&&o>12&&function({el:e,axis:t,velocity:r,rafSchedule:n}){const o=Math.sign(r);let i=Math.abs(r);i=Math.pow(i,.92),.2>i&&(i=.2),r=i*o;const l="y"===t?"scrollTop":"scrollLeft",c="y"===t?e.scrollHeight-e.clientHeight:e.scrollWidth-e.clientWidth;let a=performance.now();const u=()=>{const t=performance.now(),o=t-a;if(a=t,.02>Math.abs(r*=Math.exp(-.0025*o)))return;let i=e[l]+r*o;(0>i||i>c)&&(r*=.4,i=s(i,0,c)),e[l]=i,n("step",u)};n("step",u)}({el:t,axis:r,velocity:"thumb"===e.clickedObject.current?n:-n,rafSchedule:e.rafScrollAnim.schedule})};"hybrid"===e.direction?"wrapp"===e.clickedObject.current?["x","y"].forEach((e=>r(e))):r(e.axisFromAtr):r(e.axisFromAtr?e.axisFromAtr:e.direction)}S=null,0!==e.overscrollRef.current.x&&x(e.overscrollRef,"x",e.triggerUpdate),0!==e.overscrollRef.current.y&&x(e.overscrollRef,"y",e.triggerUpdate),e.clickedObject.current=null,M={x:0,y:0,t:0,distX:0,distY:0},v={x:0,y:0},w={x:0,y:0},e.triggerUpdate()}}({...e,event:t,thumbRatio:i})};document.addEventListener("pointerup",a,{signal:c}),document.addEventListener("pointercancel",a,{signal:c})}function R(e,t){return e>t?Math.floor(e/t):1}const A=new WeakMap;function z(e,t,r,n,o){const i=(e,t)=>"full"===e?("x"===t?r[0]:r[1])-("x"===t?n:o):e;if("hybrid"!==t&&!Array.isArray(e)){const r=i(e,t)+"px";return"x"===t?{minWidth:r}:{minHeight:r}}let l,s;return Array.isArray(e)?[l,s]=e:l=s=e,{minWidth:i(l,"x")+"px",minHeight:i(s,"y")+"px"}}const T=e=>e?"start"===e?"flex-start":"center"===e?"center":"flex-end":void 0;function C(e,t,r=0,n=0){return o=>{let i=!1;const l={width:(o.width??0)-r,height:(o.height??0)-n},s=0===l.width&&0===l.height;s&&!i&&(i=!0),e.current?.width===l.width&&e.current?.height===l.height||s&&i||(e.current=l,t())}}const F=()=>"undefined"!=typeof window&&(window.matchMedia?.("(pointer: coarse)").matches??!1);function O(e,t,r){return t?s(Math.round(e/t*e),r,e):0}function N(e,t,r,n){return t?s(e/t*(r-n),0,r-n):0}function I(){let e=null;const t=new Map;return{schedule:(r,n)=>{t.set(r,n),null===e&&(e=requestAnimationFrame((()=>{e=null;const r=Array.from(t.values());t.clear(),r.forEach((e=>e()))})))},cancel:()=>{null!==e&&(cancelAnimationFrame(e),e=null,t.clear())}}}const Y=e=>{if(null==e)return[];if(t.isValidElement(e)){const r=e;return r.type===t.Fragment?t.Children.toArray(r.props.children).flatMap(Y):[r]}return[e]},H=e=>{const t=e.lastIndexOf(":$");return-1!==t?e.slice(t+2).replace(/=0/g,"=").replace(/=2/g,":"):e.startsWith(".$")?e.slice(2).replace(/=0/g,"=").replace(/=2/g,":"):e},W=40,X="ms-under-drag";let $,B=null,P=!1;const D={x:0,y:0},q={x:0,y:0};let V=!1,U=null,K="",_=null,G=null,Z=null;const J=I(),Q=()=>{G&&G.removeAttribute(X),U=null,G=null,_=null,K="",Z=null};function ee(e,t,r,n,o,i){const l=e-t,s=r-e;return W>l&&n>0?{dir:-1,distance:l}:W>s&&i>n+o?{dir:1,distance:s}:null}function te(e){const t=s((W-Math.abs(e))/W,0,1,!1);return t*t*20|0}function re(){if(!U)return;const{parent:e,element:t,direction:r}=U,n=t.getBoundingClientRect(),o=q.x,i=q.y;if(o<n.left-W||o>n.right+W||i<n.top-W||i>n.bottom+W)return void Q();let l=null,s=null,c=0,a=0;const u="x"!==r?ee(i,n.top,n.bottom,t.scrollTop,t.clientHeight,t.scrollHeight):null;u&&(l=-1===u.dir?"top":"bottom",a=te(u.distance)*u.dir);const d="y"!==r?ee(o,n.left,n.right,t.scrollLeft,t.clientWidth,t.scrollWidth):null;d&&(s=-1===d.dir?"left":"right",c=te(d.distance)*d.dir),K=[l,s].filter(Boolean).join(" "),K!==Z&&(e.setAttribute(X,K),Z=K),(c||a)&&t.scrollBy(c,a),J.schedule("autoScrollLoop",re)}function ne(e){e instanceof DragEvent&&0===e.buttons?oe():q.x===e.clientX&&q.y===e.clientY||(q.x=e.clientX,q.y=e.clientY,J.schedule("onMove",(()=>{if(!V){const e=q.x-D.x,t=q.y-D.y;if(10>Math.hypot(e,t))return;V=!0}const e=document.elementFromPoint(q.x,q.y);if(!e)return;const t=e.closest("[morph-scroll]");if(!t&&!U)return void Q();const r=t?le.get(t):U;r&&(U=r,_!==r.element&&(G&&G!==r.parent&&G.removeAttribute(X),_=r.element,G=r.parent,G.setAttribute(X,K),Z=K,re()))})))}function oe(){B?.abort(),B=null,V=!1,J.cancel(),Q()}function ie(e){const t=e instanceof PointerEvent;if(t&&!e.target.closest("[ms-custom-drag]"))return;D.x=e.clientX,D.y=e.clientY,B?.abort();const r=new AbortController;B=r;const{signal:n}=r;t?(document.addEventListener("pointermove",ne,{signal:n}),document.addEventListener("pointerup",oe,{signal:n})):(document.addEventListener("dragover",ne,{signal:n}),document.addEventListener("dragend",oe,{signal:n}),document.addEventListener("drop",oe,{signal:n}),document.addEventListener("pointerdown",oe,{signal:n}),window.addEventListener("blur",oe,{signal:n}))}const le=new Map;const se=({className:o,children:d,type:f="scroll",direction:y="y",scrollPosition:x,onScrollValue:b,isScrolling:v,onRenderedKeysChange:w,size:M,objectsSize:S,crossCount:E,gap:k,wrapperMargin:L,wrapperMinSize:W,wrapperAlign:X,elementsAlign:D,elementsDirection:q="row",edgeGradient:V,progressTrigger:U={wheel:!0},progressReverse:K=!1,scrollBarOnHover:_=!1,scrollBarEdge:G,thumbMinSize:Z,render:J,emptyElements:Q,suspending:ee=!1,fallback:te,dragScroll:re})=>{const ne=function(){const[,e]=t.useState({});return t.useCallback((()=>{e({})}),[])}(),oe=function(){const e=t.useRef(null);return null===e.current&&(e.current=""+l++),e.current}(),se=I(),ce=()=>se.schedule("triggerUpdate",ne),ae=I();if(!M)throw Error('prop "size" is not provided'+("\n morph-scroll "+oe));Object.keys(U).length,"none"===S||Array.isArray(S)&&("none"===S[0]||S[1]);const ue=t.useRef(null),de=t.useRef(null),me=t.useRef(null),fe=t.useRef(null),he=t.useRef(new Set),pe=t.useRef(F()),ge=t.useRef(!0),ye=t.useRef(null),xe=t.useRef({loaded:new Set,empty:new Set}),be=t.useRef({targetScrollY:0,targetScrollX:0,animating:!1,animationFrameId:0}),ve=t.useRef(!1),we=t.useRef(!1),Me=t.useRef(function(e=2){let t=0,r=0,n=null,o=null;return{update(i,l){const s=i-t,c=l-r;Math.abs(s)>e&&(n=s>0?"right":"left",t=i),Math.abs(c)>e&&(o=c>0?"down":"up",r=l)},reset(){n=null,o=null},get:()=>({x:n,y:o})}}()),Se=t.useRef({x:null,y:null}),Ee=t.useRef({x:0,y:0}),ke=t.useRef(!1),Le=t.useRef(null),je=t.useRef(w);function Re(){return t.useRef({width:0,height:0})}const Ae=Re(),ze=Re(),Te=Re(),[Ce,Fe,Oe,Ne,Ie,Ye,He,We,Xe,$e,Be]=function(...e){const r=new WeakMap,n=e=>{if(null===e)return 1;if("boolean"==typeof e)return e?2:3;if("number"==typeof e||"bigint"==typeof e)return 0|+e;if("string"==typeof e){let t=0;for(let r=0;r<e.length;r++)t=31*t+e.charCodeAt(r)>>>0;return t}if(void 0===e)return 4;if("function"==typeof e)return 5;if(t.isValidElement(e))return 6;if(Array.isArray(e)){let t=0;for(let r=0;r<e.length;r++)t=31*t+n(e[r])>>>0;return t}if(e instanceof Set)return Array.from(e).map(n).sort(((e,t)=>e-t)).reduce(((e,t)=>31*e+t>>>0),0);if(e instanceof Map)return Array.from(e.entries()).map((([e,t])=>31*n(e)+n(t)>>>0)).sort(((e,t)=>e-t)).reduce(((e,t)=>31*e+t>>>0),0);if("object"==typeof e&&null!==e){if(r.has(e))return r.get(e);const t=Object.entries(e).sort((([e],[t])=>e.localeCompare(t))).map((([,e])=>n(e))).reduce(((e,t)=>31*e+t>>>0),0);return r.set(e,t),t}return 7};return e.map(n)}(x,J,M,S,Q,W,X,k,U,xe.current.empty,G),Pe=t.useMemo((()=>{let e=[null],t=200,r=null;if(null!=x)if("number"==typeof x||"end"===x)e=[x,x];else if(Array.isArray(x))e=x;else if("object"==typeof x){const n=x.value;"number"==typeof n||"end"===n?e=[n,n]:Array.isArray(n)&&(e=n),t=x.duration??200,r=x.updater??null}return{value:e,duration:t,updater:r}}),[Ce]),De={color:null,size:40},qe=t.useMemo((()=>"object"==typeof V?{...De,...V}:"string"==typeof V?{color:V,size:40}:De),[V]),Ve=t.useMemo((()=>{const e=U.arrows,r={size:40,contentReduce:!0,loop:!1};return t.isValidElement(e)?{...r,element:e}:"object"==typeof e&&null!==e?{...r,...e}:r}),[Xe]),Ue=t.useMemo((()=>t.Children.toArray(d).flatMap(Y)),[d]),Ke=t.useMemo((()=>Ue.map((e=>t.isValidElement(e)&&e.key?e.key+"":null)).filter((e=>null!==e)).filter((e=>!("clear"===Q||Q&&"object"==typeof Q&&"mode"in Q&&"clear"===Q.mode)||!xe.current.empty?.has(e)))),[d,Ie,$e]),[_e,Ge,Ze,Je]=L?n(L):[0,0,0,0],Qe=_e+Ze,et=Je+Ge,tt=t.useMemo((()=>"number"==typeof k?[k,k]:Array.isArray(k)?[k[1]??0,k[0]??0]:[0,0]),[k]),rt=t.useMemo((()=>{const e={type:void 0,rootMargin:0,stopLoadOnScroll:!1,trackVisibility:!1};if("string"==typeof J)return{...e,type:J};if("object"==typeof J&&null!==J){const{type:t,rootMargin:r=e.rootMargin,stopLoadOnScroll:n=e.stopLoadOnScroll,trackVisibility:o=e.trackVisibility}=J;return{type:t,rootMargin:r,stopLoadOnScroll:n,trackVisibility:o}}return e}),[Fe]),nt=t.useMemo((()=>n(rt.rootMargin)),[rt.rootMargin,y]),ot=t.useMemo((()=>{const[e,t]=Array.isArray(M)?M:"number"==typeof M?[M,M]:[Ae.current.width,Ae.current.height];if(!U.arrows||!Ve.size||!Ve.contentReduce)return[e,t,e,t];const r=2*Ve.size;let n=e,o=t;return"x"===y?n=e-r:"y"===y?o=t-r:"hybrid"===y&&(n=e-r,o=t-r),[n,o,e,t]}),[Oe,Xe,y,Ve,Ae.current.height,Ae.current.width]),it="x"===y?ot[0]:ot[1],lt=t.useMemo((()=>{if(!G)return[0,0];if("number"==typeof G){const e=2*G;return[e,e]}if(Array.isArray(G)){const[e=0,t]=G;return[2*e,2*(t??e)]}return[0,0]}),[Be]),st=t.useMemo((()=>[ot[0]-lt[0],ot[1]-lt[1]]),[lt.join(),ot[0],ot[1]]),ct=t.useMemo((()=>S?Array.isArray(S)?S:n(S,!0,2):[null,null]),[Ne]),at=t.useMemo((()=>{const{height:e,width:t}=Te.current,r=(e,t,r)=>t||("number"==typeof e?e:"size"===e?r:0);return[r(ct[0],t,ot[0]),r(ct[1],e,ot[1])]}),[ct.join(),y,Te.current.width,Te.current.height,ot.join()]),ut=t.useMemo((()=>J&&Q&&!te?e.jsx("div",{className:"ms-empty-element"}):te),[!!te,Fe,Ie]),dt=t.useMemo((()=>{if("none"===ct[0]||"none"===ct[1])return[1,Ke.length];const e="x"===y?1:0,t="row"===q,r=ot[e],n=at[e]?at[e]+tt[e]:0,o="hybrid"===y&&r?n*Ke.length:r,i=n?Math.floor(o/n):1;let l=E&&i>=E?"hybrid"===y?Math.ceil(i/E):E:i;const s=l>1&&l<Ke.length?Math.ceil(Ke.length/l):l<Ke.length?Ke.length:1;t||(l=Math.ceil(Ke.length/s));const c=E&&E<Ke.length,a=e=>Number.isFinite(e)&&e>0?e:1;if("hybrid"===y){const e=c?t?E:l:t?Ke.length:1,r=c?t?l:E:t?1:Ke.length;return[a(e),a(r)]}return[a(l),a(s)]}),[q,tt[0],tt[1],at[0],at[1],Ke.length,y,ot.join(),E]),mt=t.useMemo((()=>{const e=1>dt[0]?1:dt[0]*tt[1]-tt[1],t=dt["x"===y?1:0],r=Ke.length<t?Ke.length:t;return at[0]?(at[0]+tt[1])*r-tt[1]:rt.type?Te.current.width+e:ze.current.width}),[y,at[0],dt[0],dt[1],tt[1],ze.current.width,Te.current.width,rt.type,Ke.length]),ft=t.useMemo((()=>{const e=1>dt[1]?1:dt[0]*tt[0]-tt[0];return at[1]?"x"===y?(at[1]+tt[0])*dt[0]-tt[0]:(at[1]+tt[0])*dt[1]-tt[0]:rt.type?Te.current.height+e:ze.current.height}),[y,at[1],dt[0],dt[1],tt[0],ze.current.height,Te.current.height,rt.type]),ht=t.useMemo((()=>ft+Qe),[ft,Qe]),pt=t.useMemo((()=>mt+et),[mt,et]),gt="x"===y?pt:ht,yt=t.useMemo((()=>[Math.max(0,pt-ot[0]),Math.max(0,ht-ot[1])]),[ot.join(),ht,pt]),xt="x"===y?me.current?.scrollLeft||0:me.current?.scrollTop||0,bt=xt>1&&!0,vt=gt>Math.round(xt+it);let wt=!1,Mt=!1;"hybrid"===y&&(wt=(me.current?.scrollLeft||0)>1&&!0,Mt=Math.round((me.current?.scrollLeft||0)+ot[0])<pt);const St=t.useMemo((()=>Z??30),[Z]),Et=t.useCallback((e=>U.progressElement&>?"x"===e?O(ot[0]-lt[0],pt,St):O(ot[1]-lt[1],ht,St):0),[Xe,gt,ot[0],ot[1],pt,St,lt.join()]),kt=t.useMemo((()=>({x:"y"!==y?Et("x"):0,y:"x"!==y?Et("y"):0})),[Et,y]),Lt=t.useMemo((()=>({w:ot[0]?pt-ot[0]:pt,h:ot[1]?ht-ot[1]:ht})),[pt,ht,ot[0],ot[1]]),jt={x:"y"!==y?N(me.current?.scrollLeft||0,Lt.w,st[0],kt.x):0,y:"x"!==y?N(me.current?.scrollTop||0,Lt.h,st[1],kt.y):0},Rt=t.useMemo((()=>{if(!rt.type)return[{top:0,bottom:0,left:0,right:0}];let e=0;const t="x"===y,r="row"===q,n=t&&!r||!t&&r,o=at[0]+tt[1],i=at[1]+tt[0],l=new Set,s=n?dt[0]:dt[1],c=at[r?0:1],a=tt[r?1:0];for(let e=Math.floor((Ke.length-1)/s)*s;e<Ke.length;e++)l.add(e);const u=s-l.size,d=u>0?(c+a)*u:0;return"center"===D?e=Math.round(d/2):"end"===D&&(e=d),Ke.map(((t,s)=>{const c=n?s%dt[0]:Math.floor(s/dt[1]),a=n?Math.floor(s/dt[0]):s%dt[1];let u,d;"x"===y?(u=a,d=c):(u=c,d=a);const m=l.size>0&&l.has(s),f=(m&&!r?e:0)+i*d,h=(m&&r?e:0)+o*u;return{top:f,left:h,bottom:f+at[1],right:h+at[0]}}))}),[at[0],at[1],tt[0],tt[1],D,Ke.length,dt[0],dt[1],rt.type,q,y]),At=t.useMemo((()=>ot?.length&&X?function(e,t,r,n){const[o,i="start"]="string"==typeof e?[e,e]:e,l={display:"flex"};return t[0]>r&&(l.justifyContent=T(o)),t[1]>n&&(l.alignItems=T(i)),l}(X,ot,pt,ht):{}),[X,ot.join(),ht,pt]),zt=t.useMemo((()=>[R(pt,ot[0]),R(ht,ot[1])]),[pt,ht,ot.join()]),Tt=t.useMemo((()=>"x"===y?zt[0]:zt[1]),[y,zt[0],zt[1]]),Ct=t.useCallback(C(Ae,ce),[]),Ft=t.useCallback(C(ze,ce,et,Qe),[et,Qe]),Ot=t.useCallback(C(Te,ce),[]),Nt=t.useCallback(((e,t,n)=>{const o=me.current;return o&&null!==e?async function(e,t,n,o,i,l){const c="y"===e,a=c?"scrollTop":"scrollLeft",u=c?l[1]:l[0],d=s(o,0,u),m=s(t[a],0,u);if(m!==d)return null===n?(await async function(e){for(;e.scrollHeight<=e.clientHeight&&e.scrollWidth<=e.clientWidth;)await new Promise((e=>requestAnimationFrame(e)))}(t),void(t[a]=o)):void r.setLockTask((()=>{const e=performance.now(),r=()=>{const o=performance.now(),l=Math.min((o-e)/n,1),c=s(m+(d-m)*l,0,u);t[a]=c,1>l&&c!==d&&i("smoothScroll",r)};i("smoothScroll",r)}),n,"smoothScrollBlock"+e)}(t,o,ge.current?null:n,e,ae.schedule,yt):null}),[yt.join()]),It=t.useMemo((()=>{const e={margin:L?`${_e}px ${Ge}px ${Ze}px ${Je}px`:"",height:ct[1]&&"none"!==ct[1]?ft+"px":"fit-content",width:ct[0]&&"none"!==ct[0]?mt+"px":"fit-content",...k&&!rt.type&&{gap:`${tt[0]}px ${tt[1]}px`},...W&&z(W,y,ot,et,Qe),...("hybrid"===y||"x"===y)&&{flexShrink:0}};if(rt.type)return{...e,position:"relative"};const t=1===dt[0]?"y"===y?"column":"row":q,r=ct[0]&&"none"!==ct[0]&&ct[1]&&"none"!==ct[1]?"wrap":void 0;return{...e,display:"flex",flexDirection:t,flexWrap:r,justifyContent:T(D)}}),[L,He,Ye,[_e,Ge,Ze,Je,et,Qe,tt[0],tt[1]].join(),ot.join(),We,ct[1],ft,mt,We,rt.type,y,dt[0],q,D]),Yt=t.useCallback(((e,t,r)=>{pe.current=F();const n=t.target;if(n.closest('\n [ms-custom-drag], [draggable="true"], [contenteditable],\n input, textarea, select, button, a\n '))return;let o=null;r&&(o=n.closest("scroll"===f?".ms-bar":".ms-slider")?.getAttribute("data-direction")),ye.current=e,j({scrollElement:me.current,target:n,clickedObject:ye,scrollStateRef:be.current,type:f,triggerUpdate:ce,direction:y,smoothScroll:Nt,sizeLocal:[ot[0],ot[1]],thumbSize:"x"===o?kt.x:kt.y,axisFromAtr:o,duration:Pe.duration,scrollBarEdge:lt,rafScrollAnim:ae,isTouched:pe.current,gap:tt,overscrollRef:Ee,objLengthPerSize:zt,isDraggingRef:ke,maxScrollSize:yt})}),[y,f,ot.join(),Pe.duration,Nt,lt.join(),kt.x,kt.y,tt.join(),zt,yt.join()]),Ht=t.useCallback((e=>{Yt("thumb",e,!0)}),[Yt]),Wt=t.useCallback((e=>{me.current&&(({arrowType:e,scrollElement:t,wrapSize:r,scrollSize:n,smoothScroll:o,duration:i,loop:l,gap:s})=>{const c=r[0],a=r[1],u=t.scrollTop,d=t.scrollLeft,m=(e,r,n)=>{const l=n?((e,t)=>"x"===e?t>0?0:c:t>0?0:a)(e,r):((e,r)=>{const n="x"===e,o=n?d:u,i=n?s[0]:s[1],l=t[n?"clientWidth":"clientHeight"]+i;return l*(Math.floor(Math.max(0,o)/l)+r)})(e,r);o(l,e,i)};switch(e){case"top":u>0?m("y",-1):l&&m("y",-1,!0);break;case"left":d>0?m("x",-1):l&&m("x",-1,!0);break;case"right":d+n[0]<c?m("x",1):l&&m("x",1,!0);break;case"bottom":u+n[1]<a?m("y",1):l&&m("y",1,!0)}})({arrowType:e,scrollElement:me.current,wrapSize:[pt,ht],scrollSize:ot,smoothScroll:Nt,duration:Pe.duration,loop:Ve.loop,gap:tt})}),[ot.join(),pt,ht,Pe.duration,Nt,Ve.loop,tt[0],tt[1]]),Xt=t.useCallback((()=>{"scroll"!==f&&ot[0]&&ot[1]&&de.current&&me.current&&he.current.size&&((e,t,r,n)=>{[...t].forEach(((t,o)=>{let i=A.get(t);const l=0===o?r:"x",s="x"===l?0:1;if(i&&i.elements.length===n[s]||(i={elements:Array.from(t.querySelectorAll(".ms-slider-element")),lastIndex:-1},A.set(t,i)),!i.elements.length)return;const c="x"===l?e.scrollLeft:e.scrollTop,a="x"===l?e.clientWidth:e.clientHeight,u=Math.floor((c+a/2)/a);u!==i.lastIndex&&(-1!==i.lastIndex&&i.elements[i.lastIndex]?.classList.remove("active"),i.elements[u]?.classList.add("active"),i.lastIndex=u)}))})(me.current,he.current,y,zt)}),[ot.join(),y,f,zt.join()]),$t=t.useCallback((e=>{if(e){const o=(n=fe.current)?Array.from(n.children).flatMap((e=>{if(!(e instanceof HTMLElement))return[];const t=e.getAttribute(c);return t?[H(t)]:[]})):[];Le.current&&(t=Le.current,r=o,t.length===r.length&&t.every(((e,t)=>e===r[t])))||(Le.current=o,e(o))}var t,r,n}),[]),Bt=t.useCallback((()=>{fe.current&&((e,t,r,n)=>{const o=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>e instanceof Element&&e.hasAttribute(c)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});let i=o.nextNode();for(;i;){const e=i,r=e.getAttribute(c);if(r){const o=0===e.children.length;o&&(t.current.empty||(t.current.empty=new Set),t.current.empty.add(r)),"virtual"===n&&o||t.current.loaded.add(r)}i=o.nextNode()}r()})(fe.current,xe,ce,rt.type)}),[Fe]),Pt=t.useCallback((e=>{"object"==typeof Q&&"clickTrigger"in Q&&void 0!==Q.clickTrigger&&((e,t,n)=>{const{selector:o,delay:i=0}="string"==typeof t?{selector:t}:t,l=e.target;if(!l.closest(o))return;const s=l.closest(`[${c}]`);s?.classList.add("remove"),r.setTask((()=>{s?.classList.remove("remove"),n()}),i)})(e,Q.clickTrigger,Bt)}),[Ie,Bt]),Dt=t.useCallback((e=>{r.cancelTask("removeHover");const t=de.current,n=ue.current,o=me.current;if(!t||!n||!o)return;if(Pe.value.includes("end")){const{scrollLeft:t,scrollTop:r}=e.currentTarget;Me.current.update(t,r)}b?.(o.scrollLeft,o.scrollTop);const i=t.querySelectorAll("scroll"===f?".ms-bar":".ms-slider");_&&i.length>0&&!ve.current&&i.forEach((e=>{e.classList.contains("hover")||g(e)})),ve.current=!0,v?.(!0),r.setTask((()=>{Me.current.reset(),ve.current=!1,v?.(!1),rt.type&&Bt(),_&&i.length>0&&!ye.current&&i.forEach((e=>{r.setTask((()=>{e.hasAttribute("ms-manual-hover")||p(e)}),1e3,"removeHover")}))}),200,"isScrolling"),r.setTask((()=>$t(je.current)),"raf","onRenderedKeysChange"),se.schedule("sliderCheckLocal",(()=>{"scroll"!==f&&Xt(),ne()}))}),[b,v,f,Xt,Bt,_,rt.type]),qt=t.useCallback((e=>{if(we.current)return;const t="object"==typeof U.wheel&&"string"==typeof U.wheel.changeDirectionKey?U.wheel.changeDirectionKey:"KeyX";e.code!==t||"hybrid"!==y||we.current||(e.stopPropagation(),we.current=!0,ce())}),[y,Xe]),Vt=t.useCallback((e=>{we.current&&(e.stopPropagation(),we.current=!1,ce())}),[]);t.useEffect((()=>{if($t(je.current),pe.current||"hybrid"!==y)return;const e=fe.current,t=me.current;return e&&t?(e.clientWidth+et>t.clientWidth&&e.clientHeight+Qe>t.clientHeight&&(t.addEventListener("keydown",qt),t.addEventListener("keyup",Vt)),()=>{t.removeEventListener("keydown",qt),t.removeEventListener("keyup",Vt)}):void 0}),[y,Xe,Oe,Ne,Ke.join(),et,Qe]),t.useEffect((()=>{Q&&rt.type&&Bt()}),[Ie,rt.type,Bt,Ke.length]),t.useEffect((()=>{if(pe.current)return;const e=me.current,t=fe.current;if(!e||!t)return;const r="hybrid"===y&&"object"==typeof U.wheel&&U.wheel.changeDirection?"x":y,n="hybrid"===y&&ft+Qe<=ot[1]||we.current?["hybrid","y"].includes(r)?"x":"y":r,o=t=>{t.preventDefault(),a(t,e,yt,be.current,n)};return U.wheel&&e.addEventListener("wheel",o,{passive:!1}),()=>{e.removeEventListener("wheel",o)}}),[y,Xe,ft,ot[1],Qe,we.current,yt.join()]),t.useEffect((()=>{se.schedule("smoothScrollLocal",(()=>{("hybrid"===y?["x","y"]:[y]).forEach((e=>{const t=Pe.value["x"===e?0:1];if("end"===t){if(Me.current.get()[e]===("x"===e?"left":"up"))return;Nt("x"===e?Lt.w:Lt.h,e,Pe.duration)}else"number"==typeof t&&Se.current[e]!==t&&(Se.current[e]=t,Nt(t,e,Pe.duration))}))}))}),[y,Ce,Lt.w,Lt.h,Pe.value.join()]),t.useEffect((()=>{const e=be.current.animationFrameId;return(rt.type||v)&&v&&v(!1),requestAnimationFrame((()=>ge.current=!1)),()=>{e&&cancelAnimationFrame(e),be.current.animationFrameId&&cancelAnimationFrame(be.current.animationFrameId),ae.cancel()}}),[]),t.useEffect((()=>{if(!re)return;const e=ue.current,t=me.current;if(!e||!t)return;const r={parent:e,element:t,direction:y};return function(e){le.set(e.parent,e),1===le.size&&function(){if(P)return;$=new AbortController;const{signal:e}=$;document.addEventListener("pointerdown",ie,{signal:e}),document.addEventListener("dragstart",ie,{signal:e}),P=!0}()}(r),()=>{!function(e){le.delete(e.parent),0===le.size&&P&&($?.abort(),B?.abort(),P=!1)}(r)}}),[re,y]),t.useEffect((()=>{const e=me.current;if(!e)return;const t=e=>{Yt("wrapp",e)};if(U.content||!U.content&&pe.current&&U.wheel){if(!0===U.progressElement)return;e.addEventListener("pointerdown",t)}return()=>{e.removeEventListener("pointerdown",t)}}),[Xe,Yt]),t.useEffect((()=>{const e=de.current;if(!e||!_)return;if(!he.current.size)return;const t=e=>{"mouseenter"===e.type&&document.removeEventListener("mouseup",t),"mouseleave"===e.type&&ye.current?document.addEventListener("mouseup",t):Array.from(he.current).forEach((t=>{(({el:e,event:t,isScrolling:r})=>{const n=e=>{if(["mouseleave","mouseup","pointerup","pointercancel"].includes(t.type)){if(e.removeAttribute("ms-manual-hover"),r?.current)return;p(e)}else e.setAttribute("ms-manual-hover",""),g(e)};Array.isArray(e)?e.map((e=>n(e))):n(e)})({el:t,event:e,isScrolling:ve})}))},r=(t,r)=>{pe.current?(Array.from(he.current).forEach((e=>e[t]("pointerdown",r))),document[t]("pointerup",r),document[t]("pointercancel",r)):(e[t]("mouseenter",r),e[t]("mouseleave",r))};return r("addEventListener",t),()=>{r("removeEventListener",t)}}),[_,f,y,he.current.size]),t.useEffect((()=>{"scroll"!==f&&se.schedule("sliderCheckLocal",Xt)}),[f,Xt,ot.join()]);const Ut=t.useCallback(((r,n,o,i,l)=>{const s={width:at[0]?at[0]+"px":void 0,height:at[1]?at[1]+"px":void 0,...rt.type&&{position:"absolute",transform:`translate(${o}px, ${n}px)`},..."number"==typeof l&&{"--content-visibility":l}},a=ee?e.jsx(t.Suspense,{fallback:ut,children:i}):i;return e.jsx("div",{[c]:""+r,className:"ms-object-box",style:s,onClick:Q?Pt:void 0,children:a},r)}),[ee,!!ut,at[0],at[1],Fe,Ie,dt[0],Pt,rt.type]),Kt=t.useMemo((()=>{const e=new Map;return Ue.forEach((r=>{t.isValidElement(r)&&null!=r.key&&e.set(r.key+"",r)})),e}),[Ue]),_t=t.useMemo((()=>[{positionType:"x"===y?"left":"top",visibility:bt},{positionType:"x"===y?"right":"bottom",visibility:vt},..."hybrid"===y?[{positionType:"left",visibility:wt},{positionType:"right",visibility:Mt}]:[]]),[bt,vt,y,wt,Mt]),Gt=t.useMemo((()=>({width:ot[2]+"px",height:ot[3]+"px"})),[ot]),Zt=t.useMemo((()=>({x:pt>ot[0]?"scroll hidden":"hidden",y:ht>ot[1]?"hidden scroll":"hidden",hybrid:`${pt>ot[0]?"scroll":"hidden"} ${ht>ot[1]?"scroll":"hidden"}`,hide:"hidden"}[U.wheel||U.content&&"scroll"===f?y:"hide"]??"hidden")),[pt,ht,ot,Xe,y]),Jt=t.useMemo((()=>V?_t.map((({positionType:t,visibility:r})=>e.jsx(m,{edgeGradient:qe,visibility:r,edgeType:t,size:ot},"edge-"+t))):null),[V,_t,qe,Oe]),Qt=t.useMemo((()=>U.arrows?_t.map((({positionType:t,visibility:r})=>e.jsx(h,{visibility:r,arrows:Ve,arrowType:t,handleArrow:Wt,size:ot[0]},"arrow-"+t))):null),[Xe,_t,Ve,Wt,ot[0]]),er=()=>{const r=me.current?.scrollLeft||0,n=me.current?.scrollTop||0;return e.jsx("div",{className:"ms-objects-wrapper",ref:fe,style:{...It,...(Ee.current.x||Ee.current.y)&&{transform:`translate(${Ee.current.x}px, ${Ee.current.y}px)`},...ke.current&&{pointerEvents:"none"}},children:Ke.map(((o,l)=>((r,n,o,l)=>{const s=Kt.get(r),c=rt.stopLoadOnScroll&&ve.current&&!xe.current.loaded.has(r)?ut:xe.current.empty?.has(r)?Q&&"object"==typeof Q&&t.isValidElement(Q)?Q:Q&&"object"==typeof Q&&"mode"in Q&&"object"==typeof Q.mode&&"fallback"in Q.mode?Q.mode.fallback:ut:s,a="firstChild"!==ct[0]&&"firstChild"!==ct[1]||0!==n?c:e.jsx(i,{onResize:Ot,children:c});if(!rt.type)return Ut(r,0,0,a);const{top:u,bottom:d,left:m,right:f}=Rt[n],h=(e=!0)=>{const t=e?nt:[0,0,0,0],r=e=>{const r="x"===e?o:l,n=r+("x"===e?ot[0]:ot[1]),i="x"===e?m-t[3]:u-t[2],s="x"===e?f+t[1]:d+t[0],c=s-i;if(0>=c)return 0;const a=Math.min(s,n)-Math.max(i,r);return a>0?Math.round(10*Math.min(1,a/c))/10:0};if("hybrid"===y){const e=r("x"),t=r("y");return Math.min(e,t)}return r("x"===y?"x":"y")},p=h(),g=rt.trackVisibility?h(!1):null;if("lazy"===rt.type){const e=xe.current.loaded.has(r);if(p&&!e){if(ve.current&&rt.stopLoadOnScroll)return;xe.current.loaded.add(r)}return e?Ut(r,u,m,a,g):null}return p?Ut(r,u,m,a,g):(xe.current.loaded.delete(r),null)})(o,l,r,n)))})},tr=t.useMemo((()=>{const e={position:"relative",width:ot[0]+"px",height:ot[1]+"px"};return U.arrows&&Ve.contentReduce&&Ve.size&&("x"===y?e.left=Ve.size+"px":"y"===y?e.top=Ve.size+"px":(e.top=Ve.size+"px",e.left=Ve.size+"px")),e}),[ot,Xe,Ve,y]),rr=e.jsxs("div",{"morph-scroll":""+oe,className:o,ref:ue,style:Gt,children:[e.jsxs("div",{className:"ms-content",ref:de,style:{...tr,transform:"translateZ(0)",...pe.current&&{touchAction:"pinch-zoom"}},children:[e.jsx("div",{className:"ms-element",ref:me,onScroll:Dt,tabIndex:0,style:{width:"100%",height:"100%",outline:"none",...At,..."boolean"!=typeof U.progressElement||!1===U.progressElement?{scrollbarWidth:"none",overflow:"hidden"}:{overflow:Zt},...U.content&&{cursor:"grab"}},children:at[0]&&at[1]?er():e.jsx(i,{onResize:Ft,style:At,children:er()})}),Jt,U.progressElement&&!0!==U.progressElement?(()=>{const e="x"!==y;return[{shouldRender:gt>ot[e?1:0],direction:y,thumbSize:e?kt.y:kt.x,thumbSpace:e?jt.y:jt.x,objLengthPerSize:Tt,progressReverseIndex:0},{shouldRender:"hybrid"===y&&pt>ot[0],direction:"x",thumbSize:kt.x,thumbSpace:jt.x,objLengthPerSize:zt[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e))})().map((t=>{const r="boolean"==typeof K?K:K[t.progressReverseIndex];return e.jsx(u,{type:f,direction:t.direction,progressReverse:r,size:st,progressTrigger:[U,Xe],scrollBarOnHover:_,scrollBarEvent:"sliderMenu"===f?Nt:Ht,thumbSize:t.thumbSize,thumbSpace:t.thumbSpace,objLengthPerSize:t.objLengthPerSize,sliderCheckLocal:Xt,duration:Pe.duration,isTouched:pe.current,scrollStateRef:be,scrollEl:me,scrollBarsRef:he,triggerUpdate:ce,overscroll:Ee,maxScrollSize:yt},t.direction)})):null]}),Qt]});return"auto"===M?e.jsx(i,{measure:"outer",onResize:Ct,children:rr}):rr};se.displayName="MorphScroll";const ce={MorphScroll:se,ResizeTracker:i,IntersectionTracker:o};exports.IntersectionTracker=o,exports.MorphScroll=se,exports.ResizeTracker=i,exports.default=ce;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("keytask-core");const n=(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},o=({className:r,children:o,style:i,root:l,threshold:s,rootMargin:c,visibleContent:a=!1,onIntersection:u})=>{const[d,m]=t.useState(!1),f=t.useRef(null),h=t.useMemo((()=>{if(!c)return"";const e=n(c);return`${e[0]}px ${e[1]}px ${e[2]}px ${e[3]}px`}),[c]),p=t.useCallback((([e])=>{m(e.isIntersecting),u&&u({time:e.time,rootBounds:e.rootBounds,boundingClientRect:e.boundingClientRect,intersectionRect:e.intersectionRect,isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,target:e.target})}),[u]);return t.useEffect((()=>{const e=new IntersectionObserver(p,{root:l,threshold:s,rootMargin:h});return f.current&&e.observe(f.current),()=>{e.disconnect()}}),[p,l,s,h]),e.jsx("div",{"intersection-tracker":"",className:r,ref:f,style:i,children:a||d?o:null})};o.displayName="IntersectionTracker";const i=({className:r,children:n,style:o,measure:i="inner",onResize:l})=>{const s=t.useRef(null);t.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()}}),[i,l]);const c={width:"max-content",height:"max-content"},a={inner:{...c},outer:{width:"100%",height:"100%"},all:{minWidth:"100%",minHeight:"100%",...c}};return e.jsx("div",{"resize-tracker":"",className:r,ref:s,style:{willChange:"width, height",...a[i],...o},children:n})};i.displayName="ResizeTracker";let l=1;function s(e,t=0,r=1/0,n=!0){return Math.max(t,Math.min(n?Math.round(e):e,r))}const c="wrap-id";function a(e,t,r,n,o){t.matches(":focus")||t.focus(),n.animating||(n.targetScrollX=s(t.scrollLeft,0,r[0]),n.targetScrollY=s(t.scrollTop,0,r[1])),"x"===o?n.targetScrollX=s(n.targetScrollX+e.deltaY,0,r[0]):n.targetScrollY=s(n.targetScrollY+e.deltaY,0,r[1]),n.animating||(n.animating=!0,n.animationFrameId=requestAnimationFrame((function e(){let i;if("x"===o){const e=s(t.scrollLeft+.4*(n.targetScrollX-t.scrollLeft),0,r[0]);t.scrollLeft=e,i=Math.abs(e-n.targetScrollX)}else{const e=s(t.scrollTop+.4*(n.targetScrollY-t.scrollTop),0,r[1]);t.scrollTop=e,i=Math.abs(e-n.targetScrollY)}i>2.5?n.animationFrameId=requestAnimationFrame(e):("x"===o?t.scrollLeft=s(n.targetScrollX,0,r[0]):t.scrollTop=s(n.targetScrollY,0,r[1]),n.animating=!1,n.animationFrameId=null)})))}const u=({type:r,direction:n,progressReverse:o,size:i,progressTrigger:l,scrollBarOnHover:s,scrollBarEvent:c,thumbSize:u,thumbSpace:d,objLengthPerSize:m,sliderCheckLocal:f,duration:h,isTouched:p,scrollStateRef:g,scrollEl:y,scrollBarsRef:x,triggerUpdate:b,overscroll:v,maxScrollSize:w})=>{const M=t.useRef(null),S=t.useRef(null),E=["hybrid","y"].includes(n)?"y":"x",k=Math.abs(v.current[E])*(u/200),L=u-k,j=0>v.current[E]?d+k:d,R=t.useMemo((()=>{if("scroll"===r)return;const t=i["x"===E?0:1];return Array.from({length:m},((n,o)=>e.jsx("div",{className:"ms-slider-element",style:{..."sliderMenu"===r&&{cursor:"pointer"}},onClick:"sliderMenu"===r?()=>{c(t*o,E,h,f)}:void 0,children:Array.isArray(l[0].progressElement)?l[0].progressElement[o]:l[0].progressElement},o)))}),[m,r,l[1],h,f,i[0],i[1],c]),A=t.useMemo((()=>"x"!==n?"y":"x"),[n]),z=i["x"===A?0:1],T="scroll"!==r?"":u+2*d>z?"flex-end":"flex-start";t.useEffect((()=>{if(p||!l[0].wheel)return;const e=M.current,t=y.current;if(!e||!t)return;let r=e.previousElementSibling;for(;r&&!r.classList.contains("ms-element");)r=r.previousElementSibling;const n=e=>a(e,t,w,g.current,A);return e.addEventListener("wheel",n,{passive:!1}),()=>e.removeEventListener("wheel",n)}),[A]),t.useEffect((()=>{const e="slider"===r?M.current:S.current;if(!e||"sliderMenu"===r)return;const t=e=>c(e);return e.addEventListener("pointerdown",t),()=>e.removeEventListener("pointerdown",t)}),[c,r]),t.useEffect((()=>{const e=M.current;if(e)return x.current.add(e),b(),()=>{x.current.delete(e)}}),[u]);const C={position:"absolute",...s&&{opacity:0,transition:"opacity 0.2s ease-in-out"}};return e.jsx(t.Fragment,{children:"scroll"===r?e.jsx("div",{className:"ms-bar ms-"+A,ref:M,"data-direction":A,style:{...C,width:"fit-content",height:z+"px",..."x"===n?{transformOrigin:"left top",left:"50%",...o?{top:0,transform:"rotate(-90deg) translate(-100%, -50%)"}:{transform:"rotate(-90deg) translateY(-50%)"}}:{top:"50%",transform:"translateY(-50%)",...o?{left:0}:{right:0}}},children:e.jsx("div",{className:"ms-thumb",ref:S,style:{height:L+"px",transform:`translateY(${j}px)`,...l[0].progressElement&&{cursor:"grab"},display:"flex",alignItems:T},children:l[0].progressElement})}):m>1&&l[0].progressElement&&e.jsx("div",{className:"ms-slider ms-"+A,ref:M,"data-direction":A,style:{...C,display:"flex",..."slider"===r&&{cursor:"grab"},..."x"===n?{transformOrigin:"left top",left:"50%",transform:"translateX(-50%)",...o?{top:0}:{bottom:0}}:{flexDirection:"column",top:"50%",transform:"translateY(-50%)",...o?{left:0}:{right:0}}},children:R})})};u.displayName="ScrollBar";const d=({edgeGradient:t,visibility:r,edgeType:n,size:o})=>{const i={position:"absolute",[n]:0,pointerEvents:"none",transition:"opacity 0.2s ease-in-out","--edge-visibility":r?1:0,opacity:"var(--edge-visibility)",...t.color&&{background:t.color&&`linear-gradient(${["left","right"].includes(n)?"270deg, ":""}${t.color}, transparent)`},...["left","right"].includes(n)?{height:"100%",width:t.size+"px",top:0}:{width:"100%",height:t.size+"px",left:0},..."left"===n?{transform:"scaleX(-1)"}:"bottom"===n?{transform:"scaleY(-1)"}:{}},l=`ms-edge ${n}${r?"":" ms-disabled"}`;return e.jsx("div",{className:l,style:i})};d.displayName="Edge";var m=t.memo(d);const f=({visibility:r,arrows:n,arrowType:o,handleArrow:i,size:l})=>{const s=t.useRef(null),c={position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer",width:n.size+"px",...o?{[o]:0}:{},..."top"===o&&{transform:"rotate(-90deg) translateX(-100%)",transformOrigin:"left top"},..."bottom"===o&&{transform:"rotate(90deg) translateX(-100%)",transformOrigin:"left bottom"},..."left"===o&&{transform:"scaleX(-1)"},...["top","bottom"].includes(o)?{height:l+"px"}:{height:"100%",top:0}};return t.useEffect((()=>{const e=s.current;if(!e)return;const t=()=>i(o);return e.addEventListener("click",t),()=>{e.removeEventListener("click",t)}}),[i,o]),e.jsx("div",{className:`ms-arrow-box ${o}${r?" active":""}`,ref:s,style:c,children:n.element})};f.displayName="Arrow";var h=t.memo(f);const p=e=>{const t=e.getAttribute("data-direction");e.style.opacity="0",e.classList.remove("hover"),e.classList.add("leave"),r.cancelTask("remove"+t),r.setTask((()=>e.classList.remove("leave")),200,"remove"+t)},g=e=>{const t=e.getAttribute("data-direction");r.cancelTask("remove"+t),e.style.opacity="1",e.classList.remove("leave"),e.classList.add("hover")},y=function(){let e=null,t=0;const r=new Map,n=()=>{r.forEach(((e,t)=>{e()||r.delete(t)})),e=0!==r.size?requestAnimationFrame(n):null};return{start:(o,i)=>{const l=i??++t;return r.delete(l),r.set(l,o),null===e&&(e=requestAnimationFrame(n)),l},stop:t=>{void 0!==t?(r.delete(t),0===r.size&&null!==e&&(cancelAnimationFrame(e),e=null)):(r.clear(),null!==e&&(cancelAnimationFrame(e),e=null))},isRunning:e=>void 0===e?r.size>0:r.has(e)}}(),x=(e,t,r)=>{const n=e.current[t],o=performance.now();y.start((()=>{const i=performance.now(),l=Math.min((i-o)/140,1);return 1>l?(e.current[t]=n*(1-l),r(),!0):(e.current[t]=0,r(),!1)}))};let b,v={x:0,y:0},w={x:0,y:0},M={x:0,y:0,t:0,distX:0,distY:0},S=null;const E=(e,t,r,n)=>{if(!e)return;let o=null;["thumb","slider"].includes(e)?o="slider"===e?t?.closest(".ms-slider"):t:"wrapp"===e&&(o=r),((e,t)=>{if(!e)return;const r=window.matchMedia("(pointer: coarse)").matches;if("start"===t){if(!r){let e=document.getElementById("ms-cursor-lock");e||(e=document.createElement("style"),e.id="ms-cursor-lock",e.textContent="\n * {\n cursor: grabbing !important;\n user-select: none;\n }\n ",document.head.appendChild(e))}e.style.cursor="grabbing",e.classList.add("active")}else{if(!r){const e=document.getElementById("ms-cursor-lock");e&&e.remove()}e.style.cursor="grab",e.classList.remove("active")}})(o,n)},k=(e,t,r,n)=>{"x"===e?(r.scrollStateRef.targetScrollX=n,t.scrollLeft!==n&&(t.scrollLeft=n)):(r.scrollStateRef.targetScrollY=n,t.scrollTop!==n&&(t.scrollTop=n))},L=(e,t,r,n)=>{const o=n.scrollElement;if(!o)return;const i="x"===e,l={x:n.event.clientX,y:n.event.clientY};if(!l)return;const c=(e,t,r)=>{if(0===e)return 0;const o="x"===t?n.sizeLocal[0]:n.sizeLocal[1],i=.14*Math.max(600,o),l=Math.abs(e);return s(e*i/(i+(r?-l:l)),-150,150)};if(!S)return void(S={x:{value:l.x,rest:0,raw:c(n.overscrollRef.current.x,"x",!0)},y:{value:l.y,rest:0,raw:c(n.overscrollRef.current.y,"y",!0)}});const a=S,u={x:l.x-a.x.value,y:l.y-a.y.value},d=Math.abs(v[e]);if(d>2?n.isDraggingRef.current=!0:3>d&&(v[e]+=u[e]),n.isTouched){const e=performance.now();if(M.t){const t=Math.max(e-M.t,8);M={x:.8*M.x+u.x/t*.2,y:.8*M.y+u.y/t*.2,t:e,distX:(M.distX??0)+Math.abs(u.x),distY:(M.distY??0)+Math.abs(u.y)}}else M.t=e}const m="wrapp"===n.clickedObject.current?-u[e]:u[e],f=i?"scrollLeft":"scrollTop",h=i?0:1,p=(t,r,l)=>{const a=S[e],u=i?n.maxScrollSize[0]:n.maxScrollSize[1];if(!Number.isFinite(t)||!Number.isFinite(r))return void(S=null);if(0!==a.raw){const t=a.raw;return a.raw+=.6*r,l&&(n.overscrollRef.current[e]=c(a.raw,e),n.triggerUpdate()),Math.sign(a.raw)!==Math.sign(t)?(a.raw=0,void(l&&(n.overscrollRef.current[e]=0,n.triggerUpdate()))):void 0}if(0>=u)return void k(e,o,n,0);const d=o[f];if(0>=d&&0>t||d>=u&&t>0)return a.raw+=r,void(l&&(n.overscrollRef.current[e]=c(a.raw,e),n.triggerUpdate()));const m=s(o[f]+t,0,u);k(e,o,n,m)};if("thumb"===n.clickedObject.current&&"slider"!==n.type){const r=m*t+a[e].rest,n=Math.trunc(r);return a[e].rest=r-n,void p(n,m,!1)}if("slider"===n.type&&(w[e]+=m),"wrapp"===n.clickedObject.current)return void p(m/r[h],u[e],!0);const g=o[f];if(n.sliderElSize&&Math.abs(w[e])<n.sliderElSize[i?0:1])return;const y=e=>{const t=o[i?"clientWidth":"clientHeight"]+n.gap[h];return t*(Math.floor(Math.max(0,g)/t)+e)},x=m>0&&g+n.sizeLocal[h]<n.wrapElWH[h]?y(1):0>m&&g>0?y(-1):null;w[e]=0,n.smoothScroll(x,e,10)};function j(e){y.stop(),["x","y"].forEach((t=>{e.rafScrollAnim.cancel(),r.cancelTask("smoothScrollBlock"+t)}));const t=e.scrollElement;if(!t)return;e.scrollStateRef.targetScrollX=t.scrollLeft,e.scrollStateRef.targetScrollY=t.scrollTop,M={x:0,y:0,t:0,distX:0,distY:0};const n=[t.scrollWidth,t.scrollHeight],o=["scroll","slider"].includes(e.type)?function(e){const t=e.getBoundingClientRect();return[t.width/e.clientWidth,t.height/e.clientHeight]}(t):[];let i=1;if("thumb"===e.clickedObject.current&&e.axisFromAtr){const t="x"===e.axisFromAtr?0:1,r=(e.sizeLocal[t]-e.scrollBarEdge[t]-e.thumbSize)*o[t];i=e.maxScrollSize[t]/r,Number.isFinite(i)&&i>0||(i=1)}E(e.clickedObject.current,e.target,t,"start"),b?.abort();const l=new AbortController;b=l;const{signal:c}=l;document.addEventListener("pointermove",(t=>{(t=>{let r;if("thumb"===e.clickedObject.current&&"slider"===e.type){const t=e.target?.closest(".ms-slider");if(!t)return;const n=r=>{const n=t.getBoundingClientRect();return Math.round(("x"===r?n.width:n.height)/e.objLengthPerSize["x"===r?0:1])};r=[n("x"),n("y")]}!function(e){const t=e.direction||"y";"hybrid"===t?["wrapp","slider"].includes(e.clickedObject.current)?["x","y"].forEach((t=>L(t,e.thumbRatio,e.visualDiff,e))):e.axisFromAtr&&L(e.axisFromAtr,e.thumbRatio,e.visualDiff,e):L(e.axisFromAtr?e.axisFromAtr:t,e.thumbRatio,e.visualDiff,e);const r={x:e.event.clientX,y:e.event.clientY};S&&(S.x.value=r.x,S.y.value=r.y)}({...e,event:t,wrapElWH:n,visualDiff:o,thumbRatio:i,sliderElSize:r})})(t)}),{signal:c});const a=t=>{e.isDraggingRef.current=!1,function(e){b?.abort();const t=e.scrollElement;if(t){if(E(e.clickedObject.current,e.target,t,"end"),"slider"===e.type&&"thumb"!==e.clickedObject.current){const r=w,n=(r,n)=>{const o="x"===r,i=o?e.maxScrollSize[0]:e.maxScrollSize[1],l=t[o?"scrollLeft":"scrollTop"],s=o?e.gap[0]:e.gap[1],c=t[o?"clientWidth":"clientHeight"]+s,a=(Math[n?n>0?"floor":"ceil":"round"](l/c)+(n??0))*c;a>i||0>a||e.smoothScroll(a,r,e.duration)},o=(e,t)=>{Math.abs(t)>20?n(e,t>0?1:-1):n(e)};0===r.x&&0===r.y?"hybrid"===e.direction?["x","y"].forEach((e=>o(e,r[e]))):o(e.direction,r[e.direction]):Object.entries(r).forEach((([e,t])=>{0!==t&&o(e,t)}))}if(e.isTouched&&"scroll"===e.type&&"slider"!==e.clickedObject.current){const r=r=>{const n=M[r]*e.thumbRatio,o="x"===r?M.distX:M.distY;80>performance.now()-M.t&&Math.abs(n)>.05&&o>12&&function({el:e,axis:t,velocity:r,rafSchedule:n}){const o=Math.sign(r);let i=Math.abs(r);i=Math.pow(i,.92),.2>i&&(i=.2),r=i*o;const l="y"===t?"scrollTop":"scrollLeft",c="y"===t?e.scrollHeight-e.clientHeight:e.scrollWidth-e.clientWidth;let a=performance.now();const u=()=>{const t=performance.now(),o=t-a;if(a=t,.02>Math.abs(r*=Math.exp(-.0025*o)))return;let i=e[l]+r*o;(0>i||i>c)&&(r*=.4,i=s(i,0,c)),e[l]=i,n("step",u)};n("step",u)}({el:t,axis:r,velocity:"thumb"===e.clickedObject.current?n:-n,rafSchedule:e.rafScrollAnim.schedule})};"hybrid"===e.direction?"wrapp"===e.clickedObject.current?["x","y"].forEach((e=>r(e))):r(e.axisFromAtr):r(e.axisFromAtr?e.axisFromAtr:e.direction)}S=null,0!==e.overscrollRef.current.x&&x(e.overscrollRef,"x",e.triggerUpdate),0!==e.overscrollRef.current.y&&x(e.overscrollRef,"y",e.triggerUpdate),e.clickedObject.current=null,M={x:0,y:0,t:0,distX:0,distY:0},v={x:0,y:0},w={x:0,y:0},e.triggerUpdate()}}({...e,event:t,thumbRatio:i})};document.addEventListener("pointerup",a,{signal:c}),document.addEventListener("pointercancel",a,{signal:c})}function R(e,t){return e>t?Math.floor(e/t):1}const A=new WeakMap;function z(e,t,r,n,o){const i=(e,t)=>"full"===e?("x"===t?r[0]:r[1])-("x"===t?n:o):e;if("hybrid"!==t&&!Array.isArray(e)){const r=i(e,t)+"px";return"x"===t?{minWidth:r}:{minHeight:r}}let l,s;return Array.isArray(e)?[l,s]=e:l=s=e,{minWidth:i(l,"x")+"px",minHeight:i(s,"y")+"px"}}const T=e=>e?"start"===e?"flex-start":"center"===e?"center":"flex-end":void 0;function C(e,t,r=0,n=0){return o=>{let i=!1;const l={width:(o.width??0)-r,height:(o.height??0)-n},s=0===l.width&&0===l.height;s&&!i&&(i=!0),e.current?.width===l.width&&e.current?.height===l.height||s&&i||(e.current=l,t())}}const F=()=>"undefined"!=typeof window&&(window.matchMedia?.("(pointer: coarse)").matches??!1);function O(e,t,r){return t?s(Math.round(e/t*e),r,e):0}function N(e,t,r,n){return t?s(e/t*(r-n),0,r-n):0}function I(){let e=null;const t=new Map;return{schedule:(r,n)=>{t.set(r,n),null===e&&(e=requestAnimationFrame((()=>{e=null;const r=Array.from(t.values());t.clear(),r.forEach((e=>e()))})))},cancel:()=>{null!==e&&(cancelAnimationFrame(e),e=null,t.clear())}}}const Y=e=>{if(null==e)return[];if(t.isValidElement(e)){const r=e;return r.type===t.Fragment?t.Children.toArray(r.props.children).flatMap(Y):[r]}return[e]},H=e=>{const t=e.lastIndexOf(":$");return-1!==t?e.slice(t+2).replace(/=0/g,"=").replace(/=2/g,":"):e.startsWith(".$")?e.slice(2).replace(/=0/g,"=").replace(/=2/g,":"):e},W=40,X="ms-under-drag";let $,B=null,P=!1;const D={x:0,y:0},q={x:0,y:0};let V=!1,U=null,K="",_=null,G=null,Z=null;const J=I(),Q=()=>{G&&G.removeAttribute(X),U=null,G=null,_=null,K="",Z=null};function ee(e,t,r,n,o,i){const l=e-t,s=r-e;return W>l&&n>0?{dir:-1,distance:l}:W>s&&i>n+o?{dir:1,distance:s}:null}function te(e){const t=s((W-Math.abs(e))/W,0,1,!1);return t*t*20|0}function re(){if(!U)return;const{parent:e,element:t,direction:r}=U,n=t.getBoundingClientRect(),o=q.x,i=q.y;if(o<n.left-W||o>n.right+W||i<n.top-W||i>n.bottom+W)return void Q();let l=null,s=null,c=0,a=0;const u="x"!==r?ee(i,n.top,n.bottom,t.scrollTop,t.clientHeight,t.scrollHeight):null;u&&(l=-1===u.dir?"top":"bottom",a=te(u.distance)*u.dir);const d="y"!==r?ee(o,n.left,n.right,t.scrollLeft,t.clientWidth,t.scrollWidth):null;d&&(s=-1===d.dir?"left":"right",c=te(d.distance)*d.dir),K=[l,s].filter(Boolean).join(" "),K!==Z&&(e.setAttribute(X,K),Z=K),(c||a)&&t.scrollBy(c,a),J.schedule("autoScrollLoop",re)}function ne(e){e instanceof DragEvent&&0===e.buttons?oe():q.x===e.clientX&&q.y===e.clientY||(q.x=e.clientX,q.y=e.clientY,J.schedule("onMove",(()=>{if(!V){const e=q.x-D.x,t=q.y-D.y;if(10>Math.hypot(e,t))return;V=!0}const e=document.elementFromPoint(q.x,q.y);if(!e)return;const t=e.closest("[morph-scroll]");if(!t&&!U)return void Q();const r=t?le.get(t):U;r&&(U=r,_!==r.element&&(G&&G!==r.parent&&G.removeAttribute(X),_=r.element,G=r.parent,G.setAttribute(X,K),Z=K,re()))})))}function oe(){B?.abort(),B=null,V=!1,J.cancel(),Q()}function ie(e){const t=e instanceof PointerEvent;if(t&&!e.target.closest("[ms-custom-drag]"))return;D.x=e.clientX,D.y=e.clientY,B?.abort();const r=new AbortController;B=r;const{signal:n}=r;t?(document.addEventListener("pointermove",ne,{signal:n}),document.addEventListener("pointerup",oe,{signal:n})):(document.addEventListener("dragover",ne,{signal:n}),document.addEventListener("dragend",oe,{signal:n}),document.addEventListener("drop",oe,{signal:n}),document.addEventListener("pointerdown",oe,{signal:n}),window.addEventListener("blur",oe,{signal:n}))}const le=new Map;const se=({className:o,children:d,type:f="scroll",direction:y="y",scrollPosition:x,onScrollValue:b,isScrolling:v,onRenderedKeysChange:w,size:M,objectsSize:S,crossCount:E,gap:k,wrapperMargin:L,wrapperMinSize:W,wrapperAlign:X,elementsAlign:D,elementsDirection:q="row",edgeGradient:V,progressTrigger:U={wheel:!0},progressReverse:K=!1,scrollBarOnHover:_=!1,scrollBarEdge:G,thumbMinSize:Z,render:J,emptyElements:Q,suspending:ee=!1,fallback:te,dragScroll:re})=>{const ne=function(){const[,e]=t.useState({});return t.useCallback((()=>{e({})}),[])}(),oe=function(){const e=t.useRef(null);return null===e.current&&(e.current=""+l++),e.current}(),se=I(),ce=()=>se.schedule("triggerUpdate",ne),ae=I();if(!M)throw Error('prop "size" is not provided'+("\n morph-scroll "+oe));Object.keys(U).length,"none"===S||Array.isArray(S)&&("none"===S[0]||S[1]);const ue=t.useRef(null),de=t.useRef(null),me=t.useRef(null),fe=t.useRef(null),he=t.useRef(new Set),pe=t.useRef(F()),ge=t.useRef(!0),ye=t.useRef(null),xe=t.useRef({loaded:new Set,empty:new Set}),be=t.useRef({targetScrollY:0,targetScrollX:0,animating:!1,animationFrameId:0}),ve=t.useRef(!1),we=t.useRef(!1),Me=t.useRef(function(e=2){let t=0,r=0,n=null,o=null;return{update(i,l){const s=i-t,c=l-r;Math.abs(s)>e&&(n=s>0?"right":"left",t=i),Math.abs(c)>e&&(o=c>0?"down":"up",r=l)},reset(){n=null,o=null},get:()=>({x:n,y:o})}}()),Se=t.useRef({x:null,y:null}),Ee=t.useRef({x:0,y:0}),ke=t.useRef(!1),Le=t.useRef(null),je=t.useRef(w);function Re(){return t.useRef({width:0,height:0})}const Ae=Re(),ze=Re(),Te=Re(),[Ce,Fe,Oe,Ne,Ie,Ye,He,We,Xe,$e,Be]=function(...e){const r=new WeakMap,n=e=>{if(null===e)return 1;if("boolean"==typeof e)return e?2:3;if("number"==typeof e||"bigint"==typeof e)return 0|+e;if("string"==typeof e){let t=0;for(let r=0;r<e.length;r++)t=31*t+e.charCodeAt(r)>>>0;return t}if(void 0===e)return 4;if("function"==typeof e)return 5;if(t.isValidElement(e))return 6;if(Array.isArray(e)){let t=0;for(let r=0;r<e.length;r++)t=31*t+n(e[r])>>>0;return t}if(e instanceof Set)return Array.from(e).map(n).sort(((e,t)=>e-t)).reduce(((e,t)=>31*e+t>>>0),0);if(e instanceof Map)return Array.from(e.entries()).map((([e,t])=>31*n(e)+n(t)>>>0)).sort(((e,t)=>e-t)).reduce(((e,t)=>31*e+t>>>0),0);if("object"==typeof e&&null!==e){if(r.has(e))return r.get(e);const t=Object.entries(e).sort((([e],[t])=>e.localeCompare(t))).map((([,e])=>n(e))).reduce(((e,t)=>31*e+t>>>0),0);return r.set(e,t),t}return 7};return e.map(n)}(x,J,M,S,Q,W,X,k,U,xe.current.empty,G),Pe=t.useMemo((()=>{let e=[null],t=200,r=null;if(null!=x)if("number"==typeof x||"end"===x)e=[x,x];else if(Array.isArray(x))e=x;else if("object"==typeof x){const n=x.value;"number"==typeof n||"end"===n?e=[n,n]:Array.isArray(n)&&(e=n),t=x.duration??200,r=x.updater??null}return{value:e,duration:t,updater:r}}),[Ce]),De={color:null,size:40},qe=t.useMemo((()=>"object"==typeof V?{...De,...V}:"string"==typeof V?{color:V,size:40}:De),[V]),Ve=t.useMemo((()=>{const e=U.arrows,r={size:40,contentReduce:!0,loop:!1};return t.isValidElement(e)?{...r,element:e}:"object"==typeof e&&null!==e?{...r,...e}:r}),[Xe]),Ue=t.useMemo((()=>t.Children.toArray(d).flatMap(Y)),[d]),Ke=t.useMemo((()=>Ue.map((e=>t.isValidElement(e)&&e.key?e.key+"":null)).filter((e=>null!==e)).filter((e=>!("clear"===Q||Q&&"object"==typeof Q&&"mode"in Q&&"clear"===Q.mode)||!xe.current.empty?.has(e)))),[d,Ie,$e]),[_e,Ge,Ze,Je]=L?n(L):[0,0,0,0],Qe=_e+Ze,et=Je+Ge,tt=t.useMemo((()=>"number"==typeof k?[k,k]:Array.isArray(k)?[k[1]??0,k[0]??0]:[0,0]),[k]),rt=t.useMemo((()=>{const e={type:void 0,rootMargin:0,stopLoadOnScroll:!1,trackVisibility:!1};if("string"==typeof J)return{...e,type:J};if("object"==typeof J&&null!==J){const{type:t,rootMargin:r=e.rootMargin,stopLoadOnScroll:n=e.stopLoadOnScroll,trackVisibility:o=e.trackVisibility}=J;return{type:t,rootMargin:r,stopLoadOnScroll:n,trackVisibility:o}}return e}),[Fe]),nt=t.useMemo((()=>n(rt.rootMargin)),[rt.rootMargin,y]),ot=t.useMemo((()=>{const[e,t]=Array.isArray(M)?M:"number"==typeof M?[M,M]:[Ae.current.width,Ae.current.height];if(!U.arrows||!Ve.size||!Ve.contentReduce)return[e,t,e,t];const r=2*Ve.size;let n=e,o=t;return"x"===y?n=e-r:"y"===y?o=t-r:"hybrid"===y&&(n=e-r,o=t-r),[n,o,e,t]}),[Oe,Xe,y,Ve,Ae.current.height,Ae.current.width]),it="x"===y?ot[0]:ot[1],lt=t.useMemo((()=>{if(!G)return[0,0];if("number"==typeof G){const e=2*G;return[e,e]}if(Array.isArray(G)){const[e=0,t]=G;return[2*e,2*(t??e)]}return[0,0]}),[Be]),st=t.useMemo((()=>[ot[0]-lt[0],ot[1]-lt[1]]),[lt.join(),ot[0],ot[1]]),ct=t.useMemo((()=>S?Array.isArray(S)?S:n(S,!0,2):[null,null]),[Ne]),at=t.useMemo((()=>{const{height:e,width:t}=Te.current,r=(e,t,r)=>t||("number"==typeof e?e:"size"===e?r:0);return[r(ct[0],t,ot[0]),r(ct[1],e,ot[1])]}),[ct.join(),y,Te.current.width,Te.current.height,ot.join()]),ut=t.useMemo((()=>J&&Q&&!te?e.jsx("div",{className:"ms-empty-element"}):te),[!!te,Fe,Ie]),dt=t.useMemo((()=>{if("none"===ct[0]||"none"===ct[1])return[1,Ke.length];const e="x"===y?1:0,t="row"===q,r=ot[e],n=at[e]?at[e]+tt[e]:0,o="hybrid"===y&&r?n*Ke.length:r,i=n?Math.floor(o/n):1;let l=E&&i>=E?"hybrid"===y?Math.ceil(i/E):E:i;const s=l>1&&l<Ke.length?Math.ceil(Ke.length/l):l<Ke.length?Ke.length:1;t||(l=Math.ceil(Ke.length/s));const c=E&&E<Ke.length,a=e=>Number.isFinite(e)&&e>0?e:1;if("hybrid"===y){const e=c?t?E:l:t?Ke.length:1,r=c?t?l:E:t?1:Ke.length;return[a(e),a(r)]}return[a(l),a(s)]}),[q,tt[0],tt[1],at[0],at[1],Ke.length,y,ot.join(),E]),mt=t.useMemo((()=>{const e=1>dt[0]?1:dt[0]*tt[1]-tt[1],t=dt["x"===y?1:0],r=Ke.length<t?Ke.length:t;return at[0]?(at[0]+tt[1])*r-tt[1]:rt.type?Te.current.width+e:ze.current.width}),[y,at[0],dt[0],dt[1],tt[1],ze.current.width,Te.current.width,rt.type,Ke.length]),ft=t.useMemo((()=>{const e=1>dt[1]?1:dt[0]*tt[0]-tt[0];return at[1]?"x"===y?(at[1]+tt[0])*dt[0]-tt[0]:(at[1]+tt[0])*dt[1]-tt[0]:rt.type?Te.current.height+e:ze.current.height}),[y,at[1],dt[0],dt[1],tt[0],ze.current.height,Te.current.height,rt.type]),ht=t.useMemo((()=>ft+Qe),[ft,Qe]),pt=t.useMemo((()=>mt+et),[mt,et]),gt="x"===y?pt:ht,yt=t.useMemo((()=>[Math.max(0,pt-ot[0]),Math.max(0,ht-ot[1])]),[ot.join(),ht,pt]),xt="x"===y?me.current?.scrollLeft||0:me.current?.scrollTop||0,bt=xt>1&&!0,vt=gt>Math.round(xt+it);let wt=!1,Mt=!1;"hybrid"===y&&(wt=(me.current?.scrollLeft||0)>1&&!0,Mt=Math.round((me.current?.scrollLeft||0)+ot[0])<pt);const St=t.useMemo((()=>Z??30),[Z]),Et=t.useCallback((e=>U.progressElement&>?"x"===e?O(ot[0]-lt[0],pt,St):O(ot[1]-lt[1],ht,St):0),[Xe,gt,ot[0],ot[1],pt,St,lt.join()]),kt=t.useMemo((()=>({x:"y"!==y?Et("x"):0,y:"x"!==y?Et("y"):0})),[Et,y]),Lt=t.useMemo((()=>({w:ot[0]?pt-ot[0]:pt,h:ot[1]?ht-ot[1]:ht})),[pt,ht,ot[0],ot[1]]),jt={x:"y"!==y?N(me.current?.scrollLeft||0,Lt.w,st[0],kt.x):0,y:"x"!==y?N(me.current?.scrollTop||0,Lt.h,st[1],kt.y):0},Rt=t.useMemo((()=>{if(!rt.type)return[{top:0,bottom:0,left:0,right:0}];let e=0;const t="x"===y,r="row"===q,n=t&&!r||!t&&r,o=at[0]+tt[1],i=at[1]+tt[0],l=new Set,s=n?dt[0]:dt[1],c=at[r?0:1],a=tt[r?1:0];for(let e=Math.floor((Ke.length-1)/s)*s;e<Ke.length;e++)l.add(e);const u=s-l.size,d=u>0?(c+a)*u:0;return"center"===D?e=Math.round(d/2):"end"===D&&(e=d),Ke.map(((t,s)=>{const c=n?s%dt[0]:Math.floor(s/dt[1]),a=n?Math.floor(s/dt[0]):s%dt[1];let u,d;"x"===y?(u=a,d=c):(u=c,d=a);const m=l.size>0&&l.has(s),f=(m&&!r?e:0)+i*d,h=(m&&r?e:0)+o*u;return{top:f,left:h,bottom:f+at[1],right:h+at[0]}}))}),[at[0],at[1],tt[0],tt[1],D,Ke.length,dt[0],dt[1],rt.type,q,y]),At=t.useMemo((()=>ot?.length&&X?function(e,t,r,n){const[o,i="start"]="string"==typeof e?[e,e]:e,l={display:"flex"};return t[0]>r&&(l.justifyContent=T(o)),t[1]>n&&(l.alignItems=T(i)),l}(X,ot,pt,ht):{}),[X,ot.join(),ht,pt]),zt=t.useMemo((()=>[R(pt,ot[0]),R(ht,ot[1])]),[pt,ht,ot.join()]),Tt=t.useMemo((()=>"x"===y?zt[0]:zt[1]),[y,zt[0],zt[1]]),Ct=t.useCallback(C(Ae,ce),[]),Ft=t.useCallback(C(ze,ce,et,Qe),[et,Qe]),Ot=t.useCallback(C(Te,ce),[]),Nt=t.useCallback(((e,t,n)=>{const o=me.current;return o&&null!==e?async function(e,t,n,o,i,l){const c="y"===e,a=c?"scrollTop":"scrollLeft",u=c?l[1]:l[0],d=s(o,0,u),m=s(t[a],0,u);if(m!==d)return null===n?(await async function(e){for(;e.scrollHeight<=e.clientHeight&&e.scrollWidth<=e.clientWidth;)await new Promise((e=>requestAnimationFrame(e)))}(t),void(t[a]=o)):void r.setLockTask((()=>{const e=performance.now(),r=()=>{const o=performance.now(),l=Math.min((o-e)/n,1),c=s(m+(d-m)*l,0,u);t[a]=c,1>l&&c!==d&&i("smoothScroll",r)};i("smoothScroll",r)}),n,"smoothScrollBlock"+e)}(t,o,ge.current?null:n,e,ae.schedule,yt):null}),[yt.join()]),It=t.useMemo((()=>{const e={margin:L?`${_e}px ${Ge}px ${Ze}px ${Je}px`:"",height:ct[1]&&"none"!==ct[1]?ft+"px":"fit-content",width:ct[0]&&"none"!==ct[0]?mt+"px":"fit-content",...k&&!rt.type&&{gap:`${tt[0]}px ${tt[1]}px`},...W&&z(W,y,ot,et,Qe),...("hybrid"===y||"x"===y)&&{flexShrink:0}};if(rt.type)return{...e,position:"relative"};const t=1===dt[0]?"y"===y?"column":"row":q,r=ct[0]&&"none"!==ct[0]&&ct[1]&&"none"!==ct[1]?"wrap":void 0;return{...e,display:"flex",flexDirection:t,flexWrap:r,justifyContent:T(D)}}),[L,He,Ye,[_e,Ge,Ze,Je,et,Qe,tt[0],tt[1]].join(),ot.join(),We,ct[1],ft,mt,We,rt.type,y,dt[0],q,D]),Yt=t.useCallback(((e,t,r)=>{pe.current=F();const n=t.target;if(n.closest('\n [ms-custom-drag], [draggable="true"], [contenteditable],\n input, textarea, select, button, a\n '))return;let o=null;r&&(o=n.closest("scroll"===f?".ms-bar":".ms-slider")?.getAttribute("data-direction")),ye.current=e,j({scrollElement:me.current,target:n,clickedObject:ye,scrollStateRef:be.current,type:f,triggerUpdate:ce,direction:y,smoothScroll:Nt,sizeLocal:[ot[0],ot[1]],thumbSize:"x"===o?kt.x:kt.y,axisFromAtr:o,duration:Pe.duration,scrollBarEdge:lt,rafScrollAnim:ae,isTouched:pe.current,gap:tt,overscrollRef:Ee,objLengthPerSize:zt,isDraggingRef:ke,maxScrollSize:yt})}),[y,f,ot.join(),Pe.duration,Nt,lt.join(),kt.x,kt.y,tt.join(),zt,yt.join()]),Ht=t.useCallback((e=>{Yt("thumb",e,!0)}),[Yt]),Wt=t.useCallback((e=>{me.current&&(({arrowType:e,scrollElement:t,wrapSize:r,scrollSize:n,smoothScroll:o,duration:i,loop:l,gap:s})=>{const c=r[0],a=r[1],u=t.scrollTop,d=t.scrollLeft,m=(e,r,n)=>{const l=n?((e,t)=>"x"===e?t>0?0:c:t>0?0:a)(e,r):((e,r)=>{const n="x"===e,o=n?d:u,i=n?s[0]:s[1],l=t[n?"clientWidth":"clientHeight"]+i;return l*(Math.floor(Math.max(0,o)/l)+r)})(e,r);o(l,e,i)};switch(e){case"top":u>0?m("y",-1):l&&m("y",-1,!0);break;case"left":d>0?m("x",-1):l&&m("x",-1,!0);break;case"right":d+n[0]<c?m("x",1):l&&m("x",1,!0);break;case"bottom":u+n[1]<a?m("y",1):l&&m("y",1,!0)}})({arrowType:e,scrollElement:me.current,wrapSize:[pt,ht],scrollSize:ot,smoothScroll:Nt,duration:Pe.duration,loop:Ve.loop,gap:tt})}),[ot.join(),pt,ht,Pe.duration,Nt,Ve.loop,tt[0],tt[1]]),Xt=t.useCallback((()=>{"scroll"!==f&&ot[0]&&ot[1]&&de.current&&me.current&&he.current.size&&((e,t,r,n)=>{[...t].forEach(((t,o)=>{let i=A.get(t);const l=0===o?r:"x",s="x"===l?0:1;if(i&&i.elements.length===n[s]||(i={elements:Array.from(t.querySelectorAll(".ms-slider-element")),lastIndex:-1},A.set(t,i)),!i.elements.length)return;const c="x"===l?e.scrollLeft:e.scrollTop,a="x"===l?e.clientWidth:e.clientHeight,u=Math.floor((c+a/2)/a);u!==i.lastIndex&&(-1!==i.lastIndex&&i.elements[i.lastIndex]?.classList.remove("active"),i.elements[u]?.classList.add("active"),i.lastIndex=u)}))})(me.current,he.current,y,zt)}),[ot.join(),y,f,zt.join()]),$t=t.useCallback((e=>{if(e){const o=(n=fe.current)?Array.from(n.children).flatMap((e=>{if(!(e instanceof HTMLElement))return[];const t=e.getAttribute(c);return t?[H(t)]:[]})):[];Le.current&&(t=Le.current,r=o,t.length===r.length&&t.every(((e,t)=>e===r[t])))||(Le.current=o,e(o))}var t,r,n}),[]),Bt=t.useCallback((()=>{fe.current&&((e,t,r,n)=>{const o=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>e instanceof Element&&e.hasAttribute(c)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});let i=o.nextNode();for(;i;){const e=i,r=e.getAttribute(c);if(r){const o=0===e.children.length;o&&(t.current.empty||(t.current.empty=new Set),t.current.empty.add(r)),"virtual"===n&&o||t.current.loaded.add(r)}i=o.nextNode()}r()})(fe.current,xe,ce,rt.type)}),[Fe]),Pt=t.useCallback((e=>{"object"==typeof Q&&"clickTrigger"in Q&&void 0!==Q.clickTrigger&&((e,t,n)=>{const{selector:o,delay:i=0}="string"==typeof t?{selector:t}:t,l=e.target;if(!l.closest(o))return;const s=l.closest(`[${c}]`);s?.classList.add("remove"),r.setTask((()=>{s?.classList.remove("remove"),n()}),i)})(e,Q.clickTrigger,Bt)}),[Ie,Bt]),Dt=t.useCallback((e=>{r.cancelTask("removeHover");const t=de.current,n=ue.current,o=me.current;if(!t||!n||!o)return;if(Pe.value.includes("end")){const{scrollLeft:t,scrollTop:r}=e.currentTarget;Me.current.update(t,r)}b?.(o.scrollLeft,o.scrollTop);const i=t.querySelectorAll("scroll"===f?".ms-bar":".ms-slider");_&&i.length>0&&!ve.current&&i.forEach((e=>{e.classList.contains("hover")||g(e)})),ve.current=!0,v?.(!0),r.setTask((()=>{Me.current.reset(),ve.current=!1,v?.(!1),rt.type&&Bt(),_&&i.length>0&&!ye.current&&i.forEach((e=>{r.setTask((()=>{e.hasAttribute("ms-manual-hover")||p(e)}),1e3,"removeHover")}))}),200,"isScrolling"),r.setTask((()=>$t(je.current)),"raf","onRenderedKeysChange"),se.schedule("sliderCheckLocal",(()=>{"scroll"!==f&&Xt(),ne()}))}),[b,v,f,Xt,Bt,_,rt.type]),qt=t.useCallback((e=>{if(we.current)return;const t="object"==typeof U.wheel&&"string"==typeof U.wheel.changeDirectionKey?U.wheel.changeDirectionKey:"KeyX";e.code!==t||"hybrid"!==y||we.current||(e.stopPropagation(),we.current=!0,ce())}),[y,Xe]),Vt=t.useCallback((e=>{we.current&&(e.stopPropagation(),we.current=!1,ce())}),[]);t.useEffect((()=>{if(!w)return je.current=void 0,void(Le.current=null);je.current=w,Le.current=null,$t(w)}),[w,$t]),t.useEffect((()=>{je.current&&ot[0]&&ot[1]&&$t(je.current)}),[Ke.join("|"),ot.join()]),t.useEffect((()=>{if(pe.current||"hybrid"!==y)return;const e=fe.current,t=me.current;return e&&t?(e.clientWidth+et>t.clientWidth&&e.clientHeight+Qe>t.clientHeight&&(t.addEventListener("keydown",qt),t.addEventListener("keyup",Vt)),()=>{t.removeEventListener("keydown",qt),t.removeEventListener("keyup",Vt)}):void 0}),[y,Xe,Oe,Ne,Ke.join(),et,Qe]),t.useEffect((()=>{Q&&rt.type&&Bt()}),[Ie,rt.type,Bt,Ke.length]),t.useEffect((()=>{if(pe.current)return;const e=me.current,t=fe.current;if(!e||!t)return;const r="hybrid"===y&&"object"==typeof U.wheel&&U.wheel.changeDirection?"x":y,n="hybrid"===y&&ft+Qe<=ot[1]||we.current?["hybrid","y"].includes(r)?"x":"y":r,o=t=>{t.preventDefault(),a(t,e,yt,be.current,n)};return U.wheel&&e.addEventListener("wheel",o,{passive:!1}),()=>{e.removeEventListener("wheel",o)}}),[y,Xe,ft,ot[1],Qe,we.current,yt.join()]),t.useEffect((()=>{se.schedule("smoothScrollLocal",(()=>{("hybrid"===y?["x","y"]:[y]).forEach((e=>{const t=Pe.value["x"===e?0:1];if("end"===t){if(Me.current.get()[e]===("x"===e?"left":"up"))return;Nt("x"===e?Lt.w:Lt.h,e,Pe.duration)}else"number"==typeof t&&Se.current[e]!==t&&(Se.current[e]=t,Nt(t,e,Pe.duration))}))}))}),[y,Ce,Lt.w,Lt.h,Pe.value.join()]),t.useEffect((()=>{const e=be.current.animationFrameId;return(rt.type||v)&&v&&v(!1),requestAnimationFrame((()=>ge.current=!1)),()=>{e&&cancelAnimationFrame(e),be.current.animationFrameId&&cancelAnimationFrame(be.current.animationFrameId),ae.cancel()}}),[]),t.useEffect((()=>{if(!re)return;const e=ue.current,t=me.current;if(!e||!t)return;const r={parent:e,element:t,direction:y};return function(e){le.set(e.parent,e),1===le.size&&function(){if(P)return;$=new AbortController;const{signal:e}=$;document.addEventListener("pointerdown",ie,{signal:e}),document.addEventListener("dragstart",ie,{signal:e}),P=!0}()}(r),()=>{!function(e){le.delete(e.parent),0===le.size&&P&&($?.abort(),B?.abort(),P=!1)}(r)}}),[re,y]),t.useEffect((()=>{const e=me.current;if(!e)return;const t=e=>{Yt("wrapp",e)};if(U.content||!U.content&&pe.current&&U.wheel){if(!0===U.progressElement)return;e.addEventListener("pointerdown",t)}return()=>{e.removeEventListener("pointerdown",t)}}),[Xe,Yt]),t.useEffect((()=>{const e=de.current;if(!e||!_)return;if(!he.current.size)return;const t=e=>{"mouseenter"===e.type&&document.removeEventListener("mouseup",t),"mouseleave"===e.type&&ye.current?document.addEventListener("mouseup",t):Array.from(he.current).forEach((t=>{(({el:e,event:t,isScrolling:r})=>{const n=e=>{if(["mouseleave","mouseup","pointerup","pointercancel"].includes(t.type)){if(e.removeAttribute("ms-manual-hover"),r?.current)return;p(e)}else e.setAttribute("ms-manual-hover",""),g(e)};Array.isArray(e)?e.map((e=>n(e))):n(e)})({el:t,event:e,isScrolling:ve})}))},r=(t,r)=>{pe.current?(Array.from(he.current).forEach((e=>e[t]("pointerdown",r))),document[t]("pointerup",r),document[t]("pointercancel",r)):(e[t]("mouseenter",r),e[t]("mouseleave",r))};return r("addEventListener",t),()=>{r("removeEventListener",t)}}),[_,f,y,he.current.size]),t.useEffect((()=>{"scroll"!==f&&se.schedule("sliderCheckLocal",Xt)}),[f,Xt,ot.join()]);const Ut=t.useCallback(((r,n,o,i,l)=>{const s={width:at[0]?at[0]+"px":void 0,height:at[1]?at[1]+"px":void 0,...rt.type&&{position:"absolute",transform:`translate(${o}px, ${n}px)`},..."number"==typeof l&&{"--content-visibility":l}},a=ee?e.jsx(t.Suspense,{fallback:ut,children:i}):i;return e.jsx("div",{[c]:""+r,className:"ms-object-box",style:s,onClick:Q?Pt:void 0,children:a},r)}),[ee,!!ut,at[0],at[1],Fe,Ie,dt[0],Pt,rt.type]),Kt=t.useMemo((()=>{const e=new Map;return Ue.forEach((r=>{t.isValidElement(r)&&null!=r.key&&e.set(r.key+"",r)})),e}),[Ue]),_t=t.useMemo((()=>[{positionType:"x"===y?"left":"top",visibility:bt},{positionType:"x"===y?"right":"bottom",visibility:vt},..."hybrid"===y?[{positionType:"left",visibility:wt},{positionType:"right",visibility:Mt}]:[]]),[bt,vt,y,wt,Mt]),Gt=t.useMemo((()=>({width:ot[2]+"px",height:ot[3]+"px"})),[ot]),Zt=t.useMemo((()=>({x:pt>ot[0]?"scroll hidden":"hidden",y:ht>ot[1]?"hidden scroll":"hidden",hybrid:`${pt>ot[0]?"scroll":"hidden"} ${ht>ot[1]?"scroll":"hidden"}`,hide:"hidden"}[U.wheel||U.content&&"scroll"===f?y:"hide"]??"hidden")),[pt,ht,ot,Xe,y]),Jt=t.useMemo((()=>V?_t.map((({positionType:t,visibility:r})=>e.jsx(m,{edgeGradient:qe,visibility:r,edgeType:t,size:ot},"edge-"+t))):null),[V,_t,qe,Oe]),Qt=t.useMemo((()=>U.arrows?_t.map((({positionType:t,visibility:r})=>e.jsx(h,{visibility:r,arrows:Ve,arrowType:t,handleArrow:Wt,size:ot[0]},"arrow-"+t))):null),[Xe,_t,Ve,Wt,ot[0]]),er=()=>{const r=me.current?.scrollLeft||0,n=me.current?.scrollTop||0;return e.jsx("div",{className:"ms-objects-wrapper",ref:fe,style:{...It,...(Ee.current.x||Ee.current.y)&&{transform:`translate(${Ee.current.x}px, ${Ee.current.y}px)`},...ke.current&&{pointerEvents:"none"}},children:Ke.map(((o,l)=>((r,n,o,l)=>{const s=Kt.get(r),c=rt.stopLoadOnScroll&&ve.current&&!xe.current.loaded.has(r)?ut:xe.current.empty?.has(r)?Q&&"object"==typeof Q&&t.isValidElement(Q)?Q:Q&&"object"==typeof Q&&"mode"in Q&&"object"==typeof Q.mode&&"fallback"in Q.mode?Q.mode.fallback:ut:s,a="firstChild"!==ct[0]&&"firstChild"!==ct[1]||0!==n?c:e.jsx(i,{onResize:Ot,children:c});if(!rt.type)return Ut(r,0,0,a);const{top:u,bottom:d,left:m,right:f}=Rt[n],h=(e=!0)=>{const t=e?nt:[0,0,0,0],r=e=>{const r="x"===e?o:l,n=r+("x"===e?ot[0]:ot[1]),i="x"===e?m-t[3]:u-t[2],s="x"===e?f+t[1]:d+t[0],c=s-i;if(0>=c)return 0;const a=Math.min(s,n)-Math.max(i,r);return a>0?Math.round(10*Math.min(1,a/c))/10:0};if("hybrid"===y){const e=r("x"),t=r("y");return Math.min(e,t)}return r("x"===y?"x":"y")},p=h(),g=rt.trackVisibility?h(!1):null;if("lazy"===rt.type){const e=xe.current.loaded.has(r);if(p&&!e){if(ve.current&&rt.stopLoadOnScroll)return;xe.current.loaded.add(r)}return e?Ut(r,u,m,a,g):null}return p?Ut(r,u,m,a,g):(xe.current.loaded.delete(r),null)})(o,l,r,n)))})},tr=t.useMemo((()=>{const e={position:"relative",width:ot[0]+"px",height:ot[1]+"px"};return U.arrows&&Ve.contentReduce&&Ve.size&&("x"===y?e.left=Ve.size+"px":"y"===y?e.top=Ve.size+"px":(e.top=Ve.size+"px",e.left=Ve.size+"px")),e}),[ot,Xe,Ve,y]),rr=e.jsxs("div",{"morph-scroll":""+oe,className:o,ref:ue,style:Gt,children:[e.jsxs("div",{className:"ms-content",ref:de,style:{...tr,transform:"translateZ(0)",...pe.current&&{touchAction:"pinch-zoom"}},children:[e.jsx("div",{className:"ms-element",ref:me,onScroll:Dt,tabIndex:0,style:{width:"100%",height:"100%",outline:"none",...At,..."boolean"!=typeof U.progressElement||!1===U.progressElement?{scrollbarWidth:"none",overflow:"hidden"}:{overflow:Zt},...U.content&&{cursor:"grab"}},children:at[0]&&at[1]?er():e.jsx(i,{onResize:Ft,style:At,children:er()})}),Jt,U.progressElement&&!0!==U.progressElement?(()=>{const e="x"!==y;return[{shouldRender:gt>ot[e?1:0],direction:y,thumbSize:e?kt.y:kt.x,thumbSpace:e?jt.y:jt.x,objLengthPerSize:Tt,progressReverseIndex:0},{shouldRender:"hybrid"===y&&pt>ot[0],direction:"x",thumbSize:kt.x,thumbSpace:jt.x,objLengthPerSize:zt[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e))})().map((t=>{const r="boolean"==typeof K?K:K[t.progressReverseIndex];return e.jsx(u,{type:f,direction:t.direction,progressReverse:r,size:st,progressTrigger:[U,Xe],scrollBarOnHover:_,scrollBarEvent:"sliderMenu"===f?Nt:Ht,thumbSize:t.thumbSize,thumbSpace:t.thumbSpace,objLengthPerSize:t.objLengthPerSize,sliderCheckLocal:Xt,duration:Pe.duration,isTouched:pe.current,scrollStateRef:be,scrollEl:me,scrollBarsRef:he,triggerUpdate:ce,overscroll:Ee,maxScrollSize:yt},t.direction)})):null]}),Qt]});return"auto"===M?e.jsx(i,{measure:"outer",onResize:Ct,children:rr}):rr};se.displayName="MorphScroll";const ce={MorphScroll:se,ResizeTracker:i,IntersectionTracker:o};exports.IntersectionTracker=o,exports.MorphScroll=se,exports.ResizeTracker=i,exports.default=ce;
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useRef as n,useState as o,useCallback as i}from"react";import{cancelTask as l,setTask as s,setLockTask as c}from"keytask-core";const a=(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},u=({className:t,children:n,style:o,root:i,threshold:l,rootMargin:s,visibleContent:c=!1,onIntersection:u})=>{const[d,m]=r.useState(!1),f=r.useRef(null),h=r.useMemo((()=>{if(!s)return"";const e=a(s);return`${e[0]}px ${e[1]}px ${e[2]}px ${e[3]}px`}),[s]),p=r.useCallback((([e])=>{m(e.isIntersecting),u&&u({time:e.time,rootBounds:e.rootBounds,boundingClientRect:e.boundingClientRect,intersectionRect:e.intersectionRect,isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,target:e.target})}),[u]);return r.useEffect((()=>{const e=new IntersectionObserver(p,{root:i,threshold:l,rootMargin:h});return f.current&&e.observe(f.current),()=>{e.disconnect()}}),[p,i,l,h]),e("div",{"intersection-tracker":"",className:t,ref:f,style:o,children:c||d?n:null})};u.displayName="IntersectionTracker";const d=({className:t,children:n,style:o,measure:i="inner",onResize:l})=>{const s=r.useRef(null);r.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()}}),[i,l]);const c={width:"max-content",height:"max-content"},a={inner:{...c},outer:{width:"100%",height:"100%"},all:{minWidth:"100%",minHeight:"100%",...c}};return e("div",{"resize-tracker":"",className:t,ref:s,style:{willChange:"width, height",...a[i],...o},children:n})};d.displayName="ResizeTracker";let m=1;function f(e,t=0,r=1/0,n=!0){return Math.max(t,Math.min(n?Math.round(e):e,r))}const h="wrap-id";function p(e,t,r,n,o){t.matches(":focus")||t.focus(),n.animating||(n.targetScrollX=f(t.scrollLeft,0,r[0]),n.targetScrollY=f(t.scrollTop,0,r[1])),"x"===o?n.targetScrollX=f(n.targetScrollX+e.deltaY,0,r[0]):n.targetScrollY=f(n.targetScrollY+e.deltaY,0,r[1]),n.animating||(n.animating=!0,n.animationFrameId=requestAnimationFrame((function e(){let i;if("x"===o){const e=f(t.scrollLeft+.4*(n.targetScrollX-t.scrollLeft),0,r[0]);t.scrollLeft=e,i=Math.abs(e-n.targetScrollX)}else{const e=f(t.scrollTop+.4*(n.targetScrollY-t.scrollTop),0,r[1]);t.scrollTop=e,i=Math.abs(e-n.targetScrollY)}i>2.5?n.animationFrameId=requestAnimationFrame(e):("x"===o?t.scrollLeft=f(n.targetScrollX,0,r[0]):t.scrollTop=f(n.targetScrollY,0,r[1]),n.animating=!1,n.animationFrameId=null)})))}const g=({type:t,direction:n,progressReverse:o,size:i,progressTrigger:l,scrollBarOnHover:s,scrollBarEvent:c,thumbSize:a,thumbSpace:u,objLengthPerSize:d,sliderCheckLocal:m,duration:f,isTouched:h,scrollStateRef:g,scrollEl:y,scrollBarsRef:b,triggerUpdate:x,overscroll:v,maxScrollSize:w})=>{const M=r.useRef(null),S=r.useRef(null),E=["hybrid","y"].includes(n)?"y":"x",L=Math.abs(v.current[E])*(a/200),A=a-L,R=0>v.current[E]?u+L:u,k=r.useMemo((()=>{if("scroll"===t)return;const r=i["x"===E?0:1];return Array.from({length:d},((n,o)=>e("div",{className:"ms-slider-element",style:{..."sliderMenu"===t&&{cursor:"pointer"}},onClick:"sliderMenu"===t?()=>{c(r*o,E,f,m)}:void 0,children:Array.isArray(l[0].progressElement)?l[0].progressElement[o]:l[0].progressElement},o)))}),[d,t,l[1],f,m,i[0],i[1],c]),z=r.useMemo((()=>"x"!==n?"y":"x"),[n]),j=i["x"===z?0:1],T="scroll"!==t?"":a+2*u>j?"flex-end":"flex-start";r.useEffect((()=>{if(h||!l[0].wheel)return;const e=M.current,t=y.current;if(!e||!t)return;let r=e.previousElementSibling;for(;r&&!r.classList.contains("ms-element");)r=r.previousElementSibling;const n=e=>p(e,t,w,g.current,z);return e.addEventListener("wheel",n,{passive:!1}),()=>e.removeEventListener("wheel",n)}),[z]),r.useEffect((()=>{const e="slider"===t?M.current:S.current;if(!e||"sliderMenu"===t)return;const r=e=>c(e);return e.addEventListener("pointerdown",r),()=>e.removeEventListener("pointerdown",r)}),[c,t]),r.useEffect((()=>{const e=M.current;if(e)return b.current.add(e),x(),()=>{b.current.delete(e)}}),[a]);const C={position:"absolute",...s&&{opacity:0,transition:"opacity 0.2s ease-in-out"}};return e(r.Fragment,{children:"scroll"===t?e("div",{className:"ms-bar ms-"+z,ref:M,"data-direction":z,style:{...C,width:"fit-content",height:j+"px",..."x"===n?{transformOrigin:"left top",left:"50%",...o?{top:0,transform:"rotate(-90deg) translate(-100%, -50%)"}:{transform:"rotate(-90deg) translateY(-50%)"}}:{top:"50%",transform:"translateY(-50%)",...o?{left:0}:{right:0}}},children:e("div",{className:"ms-thumb",ref:S,style:{height:A+"px",transform:`translateY(${R}px)`,...l[0].progressElement&&{cursor:"grab"},display:"flex",alignItems:T},children:l[0].progressElement})}):d>1&&l[0].progressElement&&e("div",{className:"ms-slider ms-"+z,ref:M,"data-direction":z,style:{...C,display:"flex",..."slider"===t&&{cursor:"grab"},..."x"===n?{transformOrigin:"left top",left:"50%",transform:"translateX(-50%)",...o?{top:0}:{bottom:0}}:{flexDirection:"column",top:"50%",transform:"translateY(-50%)",...o?{left:0}:{right:0}}},children:k})})};g.displayName="ScrollBar";const y=({edgeGradient:t,visibility:r,edgeType:n,size:o})=>{const i={position:"absolute",[n]:0,pointerEvents:"none",transition:"opacity 0.2s ease-in-out","--edge-visibility":r?1:0,opacity:"var(--edge-visibility)",...t.color&&{background:t.color&&`linear-gradient(${["left","right"].includes(n)?"270deg, ":""}${t.color}, transparent)`},...["left","right"].includes(n)?{height:"100%",width:t.size+"px",top:0}:{width:"100%",height:t.size+"px",left:0},..."left"===n?{transform:"scaleX(-1)"}:"bottom"===n?{transform:"scaleY(-1)"}:{}};return e("div",{className:`ms-edge ${n}${r?"":" ms-disabled"}`,style:i})};y.displayName="Edge";var b=r.memo(y);const x=({visibility:t,arrows:n,arrowType:o,handleArrow:i,size:l})=>{const s=r.useRef(null),c={position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer",width:n.size+"px",...o?{[o]:0}:{},..."top"===o&&{transform:"rotate(-90deg) translateX(-100%)",transformOrigin:"left top"},..."bottom"===o&&{transform:"rotate(90deg) translateX(-100%)",transformOrigin:"left bottom"},..."left"===o&&{transform:"scaleX(-1)"},...["top","bottom"].includes(o)?{height:l+"px"}:{height:"100%",top:0}};return r.useEffect((()=>{const e=s.current;if(!e)return;const t=()=>i(o);return e.addEventListener("click",t),()=>{e.removeEventListener("click",t)}}),[i,o]),e("div",{className:`ms-arrow-box ${o}${t?" active":""}`,ref:s,style:c,children:n.element})};x.displayName="Arrow";var v=r.memo(x);const w=e=>{const t=e.getAttribute("data-direction");e.style.opacity="0",e.classList.remove("hover"),e.classList.add("leave"),l("remove"+t),s((()=>e.classList.remove("leave")),200,"remove"+t)},M=e=>{const t=e.getAttribute("data-direction");l("remove"+t),e.style.opacity="1",e.classList.remove("leave"),e.classList.add("hover")},S=function(){let e=null,t=0;const r=new Map,n=()=>{r.forEach(((e,t)=>{e()||r.delete(t)})),e=0!==r.size?requestAnimationFrame(n):null};return{start:(o,i)=>{const l=i??++t;return r.delete(l),r.set(l,o),null===e&&(e=requestAnimationFrame(n)),l},stop:t=>{void 0!==t?(r.delete(t),0===r.size&&null!==e&&(cancelAnimationFrame(e),e=null)):(r.clear(),null!==e&&(cancelAnimationFrame(e),e=null))},isRunning:e=>void 0===e?r.size>0:r.has(e)}}(),E=(e,t,r)=>{const n=e.current[t],o=performance.now();S.start((()=>{const i=performance.now(),l=Math.min((i-o)/140,1);return 1>l?(e.current[t]=n*(1-l),r(),!0):(e.current[t]=0,r(),!1)}))};let L,A={x:0,y:0},R={x:0,y:0},k={x:0,y:0,t:0,distX:0,distY:0},z=null;const j=(e,t,r,n)=>{if(!e)return;let o=null;["thumb","slider"].includes(e)?o="slider"===e?t?.closest(".ms-slider"):t:"wrapp"===e&&(o=r),((e,t)=>{if(!e)return;const r=window.matchMedia("(pointer: coarse)").matches;if("start"===t){if(!r){let e=document.getElementById("ms-cursor-lock");e||(e=document.createElement("style"),e.id="ms-cursor-lock",e.textContent="\n * {\n cursor: grabbing !important;\n user-select: none;\n }\n ",document.head.appendChild(e))}e.style.cursor="grabbing",e.classList.add("active")}else{if(!r){const e=document.getElementById("ms-cursor-lock");e&&e.remove()}e.style.cursor="grab",e.classList.remove("active")}})(o,n)},T=(e,t,r,n)=>{"x"===e?(r.scrollStateRef.targetScrollX=n,t.scrollLeft!==n&&(t.scrollLeft=n)):(r.scrollStateRef.targetScrollY=n,t.scrollTop!==n&&(t.scrollTop=n))},C=(e,t,r,n)=>{const o=n.scrollElement;if(!o)return;const i="x"===e,l={x:n.event.clientX,y:n.event.clientY};if(!l)return;const s=(e,t,r)=>{if(0===e)return 0;const o="x"===t?n.sizeLocal[0]:n.sizeLocal[1],i=.14*Math.max(600,o),l=Math.abs(e);return f(e*i/(i+(r?-l:l)),-150,150)};if(!z)return void(z={x:{value:l.x,rest:0,raw:s(n.overscrollRef.current.x,"x",!0)},y:{value:l.y,rest:0,raw:s(n.overscrollRef.current.y,"y",!0)}});const c=z,a={x:l.x-c.x.value,y:l.y-c.y.value},u=Math.abs(A[e]);if(u>2?n.isDraggingRef.current=!0:3>u&&(A[e]+=a[e]),n.isTouched){const e=performance.now();if(k.t){const t=Math.max(e-k.t,8);k={x:.8*k.x+a.x/t*.2,y:.8*k.y+a.y/t*.2,t:e,distX:(k.distX??0)+Math.abs(a.x),distY:(k.distY??0)+Math.abs(a.y)}}else k.t=e}const d="wrapp"===n.clickedObject.current?-a[e]:a[e],m=i?"scrollLeft":"scrollTop",h=i?0:1,p=(t,r,l)=>{const c=z[e],a=i?n.maxScrollSize[0]:n.maxScrollSize[1];if(!Number.isFinite(t)||!Number.isFinite(r))return void(z=null);if(0!==c.raw){const t=c.raw;return c.raw+=.6*r,l&&(n.overscrollRef.current[e]=s(c.raw,e),n.triggerUpdate()),Math.sign(c.raw)!==Math.sign(t)?(c.raw=0,void(l&&(n.overscrollRef.current[e]=0,n.triggerUpdate()))):void 0}if(0>=a)return void T(e,o,n,0);const u=o[m];if(0>=u&&0>t||u>=a&&t>0)return c.raw+=r,void(l&&(n.overscrollRef.current[e]=s(c.raw,e),n.triggerUpdate()));const d=f(o[m]+t,0,a);T(e,o,n,d)};if("thumb"===n.clickedObject.current&&"slider"!==n.type){const r=d*t+c[e].rest,n=Math.trunc(r);return c[e].rest=r-n,void p(n,d,!1)}if("slider"===n.type&&(R[e]+=d),"wrapp"===n.clickedObject.current)return void p(d/r[h],a[e],!0);const g=o[m];if(n.sliderElSize&&Math.abs(R[e])<n.sliderElSize[i?0:1])return;const y=e=>{const t=o[i?"clientWidth":"clientHeight"]+n.gap[h];return t*(Math.floor(Math.max(0,g)/t)+e)},b=d>0&&g+n.sizeLocal[h]<n.wrapElWH[h]?y(1):0>d&&g>0?y(-1):null;R[e]=0,n.smoothScroll(b,e,10)};function F(e){S.stop(),["x","y"].forEach((t=>{e.rafScrollAnim.cancel(),l("smoothScrollBlock"+t)}));const t=e.scrollElement;if(!t)return;e.scrollStateRef.targetScrollX=t.scrollLeft,e.scrollStateRef.targetScrollY=t.scrollTop,k={x:0,y:0,t:0,distX:0,distY:0};const r=[t.scrollWidth,t.scrollHeight],n=["scroll","slider"].includes(e.type)?function(e){const t=e.getBoundingClientRect();return[t.width/e.clientWidth,t.height/e.clientHeight]}(t):[];let o=1;if("thumb"===e.clickedObject.current&&e.axisFromAtr){const t="x"===e.axisFromAtr?0:1,r=(e.sizeLocal[t]-e.scrollBarEdge[t]-e.thumbSize)*n[t];o=e.maxScrollSize[t]/r,Number.isFinite(o)&&o>0||(o=1)}j(e.clickedObject.current,e.target,t,"start"),L?.abort();const i=new AbortController;L=i;const{signal:s}=i;document.addEventListener("pointermove",(t=>{(t=>{let i;if("thumb"===e.clickedObject.current&&"slider"===e.type){const t=e.target?.closest(".ms-slider");if(!t)return;const r=r=>{const n=t.getBoundingClientRect();return Math.round(("x"===r?n.width:n.height)/e.objLengthPerSize["x"===r?0:1])};i=[r("x"),r("y")]}!function(e){const t=e.direction||"y";"hybrid"===t?["wrapp","slider"].includes(e.clickedObject.current)?["x","y"].forEach((t=>C(t,e.thumbRatio,e.visualDiff,e))):e.axisFromAtr&&C(e.axisFromAtr,e.thumbRatio,e.visualDiff,e):C(e.axisFromAtr?e.axisFromAtr:t,e.thumbRatio,e.visualDiff,e);const r={x:e.event.clientX,y:e.event.clientY};z&&(z.x.value=r.x,z.y.value=r.y)}({...e,event:t,wrapElWH:r,visualDiff:n,thumbRatio:o,sliderElSize:i})})(t)}),{signal:s});const c=t=>{e.isDraggingRef.current=!1,function(e){L?.abort();const t=e.scrollElement;if(t){if(j(e.clickedObject.current,e.target,t,"end"),"slider"===e.type&&"thumb"!==e.clickedObject.current){const r=R,n=(r,n)=>{const o="x"===r,i=o?e.maxScrollSize[0]:e.maxScrollSize[1],l=t[o?"scrollLeft":"scrollTop"],s=o?e.gap[0]:e.gap[1],c=t[o?"clientWidth":"clientHeight"]+s,a=(Math[n?n>0?"floor":"ceil":"round"](l/c)+(n??0))*c;a>i||0>a||e.smoothScroll(a,r,e.duration)},o=(e,t)=>{Math.abs(t)>20?n(e,t>0?1:-1):n(e)};0===r.x&&0===r.y?"hybrid"===e.direction?["x","y"].forEach((e=>o(e,r[e]))):o(e.direction,r[e.direction]):Object.entries(r).forEach((([e,t])=>{0!==t&&o(e,t)}))}if(e.isTouched&&"scroll"===e.type&&"slider"!==e.clickedObject.current){const r=r=>{const n=k[r]*e.thumbRatio,o="x"===r?k.distX:k.distY;80>performance.now()-k.t&&Math.abs(n)>.05&&o>12&&function({el:e,axis:t,velocity:r,rafSchedule:n}){const o=Math.sign(r);let i=Math.abs(r);i=Math.pow(i,.92),.2>i&&(i=.2),r=i*o;const l="y"===t?"scrollTop":"scrollLeft",s="y"===t?e.scrollHeight-e.clientHeight:e.scrollWidth-e.clientWidth;let c=performance.now();const a=()=>{const t=performance.now(),o=t-c;if(c=t,.02>Math.abs(r*=Math.exp(-.0025*o)))return;let i=e[l]+r*o;(0>i||i>s)&&(r*=.4,i=f(i,0,s)),e[l]=i,n("step",a)};n("step",a)}({el:t,axis:r,velocity:"thumb"===e.clickedObject.current?n:-n,rafSchedule:e.rafScrollAnim.schedule})};"hybrid"===e.direction?"wrapp"===e.clickedObject.current?["x","y"].forEach((e=>r(e))):r(e.axisFromAtr):r(e.axisFromAtr?e.axisFromAtr:e.direction)}z=null,0!==e.overscrollRef.current.x&&E(e.overscrollRef,"x",e.triggerUpdate),0!==e.overscrollRef.current.y&&E(e.overscrollRef,"y",e.triggerUpdate),e.clickedObject.current=null,k={x:0,y:0,t:0,distX:0,distY:0},A={x:0,y:0},R={x:0,y:0},e.triggerUpdate()}}({...e,event:t,thumbRatio:o})};document.addEventListener("pointerup",c,{signal:s}),document.addEventListener("pointercancel",c,{signal:s})}function N(e,t){return e>t?Math.floor(e/t):1}const O=new WeakMap;function I(e,t,r,n,o){const i=(e,t)=>"full"===e?("x"===t?r[0]:r[1])-("x"===t?n:o):e;if("hybrid"!==t&&!Array.isArray(e)){const r=i(e,t)+"px";return"x"===t?{minWidth:r}:{minHeight:r}}let l,s;return Array.isArray(e)?[l,s]=e:l=s=e,{minWidth:i(l,"x")+"px",minHeight:i(s,"y")+"px"}}const Y=e=>e?"start"===e?"flex-start":"center"===e?"center":"flex-end":void 0;function H(e,t,r=0,n=0){return o=>{let i=!1;const l={width:(o.width??0)-r,height:(o.height??0)-n},s=0===l.width&&0===l.height;s&&!i&&(i=!0),e.current?.width===l.width&&e.current?.height===l.height||s&&i||(e.current=l,t())}}const W=()=>"undefined"!=typeof window&&(window.matchMedia?.("(pointer: coarse)").matches??!1);function X(e,t,r){return t?f(Math.round(e/t*e),r,e):0}function $(e,t,r,n){return t?f(e/t*(r-n),0,r-n):0}function B(){let e=null;const t=new Map;return{schedule:(r,n)=>{t.set(r,n),null===e&&(e=requestAnimationFrame((()=>{e=null;const r=Array.from(t.values());t.clear(),r.forEach((e=>e()))})))},cancel:()=>{null!==e&&(cancelAnimationFrame(e),e=null,t.clear())}}}const D=e=>{if(null==e)return[];if(r.isValidElement(e)){const t=e;return t.type===r.Fragment?r.Children.toArray(t.props.children).flatMap(D):[t]}return[e]},P=e=>{const t=e.lastIndexOf(":$");return-1!==t?e.slice(t+2).replace(/=0/g,"=").replace(/=2/g,":"):e.startsWith(".$")?e.slice(2).replace(/=0/g,"=").replace(/=2/g,":"):e},V=40,U="ms-under-drag";let q,K=null,G=!1;const _={x:0,y:0},Z={x:0,y:0};let J=!1,Q=null,ee="",te=null,re=null,ne=null;const oe=B(),ie=()=>{re&&re.removeAttribute(U),Q=null,re=null,te=null,ee="",ne=null};function le(e,t,r,n,o,i){const l=e-t,s=r-e;return V>l&&n>0?{dir:-1,distance:l}:V>s&&i>n+o?{dir:1,distance:s}:null}function se(e){const t=f((V-Math.abs(e))/V,0,1,!1);return t*t*20|0}function ce(){if(!Q)return;const{parent:e,element:t,direction:r}=Q,n=t.getBoundingClientRect(),o=Z.x,i=Z.y;if(o<n.left-V||o>n.right+V||i<n.top-V||i>n.bottom+V)return void ie();let l=null,s=null,c=0,a=0;const u="x"!==r?le(i,n.top,n.bottom,t.scrollTop,t.clientHeight,t.scrollHeight):null;u&&(l=-1===u.dir?"top":"bottom",a=se(u.distance)*u.dir);const d="y"!==r?le(o,n.left,n.right,t.scrollLeft,t.clientWidth,t.scrollWidth):null;d&&(s=-1===d.dir?"left":"right",c=se(d.distance)*d.dir),ee=[l,s].filter(Boolean).join(" "),ee!==ne&&(e.setAttribute(U,ee),ne=ee),(c||a)&&t.scrollBy(c,a),oe.schedule("autoScrollLoop",ce)}function ae(e){e instanceof DragEvent&&0===e.buttons?ue():Z.x===e.clientX&&Z.y===e.clientY||(Z.x=e.clientX,Z.y=e.clientY,oe.schedule("onMove",(()=>{if(!J){const e=Z.x-_.x,t=Z.y-_.y;if(10>Math.hypot(e,t))return;J=!0}const e=document.elementFromPoint(Z.x,Z.y);if(!e)return;const t=e.closest("[morph-scroll]");if(!t&&!Q)return void ie();const r=t?me.get(t):Q;r&&(Q=r,te!==r.element&&(re&&re!==r.parent&&re.removeAttribute(U),te=r.element,re=r.parent,re.setAttribute(U,ee),ne=ee,ce()))})))}function ue(){K?.abort(),K=null,J=!1,oe.cancel(),ie()}function de(e){const t=e instanceof PointerEvent;if(t&&!e.target.closest("[ms-custom-drag]"))return;_.x=e.clientX,_.y=e.clientY,K?.abort();const r=new AbortController;K=r;const{signal:n}=r;t?(document.addEventListener("pointermove",ae,{signal:n}),document.addEventListener("pointerup",ue,{signal:n})):(document.addEventListener("dragover",ae,{signal:n}),document.addEventListener("dragend",ue,{signal:n}),document.addEventListener("drop",ue,{signal:n}),document.addEventListener("pointerdown",ue,{signal:n}),window.addEventListener("blur",ue,{signal:n}))}const me=new Map;const fe=({className:u,children:y,type:x="scroll",direction:S="y",scrollPosition:E,onScrollValue:L,isScrolling:A,onRenderedKeysChange:R,size:k,objectsSize:z,crossCount:j,gap:T,wrapperMargin:C,wrapperMinSize:V,wrapperAlign:U,elementsAlign:_,elementsDirection:Z="row",edgeGradient:J,progressTrigger:Q={wheel:!0},progressReverse:ee=!1,scrollBarOnHover:te=!1,scrollBarEdge:re,thumbMinSize:ne,render:oe,emptyElements:ie,suspending:le=!1,fallback:se,dragScroll:ce})=>{const ae=function(){const[,e]=o({});return i((()=>{e({})}),[])}(),ue=function(){const e=n(null);return null===e.current&&(e.current=""+m++),e.current}(),fe=B(),he=()=>fe.schedule("triggerUpdate",ae),pe=B();if(!k)throw Error('prop "size" is not provided'+("\n morph-scroll "+ue));Object.keys(Q).length,"none"===z||Array.isArray(z)&&("none"===z[0]||z[1]);const ge=r.useRef(null),ye=r.useRef(null),be=r.useRef(null),xe=r.useRef(null),ve=r.useRef(new Set),we=r.useRef(W()),Me=r.useRef(!0),Se=r.useRef(null),Ee=r.useRef({loaded:new Set,empty:new Set}),Le=r.useRef({targetScrollY:0,targetScrollX:0,animating:!1,animationFrameId:0}),Ae=r.useRef(!1),Re=r.useRef(!1),ke=r.useRef(function(e=2){let t=0,r=0,n=null,o=null;return{update(i,l){const s=i-t,c=l-r;Math.abs(s)>e&&(n=s>0?"right":"left",t=i),Math.abs(c)>e&&(o=c>0?"down":"up",r=l)},reset(){n=null,o=null},get:()=>({x:n,y:o})}}()),ze=r.useRef({x:null,y:null}),je=r.useRef({x:0,y:0}),Te=r.useRef(!1),Ce=r.useRef(null),Fe=r.useRef(R);function Ne(){return r.useRef({width:0,height:0})}const Oe=Ne(),Ie=Ne(),Ye=Ne(),[He,We,Xe,$e,Be,De,Pe,Ve,Ue,qe,Ke]=function(...e){const t=new WeakMap,n=e=>{if(null===e)return 1;if("boolean"==typeof e)return e?2:3;if("number"==typeof e||"bigint"==typeof e)return 0|+e;if("string"==typeof e){let t=0;for(let r=0;r<e.length;r++)t=31*t+e.charCodeAt(r)>>>0;return t}if(void 0===e)return 4;if("function"==typeof e)return 5;if(r.isValidElement(e))return 6;if(Array.isArray(e)){let t=0;for(let r=0;r<e.length;r++)t=31*t+n(e[r])>>>0;return t}if(e instanceof Set)return Array.from(e).map(n).sort(((e,t)=>e-t)).reduce(((e,t)=>31*e+t>>>0),0);if(e instanceof Map)return Array.from(e.entries()).map((([e,t])=>31*n(e)+n(t)>>>0)).sort(((e,t)=>e-t)).reduce(((e,t)=>31*e+t>>>0),0);if("object"==typeof e&&null!==e){if(t.has(e))return t.get(e);const r=Object.entries(e).sort((([e],[t])=>e.localeCompare(t))).map((([,e])=>n(e))).reduce(((e,t)=>31*e+t>>>0),0);return t.set(e,r),r}return 7};return e.map(n)}(E,oe,k,z,ie,V,U,T,Q,Ee.current.empty,re),Ge=r.useMemo((()=>{let e=[null],t=200,r=null;if(null!=E)if("number"==typeof E||"end"===E)e=[E,E];else if(Array.isArray(E))e=E;else if("object"==typeof E){const n=E.value;"number"==typeof n||"end"===n?e=[n,n]:Array.isArray(n)&&(e=n),t=E.duration??200,r=E.updater??null}return{value:e,duration:t,updater:r}}),[He]),_e={color:null,size:40},Ze=r.useMemo((()=>"object"==typeof J?{..._e,...J}:"string"==typeof J?{color:J,size:40}:_e),[J]),Je=r.useMemo((()=>{const e=Q.arrows,t={size:40,contentReduce:!0,loop:!1};return r.isValidElement(e)?{...t,element:e}:"object"==typeof e&&null!==e?{...t,...e}:t}),[Ue]),Qe=r.useMemo((()=>r.Children.toArray(y).flatMap(D)),[y]),et=r.useMemo((()=>Qe.map((e=>r.isValidElement(e)&&e.key?e.key+"":null)).filter((e=>null!==e)).filter((e=>!("clear"===ie||ie&&"object"==typeof ie&&"mode"in ie&&"clear"===ie.mode)||!Ee.current.empty?.has(e)))),[y,Be,qe]),[tt,rt,nt,ot]=C?a(C):[0,0,0,0],it=tt+nt,lt=ot+rt,st=r.useMemo((()=>"number"==typeof T?[T,T]:Array.isArray(T)?[T[1]??0,T[0]??0]:[0,0]),[T]),ct=r.useMemo((()=>{const e={type:void 0,rootMargin:0,stopLoadOnScroll:!1,trackVisibility:!1};if("string"==typeof oe)return{...e,type:oe};if("object"==typeof oe&&null!==oe){const{type:t,rootMargin:r=e.rootMargin,stopLoadOnScroll:n=e.stopLoadOnScroll,trackVisibility:o=e.trackVisibility}=oe;return{type:t,rootMargin:r,stopLoadOnScroll:n,trackVisibility:o}}return e}),[We]),at=r.useMemo((()=>a(ct.rootMargin)),[ct.rootMargin,S]),ut=r.useMemo((()=>{const[e,t]=Array.isArray(k)?k:"number"==typeof k?[k,k]:[Oe.current.width,Oe.current.height];if(!Q.arrows||!Je.size||!Je.contentReduce)return[e,t,e,t];const r=2*Je.size;let n=e,o=t;return"x"===S?n=e-r:"y"===S?o=t-r:"hybrid"===S&&(n=e-r,o=t-r),[n,o,e,t]}),[Xe,Ue,S,Je,Oe.current.height,Oe.current.width]),dt="x"===S?ut[0]:ut[1],mt=r.useMemo((()=>{if(!re)return[0,0];if("number"==typeof re){const e=2*re;return[e,e]}if(Array.isArray(re)){const[e=0,t]=re;return[2*e,2*(t??e)]}return[0,0]}),[Ke]),ft=r.useMemo((()=>[ut[0]-mt[0],ut[1]-mt[1]]),[mt.join(),ut[0],ut[1]]),ht=r.useMemo((()=>z?Array.isArray(z)?z:a(z,!0,2):[null,null]),[$e]),pt=r.useMemo((()=>{const{height:e,width:t}=Ye.current,r=(e,t,r)=>t||("number"==typeof e?e:"size"===e?r:0);return[r(ht[0],t,ut[0]),r(ht[1],e,ut[1])]}),[ht.join(),S,Ye.current.width,Ye.current.height,ut.join()]),gt=r.useMemo((()=>oe&&ie&&!se?e("div",{className:"ms-empty-element"}):se),[!!se,We,Be]),yt=r.useMemo((()=>{if("none"===ht[0]||"none"===ht[1])return[1,et.length];const e="x"===S?1:0,t="row"===Z,r=ut[e],n=pt[e]?pt[e]+st[e]:0,o="hybrid"===S&&r?n*et.length:r,i=n?Math.floor(o/n):1;let l=j&&i>=j?"hybrid"===S?Math.ceil(i/j):j:i;const s=l>1&&l<et.length?Math.ceil(et.length/l):l<et.length?et.length:1;t||(l=Math.ceil(et.length/s));const c=j&&j<et.length,a=e=>Number.isFinite(e)&&e>0?e:1;if("hybrid"===S){const e=c?t?j:l:t?et.length:1,r=c?t?l:j:t?1:et.length;return[a(e),a(r)]}return[a(l),a(s)]}),[Z,st[0],st[1],pt[0],pt[1],et.length,S,ut.join(),j]),bt=r.useMemo((()=>{const e=1>yt[0]?1:yt[0]*st[1]-st[1],t=yt["x"===S?1:0],r=et.length<t?et.length:t;return pt[0]?(pt[0]+st[1])*r-st[1]:ct.type?Ye.current.width+e:Ie.current.width}),[S,pt[0],yt[0],yt[1],st[1],Ie.current.width,Ye.current.width,ct.type,et.length]),xt=r.useMemo((()=>{const e=1>yt[1]?1:yt[0]*st[0]-st[0];return pt[1]?"x"===S?(pt[1]+st[0])*yt[0]-st[0]:(pt[1]+st[0])*yt[1]-st[0]:ct.type?Ye.current.height+e:Ie.current.height}),[S,pt[1],yt[0],yt[1],st[0],Ie.current.height,Ye.current.height,ct.type]),vt=r.useMemo((()=>xt+it),[xt,it]),wt=r.useMemo((()=>bt+lt),[bt,lt]),Mt="x"===S?wt:vt,St=r.useMemo((()=>[Math.max(0,wt-ut[0]),Math.max(0,vt-ut[1])]),[ut.join(),vt,wt]),Et="x"===S?be.current?.scrollLeft||0:be.current?.scrollTop||0,Lt=Et>1&&!0,At=Mt>Math.round(Et+dt);let Rt=!1,kt=!1;"hybrid"===S&&(Rt=(be.current?.scrollLeft||0)>1&&!0,kt=Math.round((be.current?.scrollLeft||0)+ut[0])<wt);const zt=r.useMemo((()=>ne??30),[ne]),jt=r.useCallback((e=>Q.progressElement&&Mt?"x"===e?X(ut[0]-mt[0],wt,zt):X(ut[1]-mt[1],vt,zt):0),[Ue,Mt,ut[0],ut[1],wt,zt,mt.join()]),Tt=r.useMemo((()=>({x:"y"!==S?jt("x"):0,y:"x"!==S?jt("y"):0})),[jt,S]),Ct=r.useMemo((()=>({w:ut[0]?wt-ut[0]:wt,h:ut[1]?vt-ut[1]:vt})),[wt,vt,ut[0],ut[1]]),Ft={x:"y"!==S?$(be.current?.scrollLeft||0,Ct.w,ft[0],Tt.x):0,y:"x"!==S?$(be.current?.scrollTop||0,Ct.h,ft[1],Tt.y):0},Nt=r.useMemo((()=>{if(!ct.type)return[{top:0,bottom:0,left:0,right:0}];let e=0;const t="x"===S,r="row"===Z,n=t&&!r||!t&&r,o=pt[0]+st[1],i=pt[1]+st[0],l=new Set,s=n?yt[0]:yt[1],c=pt[r?0:1],a=st[r?1:0];for(let e=Math.floor((et.length-1)/s)*s;e<et.length;e++)l.add(e);const u=s-l.size,d=u>0?(c+a)*u:0;return"center"===_?e=Math.round(d/2):"end"===_&&(e=d),et.map(((t,s)=>{const c=n?s%yt[0]:Math.floor(s/yt[1]),a=n?Math.floor(s/yt[0]):s%yt[1];let u,d;"x"===S?(u=a,d=c):(u=c,d=a);const m=l.size>0&&l.has(s),f=(m&&!r?e:0)+i*d,h=(m&&r?e:0)+o*u;return{top:f,left:h,bottom:f+pt[1],right:h+pt[0]}}))}),[pt[0],pt[1],st[0],st[1],_,et.length,yt[0],yt[1],ct.type,Z,S]),Ot=r.useMemo((()=>ut?.length&&U?function(e,t,r,n){const[o,i="start"]="string"==typeof e?[e,e]:e,l={display:"flex"};return t[0]>r&&(l.justifyContent=Y(o)),t[1]>n&&(l.alignItems=Y(i)),l}(U,ut,wt,vt):{}),[U,ut.join(),vt,wt]),It=r.useMemo((()=>[N(wt,ut[0]),N(vt,ut[1])]),[wt,vt,ut.join()]),Yt=r.useMemo((()=>"x"===S?It[0]:It[1]),[S,It[0],It[1]]),Ht=r.useCallback(H(Oe,he),[]),Wt=r.useCallback(H(Ie,he,lt,it),[lt,it]),Xt=r.useCallback(H(Ye,he),[]),$t=r.useCallback(((e,t,r)=>{const n=be.current;return n&&null!==e?async function(e,t,r,n,o,i){const l="y"===e,s=l?"scrollTop":"scrollLeft",a=l?i[1]:i[0],u=f(n,0,a),d=f(t[s],0,a);if(d!==u)return null===r?(await async function(e){for(;e.scrollHeight<=e.clientHeight&&e.scrollWidth<=e.clientWidth;)await new Promise((e=>requestAnimationFrame(e)))}(t),void(t[s]=n)):void c((()=>{const e=performance.now(),n=()=>{const i=performance.now(),l=Math.min((i-e)/r,1),c=f(d+(u-d)*l,0,a);t[s]=c,1>l&&c!==u&&o("smoothScroll",n)};o("smoothScroll",n)}),r,"smoothScrollBlock"+e)}(t,n,Me.current?null:r,e,pe.schedule,St):null}),[St.join()]),Bt=r.useMemo((()=>{const e={margin:C?`${tt}px ${rt}px ${nt}px ${ot}px`:"",height:ht[1]&&"none"!==ht[1]?xt+"px":"fit-content",width:ht[0]&&"none"!==ht[0]?bt+"px":"fit-content",...T&&!ct.type&&{gap:`${st[0]}px ${st[1]}px`},...V&&I(V,S,ut,lt,it),...("hybrid"===S||"x"===S)&&{flexShrink:0}};if(ct.type)return{...e,position:"relative"};const t=1===yt[0]?"y"===S?"column":"row":Z,r=ht[0]&&"none"!==ht[0]&&ht[1]&&"none"!==ht[1]?"wrap":void 0;return{...e,display:"flex",flexDirection:t,flexWrap:r,justifyContent:Y(_)}}),[C,Pe,De,[tt,rt,nt,ot,lt,it,st[0],st[1]].join(),ut.join(),Ve,ht[1],xt,bt,Ve,ct.type,S,yt[0],Z,_]),Dt=r.useCallback(((e,t,r)=>{we.current=W();const n=t.target;if(n.closest('\n [ms-custom-drag], [draggable="true"], [contenteditable],\n input, textarea, select, button, a\n '))return;let o=null;r&&(o=n.closest("scroll"===x?".ms-bar":".ms-slider")?.getAttribute("data-direction")),Se.current=e,F({scrollElement:be.current,target:n,clickedObject:Se,scrollStateRef:Le.current,type:x,triggerUpdate:he,direction:S,smoothScroll:$t,sizeLocal:[ut[0],ut[1]],thumbSize:"x"===o?Tt.x:Tt.y,axisFromAtr:o,duration:Ge.duration,scrollBarEdge:mt,rafScrollAnim:pe,isTouched:we.current,gap:st,overscrollRef:je,objLengthPerSize:It,isDraggingRef:Te,maxScrollSize:St})}),[S,x,ut.join(),Ge.duration,$t,mt.join(),Tt.x,Tt.y,st.join(),It,St.join()]),Pt=r.useCallback((e=>{Dt("thumb",e,!0)}),[Dt]),Vt=r.useCallback((e=>{be.current&&(({arrowType:e,scrollElement:t,wrapSize:r,scrollSize:n,smoothScroll:o,duration:i,loop:l,gap:s})=>{const c=r[0],a=r[1],u=t.scrollTop,d=t.scrollLeft,m=(e,r,n)=>{const l=n?((e,t)=>"x"===e?t>0?0:c:t>0?0:a)(e,r):((e,r)=>{const n="x"===e,o=n?d:u,i=n?s[0]:s[1],l=t[n?"clientWidth":"clientHeight"]+i;return l*(Math.floor(Math.max(0,o)/l)+r)})(e,r);o(l,e,i)};switch(e){case"top":u>0?m("y",-1):l&&m("y",-1,!0);break;case"left":d>0?m("x",-1):l&&m("x",-1,!0);break;case"right":d+n[0]<c?m("x",1):l&&m("x",1,!0);break;case"bottom":u+n[1]<a?m("y",1):l&&m("y",1,!0)}})({arrowType:e,scrollElement:be.current,wrapSize:[wt,vt],scrollSize:ut,smoothScroll:$t,duration:Ge.duration,loop:Je.loop,gap:st})}),[ut.join(),wt,vt,Ge.duration,$t,Je.loop,st[0],st[1]]),Ut=r.useCallback((()=>{"scroll"!==x&&ut[0]&&ut[1]&&ye.current&&be.current&&ve.current.size&&((e,t,r,n)=>{[...t].forEach(((t,o)=>{let i=O.get(t);const l=0===o?r:"x",s="x"===l?0:1;if(i&&i.elements.length===n[s]||(i={elements:Array.from(t.querySelectorAll(".ms-slider-element")),lastIndex:-1},O.set(t,i)),!i.elements.length)return;const c="x"===l?e.scrollLeft:e.scrollTop,a="x"===l?e.clientWidth:e.clientHeight,u=Math.floor((c+a/2)/a);u!==i.lastIndex&&(-1!==i.lastIndex&&i.elements[i.lastIndex]?.classList.remove("active"),i.elements[u]?.classList.add("active"),i.lastIndex=u)}))})(be.current,ve.current,S,It)}),[ut.join(),S,x,It.join()]),qt=r.useCallback((e=>{if(e){const o=(n=xe.current)?Array.from(n.children).flatMap((e=>{if(!(e instanceof HTMLElement))return[];const t=e.getAttribute(h);return t?[P(t)]:[]})):[];Ce.current&&(t=Ce.current,r=o,t.length===r.length&&t.every(((e,t)=>e===r[t])))||(Ce.current=o,e(o))}var t,r,n}),[]),Kt=r.useCallback((()=>{xe.current&&((e,t,r,n)=>{const o=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>e instanceof Element&&e.hasAttribute(h)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});let i=o.nextNode();for(;i;){const e=i,r=e.getAttribute(h);if(r){const o=0===e.children.length;o&&(t.current.empty||(t.current.empty=new Set),t.current.empty.add(r)),"virtual"===n&&o||t.current.loaded.add(r)}i=o.nextNode()}r()})(xe.current,Ee,he,ct.type)}),[We]),Gt=r.useCallback((e=>{"object"==typeof ie&&"clickTrigger"in ie&&void 0!==ie.clickTrigger&&((e,t,r)=>{const{selector:n,delay:o=0}="string"==typeof t?{selector:t}:t,i=e.target;if(!i.closest(n))return;const l=i.closest(`[${h}]`);l?.classList.add("remove"),s((()=>{l?.classList.remove("remove"),r()}),o)})(e,ie.clickTrigger,Kt)}),[Be,Kt]),_t=r.useCallback((e=>{l("removeHover");const t=ye.current,r=ge.current,n=be.current;if(!t||!r||!n)return;if(Ge.value.includes("end")){const{scrollLeft:t,scrollTop:r}=e.currentTarget;ke.current.update(t,r)}L?.(n.scrollLeft,n.scrollTop);const o=t.querySelectorAll("scroll"===x?".ms-bar":".ms-slider");te&&o.length>0&&!Ae.current&&o.forEach((e=>{e.classList.contains("hover")||M(e)})),Ae.current=!0,A?.(!0),s((()=>{ke.current.reset(),Ae.current=!1,A?.(!1),ct.type&&Kt(),te&&o.length>0&&!Se.current&&o.forEach((e=>{s((()=>{e.hasAttribute("ms-manual-hover")||w(e)}),1e3,"removeHover")}))}),200,"isScrolling"),s((()=>qt(Fe.current)),"raf","onRenderedKeysChange"),fe.schedule("sliderCheckLocal",(()=>{"scroll"!==x&&Ut(),ae()}))}),[L,A,x,Ut,Kt,te,ct.type]),Zt=r.useCallback((e=>{if(Re.current)return;const t="object"==typeof Q.wheel&&"string"==typeof Q.wheel.changeDirectionKey?Q.wheel.changeDirectionKey:"KeyX";e.code!==t||"hybrid"!==S||Re.current||(e.stopPropagation(),Re.current=!0,he())}),[S,Ue]),Jt=r.useCallback((e=>{Re.current&&(e.stopPropagation(),Re.current=!1,he())}),[]);r.useEffect((()=>{if(qt(Fe.current),we.current||"hybrid"!==S)return;const e=xe.current,t=be.current;return e&&t?(e.clientWidth+lt>t.clientWidth&&e.clientHeight+it>t.clientHeight&&(t.addEventListener("keydown",Zt),t.addEventListener("keyup",Jt)),()=>{t.removeEventListener("keydown",Zt),t.removeEventListener("keyup",Jt)}):void 0}),[S,Ue,Xe,$e,et.join(),lt,it]),r.useEffect((()=>{ie&&ct.type&&Kt()}),[Be,ct.type,Kt,et.length]),r.useEffect((()=>{if(we.current)return;const e=be.current,t=xe.current;if(!e||!t)return;const r="hybrid"===S&&"object"==typeof Q.wheel&&Q.wheel.changeDirection?"x":S,n="hybrid"===S&&xt+it<=ut[1]||Re.current?["hybrid","y"].includes(r)?"x":"y":r,o=t=>{t.preventDefault(),p(t,e,St,Le.current,n)};return Q.wheel&&e.addEventListener("wheel",o,{passive:!1}),()=>{e.removeEventListener("wheel",o)}}),[S,Ue,xt,ut[1],it,Re.current,St.join()]),r.useEffect((()=>{fe.schedule("smoothScrollLocal",(()=>{("hybrid"===S?["x","y"]:[S]).forEach((e=>{const t=Ge.value["x"===e?0:1];if("end"===t){if(ke.current.get()[e]===("x"===e?"left":"up"))return;$t("x"===e?Ct.w:Ct.h,e,Ge.duration)}else"number"==typeof t&&ze.current[e]!==t&&(ze.current[e]=t,$t(t,e,Ge.duration))}))}))}),[S,He,Ct.w,Ct.h,Ge.value.join()]),r.useEffect((()=>{const e=Le.current.animationFrameId;return(ct.type||A)&&A&&A(!1),requestAnimationFrame((()=>Me.current=!1)),()=>{e&&cancelAnimationFrame(e),Le.current.animationFrameId&&cancelAnimationFrame(Le.current.animationFrameId),pe.cancel()}}),[]),r.useEffect((()=>{if(!ce)return;const e=ge.current,t=be.current;if(!e||!t)return;const r={parent:e,element:t,direction:S};return function(e){me.set(e.parent,e),1===me.size&&function(){if(G)return;q=new AbortController;const{signal:e}=q;document.addEventListener("pointerdown",de,{signal:e}),document.addEventListener("dragstart",de,{signal:e}),G=!0}()}(r),()=>{!function(e){me.delete(e.parent),0===me.size&&G&&(q?.abort(),K?.abort(),G=!1)}(r)}}),[ce,S]),r.useEffect((()=>{const e=be.current;if(!e)return;const t=e=>{Dt("wrapp",e)};if(Q.content||!Q.content&&we.current&&Q.wheel){if(!0===Q.progressElement)return;e.addEventListener("pointerdown",t)}return()=>{e.removeEventListener("pointerdown",t)}}),[Ue,Dt]),r.useEffect((()=>{const e=ye.current;if(!e||!te)return;if(!ve.current.size)return;const t=e=>{"mouseenter"===e.type&&document.removeEventListener("mouseup",t),"mouseleave"===e.type&&Se.current?document.addEventListener("mouseup",t):Array.from(ve.current).forEach((t=>{(({el:e,event:t,isScrolling:r})=>{const n=e=>{if(["mouseleave","mouseup","pointerup","pointercancel"].includes(t.type)){if(e.removeAttribute("ms-manual-hover"),r?.current)return;w(e)}else e.setAttribute("ms-manual-hover",""),M(e)};Array.isArray(e)?e.map((e=>n(e))):n(e)})({el:t,event:e,isScrolling:Ae})}))},r=(t,r)=>{we.current?(Array.from(ve.current).forEach((e=>e[t]("pointerdown",r))),document[t]("pointerup",r),document[t]("pointercancel",r)):(e[t]("mouseenter",r),e[t]("mouseleave",r))};return r("addEventListener",t),()=>{r("removeEventListener",t)}}),[te,x,S,ve.current.size]),r.useEffect((()=>{"scroll"!==x&&fe.schedule("sliderCheckLocal",Ut)}),[x,Ut,ut.join()]);const Qt=r.useCallback(((t,n,o,i,l)=>{const s={width:pt[0]?pt[0]+"px":void 0,height:pt[1]?pt[1]+"px":void 0,...ct.type&&{position:"absolute",transform:`translate(${o}px, ${n}px)`},..."number"==typeof l&&{"--content-visibility":l}},c=le?e(r.Suspense,{fallback:gt,children:i}):i;return e("div",{[h]:""+t,className:"ms-object-box",style:s,onClick:ie?Gt:void 0,children:c},t)}),[le,!!gt,pt[0],pt[1],We,Be,yt[0],Gt,ct.type]),er=r.useMemo((()=>{const e=new Map;return Qe.forEach((t=>{r.isValidElement(t)&&null!=t.key&&e.set(t.key+"",t)})),e}),[Qe]),tr=r.useMemo((()=>[{positionType:"x"===S?"left":"top",visibility:Lt},{positionType:"x"===S?"right":"bottom",visibility:At},..."hybrid"===S?[{positionType:"left",visibility:Rt},{positionType:"right",visibility:kt}]:[]]),[Lt,At,S,Rt,kt]),rr=r.useMemo((()=>({width:ut[2]+"px",height:ut[3]+"px"})),[ut]),nr=r.useMemo((()=>({x:wt>ut[0]?"scroll hidden":"hidden",y:vt>ut[1]?"hidden scroll":"hidden",hybrid:`${wt>ut[0]?"scroll":"hidden"} ${vt>ut[1]?"scroll":"hidden"}`,hide:"hidden"}[Q.wheel||Q.content&&"scroll"===x?S:"hide"]??"hidden")),[wt,vt,ut,Ue,S]),or=r.useMemo((()=>J?tr.map((({positionType:t,visibility:r})=>e(b,{edgeGradient:Ze,visibility:r,edgeType:t,size:ut},"edge-"+t))):null),[J,tr,Ze,Xe]),ir=r.useMemo((()=>Q.arrows?tr.map((({positionType:t,visibility:r})=>e(v,{visibility:r,arrows:Je,arrowType:t,handleArrow:Vt,size:ut[0]},"arrow-"+t))):null),[Ue,tr,Je,Vt,ut[0]]),lr=()=>{const t=be.current?.scrollLeft||0,n=be.current?.scrollTop||0;return e("div",{className:"ms-objects-wrapper",ref:xe,style:{...Bt,...(je.current.x||je.current.y)&&{transform:`translate(${je.current.x}px, ${je.current.y}px)`},...Te.current&&{pointerEvents:"none"}},children:et.map(((o,i)=>((t,n,o,i)=>{const l=er.get(t),s=ct.stopLoadOnScroll&&Ae.current&&!Ee.current.loaded.has(t)?gt:Ee.current.empty?.has(t)?ie&&"object"==typeof ie&&r.isValidElement(ie)?ie:ie&&"object"==typeof ie&&"mode"in ie&&"object"==typeof ie.mode&&"fallback"in ie.mode?ie.mode.fallback:gt:l,c="firstChild"!==ht[0]&&"firstChild"!==ht[1]||0!==n?s:e(d,{onResize:Xt,children:s});if(!ct.type)return Qt(t,0,0,c);const{top:a,bottom:u,left:m,right:f}=Nt[n],h=(e=!0)=>{const t=e?at:[0,0,0,0],r=e=>{const r="x"===e?o:i,n=r+("x"===e?ut[0]:ut[1]),l="x"===e?m-t[3]:a-t[2],s="x"===e?f+t[1]:u+t[0],c=s-l;if(0>=c)return 0;const d=Math.min(s,n)-Math.max(l,r);return d>0?Math.round(10*Math.min(1,d/c))/10:0};if("hybrid"===S){const e=r("x"),t=r("y");return Math.min(e,t)}return r("x"===S?"x":"y")},p=h(),g=ct.trackVisibility?h(!1):null;if("lazy"===ct.type){const e=Ee.current.loaded.has(t);if(p&&!e){if(Ae.current&&ct.stopLoadOnScroll)return;Ee.current.loaded.add(t)}return e?Qt(t,a,m,c,g):null}return p?Qt(t,a,m,c,g):(Ee.current.loaded.delete(t),null)})(o,i,t,n)))})},sr=r.useMemo((()=>{const e={position:"relative",width:ut[0]+"px",height:ut[1]+"px"};return Q.arrows&&Je.contentReduce&&Je.size&&("x"===S?e.left=Je.size+"px":"y"===S?e.top=Je.size+"px":(e.top=Je.size+"px",e.left=Je.size+"px")),e}),[ut,Ue,Je,S]),cr=t("div",{"morph-scroll":""+ue,className:u,ref:ge,style:rr,children:[t("div",{className:"ms-content",ref:ye,style:{...sr,transform:"translateZ(0)",...we.current&&{touchAction:"pinch-zoom"}},children:[e("div",{className:"ms-element",ref:be,onScroll:_t,tabIndex:0,style:{width:"100%",height:"100%",outline:"none",...Ot,..."boolean"!=typeof Q.progressElement||!1===Q.progressElement?{scrollbarWidth:"none",overflow:"hidden"}:{overflow:nr},...Q.content&&{cursor:"grab"}},children:pt[0]&&pt[1]?lr():e(d,{onResize:Wt,style:Ot,children:lr()})}),or,Q.progressElement&&!0!==Q.progressElement?(()=>{const e="x"!==S;return[{shouldRender:Mt>ut[e?1:0],direction:S,thumbSize:e?Tt.y:Tt.x,thumbSpace:e?Ft.y:Ft.x,objLengthPerSize:Yt,progressReverseIndex:0},{shouldRender:"hybrid"===S&&wt>ut[0],direction:"x",thumbSize:Tt.x,thumbSpace:Ft.x,objLengthPerSize:It[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e))})().map((t=>{const r="boolean"==typeof ee?ee:ee[t.progressReverseIndex];return e(g,{type:x,direction:t.direction,progressReverse:r,size:ft,progressTrigger:[Q,Ue],scrollBarOnHover:te,scrollBarEvent:"sliderMenu"===x?$t:Pt,thumbSize:t.thumbSize,thumbSpace:t.thumbSpace,objLengthPerSize:t.objLengthPerSize,sliderCheckLocal:Ut,duration:Ge.duration,isTouched:we.current,scrollStateRef:Le,scrollEl:be,scrollBarsRef:ve,triggerUpdate:he,overscroll:je,maxScrollSize:St},t.direction)})):null]}),ir]});return"auto"===k?e(d,{measure:"outer",onResize:Ht,children:cr}):cr};fe.displayName="MorphScroll";const he={MorphScroll:fe,ResizeTracker:d,IntersectionTracker:u};export{u as IntersectionTracker,fe as MorphScroll,d as ResizeTracker,he as default};
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useRef as n,useState as o,useCallback as i}from"react";import{cancelTask as l,setTask as s,setLockTask as c}from"keytask-core";const a=(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},u=({className:t,children:n,style:o,root:i,threshold:l,rootMargin:s,visibleContent:c=!1,onIntersection:u})=>{const[d,m]=r.useState(!1),f=r.useRef(null),h=r.useMemo((()=>{if(!s)return"";const e=a(s);return`${e[0]}px ${e[1]}px ${e[2]}px ${e[3]}px`}),[s]),p=r.useCallback((([e])=>{m(e.isIntersecting),u&&u({time:e.time,rootBounds:e.rootBounds,boundingClientRect:e.boundingClientRect,intersectionRect:e.intersectionRect,isIntersecting:e.isIntersecting,intersectionRatio:e.intersectionRatio,target:e.target})}),[u]);return r.useEffect((()=>{const e=new IntersectionObserver(p,{root:i,threshold:l,rootMargin:h});return f.current&&e.observe(f.current),()=>{e.disconnect()}}),[p,i,l,h]),e("div",{"intersection-tracker":"",className:t,ref:f,style:o,children:c||d?n:null})};u.displayName="IntersectionTracker";const d=({className:t,children:n,style:o,measure:i="inner",onResize:l})=>{const s=r.useRef(null);r.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()}}),[i,l]);const c={width:"max-content",height:"max-content"},a={inner:{...c},outer:{width:"100%",height:"100%"},all:{minWidth:"100%",minHeight:"100%",...c}};return e("div",{"resize-tracker":"",className:t,ref:s,style:{willChange:"width, height",...a[i],...o},children:n})};d.displayName="ResizeTracker";let m=1;function f(e,t=0,r=1/0,n=!0){return Math.max(t,Math.min(n?Math.round(e):e,r))}const h="wrap-id";function p(e,t,r,n,o){t.matches(":focus")||t.focus(),n.animating||(n.targetScrollX=f(t.scrollLeft,0,r[0]),n.targetScrollY=f(t.scrollTop,0,r[1])),"x"===o?n.targetScrollX=f(n.targetScrollX+e.deltaY,0,r[0]):n.targetScrollY=f(n.targetScrollY+e.deltaY,0,r[1]),n.animating||(n.animating=!0,n.animationFrameId=requestAnimationFrame((function e(){let i;if("x"===o){const e=f(t.scrollLeft+.4*(n.targetScrollX-t.scrollLeft),0,r[0]);t.scrollLeft=e,i=Math.abs(e-n.targetScrollX)}else{const e=f(t.scrollTop+.4*(n.targetScrollY-t.scrollTop),0,r[1]);t.scrollTop=e,i=Math.abs(e-n.targetScrollY)}i>2.5?n.animationFrameId=requestAnimationFrame(e):("x"===o?t.scrollLeft=f(n.targetScrollX,0,r[0]):t.scrollTop=f(n.targetScrollY,0,r[1]),n.animating=!1,n.animationFrameId=null)})))}const g=({type:t,direction:n,progressReverse:o,size:i,progressTrigger:l,scrollBarOnHover:s,scrollBarEvent:c,thumbSize:a,thumbSpace:u,objLengthPerSize:d,sliderCheckLocal:m,duration:f,isTouched:h,scrollStateRef:g,scrollEl:y,scrollBarsRef:b,triggerUpdate:x,overscroll:v,maxScrollSize:w})=>{const M=r.useRef(null),E=r.useRef(null),S=["hybrid","y"].includes(n)?"y":"x",L=Math.abs(v.current[S])*(a/200),A=a-L,R=0>v.current[S]?u+L:u,k=r.useMemo((()=>{if("scroll"===t)return;const r=i["x"===S?0:1];return Array.from({length:d},((n,o)=>e("div",{className:"ms-slider-element",style:{..."sliderMenu"===t&&{cursor:"pointer"}},onClick:"sliderMenu"===t?()=>{c(r*o,S,f,m)}:void 0,children:Array.isArray(l[0].progressElement)?l[0].progressElement[o]:l[0].progressElement},o)))}),[d,t,l[1],f,m,i[0],i[1],c]),z=r.useMemo((()=>"x"!==n?"y":"x"),[n]),j=i["x"===z?0:1],T="scroll"!==t?"":a+2*u>j?"flex-end":"flex-start";r.useEffect((()=>{if(h||!l[0].wheel)return;const e=M.current,t=y.current;if(!e||!t)return;let r=e.previousElementSibling;for(;r&&!r.classList.contains("ms-element");)r=r.previousElementSibling;const n=e=>p(e,t,w,g.current,z);return e.addEventListener("wheel",n,{passive:!1}),()=>e.removeEventListener("wheel",n)}),[z]),r.useEffect((()=>{const e="slider"===t?M.current:E.current;if(!e||"sliderMenu"===t)return;const r=e=>c(e);return e.addEventListener("pointerdown",r),()=>e.removeEventListener("pointerdown",r)}),[c,t]),r.useEffect((()=>{const e=M.current;if(e)return b.current.add(e),x(),()=>{b.current.delete(e)}}),[a]);const C={position:"absolute",...s&&{opacity:0,transition:"opacity 0.2s ease-in-out"}};return e(r.Fragment,{children:"scroll"===t?e("div",{className:"ms-bar ms-"+z,ref:M,"data-direction":z,style:{...C,width:"fit-content",height:j+"px",..."x"===n?{transformOrigin:"left top",left:"50%",...o?{top:0,transform:"rotate(-90deg) translate(-100%, -50%)"}:{transform:"rotate(-90deg) translateY(-50%)"}}:{top:"50%",transform:"translateY(-50%)",...o?{left:0}:{right:0}}},children:e("div",{className:"ms-thumb",ref:E,style:{height:A+"px",transform:`translateY(${R}px)`,...l[0].progressElement&&{cursor:"grab"},display:"flex",alignItems:T},children:l[0].progressElement})}):d>1&&l[0].progressElement&&e("div",{className:"ms-slider ms-"+z,ref:M,"data-direction":z,style:{...C,display:"flex",..."slider"===t&&{cursor:"grab"},..."x"===n?{transformOrigin:"left top",left:"50%",transform:"translateX(-50%)",...o?{top:0}:{bottom:0}}:{flexDirection:"column",top:"50%",transform:"translateY(-50%)",...o?{left:0}:{right:0}}},children:k})})};g.displayName="ScrollBar";const y=({edgeGradient:t,visibility:r,edgeType:n,size:o})=>{const i={position:"absolute",[n]:0,pointerEvents:"none",transition:"opacity 0.2s ease-in-out","--edge-visibility":r?1:0,opacity:"var(--edge-visibility)",...t.color&&{background:t.color&&`linear-gradient(${["left","right"].includes(n)?"270deg, ":""}${t.color}, transparent)`},...["left","right"].includes(n)?{height:"100%",width:t.size+"px",top:0}:{width:"100%",height:t.size+"px",left:0},..."left"===n?{transform:"scaleX(-1)"}:"bottom"===n?{transform:"scaleY(-1)"}:{}};return e("div",{className:`ms-edge ${n}${r?"":" ms-disabled"}`,style:i})};y.displayName="Edge";var b=r.memo(y);const x=({visibility:t,arrows:n,arrowType:o,handleArrow:i,size:l})=>{const s=r.useRef(null),c={position:"absolute",display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer",width:n.size+"px",...o?{[o]:0}:{},..."top"===o&&{transform:"rotate(-90deg) translateX(-100%)",transformOrigin:"left top"},..."bottom"===o&&{transform:"rotate(90deg) translateX(-100%)",transformOrigin:"left bottom"},..."left"===o&&{transform:"scaleX(-1)"},...["top","bottom"].includes(o)?{height:l+"px"}:{height:"100%",top:0}};return r.useEffect((()=>{const e=s.current;if(!e)return;const t=()=>i(o);return e.addEventListener("click",t),()=>{e.removeEventListener("click",t)}}),[i,o]),e("div",{className:`ms-arrow-box ${o}${t?" active":""}`,ref:s,style:c,children:n.element})};x.displayName="Arrow";var v=r.memo(x);const w=e=>{const t=e.getAttribute("data-direction");e.style.opacity="0",e.classList.remove("hover"),e.classList.add("leave"),l("remove"+t),s((()=>e.classList.remove("leave")),200,"remove"+t)},M=e=>{const t=e.getAttribute("data-direction");l("remove"+t),e.style.opacity="1",e.classList.remove("leave"),e.classList.add("hover")},E=function(){let e=null,t=0;const r=new Map,n=()=>{r.forEach(((e,t)=>{e()||r.delete(t)})),e=0!==r.size?requestAnimationFrame(n):null};return{start:(o,i)=>{const l=i??++t;return r.delete(l),r.set(l,o),null===e&&(e=requestAnimationFrame(n)),l},stop:t=>{void 0!==t?(r.delete(t),0===r.size&&null!==e&&(cancelAnimationFrame(e),e=null)):(r.clear(),null!==e&&(cancelAnimationFrame(e),e=null))},isRunning:e=>void 0===e?r.size>0:r.has(e)}}(),S=(e,t,r)=>{const n=e.current[t],o=performance.now();E.start((()=>{const i=performance.now(),l=Math.min((i-o)/140,1);return 1>l?(e.current[t]=n*(1-l),r(),!0):(e.current[t]=0,r(),!1)}))};let L,A={x:0,y:0},R={x:0,y:0},k={x:0,y:0,t:0,distX:0,distY:0},z=null;const j=(e,t,r,n)=>{if(!e)return;let o=null;["thumb","slider"].includes(e)?o="slider"===e?t?.closest(".ms-slider"):t:"wrapp"===e&&(o=r),((e,t)=>{if(!e)return;const r=window.matchMedia("(pointer: coarse)").matches;if("start"===t){if(!r){let e=document.getElementById("ms-cursor-lock");e||(e=document.createElement("style"),e.id="ms-cursor-lock",e.textContent="\n * {\n cursor: grabbing !important;\n user-select: none;\n }\n ",document.head.appendChild(e))}e.style.cursor="grabbing",e.classList.add("active")}else{if(!r){const e=document.getElementById("ms-cursor-lock");e&&e.remove()}e.style.cursor="grab",e.classList.remove("active")}})(o,n)},T=(e,t,r,n)=>{"x"===e?(r.scrollStateRef.targetScrollX=n,t.scrollLeft!==n&&(t.scrollLeft=n)):(r.scrollStateRef.targetScrollY=n,t.scrollTop!==n&&(t.scrollTop=n))},C=(e,t,r,n)=>{const o=n.scrollElement;if(!o)return;const i="x"===e,l={x:n.event.clientX,y:n.event.clientY};if(!l)return;const s=(e,t,r)=>{if(0===e)return 0;const o="x"===t?n.sizeLocal[0]:n.sizeLocal[1],i=.14*Math.max(600,o),l=Math.abs(e);return f(e*i/(i+(r?-l:l)),-150,150)};if(!z)return void(z={x:{value:l.x,rest:0,raw:s(n.overscrollRef.current.x,"x",!0)},y:{value:l.y,rest:0,raw:s(n.overscrollRef.current.y,"y",!0)}});const c=z,a={x:l.x-c.x.value,y:l.y-c.y.value},u=Math.abs(A[e]);if(u>2?n.isDraggingRef.current=!0:3>u&&(A[e]+=a[e]),n.isTouched){const e=performance.now();if(k.t){const t=Math.max(e-k.t,8);k={x:.8*k.x+a.x/t*.2,y:.8*k.y+a.y/t*.2,t:e,distX:(k.distX??0)+Math.abs(a.x),distY:(k.distY??0)+Math.abs(a.y)}}else k.t=e}const d="wrapp"===n.clickedObject.current?-a[e]:a[e],m=i?"scrollLeft":"scrollTop",h=i?0:1,p=(t,r,l)=>{const c=z[e],a=i?n.maxScrollSize[0]:n.maxScrollSize[1];if(!Number.isFinite(t)||!Number.isFinite(r))return void(z=null);if(0!==c.raw){const t=c.raw;return c.raw+=.6*r,l&&(n.overscrollRef.current[e]=s(c.raw,e),n.triggerUpdate()),Math.sign(c.raw)!==Math.sign(t)?(c.raw=0,void(l&&(n.overscrollRef.current[e]=0,n.triggerUpdate()))):void 0}if(0>=a)return void T(e,o,n,0);const u=o[m];if(0>=u&&0>t||u>=a&&t>0)return c.raw+=r,void(l&&(n.overscrollRef.current[e]=s(c.raw,e),n.triggerUpdate()));const d=f(o[m]+t,0,a);T(e,o,n,d)};if("thumb"===n.clickedObject.current&&"slider"!==n.type){const r=d*t+c[e].rest,n=Math.trunc(r);return c[e].rest=r-n,void p(n,d,!1)}if("slider"===n.type&&(R[e]+=d),"wrapp"===n.clickedObject.current)return void p(d/r[h],a[e],!0);const g=o[m];if(n.sliderElSize&&Math.abs(R[e])<n.sliderElSize[i?0:1])return;const y=e=>{const t=o[i?"clientWidth":"clientHeight"]+n.gap[h];return t*(Math.floor(Math.max(0,g)/t)+e)},b=d>0&&g+n.sizeLocal[h]<n.wrapElWH[h]?y(1):0>d&&g>0?y(-1):null;R[e]=0,n.smoothScroll(b,e,10)};function F(e){E.stop(),["x","y"].forEach((t=>{e.rafScrollAnim.cancel(),l("smoothScrollBlock"+t)}));const t=e.scrollElement;if(!t)return;e.scrollStateRef.targetScrollX=t.scrollLeft,e.scrollStateRef.targetScrollY=t.scrollTop,k={x:0,y:0,t:0,distX:0,distY:0};const r=[t.scrollWidth,t.scrollHeight],n=["scroll","slider"].includes(e.type)?function(e){const t=e.getBoundingClientRect();return[t.width/e.clientWidth,t.height/e.clientHeight]}(t):[];let o=1;if("thumb"===e.clickedObject.current&&e.axisFromAtr){const t="x"===e.axisFromAtr?0:1,r=(e.sizeLocal[t]-e.scrollBarEdge[t]-e.thumbSize)*n[t];o=e.maxScrollSize[t]/r,Number.isFinite(o)&&o>0||(o=1)}j(e.clickedObject.current,e.target,t,"start"),L?.abort();const i=new AbortController;L=i;const{signal:s}=i;document.addEventListener("pointermove",(t=>{(t=>{let i;if("thumb"===e.clickedObject.current&&"slider"===e.type){const t=e.target?.closest(".ms-slider");if(!t)return;const r=r=>{const n=t.getBoundingClientRect();return Math.round(("x"===r?n.width:n.height)/e.objLengthPerSize["x"===r?0:1])};i=[r("x"),r("y")]}!function(e){const t=e.direction||"y";"hybrid"===t?["wrapp","slider"].includes(e.clickedObject.current)?["x","y"].forEach((t=>C(t,e.thumbRatio,e.visualDiff,e))):e.axisFromAtr&&C(e.axisFromAtr,e.thumbRatio,e.visualDiff,e):C(e.axisFromAtr?e.axisFromAtr:t,e.thumbRatio,e.visualDiff,e);const r={x:e.event.clientX,y:e.event.clientY};z&&(z.x.value=r.x,z.y.value=r.y)}({...e,event:t,wrapElWH:r,visualDiff:n,thumbRatio:o,sliderElSize:i})})(t)}),{signal:s});const c=t=>{e.isDraggingRef.current=!1,function(e){L?.abort();const t=e.scrollElement;if(t){if(j(e.clickedObject.current,e.target,t,"end"),"slider"===e.type&&"thumb"!==e.clickedObject.current){const r=R,n=(r,n)=>{const o="x"===r,i=o?e.maxScrollSize[0]:e.maxScrollSize[1],l=t[o?"scrollLeft":"scrollTop"],s=o?e.gap[0]:e.gap[1],c=t[o?"clientWidth":"clientHeight"]+s,a=(Math[n?n>0?"floor":"ceil":"round"](l/c)+(n??0))*c;a>i||0>a||e.smoothScroll(a,r,e.duration)},o=(e,t)=>{Math.abs(t)>20?n(e,t>0?1:-1):n(e)};0===r.x&&0===r.y?"hybrid"===e.direction?["x","y"].forEach((e=>o(e,r[e]))):o(e.direction,r[e.direction]):Object.entries(r).forEach((([e,t])=>{0!==t&&o(e,t)}))}if(e.isTouched&&"scroll"===e.type&&"slider"!==e.clickedObject.current){const r=r=>{const n=k[r]*e.thumbRatio,o="x"===r?k.distX:k.distY;80>performance.now()-k.t&&Math.abs(n)>.05&&o>12&&function({el:e,axis:t,velocity:r,rafSchedule:n}){const o=Math.sign(r);let i=Math.abs(r);i=Math.pow(i,.92),.2>i&&(i=.2),r=i*o;const l="y"===t?"scrollTop":"scrollLeft",s="y"===t?e.scrollHeight-e.clientHeight:e.scrollWidth-e.clientWidth;let c=performance.now();const a=()=>{const t=performance.now(),o=t-c;if(c=t,.02>Math.abs(r*=Math.exp(-.0025*o)))return;let i=e[l]+r*o;(0>i||i>s)&&(r*=.4,i=f(i,0,s)),e[l]=i,n("step",a)};n("step",a)}({el:t,axis:r,velocity:"thumb"===e.clickedObject.current?n:-n,rafSchedule:e.rafScrollAnim.schedule})};"hybrid"===e.direction?"wrapp"===e.clickedObject.current?["x","y"].forEach((e=>r(e))):r(e.axisFromAtr):r(e.axisFromAtr?e.axisFromAtr:e.direction)}z=null,0!==e.overscrollRef.current.x&&S(e.overscrollRef,"x",e.triggerUpdate),0!==e.overscrollRef.current.y&&S(e.overscrollRef,"y",e.triggerUpdate),e.clickedObject.current=null,k={x:0,y:0,t:0,distX:0,distY:0},A={x:0,y:0},R={x:0,y:0},e.triggerUpdate()}}({...e,event:t,thumbRatio:o})};document.addEventListener("pointerup",c,{signal:s}),document.addEventListener("pointercancel",c,{signal:s})}function N(e,t){return e>t?Math.floor(e/t):1}const O=new WeakMap;function I(e,t,r,n,o){const i=(e,t)=>"full"===e?("x"===t?r[0]:r[1])-("x"===t?n:o):e;if("hybrid"!==t&&!Array.isArray(e)){const r=i(e,t)+"px";return"x"===t?{minWidth:r}:{minHeight:r}}let l,s;return Array.isArray(e)?[l,s]=e:l=s=e,{minWidth:i(l,"x")+"px",minHeight:i(s,"y")+"px"}}const Y=e=>e?"start"===e?"flex-start":"center"===e?"center":"flex-end":void 0;function H(e,t,r=0,n=0){return o=>{let i=!1;const l={width:(o.width??0)-r,height:(o.height??0)-n},s=0===l.width&&0===l.height;s&&!i&&(i=!0),e.current?.width===l.width&&e.current?.height===l.height||s&&i||(e.current=l,t())}}const W=()=>"undefined"!=typeof window&&(window.matchMedia?.("(pointer: coarse)").matches??!1);function X(e,t,r){return t?f(Math.round(e/t*e),r,e):0}function $(e,t,r,n){return t?f(e/t*(r-n),0,r-n):0}function B(){let e=null;const t=new Map;return{schedule:(r,n)=>{t.set(r,n),null===e&&(e=requestAnimationFrame((()=>{e=null;const r=Array.from(t.values());t.clear(),r.forEach((e=>e()))})))},cancel:()=>{null!==e&&(cancelAnimationFrame(e),e=null,t.clear())}}}const D=e=>{if(null==e)return[];if(r.isValidElement(e)){const t=e;return t.type===r.Fragment?r.Children.toArray(t.props.children).flatMap(D):[t]}return[e]},P=e=>{const t=e.lastIndexOf(":$");return-1!==t?e.slice(t+2).replace(/=0/g,"=").replace(/=2/g,":"):e.startsWith(".$")?e.slice(2).replace(/=0/g,"=").replace(/=2/g,":"):e},V=40,U="ms-under-drag";let q,K=null,G=!1;const _={x:0,y:0},Z={x:0,y:0};let J=!1,Q=null,ee="",te=null,re=null,ne=null;const oe=B(),ie=()=>{re&&re.removeAttribute(U),Q=null,re=null,te=null,ee="",ne=null};function le(e,t,r,n,o,i){const l=e-t,s=r-e;return V>l&&n>0?{dir:-1,distance:l}:V>s&&i>n+o?{dir:1,distance:s}:null}function se(e){const t=f((V-Math.abs(e))/V,0,1,!1);return t*t*20|0}function ce(){if(!Q)return;const{parent:e,element:t,direction:r}=Q,n=t.getBoundingClientRect(),o=Z.x,i=Z.y;if(o<n.left-V||o>n.right+V||i<n.top-V||i>n.bottom+V)return void ie();let l=null,s=null,c=0,a=0;const u="x"!==r?le(i,n.top,n.bottom,t.scrollTop,t.clientHeight,t.scrollHeight):null;u&&(l=-1===u.dir?"top":"bottom",a=se(u.distance)*u.dir);const d="y"!==r?le(o,n.left,n.right,t.scrollLeft,t.clientWidth,t.scrollWidth):null;d&&(s=-1===d.dir?"left":"right",c=se(d.distance)*d.dir),ee=[l,s].filter(Boolean).join(" "),ee!==ne&&(e.setAttribute(U,ee),ne=ee),(c||a)&&t.scrollBy(c,a),oe.schedule("autoScrollLoop",ce)}function ae(e){e instanceof DragEvent&&0===e.buttons?ue():Z.x===e.clientX&&Z.y===e.clientY||(Z.x=e.clientX,Z.y=e.clientY,oe.schedule("onMove",(()=>{if(!J){const e=Z.x-_.x,t=Z.y-_.y;if(10>Math.hypot(e,t))return;J=!0}const e=document.elementFromPoint(Z.x,Z.y);if(!e)return;const t=e.closest("[morph-scroll]");if(!t&&!Q)return void ie();const r=t?me.get(t):Q;r&&(Q=r,te!==r.element&&(re&&re!==r.parent&&re.removeAttribute(U),te=r.element,re=r.parent,re.setAttribute(U,ee),ne=ee,ce()))})))}function ue(){K?.abort(),K=null,J=!1,oe.cancel(),ie()}function de(e){const t=e instanceof PointerEvent;if(t&&!e.target.closest("[ms-custom-drag]"))return;_.x=e.clientX,_.y=e.clientY,K?.abort();const r=new AbortController;K=r;const{signal:n}=r;t?(document.addEventListener("pointermove",ae,{signal:n}),document.addEventListener("pointerup",ue,{signal:n})):(document.addEventListener("dragover",ae,{signal:n}),document.addEventListener("dragend",ue,{signal:n}),document.addEventListener("drop",ue,{signal:n}),document.addEventListener("pointerdown",ue,{signal:n}),window.addEventListener("blur",ue,{signal:n}))}const me=new Map;const fe=({className:u,children:y,type:x="scroll",direction:E="y",scrollPosition:S,onScrollValue:L,isScrolling:A,onRenderedKeysChange:R,size:k,objectsSize:z,crossCount:j,gap:T,wrapperMargin:C,wrapperMinSize:V,wrapperAlign:U,elementsAlign:_,elementsDirection:Z="row",edgeGradient:J,progressTrigger:Q={wheel:!0},progressReverse:ee=!1,scrollBarOnHover:te=!1,scrollBarEdge:re,thumbMinSize:ne,render:oe,emptyElements:ie,suspending:le=!1,fallback:se,dragScroll:ce})=>{const ae=function(){const[,e]=o({});return i((()=>{e({})}),[])}(),ue=function(){const e=n(null);return null===e.current&&(e.current=""+m++),e.current}(),fe=B(),he=()=>fe.schedule("triggerUpdate",ae),pe=B();if(!k)throw Error('prop "size" is not provided'+("\n morph-scroll "+ue));Object.keys(Q).length,"none"===z||Array.isArray(z)&&("none"===z[0]||z[1]);const ge=r.useRef(null),ye=r.useRef(null),be=r.useRef(null),xe=r.useRef(null),ve=r.useRef(new Set),we=r.useRef(W()),Me=r.useRef(!0),Ee=r.useRef(null),Se=r.useRef({loaded:new Set,empty:new Set}),Le=r.useRef({targetScrollY:0,targetScrollX:0,animating:!1,animationFrameId:0}),Ae=r.useRef(!1),Re=r.useRef(!1),ke=r.useRef(function(e=2){let t=0,r=0,n=null,o=null;return{update(i,l){const s=i-t,c=l-r;Math.abs(s)>e&&(n=s>0?"right":"left",t=i),Math.abs(c)>e&&(o=c>0?"down":"up",r=l)},reset(){n=null,o=null},get:()=>({x:n,y:o})}}()),ze=r.useRef({x:null,y:null}),je=r.useRef({x:0,y:0}),Te=r.useRef(!1),Ce=r.useRef(null),Fe=r.useRef(R);function Ne(){return r.useRef({width:0,height:0})}const Oe=Ne(),Ie=Ne(),Ye=Ne(),[He,We,Xe,$e,Be,De,Pe,Ve,Ue,qe,Ke]=function(...e){const t=new WeakMap,n=e=>{if(null===e)return 1;if("boolean"==typeof e)return e?2:3;if("number"==typeof e||"bigint"==typeof e)return 0|+e;if("string"==typeof e){let t=0;for(let r=0;r<e.length;r++)t=31*t+e.charCodeAt(r)>>>0;return t}if(void 0===e)return 4;if("function"==typeof e)return 5;if(r.isValidElement(e))return 6;if(Array.isArray(e)){let t=0;for(let r=0;r<e.length;r++)t=31*t+n(e[r])>>>0;return t}if(e instanceof Set)return Array.from(e).map(n).sort(((e,t)=>e-t)).reduce(((e,t)=>31*e+t>>>0),0);if(e instanceof Map)return Array.from(e.entries()).map((([e,t])=>31*n(e)+n(t)>>>0)).sort(((e,t)=>e-t)).reduce(((e,t)=>31*e+t>>>0),0);if("object"==typeof e&&null!==e){if(t.has(e))return t.get(e);const r=Object.entries(e).sort((([e],[t])=>e.localeCompare(t))).map((([,e])=>n(e))).reduce(((e,t)=>31*e+t>>>0),0);return t.set(e,r),r}return 7};return e.map(n)}(S,oe,k,z,ie,V,U,T,Q,Se.current.empty,re),Ge=r.useMemo((()=>{let e=[null],t=200,r=null;if(null!=S)if("number"==typeof S||"end"===S)e=[S,S];else if(Array.isArray(S))e=S;else if("object"==typeof S){const n=S.value;"number"==typeof n||"end"===n?e=[n,n]:Array.isArray(n)&&(e=n),t=S.duration??200,r=S.updater??null}return{value:e,duration:t,updater:r}}),[He]),_e={color:null,size:40},Ze=r.useMemo((()=>"object"==typeof J?{..._e,...J}:"string"==typeof J?{color:J,size:40}:_e),[J]),Je=r.useMemo((()=>{const e=Q.arrows,t={size:40,contentReduce:!0,loop:!1};return r.isValidElement(e)?{...t,element:e}:"object"==typeof e&&null!==e?{...t,...e}:t}),[Ue]),Qe=r.useMemo((()=>r.Children.toArray(y).flatMap(D)),[y]),et=r.useMemo((()=>Qe.map((e=>r.isValidElement(e)&&e.key?e.key+"":null)).filter((e=>null!==e)).filter((e=>!("clear"===ie||ie&&"object"==typeof ie&&"mode"in ie&&"clear"===ie.mode)||!Se.current.empty?.has(e)))),[y,Be,qe]),[tt,rt,nt,ot]=C?a(C):[0,0,0,0],it=tt+nt,lt=ot+rt,st=r.useMemo((()=>"number"==typeof T?[T,T]:Array.isArray(T)?[T[1]??0,T[0]??0]:[0,0]),[T]),ct=r.useMemo((()=>{const e={type:void 0,rootMargin:0,stopLoadOnScroll:!1,trackVisibility:!1};if("string"==typeof oe)return{...e,type:oe};if("object"==typeof oe&&null!==oe){const{type:t,rootMargin:r=e.rootMargin,stopLoadOnScroll:n=e.stopLoadOnScroll,trackVisibility:o=e.trackVisibility}=oe;return{type:t,rootMargin:r,stopLoadOnScroll:n,trackVisibility:o}}return e}),[We]),at=r.useMemo((()=>a(ct.rootMargin)),[ct.rootMargin,E]),ut=r.useMemo((()=>{const[e,t]=Array.isArray(k)?k:"number"==typeof k?[k,k]:[Oe.current.width,Oe.current.height];if(!Q.arrows||!Je.size||!Je.contentReduce)return[e,t,e,t];const r=2*Je.size;let n=e,o=t;return"x"===E?n=e-r:"y"===E?o=t-r:"hybrid"===E&&(n=e-r,o=t-r),[n,o,e,t]}),[Xe,Ue,E,Je,Oe.current.height,Oe.current.width]),dt="x"===E?ut[0]:ut[1],mt=r.useMemo((()=>{if(!re)return[0,0];if("number"==typeof re){const e=2*re;return[e,e]}if(Array.isArray(re)){const[e=0,t]=re;return[2*e,2*(t??e)]}return[0,0]}),[Ke]),ft=r.useMemo((()=>[ut[0]-mt[0],ut[1]-mt[1]]),[mt.join(),ut[0],ut[1]]),ht=r.useMemo((()=>z?Array.isArray(z)?z:a(z,!0,2):[null,null]),[$e]),pt=r.useMemo((()=>{const{height:e,width:t}=Ye.current,r=(e,t,r)=>t||("number"==typeof e?e:"size"===e?r:0);return[r(ht[0],t,ut[0]),r(ht[1],e,ut[1])]}),[ht.join(),E,Ye.current.width,Ye.current.height,ut.join()]),gt=r.useMemo((()=>oe&&ie&&!se?e("div",{className:"ms-empty-element"}):se),[!!se,We,Be]),yt=r.useMemo((()=>{if("none"===ht[0]||"none"===ht[1])return[1,et.length];const e="x"===E?1:0,t="row"===Z,r=ut[e],n=pt[e]?pt[e]+st[e]:0,o="hybrid"===E&&r?n*et.length:r,i=n?Math.floor(o/n):1;let l=j&&i>=j?"hybrid"===E?Math.ceil(i/j):j:i;const s=l>1&&l<et.length?Math.ceil(et.length/l):l<et.length?et.length:1;t||(l=Math.ceil(et.length/s));const c=j&&j<et.length,a=e=>Number.isFinite(e)&&e>0?e:1;if("hybrid"===E){const e=c?t?j:l:t?et.length:1,r=c?t?l:j:t?1:et.length;return[a(e),a(r)]}return[a(l),a(s)]}),[Z,st[0],st[1],pt[0],pt[1],et.length,E,ut.join(),j]),bt=r.useMemo((()=>{const e=1>yt[0]?1:yt[0]*st[1]-st[1],t=yt["x"===E?1:0],r=et.length<t?et.length:t;return pt[0]?(pt[0]+st[1])*r-st[1]:ct.type?Ye.current.width+e:Ie.current.width}),[E,pt[0],yt[0],yt[1],st[1],Ie.current.width,Ye.current.width,ct.type,et.length]),xt=r.useMemo((()=>{const e=1>yt[1]?1:yt[0]*st[0]-st[0];return pt[1]?"x"===E?(pt[1]+st[0])*yt[0]-st[0]:(pt[1]+st[0])*yt[1]-st[0]:ct.type?Ye.current.height+e:Ie.current.height}),[E,pt[1],yt[0],yt[1],st[0],Ie.current.height,Ye.current.height,ct.type]),vt=r.useMemo((()=>xt+it),[xt,it]),wt=r.useMemo((()=>bt+lt),[bt,lt]),Mt="x"===E?wt:vt,Et=r.useMemo((()=>[Math.max(0,wt-ut[0]),Math.max(0,vt-ut[1])]),[ut.join(),vt,wt]),St="x"===E?be.current?.scrollLeft||0:be.current?.scrollTop||0,Lt=St>1&&!0,At=Mt>Math.round(St+dt);let Rt=!1,kt=!1;"hybrid"===E&&(Rt=(be.current?.scrollLeft||0)>1&&!0,kt=Math.round((be.current?.scrollLeft||0)+ut[0])<wt);const zt=r.useMemo((()=>ne??30),[ne]),jt=r.useCallback((e=>Q.progressElement&&Mt?"x"===e?X(ut[0]-mt[0],wt,zt):X(ut[1]-mt[1],vt,zt):0),[Ue,Mt,ut[0],ut[1],wt,zt,mt.join()]),Tt=r.useMemo((()=>({x:"y"!==E?jt("x"):0,y:"x"!==E?jt("y"):0})),[jt,E]),Ct=r.useMemo((()=>({w:ut[0]?wt-ut[0]:wt,h:ut[1]?vt-ut[1]:vt})),[wt,vt,ut[0],ut[1]]),Ft={x:"y"!==E?$(be.current?.scrollLeft||0,Ct.w,ft[0],Tt.x):0,y:"x"!==E?$(be.current?.scrollTop||0,Ct.h,ft[1],Tt.y):0},Nt=r.useMemo((()=>{if(!ct.type)return[{top:0,bottom:0,left:0,right:0}];let e=0;const t="x"===E,r="row"===Z,n=t&&!r||!t&&r,o=pt[0]+st[1],i=pt[1]+st[0],l=new Set,s=n?yt[0]:yt[1],c=pt[r?0:1],a=st[r?1:0];for(let e=Math.floor((et.length-1)/s)*s;e<et.length;e++)l.add(e);const u=s-l.size,d=u>0?(c+a)*u:0;return"center"===_?e=Math.round(d/2):"end"===_&&(e=d),et.map(((t,s)=>{const c=n?s%yt[0]:Math.floor(s/yt[1]),a=n?Math.floor(s/yt[0]):s%yt[1];let u,d;"x"===E?(u=a,d=c):(u=c,d=a);const m=l.size>0&&l.has(s),f=(m&&!r?e:0)+i*d,h=(m&&r?e:0)+o*u;return{top:f,left:h,bottom:f+pt[1],right:h+pt[0]}}))}),[pt[0],pt[1],st[0],st[1],_,et.length,yt[0],yt[1],ct.type,Z,E]),Ot=r.useMemo((()=>ut?.length&&U?function(e,t,r,n){const[o,i="start"]="string"==typeof e?[e,e]:e,l={display:"flex"};return t[0]>r&&(l.justifyContent=Y(o)),t[1]>n&&(l.alignItems=Y(i)),l}(U,ut,wt,vt):{}),[U,ut.join(),vt,wt]),It=r.useMemo((()=>[N(wt,ut[0]),N(vt,ut[1])]),[wt,vt,ut.join()]),Yt=r.useMemo((()=>"x"===E?It[0]:It[1]),[E,It[0],It[1]]),Ht=r.useCallback(H(Oe,he),[]),Wt=r.useCallback(H(Ie,he,lt,it),[lt,it]),Xt=r.useCallback(H(Ye,he),[]),$t=r.useCallback(((e,t,r)=>{const n=be.current;return n&&null!==e?async function(e,t,r,n,o,i){const l="y"===e,s=l?"scrollTop":"scrollLeft",a=l?i[1]:i[0],u=f(n,0,a),d=f(t[s],0,a);if(d!==u)return null===r?(await async function(e){for(;e.scrollHeight<=e.clientHeight&&e.scrollWidth<=e.clientWidth;)await new Promise((e=>requestAnimationFrame(e)))}(t),void(t[s]=n)):void c((()=>{const e=performance.now(),n=()=>{const i=performance.now(),l=Math.min((i-e)/r,1),c=f(d+(u-d)*l,0,a);t[s]=c,1>l&&c!==u&&o("smoothScroll",n)};o("smoothScroll",n)}),r,"smoothScrollBlock"+e)}(t,n,Me.current?null:r,e,pe.schedule,Et):null}),[Et.join()]),Bt=r.useMemo((()=>{const e={margin:C?`${tt}px ${rt}px ${nt}px ${ot}px`:"",height:ht[1]&&"none"!==ht[1]?xt+"px":"fit-content",width:ht[0]&&"none"!==ht[0]?bt+"px":"fit-content",...T&&!ct.type&&{gap:`${st[0]}px ${st[1]}px`},...V&&I(V,E,ut,lt,it),...("hybrid"===E||"x"===E)&&{flexShrink:0}};if(ct.type)return{...e,position:"relative"};const t=1===yt[0]?"y"===E?"column":"row":Z,r=ht[0]&&"none"!==ht[0]&&ht[1]&&"none"!==ht[1]?"wrap":void 0;return{...e,display:"flex",flexDirection:t,flexWrap:r,justifyContent:Y(_)}}),[C,Pe,De,[tt,rt,nt,ot,lt,it,st[0],st[1]].join(),ut.join(),Ve,ht[1],xt,bt,Ve,ct.type,E,yt[0],Z,_]),Dt=r.useCallback(((e,t,r)=>{we.current=W();const n=t.target;if(n.closest('\n [ms-custom-drag], [draggable="true"], [contenteditable],\n input, textarea, select, button, a\n '))return;let o=null;r&&(o=n.closest("scroll"===x?".ms-bar":".ms-slider")?.getAttribute("data-direction")),Ee.current=e,F({scrollElement:be.current,target:n,clickedObject:Ee,scrollStateRef:Le.current,type:x,triggerUpdate:he,direction:E,smoothScroll:$t,sizeLocal:[ut[0],ut[1]],thumbSize:"x"===o?Tt.x:Tt.y,axisFromAtr:o,duration:Ge.duration,scrollBarEdge:mt,rafScrollAnim:pe,isTouched:we.current,gap:st,overscrollRef:je,objLengthPerSize:It,isDraggingRef:Te,maxScrollSize:Et})}),[E,x,ut.join(),Ge.duration,$t,mt.join(),Tt.x,Tt.y,st.join(),It,Et.join()]),Pt=r.useCallback((e=>{Dt("thumb",e,!0)}),[Dt]),Vt=r.useCallback((e=>{be.current&&(({arrowType:e,scrollElement:t,wrapSize:r,scrollSize:n,smoothScroll:o,duration:i,loop:l,gap:s})=>{const c=r[0],a=r[1],u=t.scrollTop,d=t.scrollLeft,m=(e,r,n)=>{const l=n?((e,t)=>"x"===e?t>0?0:c:t>0?0:a)(e,r):((e,r)=>{const n="x"===e,o=n?d:u,i=n?s[0]:s[1],l=t[n?"clientWidth":"clientHeight"]+i;return l*(Math.floor(Math.max(0,o)/l)+r)})(e,r);o(l,e,i)};switch(e){case"top":u>0?m("y",-1):l&&m("y",-1,!0);break;case"left":d>0?m("x",-1):l&&m("x",-1,!0);break;case"right":d+n[0]<c?m("x",1):l&&m("x",1,!0);break;case"bottom":u+n[1]<a?m("y",1):l&&m("y",1,!0)}})({arrowType:e,scrollElement:be.current,wrapSize:[wt,vt],scrollSize:ut,smoothScroll:$t,duration:Ge.duration,loop:Je.loop,gap:st})}),[ut.join(),wt,vt,Ge.duration,$t,Je.loop,st[0],st[1]]),Ut=r.useCallback((()=>{"scroll"!==x&&ut[0]&&ut[1]&&ye.current&&be.current&&ve.current.size&&((e,t,r,n)=>{[...t].forEach(((t,o)=>{let i=O.get(t);const l=0===o?r:"x",s="x"===l?0:1;if(i&&i.elements.length===n[s]||(i={elements:Array.from(t.querySelectorAll(".ms-slider-element")),lastIndex:-1},O.set(t,i)),!i.elements.length)return;const c="x"===l?e.scrollLeft:e.scrollTop,a="x"===l?e.clientWidth:e.clientHeight,u=Math.floor((c+a/2)/a);u!==i.lastIndex&&(-1!==i.lastIndex&&i.elements[i.lastIndex]?.classList.remove("active"),i.elements[u]?.classList.add("active"),i.lastIndex=u)}))})(be.current,ve.current,E,It)}),[ut.join(),E,x,It.join()]),qt=r.useCallback((e=>{if(e){const o=(n=xe.current)?Array.from(n.children).flatMap((e=>{if(!(e instanceof HTMLElement))return[];const t=e.getAttribute(h);return t?[P(t)]:[]})):[];Ce.current&&(t=Ce.current,r=o,t.length===r.length&&t.every(((e,t)=>e===r[t])))||(Ce.current=o,e(o))}var t,r,n}),[]),Kt=r.useCallback((()=>{xe.current&&((e,t,r,n)=>{const o=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT,{acceptNode:e=>e instanceof Element&&e.hasAttribute(h)?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP});let i=o.nextNode();for(;i;){const e=i,r=e.getAttribute(h);if(r){const o=0===e.children.length;o&&(t.current.empty||(t.current.empty=new Set),t.current.empty.add(r)),"virtual"===n&&o||t.current.loaded.add(r)}i=o.nextNode()}r()})(xe.current,Se,he,ct.type)}),[We]),Gt=r.useCallback((e=>{"object"==typeof ie&&"clickTrigger"in ie&&void 0!==ie.clickTrigger&&((e,t,r)=>{const{selector:n,delay:o=0}="string"==typeof t?{selector:t}:t,i=e.target;if(!i.closest(n))return;const l=i.closest(`[${h}]`);l?.classList.add("remove"),s((()=>{l?.classList.remove("remove"),r()}),o)})(e,ie.clickTrigger,Kt)}),[Be,Kt]),_t=r.useCallback((e=>{l("removeHover");const t=ye.current,r=ge.current,n=be.current;if(!t||!r||!n)return;if(Ge.value.includes("end")){const{scrollLeft:t,scrollTop:r}=e.currentTarget;ke.current.update(t,r)}L?.(n.scrollLeft,n.scrollTop);const o=t.querySelectorAll("scroll"===x?".ms-bar":".ms-slider");te&&o.length>0&&!Ae.current&&o.forEach((e=>{e.classList.contains("hover")||M(e)})),Ae.current=!0,A?.(!0),s((()=>{ke.current.reset(),Ae.current=!1,A?.(!1),ct.type&&Kt(),te&&o.length>0&&!Ee.current&&o.forEach((e=>{s((()=>{e.hasAttribute("ms-manual-hover")||w(e)}),1e3,"removeHover")}))}),200,"isScrolling"),s((()=>qt(Fe.current)),"raf","onRenderedKeysChange"),fe.schedule("sliderCheckLocal",(()=>{"scroll"!==x&&Ut(),ae()}))}),[L,A,x,Ut,Kt,te,ct.type]),Zt=r.useCallback((e=>{if(Re.current)return;const t="object"==typeof Q.wheel&&"string"==typeof Q.wheel.changeDirectionKey?Q.wheel.changeDirectionKey:"KeyX";e.code!==t||"hybrid"!==E||Re.current||(e.stopPropagation(),Re.current=!0,he())}),[E,Ue]),Jt=r.useCallback((e=>{Re.current&&(e.stopPropagation(),Re.current=!1,he())}),[]);r.useEffect((()=>{if(!R)return Fe.current=void 0,void(Ce.current=null);Fe.current=R,Ce.current=null,qt(R)}),[R,qt]),r.useEffect((()=>{Fe.current&&ut[0]&&ut[1]&&qt(Fe.current)}),[et.join("|"),ut.join()]),r.useEffect((()=>{if(we.current||"hybrid"!==E)return;const e=xe.current,t=be.current;return e&&t?(e.clientWidth+lt>t.clientWidth&&e.clientHeight+it>t.clientHeight&&(t.addEventListener("keydown",Zt),t.addEventListener("keyup",Jt)),()=>{t.removeEventListener("keydown",Zt),t.removeEventListener("keyup",Jt)}):void 0}),[E,Ue,Xe,$e,et.join(),lt,it]),r.useEffect((()=>{ie&&ct.type&&Kt()}),[Be,ct.type,Kt,et.length]),r.useEffect((()=>{if(we.current)return;const e=be.current,t=xe.current;if(!e||!t)return;const r="hybrid"===E&&"object"==typeof Q.wheel&&Q.wheel.changeDirection?"x":E,n="hybrid"===E&&xt+it<=ut[1]||Re.current?["hybrid","y"].includes(r)?"x":"y":r,o=t=>{t.preventDefault(),p(t,e,Et,Le.current,n)};return Q.wheel&&e.addEventListener("wheel",o,{passive:!1}),()=>{e.removeEventListener("wheel",o)}}),[E,Ue,xt,ut[1],it,Re.current,Et.join()]),r.useEffect((()=>{fe.schedule("smoothScrollLocal",(()=>{("hybrid"===E?["x","y"]:[E]).forEach((e=>{const t=Ge.value["x"===e?0:1];if("end"===t){if(ke.current.get()[e]===("x"===e?"left":"up"))return;$t("x"===e?Ct.w:Ct.h,e,Ge.duration)}else"number"==typeof t&&ze.current[e]!==t&&(ze.current[e]=t,$t(t,e,Ge.duration))}))}))}),[E,He,Ct.w,Ct.h,Ge.value.join()]),r.useEffect((()=>{const e=Le.current.animationFrameId;return(ct.type||A)&&A&&A(!1),requestAnimationFrame((()=>Me.current=!1)),()=>{e&&cancelAnimationFrame(e),Le.current.animationFrameId&&cancelAnimationFrame(Le.current.animationFrameId),pe.cancel()}}),[]),r.useEffect((()=>{if(!ce)return;const e=ge.current,t=be.current;if(!e||!t)return;const r={parent:e,element:t,direction:E};return function(e){me.set(e.parent,e),1===me.size&&function(){if(G)return;q=new AbortController;const{signal:e}=q;document.addEventListener("pointerdown",de,{signal:e}),document.addEventListener("dragstart",de,{signal:e}),G=!0}()}(r),()=>{!function(e){me.delete(e.parent),0===me.size&&G&&(q?.abort(),K?.abort(),G=!1)}(r)}}),[ce,E]),r.useEffect((()=>{const e=be.current;if(!e)return;const t=e=>{Dt("wrapp",e)};if(Q.content||!Q.content&&we.current&&Q.wheel){if(!0===Q.progressElement)return;e.addEventListener("pointerdown",t)}return()=>{e.removeEventListener("pointerdown",t)}}),[Ue,Dt]),r.useEffect((()=>{const e=ye.current;if(!e||!te)return;if(!ve.current.size)return;const t=e=>{"mouseenter"===e.type&&document.removeEventListener("mouseup",t),"mouseleave"===e.type&&Ee.current?document.addEventListener("mouseup",t):Array.from(ve.current).forEach((t=>{(({el:e,event:t,isScrolling:r})=>{const n=e=>{if(["mouseleave","mouseup","pointerup","pointercancel"].includes(t.type)){if(e.removeAttribute("ms-manual-hover"),r?.current)return;w(e)}else e.setAttribute("ms-manual-hover",""),M(e)};Array.isArray(e)?e.map((e=>n(e))):n(e)})({el:t,event:e,isScrolling:Ae})}))},r=(t,r)=>{we.current?(Array.from(ve.current).forEach((e=>e[t]("pointerdown",r))),document[t]("pointerup",r),document[t]("pointercancel",r)):(e[t]("mouseenter",r),e[t]("mouseleave",r))};return r("addEventListener",t),()=>{r("removeEventListener",t)}}),[te,x,E,ve.current.size]),r.useEffect((()=>{"scroll"!==x&&fe.schedule("sliderCheckLocal",Ut)}),[x,Ut,ut.join()]);const Qt=r.useCallback(((t,n,o,i,l)=>{const s={width:pt[0]?pt[0]+"px":void 0,height:pt[1]?pt[1]+"px":void 0,...ct.type&&{position:"absolute",transform:`translate(${o}px, ${n}px)`},..."number"==typeof l&&{"--content-visibility":l}},c=le?e(r.Suspense,{fallback:gt,children:i}):i;return e("div",{[h]:""+t,className:"ms-object-box",style:s,onClick:ie?Gt:void 0,children:c},t)}),[le,!!gt,pt[0],pt[1],We,Be,yt[0],Gt,ct.type]),er=r.useMemo((()=>{const e=new Map;return Qe.forEach((t=>{r.isValidElement(t)&&null!=t.key&&e.set(t.key+"",t)})),e}),[Qe]),tr=r.useMemo((()=>[{positionType:"x"===E?"left":"top",visibility:Lt},{positionType:"x"===E?"right":"bottom",visibility:At},..."hybrid"===E?[{positionType:"left",visibility:Rt},{positionType:"right",visibility:kt}]:[]]),[Lt,At,E,Rt,kt]),rr=r.useMemo((()=>({width:ut[2]+"px",height:ut[3]+"px"})),[ut]),nr=r.useMemo((()=>({x:wt>ut[0]?"scroll hidden":"hidden",y:vt>ut[1]?"hidden scroll":"hidden",hybrid:`${wt>ut[0]?"scroll":"hidden"} ${vt>ut[1]?"scroll":"hidden"}`,hide:"hidden"}[Q.wheel||Q.content&&"scroll"===x?E:"hide"]??"hidden")),[wt,vt,ut,Ue,E]),or=r.useMemo((()=>J?tr.map((({positionType:t,visibility:r})=>e(b,{edgeGradient:Ze,visibility:r,edgeType:t,size:ut},"edge-"+t))):null),[J,tr,Ze,Xe]),ir=r.useMemo((()=>Q.arrows?tr.map((({positionType:t,visibility:r})=>e(v,{visibility:r,arrows:Je,arrowType:t,handleArrow:Vt,size:ut[0]},"arrow-"+t))):null),[Ue,tr,Je,Vt,ut[0]]),lr=()=>{const t=be.current?.scrollLeft||0,n=be.current?.scrollTop||0;return e("div",{className:"ms-objects-wrapper",ref:xe,style:{...Bt,...(je.current.x||je.current.y)&&{transform:`translate(${je.current.x}px, ${je.current.y}px)`},...Te.current&&{pointerEvents:"none"}},children:et.map(((o,i)=>((t,n,o,i)=>{const l=er.get(t),s=ct.stopLoadOnScroll&&Ae.current&&!Se.current.loaded.has(t)?gt:Se.current.empty?.has(t)?ie&&"object"==typeof ie&&r.isValidElement(ie)?ie:ie&&"object"==typeof ie&&"mode"in ie&&"object"==typeof ie.mode&&"fallback"in ie.mode?ie.mode.fallback:gt:l,c="firstChild"!==ht[0]&&"firstChild"!==ht[1]||0!==n?s:e(d,{onResize:Xt,children:s});if(!ct.type)return Qt(t,0,0,c);const{top:a,bottom:u,left:m,right:f}=Nt[n],h=(e=!0)=>{const t=e?at:[0,0,0,0],r=e=>{const r="x"===e?o:i,n=r+("x"===e?ut[0]:ut[1]),l="x"===e?m-t[3]:a-t[2],s="x"===e?f+t[1]:u+t[0],c=s-l;if(0>=c)return 0;const d=Math.min(s,n)-Math.max(l,r);return d>0?Math.round(10*Math.min(1,d/c))/10:0};if("hybrid"===E){const e=r("x"),t=r("y");return Math.min(e,t)}return r("x"===E?"x":"y")},p=h(),g=ct.trackVisibility?h(!1):null;if("lazy"===ct.type){const e=Se.current.loaded.has(t);if(p&&!e){if(Ae.current&&ct.stopLoadOnScroll)return;Se.current.loaded.add(t)}return e?Qt(t,a,m,c,g):null}return p?Qt(t,a,m,c,g):(Se.current.loaded.delete(t),null)})(o,i,t,n)))})},sr=r.useMemo((()=>{const e={position:"relative",width:ut[0]+"px",height:ut[1]+"px"};return Q.arrows&&Je.contentReduce&&Je.size&&("x"===E?e.left=Je.size+"px":"y"===E?e.top=Je.size+"px":(e.top=Je.size+"px",e.left=Je.size+"px")),e}),[ut,Ue,Je,E]),cr=t("div",{"morph-scroll":""+ue,className:u,ref:ge,style:rr,children:[t("div",{className:"ms-content",ref:ye,style:{...sr,transform:"translateZ(0)",...we.current&&{touchAction:"pinch-zoom"}},children:[e("div",{className:"ms-element",ref:be,onScroll:_t,tabIndex:0,style:{width:"100%",height:"100%",outline:"none",...Ot,..."boolean"!=typeof Q.progressElement||!1===Q.progressElement?{scrollbarWidth:"none",overflow:"hidden"}:{overflow:nr},...Q.content&&{cursor:"grab"}},children:pt[0]&&pt[1]?lr():e(d,{onResize:Wt,style:Ot,children:lr()})}),or,Q.progressElement&&!0!==Q.progressElement?(()=>{const e="x"!==E;return[{shouldRender:Mt>ut[e?1:0],direction:E,thumbSize:e?Tt.y:Tt.x,thumbSpace:e?Ft.y:Ft.x,objLengthPerSize:Yt,progressReverseIndex:0},{shouldRender:"hybrid"===E&&wt>ut[0],direction:"x",thumbSize:Tt.x,thumbSpace:Ft.x,objLengthPerSize:It[0],progressReverseIndex:1}].filter((({shouldRender:e})=>e))})().map((t=>{const r="boolean"==typeof ee?ee:ee[t.progressReverseIndex];return e(g,{type:x,direction:t.direction,progressReverse:r,size:ft,progressTrigger:[Q,Ue],scrollBarOnHover:te,scrollBarEvent:"sliderMenu"===x?$t:Pt,thumbSize:t.thumbSize,thumbSpace:t.thumbSpace,objLengthPerSize:t.objLengthPerSize,sliderCheckLocal:Ut,duration:Ge.duration,isTouched:we.current,scrollStateRef:Le,scrollEl:be,scrollBarsRef:ve,triggerUpdate:he,overscroll:je,maxScrollSize:Et},t.direction)})):null]}),ir]});return"auto"===k?e(d,{measure:"outer",onResize:Ht,children:cr}):cr};fe.displayName="MorphScroll";const he={MorphScroll:fe,ResizeTracker:d,IntersectionTracker:u};export{u as IntersectionTracker,fe as MorphScroll,d as ResizeTracker,he as default};
|