morphing-scroll 1.0.2 → 1.0.4

package/index.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+
+interface IntersectionTrackerProps {
+  children: React.ReactNode;
+  root?: any;
+  threshold?: number;
+  rootMargin?: number[] | number;
+  style?: any;
+  visibleContent?: boolean;
+  onVisible?: () => void;
+  intersectionDeley?: number;
+}
+declare const IntersectionTracker: React.FC<IntersectionTrackerProps>;
+
+interface MorphingScrollType {
+  scrollID?: string;
+  className?: string;
+  scrollXY?: number[];
+  objectXY?: number[];
+  gap?: number[] | number;
+  padding?: number[] | number;
+  xDirection?: boolean;
+  contentAlignCenter?: boolean;
+  wrapAlignCenter?: boolean;
+  scrollReverse?: boolean;
+  scrollTrigger?: "←→" | "←→/←O→" | "<c>" | "<c>/←O→" | "◄|►" | "◄|►/<c>";
+  scrollVisibility?: "<O>" | "↓<O>" | "<Ø>";
+  scrollTop?: number | "end";
+  lazyRender?: boolean;
+  infiniteScroll?: boolean;
+  rootMargin?: number[] | number;
+  suspending?: boolean;
+  fallback?: React.ReactNode;
+  thumbElement?: React.ReactNode;
+  edgeGradient?: boolean | string;
+  objectsWrapperMinSize?: number;
+  onScrollValue?: Array<[(scrollTop: number) => boolean, () => void]>;
+  children: React.ReactNode;
+}
+declare const MorphingScroll: React.FC<MorphingScrollType>;
+
+interface ResizeTrackerProps {
+  children: (width: number, height: number) => React.ReactNode;
+  onResize?: (width: number, height: number) => void;
+  style?: React.CSSProperties;
+}
+declare const ResizeTracker: React.FC<ResizeTrackerProps>;
+
+export default MorphingScroll;
+export { IntersectionTracker, ResizeTracker };

package/{dist/index.js → index.js}

@@ -1 +1 @@
-import e from"react";const t=({children:t,root:r,threshold:n,rootMargin:l,style:o,visibleContent:s=!1,onVisible:c,intersectionDeley:a})=>{const[i,u]=e.useState(!1),m=e.useRef(null),d=e.useRef(null),g=l?"number"==typeof l?`${l}px ${l}px ${l}px ${l}px`:2===l.length?`${l[0]}px ${l[1]}px ${l[0]}px ${l[1]}px`:`${l[0]}px ${l[1]}px ${l[2]}px ${l[3]}px`:"",p=e=>{e.forEach((e=>{u(e.isIntersecting)}))},f={root:r,threshold:n,rootMargin:g};return e.useEffect((()=>{const e=new IntersectionObserver(p,f);return m.current&&e.observe(m.current),()=>{m.current&&e.unobserve(m.current)}}),[r,n,l]),e.useEffect((()=>(a?d.current=setTimeout((()=>{i&&c&&c()}),a):i&&c&&c(),()=>{d.current&&clearTimeout(d.current)})),[i]),e.createElement("div",{className:"IntersectionTracker",ref:m,style:o},(s||i)&&t)},r=({children:t,onResize:r,style:n})=>{const l=e.useRef(null),[o,s]=e.useState({width:0,height:0});return e.useEffect((()=>{const e=l.current;if(!e)return;const t=new ResizeObserver((e=>{for(let t of e){const e=t.contentRect.width,n=t.contentRect.height;s({width:e,height:n}),r&&r(e,n)}}));return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}),[r]),e.createElement("div",{className:"resizeTracker",ref:l,style:Object.assign({width:"max-content",height:"max-content"},n)},t(o.width,o.height))},n=({scrollID:t="",className:n="",scrollXY:o,objectXY:s,xDirection:c=!1,gap:a,padding:i=[0,0,0,0],scrollReverse:u=!1,scrollTrigger:m="←→",scrollVisibility:d="<O>",lazyRender:g=!1,rootMargin:p=NaN,suspending:f=!1,fallback:h=null,scrollTop:b=1,infiniteScroll:x=!1,contentAlignCenter:y=!1,wrapAlignCenter:$=!1,edgeGradient:v=!1,objectsWrapperMinSize:O,children:M,onScrollValue:E,thumbElement:w})=>{const N=e.useRef(null),R=e.useRef(null),T=e.useRef(null),j=e.useRef(null);let S=!1;const k=e.useRef("none"),C=e.useRef(null),[L,z]=e.useState(0),[A,D]=e.useState(0),[X,Y]=e.useState(!1),F=e.useMemo((()=>e.Children.toArray(M).filter((e=>null!=e))),[M]),V=e.useMemo((()=>{if(F.length>0){const t=F[0];if(e.isValidElement(t))return t.key}}),[F]),B="number"==typeof i?[i,i,i,i]:2===i.length?[i[0],i[1],i[0],i[1]]:3===i.length?[i[0],i[1],i[2],i[1]]:i,[I,q,H,W]=c?[B[1],B[2],B[3],B[0]]:B,G=B[1]+B[3],P=I+H,[J,K]="number"==typeof a?[a,a]:c?[a?a[1]:0,a?a[0]:0]:[0,0],Q=e.useMemo((()=>s||(c?[o?o[0]:NaN,o?o[1]-G:NaN]:[o?o[0]-G:NaN,NaN])),[s,o,G,c]),U=Q?c?Q[0]:Q[1]:NaN,Z=Q?c?Q[1]:Q[0]:NaN,_=p?"number"==typeof p?[p,p,p,p]: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:0,[ee,te]=_&&p?c?[_[3],_[1]]:[_[2],_[0]]:[0,0],re=e.useMemo((()=>{const[e,t]=o||Q;return[e,t]}),[o,Q]),ne=Q?e.useMemo((()=>{const e=c?Math.abs(Math.floor((re[1]-G)/(re[1]+J))):Math.abs(Math.floor((re[0]-G)/(re[0]+J)));return e>F.length?F.length:e<1?1:e}),[]):F.length,le=c?re[0]||0:re[1]||0,oe=e.useMemo((()=>{if(!x||ne<=1)return[];const e=F.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:ne},(()=>[]));return e.forEach((e=>{t[e%ne].push(e)})),t}),[M,ne,x]),se=e.useMemo((()=>ne>1?Math.ceil(F.length/ne):F.length),[F.length,ne]),ce=e.useMemo((()=>(Z||0)*ne+(ne-1)*K),[Z,ne,K]),ae=e.useMemo((()=>s?(U||0)*se+(se-1)*J:A),[U,se,J,A]),ie=e.useMemo((()=>ae+P),[ae,P]),ue=e.useMemo((()=>"<O>"===d||"↓<O>"===d?0===ae?0:le?Math.round(le/ie*le):0:NaN),[le,ie,d]),me=e.useMemo((()=>le?ie-le:ie),[ie,le]),de=e.useMemo((()=>{if(b)return"number"==typeof b?b:"end"===b&&ie>le?me:0}),[b,ie,me]),ge=e.useMemo((()=>re[0]&&re[1]?re[0]/2-re[1]/2:0),[re]),pe=e.useMemo((()=>{let e=[],t=0;if(x&&y){const r=Array.from({length:F.length},((e,t)=>t)),n=Math.abs(Math.floor(F.length/ne)*ne-F.length);e=n?r.slice(-n):[],t=((Z||0)+K)*(ne-n)/2}return F.map(((r,n)=>{const l=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,oe),o=function(e){return 0!==e?((U||0)+J)*e+I:0}(x?ne>1?l[1]:n:0),s=x?o+Q[1]:0,a=x&&ne>1?Z*l[0]+K*l[0]+(c?B[0]:B[1])+(y&&e.length>0&&e.includes(n)?t:0):NaN;return{elementTop:o,elementBottom:s,left:a}}))}),[M,oe,Q,a,x,ne]);S=e.useMemo((()=>{if($&&o)if(c){if(re[0]>ie)return!0}else if(re[1]>ie)return!0;return!1}),[c,re,Q,a,ie]);const fe=e.useMemo((()=>c?Math.round(ae/re[0]):Math.round(ae/re[1])),[c,re,ae]),he="string"==typeof v?{background:`linear-gradient(${v}, transparent)`}:{background:"linear-gradient(rgba(0,0,0,0.4), transparent)"},be=e.useCallback((()=>{var e;if(!v)return;const t=(null===(e=T.current)||void 0===e?void 0:e.scrollTop)||0,r=Math.round(t+le)!==ie;R.current&&(R.current.classList.toggle("edgeBottom",r),R.current.classList.toggle("edgeTop",t>1))}),[v,le,ie]),xe=e.useCallback((()=>{if(T.current&&0!==ue&&("<O>"===d||"↓<O>"===d)){const e=Math.abs(Math.round(T.current.scrollTop/me*(le-ue)));e!==L&&z(e),0===T.current.scrollTop&&"none"===k.current&&(T.current.scrollTop=1),T.current.scrollTop>me&&(T.current.scrollTop=me),E&&E.forEach((([e,t])=>{T.current&&e(T.current.scrollTop)&&t()}))}be()}),[le,ue,L]),ye=e.useCallback((e=>{const t="thumb"===k.current?1:-1;T.current.scrollTop+=c?e.movementX*fe*t:e.movementY*fe*t}),[c,T,fe]),$e=e.useCallback((()=>{N.current&&(N.current.classList.remove("grabbingScroll"),window.removeEventListener("mousemove",ye),window.removeEventListener("mouseup",$e),document.body.style.removeProperty("cursor"),k.current="none")}),[ye,N]),ve=e.useCallback(((e,t)=>{N.current&&(k.current=t,("↓<O>"===d||"<O>"===d)&&N.current.classList.add("grabbingScroll"),window.addEventListener("mousemove",ye),window.addEventListener("mouseup",$e),document.body.style.cursor="grabbing")}),[ye,$e,N]),Oe=e.useCallback(((e,t)=>{D(t-P)}),[c,P,ae]),Me=e.useCallback(((e,t,r)=>{if(!T.current)return;const n=T.current.scrollTop,l=performance.now(),o=s=>{if(!T.current)return;const c=s-l,a=Math.min(c/e,1);t&&(T.current.scrollTop=n+(t-n)*a),c<e?requestAnimationFrame(o):r()};requestAnimationFrame(o)}),[T]);e.useEffect((()=>{function e(e,r,n=!1){console.warn(`⛔ You are using the ${e} ${n?"with":"without"} ${r}${t?` in ${t}`:""}`)}!g&&p&&u&&e("rootMargin","lazyRender"),x&&g&&u&&e("lazyRender","infiniteScroll",!0),"<Ø>"===d&&(u&&e("scrollReverse","scrollVisibility `<O>`"),("←→"===m||"←→/←O→"===m)&&e("scrollTrigger `←→` or `←→/←O→`","scrollVisibility `<O>`")),!f&&h&&u&&e("fallback","suspending"),x&&Y(!0),be()}),[]),e.useEffect((()=>{if(b&&T.current&&F.length>0&&"end"===b){let e;const t=()=>{C.current=V};return null===C.current?e=requestAnimationFrame((()=>Me(200,null!=de?de:0,t))):C.current!==V?Me(200,NaN,t):C.current===V&&(e=requestAnimationFrame((()=>Me(200,null!=de?de:0,(()=>{}))))),()=>cancelAnimationFrame(e)}}),[ae]);const Ee=e.createElement("div",{className:"objectsWrapper",ref:j,onMouseDown:e=>("<c>"===m||"<c>/←O→"===m)&&ve(e,"wrapp"),style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({padding:`${I}px ${q}px ${H}px ${W}px`},a?{gap:`${J}px ${K}px`}:{}),ce?{width:`${ce}px`}:{}),s&&ae&&{position:"absolute",height:`${ae}px`}),O&&{minHeight:`calc(${O}px - ${P}px)`}),!x&&y&&{flexDirection:"row",justifyContent:"center"}),!c&&{flexDirection:"column"})},F.map(((t,r)=>{const n=t.key;if(!x||!X)return e.createElement(l,{key:n,children:t,scrollElementRef:T,xyObjectReverse:Z,xyObject:U,rootMargin:p,suspending:f,fallback:h,mRootLocal:_,localObjectXY:Q,lazyRender:g});{const{elementTop:o,elementBottom:s,left:a}=pe[r];if((c?re[0]:re[1])+ee>o-T.current.scrollTop&&s-T.current.scrollTop>0-te)return e.createElement(l,{key:n,children:t,scrollElementRef:T,xyObjectReverse:Z,xyObject:U,rootMargin:p,suspending:f,fallback:h,elementTop:o,left:a,mRootLocal:_,infiniteScroll:x,infiniteScrollState:X,localObjectXY:Q})}})));return e.createElement("div",{className:`customScroll${c?" xDirection":" yDirection"}${"←→/←O→"===m?" draggableScroll":"<c>"===m||"◄|►/<c>"===m?" draggableContent":"<c>/←O→"===m?" draggableContent draggableScroll":""}${"↓<O>"===d?" scrollOnHover":""} ${n}`,ref:N,style:{width:`${re[0]}px`,height:`${re[1]}px`}},e.createElement("div",{className:"scrollContent",ref:R,style:Object.assign({width:c?`${re[1]}px`:`${re[0]}px`,height:c?`${re[0]}px`:`${re[1]}px`},c&&{transform:`rotate(-90deg) translate(${ge}px, ${ge}px) scaleX(-1)`})},v&&e.createElement("div",{className:"edge top",style:he}),v&&e.createElement("div",{className:"edge bottom",style:he}),("<O>"===d||"↓<O>"===d)&&ue<le&&e.createElement("div",{className:"scrollBar "+(u?"scrollReverse":""),style:"←→/←O→"===m||"<c>/←O→"===m?{}:{pointerEvents:"none"}},e.createElement("div",{className:"scrollBarThumb"+(w?"":" defaultThumb"),onMouseDown:e=>("←→/←O→"===m||"<c>/←O→"===m)&&ve(e,"thumb"),style:{height:`${ue}px`,top:`${L}px`}},w,e.createElement("div",{className:"clickField"}))),e.createElement("div",{className:"scrollElement",ref:T,onScroll:xe,style:Object.assign(Object.assign({},S&&{alignItems:"center"}),"←→"===m||"←→/←O→"===m?{overflow:"hidden scroll"}:{overflow:"hidden hidden"})},s?Ee:e.createElement(r,{onResize:Oe},(()=>Ee)))))},l=e.memo((({children:r,elementTop:n,left:l,mRootLocal:o,scrollElementRef:s,infiniteScrollState:c,xyObject:a,xyObjectReverse:i,localObjectXY:u,rootMargin:m,suspending:d,fallback:g,infiniteScroll:p,lazyRender:f})=>{const h=d?e.createElement(e.Suspense,{fallback:g},r):r;if(p&&c)return e.createElement(t,{root:s.current,rootMargin:m,style:Object.assign({position:"absolute",width:`${i}px`,height:`${a}px`,top:`${n}px`},null!==l?{left:`${l}px`}:{})},e.createElement("div",{style:{width:`${i}px`}},h));{const r={width:`${u[0]}px`},n={width:`${i}px`,height:`${a}px`};return f?e.createElement(t,{root:s.current,rootMargin:o,style:n},e.createElement("div",{style:r},h)):e.createElement("div",{style:n},e.createElement("div",{style:r},h))}}));l.displayName="ScrollObject";export{t as IntersectionTracker,r as ResizeTracker,n as Scroll};
+import e from"react";const t=({children:t,root:r,threshold:n,rootMargin:l,style:o,visibleContent:s=!1,onVisible:c,intersectionDeley:a})=>{const[i,u]=e.useState(!1),m=e.useRef(null),d=e.useRef(null),g=l?"number"==typeof l?`${l}px ${l}px ${l}px ${l}px`:2===l.length?`${l[0]}px ${l[1]}px ${l[0]}px ${l[1]}px`:`${l[0]}px ${l[1]}px ${l[2]}px ${l[3]}px`:"",p=e=>{e.forEach((e=>{u(e.isIntersecting)}))},f={root:r,threshold:n,rootMargin:g};return e.useEffect((()=>{const e=new IntersectionObserver(p,f);return m.current&&e.observe(m.current),()=>{m.current&&e.unobserve(m.current)}}),[r,n,l]),e.useEffect((()=>(a?d.current=setTimeout((()=>{i&&c&&c()}),a):i&&c&&c(),()=>{d.current&&clearTimeout(d.current)})),[i]),e.createElement("div",{className:"IntersectionTracker",ref:m,style:o},(s||i)&&t)},r=({children:t,onResize:r,style:n})=>{const l=e.useRef(null),[o,s]=e.useState({width:0,height:0});return e.useEffect((()=>{const e=l.current;if(!e)return;const t=new ResizeObserver((e=>{for(let t of e){const e=t.contentRect.width,n=t.contentRect.height;s({width:e,height:n}),r&&r(e,n)}}));return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}),[r]),e.createElement("div",{className:"resizeTracker",ref:l,style:Object.assign({width:"max-content",height:"max-content"},n)},t(o.width,o.height))},n=({scrollID:t="",className:n="",scrollXY:o,objectXY:s,xDirection:c=!1,gap:a,padding:i=[0,0,0,0],scrollReverse:u=!1,scrollTrigger:m="←→",scrollVisibility:d="<O>",lazyRender:g=!1,rootMargin:p=NaN,suspending:f=!1,fallback:h=null,scrollTop:b=1,infiniteScroll:x=!1,contentAlignCenter:y=!1,wrapAlignCenter:$=!1,edgeGradient:v=!1,objectsWrapperMinSize:O,children:M,onScrollValue:E,thumbElement:w})=>{const N=e.useRef(null),R=e.useRef(null),T=e.useRef(null),j=e.useRef(null);let S=!1;const k=e.useRef("none"),C=e.useRef(null),[L,z]=e.useState(0),[A,D]=e.useState(0),[X,Y]=e.useState(!1),F=e.useMemo((()=>e.Children.toArray(M).filter((e=>null!=e))),[M]),V=e.useMemo((()=>{if(F.length>0){const t=F[0];if(e.isValidElement(t))return t.key}}),[F]),B="number"==typeof i?[i,i,i,i]:2===i.length?[i[0],i[1],i[0],i[1]]:3===i.length?[i[0],i[1],i[2],i[1]]:i,[I,q,H,W]=c?[B[1],B[2],B[3],B[0]]:B,G=B[1]+B[3],P=I+H,[J,K]="number"==typeof a?[a,a]:c?[a?a[1]:0,a?a[0]:0]:[0,0],Q=e.useMemo((()=>s||(c?[o?o[0]:NaN,o?o[1]-G:NaN]:[o?o[0]-G:NaN,NaN])),[s,o,G,c]),U=Q?c?Q[0]:Q[1]:NaN,Z=Q?c?Q[1]:Q[0]:NaN,_=p?"number"==typeof p?[p,p,p,p]: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:0,[ee,te]=_&&p?c?[_[3],_[1]]:[_[2],_[0]]:[0,0],re=e.useMemo((()=>{const[e,t]=o||Q;return[e,t]}),[o,Q]),ne=Q?e.useMemo((()=>{const e=c?Math.abs(Math.floor((re[1]-G)/(re[1]+J))):Math.abs(Math.floor((re[0]-G)/(re[0]+J)));return e>F.length?F.length:e<1?1:e}),[]):F.length,le=c?re[0]||0:re[1]||0,oe=e.useMemo((()=>{if(!x||ne<=1)return[];const e=F.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:ne},(()=>[]));return e.forEach((e=>{t[e%ne].push(e)})),t}),[M,ne,x]),se=e.useMemo((()=>ne>1?Math.ceil(F.length/ne):F.length),[F.length,ne]),ce=e.useMemo((()=>(Z||0)*ne+(ne-1)*K),[Z,ne,K]),ae=e.useMemo((()=>s?(U||0)*se+(se-1)*J:A),[U,se,J,A]),ie=e.useMemo((()=>ae+P),[ae,P]),ue=e.useMemo((()=>"<O>"===d||"↓<O>"===d?0===ae?0:le?Math.round(le/ie*le):0:NaN),[le,ie,d]),me=e.useMemo((()=>le?ie-le:ie),[ie,le]),de=e.useMemo((()=>{if(b)return"number"==typeof b?b:"end"===b&&ie>le?me:0}),[b,ie,me]),ge=e.useMemo((()=>re[0]&&re[1]?re[0]/2-re[1]/2:0),[re]),pe=e.useMemo((()=>{let e=[],t=0;if(x&&y){const r=Array.from({length:F.length},((e,t)=>t)),n=Math.abs(Math.floor(F.length/ne)*ne-F.length);e=n?r.slice(-n):[],t=((Z||0)+K)*(ne-n)/2}return F.map(((r,n)=>{const l=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,oe),o=function(e){return 0!==e?((U||0)+J)*e+I:0}(x?ne>1?l[1]:n:0),s=x?o+Q[1]:0,a=x&&ne>1?Z*l[0]+K*l[0]+(c?B[0]:B[1])+(y&&e.length>0&&e.includes(n)?t:0):NaN;return{elementTop:o,elementBottom:s,left:a}}))}),[M,oe,Q,a,x,ne]);S=e.useMemo((()=>{if($&&o)if(c){if(re[0]>ie)return!0}else if(re[1]>ie)return!0;return!1}),[c,re,Q,a,ie]);const fe=e.useMemo((()=>c?Math.round(ae/re[0]):Math.round(ae/re[1])),[c,re,ae]),he="string"==typeof v?{background:`linear-gradient(${v}, transparent)`}:{background:"linear-gradient(rgba(0,0,0,0.4), transparent)"},be=e.useCallback((()=>{var e;if(!v)return;const t=(null===(e=T.current)||void 0===e?void 0:e.scrollTop)||0,r=Math.round(t+le)!==ie;R.current&&(R.current.classList.toggle("edgeBottom",r),R.current.classList.toggle("edgeTop",t>1))}),[v,le,ie]),xe=e.useCallback((()=>{if(T.current&&0!==ue&&("<O>"===d||"↓<O>"===d)){const e=Math.abs(Math.round(T.current.scrollTop/me*(le-ue)));e!==L&&z(e),0===T.current.scrollTop&&"none"===k.current&&(T.current.scrollTop=1),T.current.scrollTop>me&&(T.current.scrollTop=me),E&&E.forEach((([e,t])=>{T.current&&e(T.current.scrollTop)&&t()}))}be()}),[le,ue,L]),ye=e.useCallback((e=>{const t="thumb"===k.current?1:-1;T.current.scrollTop+=c?e.movementX*fe*t:e.movementY*fe*t}),[c,T,fe]),$e=e.useCallback((()=>{N.current&&(N.current.classList.remove("grabbingScroll"),window.removeEventListener("mousemove",ye),window.removeEventListener("mouseup",$e),document.body.style.removeProperty("cursor"),k.current="none")}),[ye,N]),ve=e.useCallback(((e,t)=>{N.current&&(k.current=t,("↓<O>"===d||"<O>"===d)&&N.current.classList.add("grabbingScroll"),window.addEventListener("mousemove",ye),window.addEventListener("mouseup",$e),document.body.style.cursor="grabbing")}),[ye,$e,N]),Oe=e.useCallback(((e,t)=>{D(t-P)}),[c,P,ae]),Me=e.useCallback(((e,t,r)=>{if(!T.current)return;const n=T.current.scrollTop,l=performance.now(),o=s=>{if(!T.current)return;const c=s-l,a=Math.min(c/e,1);t&&(T.current.scrollTop=n+(t-n)*a),c<e?requestAnimationFrame(o):r()};requestAnimationFrame(o)}),[T]);e.useEffect((()=>{function e(e,r,n=!1){console.warn(`⛔ You are using the ${e} ${n?"with":"without"} ${r}${t?` in ${t}`:""}`)}!g&&p&&u&&e("rootMargin","lazyRender"),x&&g&&u&&e("lazyRender","infiniteScroll",!0),"<Ø>"===d&&(u&&e("scrollReverse","scrollVisibility `<O>`"),("←→"===m||"←→/←O→"===m)&&e("scrollTrigger `←→` or `←→/←O→`","scrollVisibility `<O>`")),!f&&h&&u&&e("fallback","suspending"),x&&Y(!0),be()}),[]),e.useEffect((()=>{if(b&&T.current&&F.length>0&&"end"===b){let e;const t=()=>{C.current=V};return null===C.current?e=requestAnimationFrame((()=>Me(200,null!=de?de:0,t))):C.current!==V?Me(200,NaN,t):C.current===V&&(e=requestAnimationFrame((()=>Me(200,null!=de?de:0,(()=>{}))))),()=>cancelAnimationFrame(e)}}),[ae]);const Ee=e.createElement("div",{className:"objectsWrapper",ref:j,onMouseDown:e=>("<c>"===m||"<c>/←O→"===m)&&ve(e,"wrapp"),style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({padding:`${I}px ${q}px ${H}px ${W}px`},a?{gap:`${J}px ${K}px`}:{}),ce?{width:`${ce}px`}:{}),s&&ae&&{position:"absolute",height:`${ae}px`}),O&&{minHeight:`calc(${O}px - ${P}px)`}),!x&&y&&{flexDirection:"row",justifyContent:"center"}),!c&&{flexDirection:"column"})},F.map(((t,r)=>{const n=t.key;if(!x||!X)return e.createElement(l,{key:n,children:t,scrollElementRef:T,xyObjectReverse:Z,xyObject:U,rootMargin:p,suspending:f,fallback:h,mRootLocal:_,localObjectXY:Q,lazyRender:g});{const{elementTop:o,elementBottom:s,left:a}=pe[r];if((c?re[0]:re[1])+ee>o-T.current.scrollTop&&s-T.current.scrollTop>0-te)return e.createElement(l,{key:n,children:t,scrollElementRef:T,xyObjectReverse:Z,xyObject:U,rootMargin:p,suspending:f,fallback:h,elementTop:o,left:a,mRootLocal:_,infiniteScroll:x,infiniteScrollState:X,localObjectXY:Q})}})));return e.createElement("div",{className:`customScroll${c?" xDirection":" yDirection"}${"←→/←O→"===m?" draggableScroll":"<c>"===m||"◄|►/<c>"===m?" draggableContent":"<c>/←O→"===m?" draggableContent draggableScroll":""}${"↓<O>"===d?" scrollOnHover":""} ${n}`,ref:N,style:{width:`${re[0]}px`,height:`${re[1]}px`}},e.createElement("div",{className:"scrollContent",ref:R,style:Object.assign({width:c?`${re[1]}px`:`${re[0]}px`,height:c?`${re[0]}px`:`${re[1]}px`},c&&{transform:`rotate(-90deg) translate(${ge}px, ${ge}px) scaleX(-1)`})},v&&e.createElement("div",{className:"edge top",style:he}),v&&e.createElement("div",{className:"edge bottom",style:he}),("<O>"===d||"↓<O>"===d)&&ue<le&&e.createElement("div",{className:"scrollBar "+(u?"scrollReverse":""),style:"←→/←O→"===m||"<c>/←O→"===m?{}:{pointerEvents:"none"}},e.createElement("div",{className:"scrollBarThumb"+(w?"":" defaultThumb"),onMouseDown:e=>("←→/←O→"===m||"<c>/←O→"===m)&&ve(e,"thumb"),style:{height:`${ue}px`,top:`${L}px`}},w,e.createElement("div",{className:"clickField"}))),e.createElement("div",{className:"scrollElement",ref:T,onScroll:xe,style:Object.assign(Object.assign({},S&&{alignItems:"center"}),"←→"===m||"←→/←O→"===m?{overflow:"hidden scroll"}:{overflow:"hidden hidden"})},s?Ee:e.createElement(r,{onResize:Oe},(()=>Ee)))))},l=e.memo((({children:r,elementTop:n,left:l,mRootLocal:o,scrollElementRef:s,infiniteScrollState:c,xyObject:a,xyObjectReverse:i,localObjectXY:u,rootMargin:m,suspending:d,fallback:g,infiniteScroll:p,lazyRender:f})=>{const h=d?e.createElement(e.Suspense,{fallback:g},r):r;if(p&&c)return e.createElement(t,{root:s.current,rootMargin:m,style:Object.assign({position:"absolute",width:`${i}px`,height:`${a}px`,top:`${n}px`},null!==l?{left:`${l}px`}:{})},e.createElement("div",{style:{width:`${i}px`}},h));{const r={width:`${u[0]}px`},n={width:`${i}px`,height:`${a}px`};return f?e.createElement(t,{root:s.current,rootMargin:o,style:n},e.createElement("div",{style:r},h)):e.createElement("div",{style:n},e.createElement("div",{style:r},h))}}));l.displayName="ScrollObject";export{t as IntersectionTracker,r as ResizeTracker,n as default};

package/package.json

@@ -1,24 +1,19 @@
 {
   "name": "morphing-scroll",
-  "version": "1.0.2",
-  "description": "This is a library for the convenience of various object scrolling methods✨",
+  "version": "1.0.4",
+  "description": "This is a library for the convenience of various object scrolling methods 💫",
   "author": "Georg Schilin",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "index.js",
   "type": "module",
-  "types": "node_modules/morphing-scroll-types/dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "types": "./index.d.ts",
   "keywords": [
     "react",
     "react-component",
     "scroll",
-    "scroller",
-    "scrolls"
+    "scroller"
   ],
   "peerDependencies": {
-    "react": "^18.3.1",
-    "morphing-scroll-types": "*"
+    "react": "^18.3.1"
   }
 }