morphing-scroll 1.1.3 → 1.1.5

package/index.d.ts

@@ -1,12 +1,15 @@
 import React from "react";
 
-type ResizeTrackerType = {
-  children: (width: number, height: number) => React.ReactNode;
-  onResize?: (width: number, height: number) => void;
+type ResizeTrackerT = {
+  measure?: "inner" | "outer" | "all";
   style?: React.CSSProperties;
+  onResize?: (width: number, height: number) => void;
+  children: (width: number, height: number) => React.ReactNode;
 };
 
-type IntersectionTrackerType = {
+declare const ResizeTracker: React.FC<ResizeTrackerT>;
+
+type IntersectionTrackerT = {
   children: React.ReactNode;
   root?: Element | null;
   threshold?: number;
@@ -17,58 +20,105 @@ type IntersectionTrackerType = {
   intersectionDeley?: number;
 };
 
-type progressTriggerT =
-  | "wheel"
-  | "progressElement"
-  | "content"
-  | "contentSlider"
-  | "arrows"
-  | "loopedArrows";
-type AlignT = "start" | "center" | "end";
-type ScrollType = {
+declare const IntersectionTracker: React.FC<IntersectionTrackerT>;
+
+export type MorphScrollT = {
+  // General Settings
   scrollID?: string;
   className?: string;
-  scrollXY?: number[];
-  objectXY?: number[];
+  children?: React.ReactNode;
+
+  // Scroll Settings
+  type?: "scroll" | "slider";
+  direction?: "x" | "y";
+  scrollTop?: { value: number | "end"; duration?: number };
+  stopLoadOnScroll?: boolean;
+  onScrollValue?: Array<(scroll: number) => boolean>;
+  isScrolling?: (status: boolean) => void;
+
+  // Visual Settings
+  size?: number[];
+  objectsSize: (number | "none" | "firstChild")[];
   gap?: number[] | number;
   padding?: number[] | number;
-  xDirection?: boolean;
-  elementsAlign?: AlignT;
-  contentAlign?: [AlignT, AlignT];
+  contentAlign?: ["start" | "center" | "end", "start" | "center" | "end"];
+  elementsAlign?: "start" | "center" | "end";
+  edgeGradient?: boolean | { color?: string; size?: number };
+  objectsWrapFullMinSize?: boolean;
+
+  // Progress and Rendering
   progressReverse?: boolean;
-  progressTrigger?: Array<progressTriggerT>;
   progressVisibility?: "visible" | "hover" | "hidden";
-  scrollTop?: number | "end";
-  sliderType?: boolean;
+  progressTrigger?: {
+    wheel?: boolean;
+    content?: boolean;
+    progressElement?: boolean | React.ReactNode;
+    arrows?: boolean | { size?: number; element?: React.ReactNode };
+  };
+
+  // Additional Settings
   lazyRender?: boolean;
   infiniteScroll?: boolean;
   rootMargin?: number[] | number;
   suspending?: boolean;
   fallback?: React.ReactNode;
-  thumbElement?: React.ReactNode;
-  edgeGradient?: boolean | { color?: string; size?: number };
-  arrows?: {
-    size?: number;
-    className?: string;
-    element?: React.ReactNode;
-  };
-  objectsWrapperMinSize?: number;
-  onScrollValue?: Array<[(scrollTop: number) => boolean, () => void]>;
-  children?: React.ReactNode;
-  pixelsForSwipe?: number;
-  progressBarSize?: number;
-  duration?: number;
 };
 
-declare const ResizeTracker: React.FC<ResizeTrackerType>;
-declare const IntersectionTracker: React.FC<IntersectionTrackerType>;
-declare const Scroll: React.FC<ScrollType>;
+/**
+ * `MorphScroll` component.
+ *
+ * ### General Settings
+ * @param scrollID - Optional: Scroll identifier.
+ * @param className - Optional: Additional CSS class for the component.
+ * @param children - Optional: Child elements.
+ *
+ * ### Scroll Settings
+ * @param type - Optional: Type of progress element. Default: `"scroll"`.
+ * @param direction - Optional: Scrolling direction.
+ * @param scrollTop - Optional: Scroll position and animation duration.
+ * @param stopLoadOnScroll - Optional: Stop loading when scrolling.
+ * @param onScrollValue - Optional: Callback for scroll value.
+ * @example
+ * `onScrollValue={[
+ *   (scroll) => scroll > 200 && console.log("scroll > 200"),
+ * ]}`
+ * @param isScrolling - Optional: Callback for scroll status.
+ * @example
+ * `isScrolling={(value) => console.log(value)}`
+ *
+ * ### Visual Settings
+ * @param size - Optional: Scroll width and height.
+ * @param objectsSize - Required: Size of cells for each object.
+ * @param gap - Optional: Gap between cells.
+ * @param padding - Optional: Padding for the `objectsWrapper`.
+ * @param contentAlign - Optional: Aligns the content when it is smaller than the MorphScroll `size`.
+ * @param elementsAlign - Optional: Aligns the objects within the `objectsWrapper`.
+ * @param edgeGradient - Optional: Edge gradient. Default: `{ color: "rgba(0,0,0,0.4)", size: 40 }`.
+ * @param objectsWrapFullMinSize - Optional: Sets the `min-height` of the `objectsWrapper` to match the height of the MorphScroll.
+ *
+ * ### Progress and Rendering
+ * @param progressReverse - Optional: Reverse the progress bar direction.
+ * @param progressVisibility - Optional: Visibility of the progress bar.
+ * @param progressTrigger - Optional: Triggers for the progress bar. Default: `{ wheel: true }`.
+ * @example
+ * `progressTrigger={
+ *   wheel: true,
+ *   content: true,
+ *   progressElement: `true/false` or <YourProgressComponent/>
+ *   arrows: true or { size: number, element: <YourArrowComponent/> }
+ * }`
+ *
+ * ### Additional Settings
+ * @param lazyRender - Optional: Lazy rendering of objects.
+ * @param infiniteScroll - Optional: Infinite scrolling.
+ * @param rootMargin - Optional: Margin expansion for object rendering.
+ * @param suspending - Optional: Adds React Suspense.
+ * @param fallback - Optional: Fallback element for error handling.
+ *
+ * @returns React component.
+ * @see [Documentation](https://github.com/voodoofugu/morphing-scroll?tab=readme-ov-file#-scroll)
+ */
 
-const Morphing = {
-  Scroll,
-  ResizeTracker,
-  IntersectionTracker,
-};
+declare const MorphScroll: React.FC<MorphScrollT>;
 
-export default Morphing;
-export { Scroll, ResizeTracker, IntersectionTracker };
+export { MorphScroll, ResizeTracker, IntersectionTracker };

package/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");const t=({children:t,root:r,threshold:n,rootMargin:s,style:l,visibleContent:o=!1,onVisible:c,intersectionDeley:i})=>{const[a,u]=e.useState(!1),m=e.useRef(null),g=e.useRef(null),p=s?"number"==typeof s?`${s}px ${s}px ${s}px ${s}px`:2===s.length?`${s[0]}px ${s[1]}px ${s[0]}px ${s[1]}px`:`${s[0]}px ${s[1]}px ${s[2]}px ${s[3]}px`:"",d=e=>{e.forEach((e=>{u(e.isIntersecting)}))},f={root:r,threshold:n,rootMargin:p};return e.useEffect((()=>{const e=new IntersectionObserver(d,f);return m.current&&e.observe(m.current),()=>{m.current&&e.unobserve(m.current)}}),[r,n,s]),e.useEffect((()=>(i?g.current=setTimeout((()=>{a&&c&&c()}),i):a&&c&&c(),()=>{g.current&&clearTimeout(g.current)})),[a]),e.createElement("div",{ref:m,style:l},(o||a)&&t)},r=({children:t,onResize:r,style:n})=>{const s=e.useRef(null),[l,o]=e.useState({width:0,height:0});return e.useEffect((()=>{const e=s.current;if(!e)return;const t=new ResizeObserver((e=>{for(const t of e){const e=t.contentRect.width,n=t.contentRect.height;o({width:e,height:n}),r&&r(e,n)}}));return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}),[r]),e.createElement("div",{className:"resizeTracker",ref:s,style:Object.assign({width:"max-content",height:"max-content"},n)},t(l.width,l.height))},n=({scrollID:t="",className:n="",scrollXY:l,objectXY:o,xDirection:c=!1,gap:i,padding:a=[0,0,0,0],progressReverse:u=!1,progressTrigger:m="wheel",progressVisibility:g="visible",sliderType:p=!1,lazyRender:d=!1,rootMargin:f=0,suspending:h=!1,fallback:b=null,scrollTop:v=1,infiniteScroll:x=!1,edgeGradient:$,objectsWrapperMinSize:y,children:E,onScrollValue:w,thumbElement:M,arrows:j,elementsAlign:O=!1,contentAlign:T,pixelsForSwipe:R=8,progressBarSize:k=4,duration:z=200})=>{const N=e.useReducer((()=>({})),{})[1],S=e.useRef(null),C=e.useRef(null),A=e.useRef(null),L=e.useRef(null),Y=e.useRef(null),F=e.useRef(null),D=e.useRef(null),B=e.useRef(""),V=e.useRef(0),[q,I]=e.useState(0),[X,H]=e.useState(0),_=e.useMemo((()=>e.Children.toArray(E).filter((e=>null!=e))),[E]),P=e.useMemo((()=>{if(_.length>0){const t=_[0];if(e.isValidElement(t))return t.key}}),[_]),W={size:40,className:"",element:e.createElement("div",{className:"arrow"})},G={color:"rgba(0,0,0,0.4)",size:40},J=e.useMemo((()=>Object.assign(Object.assign({},W),j)),[j]),K="object"==typeof $?Object.assign(Object.assign({},G),$):G,Q={background:`linear-gradient(${K.color}, transparent)`,height:`${K.size}px`},U="number"==typeof a?[a,a,a,a]:2===a.length?[a[0],a[1],a[0],a[1]]:3===a.length?[a[0],a[1],a[2],a[1]]:a,[Z,ee,te,re]=c?[U[1],U[2],U[3],U[0]]:U,ne=U[1]+U[3],se=Z+te,le=re+ee,[oe,ce]=e.useMemo((()=>{var e,t;return"number"==typeof i?[i,i]:c?[null!==(e=null==i?void 0:i[1])&&void 0!==e?e:0,null!==(t=null==i?void 0:i[0])&&void 0!==t?t:0]:[0,0]}),[i,c]),ie=e.useMemo((()=>{var e;return o||(c?[null!==(e=null==l?void 0:l[0])&&void 0!==e?e:null,l?l[1]-ne:null]:[l?l[0]-ne:null,null])}),[o,l,ne,c]),ae=ie?c?ie[0]:ie[1]:null,ue=ie?c?ie[1]:ie[0]:null,me=f?"number"==typeof f?[f,f,f,f]:c?2===f.length?[f[0],f[1],f[0],f[1]]:[f[1],f[0],f[3],f[2]]:2===f.length?[f[1],f[0],f[1],f[0]]:f:null,[ge,pe]=me&&f?c?[me[3],me[1]]:[me[2],me[0]]:[0,0],de=e.useCallback((e=>m.includes(e)),[m]),fe=e.useMemo((()=>{const[e,t]=l||ie;return de("arrows")&&J.size?c?[e?e-2*J.size:e,t,e,t]:[e,t?t-2*J.size:t,e,t]:[e,t,e,t]}),[l,ie,c,j]),he=c?fe[0]||0:fe[1]||0,be=e.useMemo((()=>{if(!ie)return _.length;if(!fe[0]||!fe[1])return 1;const[e,t]=fe,[r,n]=ie,s=c?n?n+oe:t+oe:r?r+oe:e+oe,l=c?t-ne:e-ne,o=Math.floor(l/s);return Math.max(1,Math.min(o,_.length))}),[ie,fe,c,oe,ne]),ve=e.useMemo((()=>{if(!x||be<=1)return[];const e=_.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:be},(()=>[]));return e.forEach((e=>{t[e%be].push(e)})),t}),[E,be,x]),xe=e.useMemo((()=>be>1?Math.ceil(_.length/be):_.length),[_.length,be]),$e=e.useMemo((()=>(ue||0)*be+(be-1)*ce),[ue,be,ce]),ye=e.useMemo((()=>o?(null!=ae?ae:0)*xe+(xe-1)*oe:X),[ae,xe,oe,X]),Ee=e.useMemo((()=>ye+se),[ye,se]),we=e.useMemo((()=>$e+le),[$e,le]),Me=e.useMemo((()=>"visible"===g||"hover"===g?0===ye?0:he?Math.round(he/Ee*he):0:0),[he,Ee,g]),je=e.useMemo((()=>he?Ee-he:Ee),[Ee,he]),Oe=e.useMemo((()=>{if(v)return"number"==typeof v?v:"end"===v&&Ee>he?je:0}),[v,Ee,je]),Te=e.useMemo((()=>fe[0]&&fe[1]?fe[0]/2-fe[1]/2:0),[fe]),Re=e.useMemo((()=>{let e=[],t=0;if(x&&O){const r=Array.from({length:_.length},((e,t)=>t)),n=Math.abs(Math.floor(_.length/be)*be-_.length);e=n?r.slice(-n):[],"center"===O?t=((null!=ue?ue:0)+ce)*(be-n)/2:"end"===O&&(t=((null!=ue?ue:0)+ce)*(be-n))}return _.map(((r,n)=>{const s=function(e,t){if(!t)return[0,e];for(let r=0;r<t.length;r++){const n=t[r].indexOf(e);if(-1!==n)return[r,n]}return[0,0]}(n,ve),l=function(e){return 0!==e?((null!=ae?ae:0)+oe)*e+Z:Z}(x?be>1?s[1]:n:0),o=x&&ie[1]?l+ie[1]:0,i=x&&ue&&be>1?ue*s[0]+ce*s[0]+(c?U[0]:U[1])+(O&&e.length>0&&e.includes(n)?t:0):0;return{elementTop:l,elementBottom:o,left:i}}))}),[E,ve,ie,i,x,be]),ke=e.useMemo((()=>{var e,t;if(!T)return{};const[r,n="start"]=T,s="start"===r?"flex-start":"center"===r?"center":"flex-end",l="start"===n?"flex-start":"center"===n?"center":"flex-end",o=null!==(e=fe[0])&&void 0!==e?e:0,i=null!==(t=fe[1])&&void 0!==t?t:0,a=c?o>Ee:i>Ee,u={};return(c?i>we:o>we)&&(u.justifyContent=c?l:s),a&&(u.alignItems=c?s:l),u}),[T,c,fe,Ee,we]),ze=e.useCallback((e=>{const t=c?fe[0]:fe[1];if(!t)return null;return(e?Math.ceil:Math.floor)(ye/t)}),[c,fe,ye]),Ne=e.useCallback((e=>{const t=A.current,r=L.current;if(!t||!r)return;const n=t.scrollTop,s=r.clientHeight,l=ze(!0),o=e=>De(e,(()=>{}));"first"===e&&n>0&&o(n<=he?0:n-he),"last"===e&&l&&n+he!==s&&o(n+he>=he*l?s:n+he)}),[A,L,ze]),Se=e.useCallback((()=>{var e;if(!$)return;const t=(null===(e=A.current)||void 0===e?void 0:e.scrollTop)||0,r=Math.round(t+he)!==Ee;if(C.current&&(C.current.classList.toggle("edgeLast",r),C.current.classList.toggle("edgeFirst",t>1),de("arrows")&&(C.current.classList.toggle("l_ArrOff",!r),C.current.classList.toggle("f_ArrOff",t<=1)),Y.current)){function n(){var e;const r=null===(e=Y.current)||void 0===e?void 0:e.querySelectorAll(".sliderElem");r&&r.forEach(((e,r)=>{const n=t>=he*r&&t<he*(r+1);e.classList.toggle("active",n)}))}n()}}),[$,he,Ee]),Ce=e.useCallback((()=>{if(A.current&&0!==Me&&("visible"===g||"hover"===g)){const e=Math.abs(Math.round(A.current.scrollTop/je*(he-Me)));e===q||p||I(e),0===A.current.scrollTop&&"none"===B.current&&(A.current.scrollTop=1),A.current.scrollTop>je&&(A.current.scrollTop=je),w&&w.forEach((([e,t])=>{A.current&&e(A.current.scrollTop)&&t()}))}Se()}),[he,Me,q]),Ae=e.useCallback((e=>{const t=A.current,r=ze();if(t&&r){if(["thumb","wrapp"].includes(B.current)){const n="thumb"===B.current?1:-1;t.scrollTop+=(c?e.movementX:e.movementY)*r*n}if("slider"===B.current){const r=L.current;if(!r)return;const n=r.clientHeight,s=e=>De(e,(()=>{V.current=0,N()})),l=e=>{const r=t.scrollTop+e*he;s(e>0?Math.min(r,n-he):Math.max(r,0))};e.movementY>0&&V.current<R?(V.current+=e.movementY,V.current>=R&&t.scrollTop+he!=n&&l(1)):e.movementY<0&&V.current>-R&&(V.current-=Math.abs(e.movementY),V.current<=-R&&0!=t.scrollTop&&l(-1))}}}),[c,A,ze]),Le=e.useCallback((()=>{const e=F.current;e&&(e.classList.remove("grabbingElement"),window.removeEventListener("mousemove",Ae),window.removeEventListener("mouseup",Le),document.body.style.removeProperty("cursor"),B.current="",N())}),[Ae,S]),Ye=e.useCallback(((e,t,r)=>{r&&(F.current=r,B.current=t,N(),("hover"===g||"visible"===g)&&r.classList.add("grabbingElement"),window.addEventListener("mousemove",Ae),window.addEventListener("mouseup",Le),document.body.style.cursor="grabbing")}),[Ae,Le,S]),Fe=e.useCallback(((e,t)=>{H(t-se)}),[c,se,ye]),De=e.useCallback(((e,t)=>{const r=A.current;if(!r)return;const n=r.scrollTop,s=performance.now(),l=o=>{const c=o-s,i=Math.min(c/z,1);(e||0===e)&&(r.scrollTop=n+(e-n)*i),c<z?requestAnimationFrame(l):t()};requestAnimationFrame(l)}),[A.current]);e.useEffect((()=>{function e(e,r,n=!1){console.warn(`You are using the ${e} ${n?"with":"without"} ${r}${t?` in ${t}`:""} 👺`)}!d&&f&&u&&e("rootMargin","lazyRender"),x&&d&&u&&e("lazyRender","infiniteScroll",!0),"hidden"===g&&(u&&e("progressReverse","progressVisibility `hidden`",!0),de("progressElement")&&e("progressTrigger [`scrollThumb`]","progressVisibility `hidden`",!0),de("arrows")&&e("progressTrigger [`arrows`]","progressVisibility `hidden`",!0)),!de("arrows")&&j&&u&&e("arrows","progressTrigger [`arrows`]"),!h&&b&&u&&e("fallback","suspending"),x&&N(),Se()}),[]),e.useEffect((()=>{if(v&&A.current&&_.length>0&&"end"===v){let e;const t=()=>{D.current=P};return null===D.current?e=requestAnimationFrame((()=>De(null!=Oe?Oe:0,t))):D.current!==P?De(NaN,t):D.current===P&&(e=requestAnimationFrame((()=>De(null!=Oe?Oe:0,(()=>{}))))),()=>cancelAnimationFrame(e)}}),[ye]);const Be=e.createElement("div",{className:"objectsWrapper",ref:L,onMouseDown:e=>de("content")&&Ye(e,"wrapp",L.current),style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({padding:`${Z}px ${ee}px ${te}px ${re}px`},i&&{gap:`${oe}px ${ce}px`}),O&&!x&&{justifyContent:"start"===O?"flex-start":"center"===O?"center":"flex-end"}),$e&&{width:`${$e}px`}),o&&ye&&{position:"absolute",height:`${ye}px`}),y&&{minHeight:`calc(${y}px - ${se}px)`})},_.map(((t,r)=>{var n,l;const o=t.key,i={scrollElementRef:A,xyObjectReverse:ue,xyObject:ae,rootMargin:f,suspending:h,fallback:b,mRootLocal:me,localObjectXY:ie};if(!x||!A.current)return e.createElement(s,Object.assign({key:o},i,{lazyRender:d}),t);{const{elementTop:a,elementBottom:u,left:m}=Re[r];if((c?null!==(n=fe[0])&&void 0!==n?n:0:null!==(l=fe[1])&&void 0!==l?l:0)+ge>a-A.current.scrollTop&&u-A.current.scrollTop>0-pe)return e.createElement(s,Object.assign({key:o},i,{elementTop:a,left:m,infiniteScroll:x}),t)}})));return e.createElement("div",{className:`customScroll${c?" xDirection":" yDirection"}${de("content")?" draggableContent":""}${"hover"===g?" progressOnHover":""} ${n}`,ref:S,style:{width:`${fe[2]}px`,height:`${fe[3]}px`}},e.createElement("div",{className:"scrollContent",ref:C,style:Object.assign(Object.assign({width:c?`${fe[1]}px`:`${fe[0]}px`,height:c?`${fe[0]}px`:`${fe[1]}px`},c&&{transform:`rotate(-90deg) translate(${Te}px, ${Te}px) scaleX(-1)`}),de("arrows")&&J.size&&(c?{left:`${J.size}px`}:{top:`${J.size}px`}))},de("arrows")&&["first","last"].map((t=>e.createElement("div",{key:t,className:`arrowBox ${t}${J.className?" "+J.className:""}`,style:{height:`${J.size}px`},onClick:()=>Ne(t)},J.element))),("visible"===g||"hover"===g)&&Me<he&&e.createElement(e.Fragment,null,p?e.createElement("div",{className:`sliderBar${u?" progressReverse":""}${de("progressElement")?" draggable":""}`,ref:Y,onMouseDown:e=>Ye(e,"slider",S.current)},Array.from({length:ze()||0},((t,r)=>e.createElement("div",{key:r,className:"sliderElem",style:{width:`${k}px`}},M)))):e.createElement("div",{className:`scrollBar${u?" progressReverse":""}${de("progressElement")?" draggable":""}`,style:{width:`${k}px`}},e.createElement("div",{className:"scrollBarThumb"+(M?"":" defaultThumb"),onMouseDown:e=>de("progressElement")&&Ye(e,"thumb",S.current),style:{height:`${Me}px`,top:`${q}px`}},M,e.createElement("div",{className:"clickField"})))),e.createElement("div",{className:"scrollElement",ref:A,onScroll:Ce,style:Object.assign(Object.assign({},ke),de("wheel")?{overflow:"hidden scroll"}:{overflow:"hidden hidden"})},o?Be:e.createElement(r,{onResize:Fe},(()=>Be))),$&&e.createElement("div",{className:"edge first",style:Q}),$&&e.createElement("div",{className:"edge last",style:Q})))},s=e.memo((({children:r,elementTop:n,left:s,mRootLocal:l,scrollElementRef:o,xyObject:c,xyObjectReverse:i,localObjectXY:a,rootMargin:u,suspending:m,fallback:g,infiniteScroll:p,lazyRender:d})=>{const f=m?e.createElement(e.Suspense,{fallback:g},r):r,h=a[0]?{width:`${a[0]}px`}:{},b={width:`${i}px`,height:`${c}px`},v={root:o.current,rootMargin:p?u:l,style:p?Object.assign(Object.assign(Object.assign({},b),{position:"absolute",top:`${n}px`}),null!==s?{left:`${s}px`}:{}):b},x=e.createElement("div",{style:h},f);return p?e.createElement("div",{style:Object.assign(Object.assign({position:"absolute",top:`${n}px`},null!==s?{left:`${s}px`}:{}),b)},x):d?e.createElement(t,Object.assign({},v),x):e.createElement("div",{style:b},x)}));s.displayName="ScrollObject";const l={Scroll:n,ResizeTracker:r,IntersectionTracker:t};exports.IntersectionTracker=t,exports.ResizeTracker=r,exports.Scroll=n,exports.default=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");const t=({children:t,root:r,threshold:n,rootMargin:s,style:o,visibleContent:l=!1,onVisible:i,intersectionDeley:c})=>{const[a,u]=e.useState(!1),d=e.useRef(null),g=e.useRef(null),m=s?"number"==typeof s?`${s}px ${s}px ${s}px ${s}px`:2===s.length?`${s[0]}px ${s[1]}px ${s[0]}px ${s[1]}px`:`${s[0]}px ${s[1]}px ${s[2]}px ${s[3]}px`:"",h=e=>{e.forEach((e=>{u(e.isIntersecting)}))},p={root:r,threshold:n,rootMargin:m};return e.useEffect((()=>{const e=new IntersectionObserver(h,p);return d.current&&e.observe(d.current),()=>{d.current&&e.unobserve(d.current)}}),[r,n,s]),e.useEffect((()=>(c?g.current=setTimeout((()=>{a&&i&&i()}),c):a&&i&&i(),()=>{g.current&&clearTimeout(g.current)})),[a]),e.createElement("div",{ref:d,style:o},(l||a)&&t)},r=({measure:t="inner",style:r,onResize:n,children:s})=>{const o=e.useRef(null),[l,i]=e.useState({width:0,height:0});e.useEffect((()=>{const e=o.current;if(null==e||e.parentElement,!e)return;const t=new ResizeObserver((e=>{for(const t of e){const e=t.contentRect.width,r=t.contentRect.height;i({width:e,height:r}),n&&n(e,r)}}));return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}),[t,n]);const c={minWidth:"100%",minHeight:"100%"},a={width:"max-content",height:"max-content"},u={inner:Object.assign({},a),outer:Object.assign({},c),all:Object.assign(Object.assign({},c),a)};return e.createElement("div",{className:"resizeTracker",ref:o,style:Object.assign(Object.assign({},u[t]),r)},s(l.width,l.height))},n=({scrollID:t="",type:n="scroll",className:o="",size:l,objectsSize:i,direction:c="y",gap:a,padding:u=[0,0,0,0],progressReverse:d=!1,progressTrigger:g={wheel:!0},progressVisibility:m="visible",lazyRender:h=!1,rootMargin:p=0,suspending:f=!1,fallback:b=null,scrollTop:y,infiniteScroll:v=!1,edgeGradient:x,objectsWrapFullMinSize:j,children:w,onScrollValue:O,elementsAlign:E=!1,contentAlign:$,isScrolling:M,stopLoadOnScroll:T})=>{var R;const z=e.useReducer((()=>({})),{})[1],k=e.useRef(null),S=e.useRef(null),C=e.useRef(null),N=e.useRef(null),A=e.useRef(null),B=e.useRef(null),Y=e.useRef("none"),L=e.useRef(0),D=e.useRef([]),I=e.useRef(null),q=e.useRef(0),V=e.useRef(null),[F,P]=e.useState(!1),[W,X]=e.useState({width:0,height:0}),[H,_]=e.useState({width:0,height:0}),[G,J]=e.useState({width:0,height:0}),K=`${e.useId()}`.replace(/^(.{2})(.*).$/,"$2"),Q=Object.assign({value:1,duration:200},y),U={position:"absolute",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer"},Z={color:"rgba(0,0,0,0.4)",size:40},ee=e.useMemo((()=>e.Children.toArray(w).filter((e=>null!=e))),[w]),te=e.useMemo((()=>{if("end"===Q.value&&ee.length>0){const t=ee[0];if(e.isValidElement(t))return t.key}}),[ee]),re=Object.assign(Object.assign({},{size:40}),"object"==typeof g.arrows?g.arrows:{}),ne="object"==typeof x?Object.assign(Object.assign({},Z),x):Z,se={position:"absolute",left:0,width:"100%",pointerEvents:"none",transition:"opacity 0.1s ease-in-out",background:`linear-gradient(${ne.color}, transparent)`,height:`${ne.size}px`},oe="number"==typeof u?[u,u,u,u]:2===u.length?[u[0],u[1],u[0],u[1]]:3===u.length?[u[0],u[1],u[2],u[1]]:u,[le,ie,ce,ae]="x"===c?[oe[1],oe[2],oe[3],oe[0]]:oe,ue=oe[1]+oe[3],de=le+ce,ge=ae+ie,[me,he]=e.useMemo((()=>{var e,t;return"number"==typeof a?[a,a]:"x"===c?[null!==(e=null==a?void 0:a[1])&&void 0!==e?e:0,null!==(t=null==a?void 0:a[0])&&void 0!==t?t:0]:[0,0]}),[a,c]),pe=e.useMemo((()=>["number"==typeof i[0]?i[0]:"none"===i[0]?null:"firstChild"===i[0]?G.width:null,"number"==typeof i[1]?i[1]:"none"===i[1]?null:"firstChild"===i[1]?G.height:null]),[i,ue,G]),fe="x"===c?pe[0]:pe[1],be="x"===c?pe[1]:pe[0],ye=p?"number"==typeof p?[p,p,p,p]:"x"===c?2===p.length?[p[0],p[1],p[0],p[1]]:[p[1],p[0],p[3],p[2]]:2===p.length?[p[1],p[0],p[1],p[0]]:p:null,[ve,xe]=ye&&p?"x"===c?[ye[3],ye[1]]:[ye[2],ye[0]]:[0,0],je=e.useMemo((()=>{const[e,t]=l&&Array.isArray(l)?l:[W.width,W.height];return g.arrows&&re.size?"x"===c?[e?e-2*re.size:e,t,e,t]:[e,t?t-2*re.size:t,e,t]:[e,t,e,t]}),[l,c,re.size,W]),we="x"===c?je[0]:je[1],Oe="x"===c?je[1]:je[0],Ee=e.useMemo((()=>{const e=be?be+me:null;return e?Math.floor((Oe-ue)/e):1}),[be,Oe,me,ue]),$e=e.useMemo((()=>{if(!v||Ee<=1)return[];const e=ee.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:Ee},(()=>[]));return e.forEach((e=>{t[e%Ee].push(e)})),t}),[w,Ee,v]),Me=e.useMemo((()=>Ee>1?Math.ceil(ee.length/Ee):ee.length),[ee.length,Ee]),Te=e.useMemo((()=>{const e=Ee||1;return be?be*e+(e-1)*he:v?(G.width+he)*e-he:H.width}),[be,Ee,he,H,G]),Re=e.useMemo((()=>fe?fe*Me+(Me-1)*me:v?(G.height+me)*Me-me:H.height),[fe,Me,me,H,G]),ze=e.useMemo((()=>Re+de),[Re,de]),ke=e.useMemo((()=>Te+ge),[Te,ge]),Se=(null===(R=C.current)||void 0===R?void 0:R.scrollTop)||0,Ce=Math.round(Se+we)!==ze,Ne=e.useMemo((()=>"hidden"===m&&ze||0===Re?0:we?Math.round(we/ze*we):0),[we,ze,m]),Ae=e.useMemo((()=>we?ze-we:ze),[ze,we]),Be=e.useMemo((()=>"number"==typeof Q.value?Q.value:"end"===Q.value&&ze>we?Ae:1),[y,ze,Ae]),Ye=e.useMemo((()=>je[0]&&je[1]?je[0]/2-je[1]/2:0),[je]),Le=e.useMemo((()=>{let e=[],t=0;if(v&&E){const r=Array.from({length:ee.length},((e,t)=>t)),n=Math.abs(Math.floor(ee.length/Ee)*Ee-ee.length);e=n?r.slice(-n):[],"center"===E?t=((null!=be?be:0)+he)*(Ee-n)/2:"end"===E&&(t=((null!=be?be:0)+he)*(Ee-n))}return ee.map(((r,n)=>{const s=function(e,t){if(!t)return[0,e];for(let r=0;r<t.length;r++){const n=t[r].indexOf(e);if(-1!==n)return[r,n]}return[0,0]}(n,$e),o=function(e){return 0!==e?((null!=fe?fe:0)+me)*e+le:le}(v?Ee>1?s[1]:n:0),l=v&&pe[1]?o+pe[1]:0,i=v&&be?be*s[0]+he*s[0]+("x"===c?oe[0]:oe[1])+(E&&e.length>0&&e.includes(n)?t:0):0;return{elementTop:o,elementBottom:l,left:i}}))}),[w,$e,pe,a,v,Ee]),De=e.useMemo((()=>{var e,t;if(!$)return{};const[r,n="start"]=$,s="start"===r?"flex-start":"center"===r?"center":"flex-end",o="start"===n?"flex-start":"center"===n?"center":"flex-end",l=null!==(e=je[0])&&void 0!==e?e:0,i=null!==(t=je[1])&&void 0!==t?t:0,a="x"===c?l>ze:i>ze,u={};return("x"===c?i>ke:l>ke)&&(u.justifyContent="x"===c?o:s),a&&(u.alignItems="x"===c?s:o),u}),[$,c,je,ze,ke]),Ie=e.useCallback((e=>(e?Math.ceil:Math.floor)(ze/we)),[we,ze]),qe=e=>{e&&(e.style.cursor="grabbing")},Ve=e=>{e&&"grabbing"===e.style.cursor&&(e.style.cursor="grab")},Fe=(e,t)=>{if(e){const r=e.querySelector(`.${t}`);r&&(r.style.opacity="0")}},Pe=e.useCallback((e=>{const t=C.current,r=N.current;if(!t||!r)return;const n=r.clientHeight,s=Ie(),o=e=>Ze(e);"first"===e&&t.scrollTop>0&&o(t.scrollTop<=we?0:t.scrollTop-we),"last"===e&&s&&t.scrollTop+we!==n&&o(t.scrollTop+we>=we*s?n:t.scrollTop+we)}),[C,N,Ie]),We=e.useCallback((()=>{const e=C.current;if(e&&S.current&&B.current){function t(){var t;const r=null===(t=B.current)||void 0===t?void 0:t.querySelectorAll(".sliderElem");r&&r.forEach(((t,r)=>{var n,s;const o=(null!==(n=null==e?void 0:e.scrollTop)&&void 0!==n?n:0)>=we*r&&(null!==(s=null==e?void 0:e.scrollTop)&&void 0!==s?s:0)<we*(r+1);t.classList.toggle("active",o)}))}t()}}),[we,ze]),Xe=e.useCallback((()=>{z();const e=C.current;if(e){if(T&&P(!0),null==M||M(!0),V.current&&clearTimeout(V.current),V.current=setTimeout((()=>{T&&P(!1),null==M||M(!1)}),200),0!==Ne&&"hidden"!==m){const t=Math.abs(Math.round(e.scrollTop/Ae*(we-Ne)));t!==q.current&&"slider"!==n&&(q.current=Ne+t>we?we-Ne:t),0===e.scrollTop&&"none"===Y.current&&(e.scrollTop=1),O&&O.forEach((t=>{t(e.scrollTop)}))}x&&We()}}),[we,Ne,q,m,O,We,M]),He=e.useCallback((e=>{const t=C.current,r=Ie();if(t&&r){if(["thumb","wrapp"].includes(Y.current)){const n="thumb"===Y.current?1:-1;t.scrollTop+=("x"===c?e.movementX:e.movementY)*r*n}if("slider"===Y.current){const r=N.current;if(!r)return;const n=r.clientHeight,s=e=>Ze(e,(()=>{L.current=0,z()})),o=e=>{const r=t.scrollTop+e*we;s(e>0?Math.min(r,n-we):Math.max(r,0))};e.movementY>0&&L.current<1?(L.current+=e.movementY,L.current>=1&&t.scrollTop+we!=n&&o(1)):e.movementY<0&&L.current>-1&&(L.current-=Math.abs(e.movementY),L.current<=-1&&0!=t.scrollTop&&o(-1))}}}),[c,C,Ie]),_e=e.useCallback((e=>{if(window.removeEventListener("mousemove",He),window.removeEventListener("mouseup",_e),document.body.style.removeProperty("cursor"),Ve(N.current),Ve(A.current),Y.current="none","hover"===m){let t=e.target,r=!1;for(;t&&t!==document.body;){if(t===S.current){r=!0;break}t=t.parentNode}r||Fe(S.current,"scroll"===n?"scrollBar":"sliderBar")}z()}),[He,k,m,n]),Ge=e.useCallback((e=>{Y.current=e,z(),window.addEventListener("mousemove",He),window.addEventListener("mouseup",_e),document.body.style.cursor="grabbing"}),[He,_e,k]),Je=e.useCallback(((e,t)=>{const r={width:e,height:t-de};W.width===r.width&&W.height===r.height||X(r)}),[de,W]),Ke=e.useCallback(((e,t)=>{const r={width:e-ge,height:t-de};H.width===r.width&&H.height===r.height||_(r)}),[ge,de,H]),Qe=e.useCallback(((e,t)=>{const r={width:e,height:t};G.width===r.width&&G.height===r.height||J(r)}),[G]);let Ue;const Ze=e.useCallback(((e,t)=>{const r=C.current;if(!r)return null;const n=r.scrollTop,s=performance.now(),o=l=>{const i=l-s,c=Math.min(i/Q.duration,1);null!=e&&(r.scrollTop=n+(e-n)*c),i<Q.duration?requestAnimationFrame(o):null==t||t()};return Ue=requestAnimationFrame(o),()=>cancelAnimationFrame(Ue)}),[C]);e.useEffect((()=>{function e(e,r,n=!1){console.warn(`You are using the ${e} ${n?"with":"without"} ${r}${t?` in ${t}`:""} 👺`)}!h&&p&&d&&e("rootMargin","lazyRender"),v&&h&&d&&e("lazyRender","infiniteScroll",!0),"hidden"===m&&(d&&e("progressReverse","progressVisibility `hidden`",!0),g.progressElement&&e("progressTrigger [`scrollThumb`]","progressVisibility `hidden`",!0),g.arrows&&e("progressTrigger [`arrows`]","progressVisibility `hidden`",!0)),!f&&b&&d&&e("fallback","suspending"),v&&z(),We()}),[]),e.useEffect((()=>{if(C.current&&ee.length>0){let e;return"end"===Q.value?(I.current||(I.current=te),e=I.current===te?Ze(Be):null,I.current=te):e=Ze(Be),()=>{e&&e(),D.current=[],V.current&&clearTimeout(V.current)}}}),[Be,Re]),e.useEffect((()=>{if(T){const e=document.querySelectorAll(`[wrap-id^="${K}-"]`),t=Array.from(e,(e=>e.getAttribute("wrap-id")));D.current=t}}),[F]);const et=e.createElement("div",{className:"objectsWrapper",ref:N,onMouseDown:()=>{g.content&&(Ge("wrapp"),qe(N.current))},style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({padding:`${le}px ${ie}px ${ce}px ${ae}px`,height:v&&ze?`${ze}px`:"fit-content",width:Te?`${Te}px`:""},g.content&&{cursor:"grab"}),v&&{position:"relative"}),!v&&{display:"flex"}),!v&&Ee>1&&{flexWrap:"wrap"}),!v&&Ee<=1&&{flexDirection:"column"}),a&&!v&&{gap:`${me}px ${he}px`}),E&&!v&&{justifyContent:"start"===E?"flex-start":"center"===E?"center":"flex-end"}),j&&{minHeight:we-de+"px"})},ee.map(((t,n)=>{var o,l;const a=t.key,u={scrollElementRef:C,xyObjectReverse:be,xyObject:fe,rootMargin:p,suspending:f,fallback:b,mRootLocal:ye,objectsSizeLocal:pe},d=T&&!D.current.includes(`${K}-${a}`)&&F?b:t,g="number"==typeof i[0]&&"number"==typeof i[1]||"firstChild"!==i[0]&&"firstChild"!==i[1]||0!==n?d:e.createElement(r,{onResize:Qe},(()=>d));if(!v)return e.createElement(s,Object.assign({key:a},u,{lazyRender:h,objectsPerDirection:Ee,objectsSize:i,direction:c,attribute:T?`${K}-${a}`:""}),g);{const{elementTop:t,elementBottom:r,left:d}=Le[n];if(("x"===c?null!==(o=je[0])&&void 0!==o?o:0:null!==(l=je[1])&&void 0!==l?l:0)+ve>t-Se&&r-Se>0-xe)return e.createElement(s,Object.assign({key:a},u,{elementTop:t,left:d,infiniteScroll:v,attribute:T?`${K}-${a}`:"",objectsPerDirection:Ee,objectsSize:i,direction:c}),g)}}))),tt=e.createElement("div",{"m-s":"〈♦〉",className:"customScroll"+(o?` ${o}`:""),ref:k,style:{width:`${je[2]}px`,height:`${je[3]}px`}},e.createElement("div",{className:"scrollContent",ref:S,onMouseEnter:()=>"hover"===m&&((e,t)=>{if(e){const r=e.querySelector(`.${t}`);r&&(r.style.opacity="1")}})(S.current,"scroll"===n?"scrollBar":"sliderBar"),onMouseLeave:()=>"hover"===m&&"thumb"!==Y.current&&"slider"!==Y.current&&Fe(S.current,"scroll"===n?"scrollBar":"sliderBar"),style:Object.assign(Object.assign({position:"relative",width:`${Oe}px`,height:`${we}px`},"x"===c&&{transform:`rotate(-90deg) translate(${Ye}px, ${Ye}px) scaleX(-1)`}),g.arrows&&re.size&&("x"===c?{left:`${re.size}px`}:{top:`${re.size}px`}))},e.createElement("div",{className:"scrollElement",ref:C,onScroll:Xe,style:Object.assign(Object.assign(Object.assign({display:"flex",width:"100%",height:"100%"},De),g.wheel?{overflow:"hidden scroll"}:{overflow:"hidden hidden"}),"boolean"!=typeof g.progressElement||!1===g.progressElement?{scrollbarWidth:"none"}:{})},"string"!=typeof i[0]||"string"!=typeof i[1]||v?et:e.createElement(r,{onResize:Ke},(()=>et))),x&&e.createElement("div",{className:"edge",style:Object.assign(Object.assign({},se),{top:0,opacity:Se>1?1:0})}),x&&e.createElement("div",{className:"edge",style:Object.assign(Object.assign({},se),{bottom:0,opacity:Ce?1:0,transform:"scaleY(-1)"})}),g.arrows&&e.createElement(e.Fragment,null,e.createElement("div",{className:"arrowBox"+(Se>1?" active":""),style:Object.assign(Object.assign({},U),{top:0,transform:"translateY(-100%)",height:`${re.size}px`}),onClick:()=>Pe("first")},re.element),e.createElement("div",{className:"arrowBox"+(Ce?" active":""),style:Object.assign(Object.assign({},U),{bottom:0,transform:"translateY(100%) scaleY(-1)",height:`${re.size}px`}),onClick:()=>Pe("last")},re.element)),"hidden"!==m&&Ne<we&&"boolean"!=typeof g.progressElement&&e.createElement(e.Fragment,null,"slider"!==n?e.createElement("div",{className:"scrollBar",style:Object.assign(Object.assign(Object.assign(Object.assign({position:"absolute",top:0},d?{left:0}:{right:0}),{width:"fit-content",height:"100%"}),!1!=!g.progressElement&&{pointerEvents:"none"}),"hover"===m&&{opacity:0,transition:"opacity 0.1s ease-in-out"})},e.createElement("div",{ref:A,className:"scrollBarThumb",onMouseDown:()=>{g.progressElement&&(Ge("thumb"),qe(A.current))},style:Object.assign({height:`${Ne}px`,willChange:"transform",transform:`translateY(${q.current}px)`},g.progressElement&&{cursor:"grab"})},g.progressElement)):e.createElement("div",{className:"sliderBar",style:Object.assign(Object.assign(Object.assign({position:"absolute",top:"50%",transform:"translateY(-50%)"},d?{left:0}:{right:0}),!g.progressElement&&{pointerEvents:"none"}),"hover"===m&&{opacity:0,transition:"opacity 0.1s ease-in-out"}),ref:B,onMouseDown:()=>Ge("slider")},Array.from({length:Ie()||0},((t,r)=>e.createElement("div",{key:r,className:"sliderElem",style:{width:"fit-content"}},g.progressElement)))))));return l?tt:e.createElement(r,{measure:"outer",onResize:Je},(()=>tt))},s=e.memo((({children:r,elementTop:n,left:s,mRootLocal:o,scrollElementRef:l,xyObject:i,xyObjectReverse:c,objectsSizeLocal:a,rootMargin:u,suspending:d,fallback:g,infiniteScroll:m,lazyRender:h,attribute:p,objectsPerDirection:f,direction:b})=>{const y=d?e.createElement(e.Suspense,{fallback:g},r):r,v=Object.assign({width:c?`${c}px`:"",height:i?`${i}px`:""},"x"===b&&{display:"flex"}),x=Object.assign({width:a[0]?`${a[0]}px`:""},"x"===b&&{transform:"rotate(-90deg) scaleX(-1)"}),j={root:l.current,rootMargin:m?u:o,style:m?Object.assign(Object.assign(Object.assign(Object.assign({},v),{position:"absolute",top:`${n}px`}),s&&{left:`${s}px`}),!c&&1===f&&{transform:"translateX(-50%)"}):v},w=e.createElement("div",Object.assign({},p?{"wrap-id":p}:{},{style:x}),y);return m?e.createElement("div",{style:Object.assign(Object.assign(Object.assign({position:"absolute",top:`${n}px`},s&&{left:`${s}px`}),!c&&1===f&&{transform:"translateX(-50%)"}),v)},w):h?e.createElement(t,Object.assign({},j),w):e.createElement("div",{style:v},w)}));s.displayName="ScrollObject";const o={Scroll:n,ResizeTracker:r,IntersectionTracker:t};exports.IntersectionTracker=t,exports.ResizeTracker=r,exports.Scroll=n,exports.default=o;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "morphing-scroll",
-  "version": "1.1.3",
-  "description": "This is a library for the convenience of various object scrolling methods 💫",
+  "version": "1.1.5",
+  "description": "This is a library for the convenience of various object scrolling methods〈♦〉",
   "author": "Georg Schilin",
   "license": "MIT",
   "main": "index.js",
@@ -14,6 +14,6 @@
     "scroller"
   ],
   "peerDependencies": {
-    "react": ">=16.0.0"
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   }
 }