morphing-scroll 1.4.1 → 1.4.16

package/index.d.ts

@@ -1,26 +1,35 @@
 import React from "react";
 
-// RESIZE_TRACKER //////////////////////////////////
+// RESIZE_TRACKER
 type ResizeTrackerT = {
   /**---
-   * ✨ *Render-prop function receiving the container's size.*
+   * *Render-prop function receiving the container's size.*
    *
-   * @param width - Current width in pixels.
-   * @param height - Current height in pixels.
+   * @param rect - The current dimensions of the container
    * @example
    * ```tsx
    * <ResizeTracker>
-   *   {(width, height) => <div>{`${width}x${height}`}</div>}
+   *   {( rect ) => (
+   *      <p>Width: {rect.width}, Height: {rect.height}</p>
+   *   )}
    * </ResizeTracker>
    * ```
    * */
-  children: (width: number, height: number) => React.ReactNode;
+  children: (rect: DOMRectReadOnly) => React.ReactNode;
   /**---
-   * ✨ *Custom inline styles for the ResizeTracker.*
+   * *Custom inline styles for the ResizeTracker.*
+   * @example
+   * ```tsx
+   * <ResizeTracker
+   *   style={{ backgroundColor: "blue" }}
+   * >
+   *   // render-prop function
+   * </ResizeTracker>
+   * ```
    */
   style?: React.CSSProperties;
   /**---
-   * ✨ *Defines size measurement behavior*
+   * *Defines size measurement behavior*
    * #### Options:
    * - `"inner"`: Fits content.
    * - `"outer"`: Fills parent.
@@ -30,16 +39,21 @@ type ResizeTrackerT = {
    */
   measure?: "inner" | "outer" | "all";
   /**---
-   * ✨ *Callback on dimension change.*
+   * *Callback on dimension change.*
    *
-   * @param width - Updated width (in px).
-   * @param height - Updated height (in px).
+   * @param rect - The dimensions of the container
    * @example
-   * ```typescript
-   * onResize={(width, height) => console.log(`New size: ${width}x${height}`)}
+   * ```tsx
+   * <ResizeTracker
+   *  onResize={(rect) => console.log(rect)
+   * }
+   *   {( rect ) => (
+   *      <p>Width: {rect.width}, Height: {rect.height}</p>
+   *   )}
+   * </ResizeTracker>
    * ```
    */
-  onResize?: (width: number, height: number) => void;
+  onResize?: (rect: Partial<DOMRectReadOnly>) => void;
 };
 
 /**
@@ -47,7 +61,7 @@ type ResizeTrackerT = {
  *
  * ---
  * ## PROPS:
- * - `children` *◄ REQUIRED ►*
+ * - `children` ***REQUIRED***
  * - `style`
  * - `measure`
  * - `onResize`
@@ -59,50 +73,47 @@ type ResizeTrackerT = {
  *
  * ---
  * ## LINKS:
- * [ResizeTracker Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+ * [ResizeTracker Documentation](https://github.com/voodoofugu/morphing-scroll?tab=readme-ov-file#-resizetracker-)
  *
  * [MDN Reference for Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
  */
 declare const ResizeTracker: React.FC<ResizeTrackerT>;
 
-// INTERSECTION_TRACKER ////////////////////////////
+// INTERSECTION_TRACKER
 type IntersectionTrackerT = {
   /**---
-   * ✨ *Child elements to be rendered when visible.*
+   * *Child elements to be rendered when visible.*
    */
   children: React.ReactNode;
   /**---
-   * ✨ *Custom inline styles for the IntersectionTracker component.*
+   * *Custom inline styles for the IntersectionTracker component.*
    */
   style?: React.CSSProperties;
   /**---
-   * ✨ *The root element for IntersectionObserver.*
+   * *The root element for IntersectionObserver.*
    * @default-viewport
    */
   root?: Element | null;
   /**---
-   * ✨ *Margin around the root.
+   * *Margin around the root.
    * Can be a single number or an array of up to 4 numbers (top, right, bottom, left).*
    */
   rootMargin?: number[] | number;
   /**---
-   * ✨ Visibility threshold for triggering intersection events.
+   * Visibility threshold for triggering intersection events.
    * A value between 0.0 (out of view) and 1.0 (fully visible).
    */
   threshold?: number;
   /**---
-   * ✨ Renders children regardless of their visibility in the viewport.
+   * Renders children regardless of their visibility in the viewport.
    * @default-false
    */
   visibleContent?: boolean;
   /**---
-   * ✨ Callback function triggered when `children` become visible.
-   */
-  onVisible?: () => void;
-  /**---
-   * ✨ Delay (in ms) before invoking `onVisible`.
+   * Callback function triggered when `children` become visible.
+   * @param key - The key of the first child element
    */
-  intersectionDelay?: number;
+  onVisible?: (key: string) => void;
 };
 
 /**
@@ -110,14 +121,13 @@ type IntersectionTrackerT = {
  *
  * ---
  * ## PROPS:
- * - `children` *◄ REQUIRED ►*
+ * - `children` ***REQUIRED***
  * - `style`
  * - `root`
  * - `rootMargin`
  * - `threshold`
  * - `visibleContent`
  * - `onVisible`
- * - `intersectionDelay`
  * ##### ! MORE DETAILS IN PROPS OR LINKS !
  *
  * ---
@@ -132,28 +142,28 @@ type IntersectionTrackerT = {
  */
 declare const IntersectionTracker: React.FC<IntersectionTrackerT>;
 
-// MORPH_SCROLL ////////////////////////////////////
+// MORPH_SCROLL
 export type MorphScrollT = {
   /**---
-   * ✨ *Additional class for the component.*
+   * *Additional class for the component.*
    */
   className?: string;
   /**---
-   * ✨ *Child elements.*
+   * *Custom user content.*
    */
   children?: React.ReactNode;
   /**---
-   * ✨ *Type of progress element.*
+   * *Type of progress element.*
    * @default-"scroll"
    */
   type?: "scroll" | "slider";
   /**---
-   * ✨ *Scrolling direction.*
+   * *Scrolling direction.*
    * @default-"y"
    */
   direction?: "x" | "y";
   /**---
-   * ✨ *Scroll position and animation duration.*
+   * *Scroll position and animation duration.*
    */
   scrollTop?: {
     value: number | "end" | null;
@@ -161,12 +171,12 @@ export type MorphScrollT = {
     updater?: boolean;
   };
   /**---
-   * ✨ *Stop loading when scrolling.*
+   * *Stop loading when scrolling.*
    * @default-false
    */
   stopLoadOnScroll?: boolean;
   /**---
-   * ✨ *Callback for scroll value.*
+   * *Callback for scroll value.*
    * @example
    * `onScrollValue={
    *   (scroll) => scroll > 200 && console.log("scroll > 200")
@@ -174,55 +184,55 @@ export type MorphScrollT = {
    */
   onScrollValue?: (scroll: number) => void;
   /**---
-   * ✨ *Callback for scroll status.*
+   * *Callback for scroll status.*
    * @example `isScrolling={(value) => console.log(value)}`
    */
   isScrolling?: (motion: boolean) => void;
   /**---
-   * ✨ *MorphScroll width and height.*
+   * *MorphScroll width and height.*
    */
   size?: number[];
   /**---
-   * ✨ *Required: Size of cells for each object.*
+   * *Required: Size of cells for each object.*
    */
   objectsSize: (number | "none" | "firstChild")[];
   /**---
-   * ✨ *Gap between cells.*
+   * *Gap between cells.*
    */
   gap?: number[] | number;
   /**---
-   * ✨ *Padding for the `objectsWrapper`.*
+   * *Padding for the `objectsWrapper`.*
    */
   padding?: number[] | number;
   /**---
-   * ✨ *Aligns the content when it is smaller than the MorphScroll `size`.*
+   * *Aligns the content when it is smaller than the MorphScroll `size`.*
    */
   contentAlign?: ["start" | "center" | "end", "start" | "center" | "end"];
   /**---
-   * ✨ *Aligns the objects within the `objectsWrapper`.*
+   * *Aligns the objects within the `objectsWrapper`.*
    */
   elementsAlign?: "start" | "center" | "end";
   /**---
-   * ✨ *Edge gradient.*
+   * *Edge gradient.*
    * @default if true { color: "rgba(0,0,0,0.4)", size: 40 }
    */
   edgeGradient?: boolean | { color?: string; size?: number };
   /**---
-   * ✨ *Reverse the progress bar direction.*
+   * *Reverse the progress bar direction.*
    * @default false
    */
   progressReverse?: boolean;
   /**---
-   * ✨ *Visibility of the progress bar.*
+   * *Visibility of the progress bar.*
    * @default "visible"
    */
   progressVisibility?: "visible" | "hover" | "hidden";
   /**---
-   * ✨ *Sets the `min-height` CSS property of the `objectsWrapper` to match the height of the MorphScroll.*
+   * *Sets the `min-height` CSS property of the `objectsWrapper` to match the height of the MorphScroll.*
    */
   objectsWrapFullMinSize?: boolean;
   /**---
-   * ✨ *Triggers for the progress bar.*
+   * *Triggers for the progress bar.*
    * @default-{ wheel: true }
    * @example
    * `progressTrigger={
@@ -239,15 +249,19 @@ export type MorphScrollT = {
     arrows?: boolean | { size?: number; element?: React.ReactNode };
   };
   /**---
-   * ✨ *Types of rendering for optimization.*
+   * *Types of rendering for optimization.*
    * @default-{ type: "default" }
    */
   render?:
     | { type: "default" }
-    | { type: "lazy"; rootMargin?: number | number[] }
-    | { type: "virtual" };
+    | {
+        type: "lazy";
+        rootMargin?: number | number[];
+        onVisible?: (key: string) => void;
+      }
+    | { type: "virtual"; rootMargin?: number | number[] };
   /**---
-   * ✨ *Handling of empty scroll elements.*
+   * *Handling of empty scroll elements.*
    */
   emptyElements?:
     | {
@@ -260,11 +274,11 @@ export type MorphScrollT = {
         clickTrigger?: { selector: string; delay?: number };
       };
   /**---
-   * ✨ *Adds React Suspense.*
+   * *Adds React Suspense.*
    */
   suspending?: boolean;
   /**---
-   * ✨ *Fallback element for error handling.*
+   * *Fallback element.*
    */
   fallback?: React.ReactNode;
 };
@@ -288,7 +302,7 @@ export type MorphScrollT = {
  *
  * #### • VISUAL SETTINGS:
  * - `size`
- * - `objectsSize` *◄ REQUIRED ►*
+ * - `objectsSize` ***REQUIRED***
  * - `gap`
  * - `padding`
  * - `contentAlign`

package/index.js

@@ -1 +1 @@
-"use strict";var e=require("react");const t=(e,t)=>{if(void 0!==e)return"number"==typeof e?[e,e,e,e]:2===e.length?t?[e[0],e[1],e[0],e[1]]:[e[1],e[0],e[1],e[0]]:4===e.length?t?[e[1],e[0],e[3],e[2]]:e:void 0},r=({style:r,root:n,children:l,threshold:s,rootMargin:o,visibleContent:i=!1,onVisible:a,intersectionDelay:c})=>{const[u,d]=e.useState(!1),p=e.useRef(null),m=e.useRef(null),h=t(o),g=h?`${h[0]}px ${h[1]}px ${h[2]}px ${h[3]}px`:"",f=e.useCallback((([e])=>{d(e.isIntersecting)}),[]),b=()=>{m.current&&(clearTimeout(m.current),m.current=null)};e.useEffect((()=>{const e=new IntersectionObserver(f,{root:n,threshold:s,rootMargin:g});return p.current&&e.observe(p.current),()=>{e.disconnect()}}),[n,s,g]),e.useEffect((()=>{if(u&&a)return b(),c?m.current=setTimeout((()=>{u&&a&&a()}),c):u&&a&&a(),()=>b()}),[u,c,a]);const v=i||u?l:null;return e.createElement("div",{ref:p,"intersection-tracker":"〈•〉",style:r},v)},n=({measure:t="inner",style:r,onResize:n,children:l})=>{const s=e.useRef(null),[o,i]=e.useState({width:0,height:0});e.useEffect((()=>{const e=s.current;if(!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 a={minWidth:"100%",minHeight:"100%"},c={width:"max-content",height:"max-content"},u={inner:Object.assign({},c),outer:Object.assign({},a),all:Object.assign(Object.assign({},a),c)};return e.createElement("div",{ref:s,"resize-tracker":"〈—〉",style:Object.assign(Object.assign({},u[t]),r)},l(o.width,o.height))};exports.IntersectionTracker=r,exports.MorphScroll=({type:l="scroll",className:s="",size:o,objectsSize:i,direction:a="y",gap:c,padding:u,progressReverse:d=!1,progressTrigger:p={wheel:!0},progressVisibility:m="visible",suspending:h=!1,fallback:g=null,scrollTop:f,edgeGradient:b,objectsWrapFullMinSize:v=!1,children:y,onScrollValue:x,elementsAlign:w=!1,contentAlign:j,isScrolling:E,stopLoadOnScroll:O=!1,render:M={type:"default"},emptyElements:$})=>{var k,T,C;const R=e.useReducer((()=>({})),{})[1],z=e.useRef(null),A=e.useRef(null),S=e.useRef(null),B=e.useRef(null),N=e.useRef(null),Y=e.useRef(null),V=e.useRef(null),q=e.useRef("none"),F=e.useRef(0),I=e.useRef([]),L=e.useRef(0),D=e.useRef(null),W=e.useRef(""),[X,H]=e.useState(!1),[G,P]=e.useState({width:0,height:0}),[J,K]=e.useState({width:0,height:0}),[Q,U]=e.useState({width:0,height:0}),Z=`${e.useId()}`.replace(/^(.{2})(.*).$/,"$2"),_={value:null!==(k=null==f?void 0:f.value)&&void 0!==k?k:null,duration:null!==(T=null==f?void 0:f.duration)&&void 0!==T?T:200},ee={position:"absolute",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer"},te={color:null,size:40},re=e.useCallback((t=>{if(null==t)return[];if(e.isValidElement(t)){const r=t;return r.type===e.Fragment?e.Children.toArray(r.props.children).flatMap(re):[r]}return[t]}),[]),ne="clear"===(null==$?void 0:$.mode),le=e.useMemo((()=>ne?W.current:""),[ne,W.current]),se=e.useMemo((()=>e.Children.toArray(y).flatMap(re).filter(Boolean).filter((t=>!ne||!e.isValidElement(t)||!W.current.includes(t.key)))),[y,ne,le]),oe=e.useMemo((()=>{if("end"!==_.value)return null;if(se.length>0){const t=se[0];if(e.isValidElement(t))return t.key}return null}),[se,_.value]),ie=Object.assign(Object.assign({},{size:40}),"object"==typeof p.arrows?p.arrows:{}),ae="object"==typeof b?Object.assign(Object.assign({},te),b):te,ce=Object.assign({position:"absolute",left:0,width:"100%",pointerEvents:"none",transition:"opacity 0.1s ease-in-out",height:`${ae.size}px`},ae.color&&{background:`linear-gradient(${ae.color}, transparent)`}),[ue,de,pe,me]=t(u,"x"===a)||[0,0,0,0],he=ue+pe,ge=me+de,[fe,be]=e.useMemo((()=>{var e,t,r,n;return"number"==typeof c?[c,c]:Array.isArray(c)?"x"===a?[null!==(e=c[0])&&void 0!==e?e:0,null!==(t=c[1])&&void 0!==t?t:0]:[null!==(r=c[1])&&void 0!==r?r:0,null!==(n=c[0])&&void 0!==n?n:0]:[0,0]}),[c,a]),ve=e.useMemo((()=>["number"==typeof i[0]?i[0]:"none"===i[0]?null:"firstChild"===i[0]?Q.width:null,"number"==typeof i[1]?i[1]:"none"===i[1]?null:"firstChild"===i[1]?Q.height:null]),[i,Q]),ye="x"===a?ve[0]:ve[1],xe="x"===a?ve[1]:ve[0],we=e.useMemo((()=>t("default"!==M.type&&M.rootMargin||0,"x"===a)),[M,a]),[je,Ee]=we?[we[2],we[0]]:[0,0],Oe=e.useMemo((()=>{const[e,t]=o&&Array.isArray(o)?o:[G.width,G.height];return p.arrows&&ie.size?"x"===a?[e?e-2*ie.size:e,t,e,t]:[e,t?t-2*ie.size:t,e,t]:[e,t,e,t]}),[o,a,ie.size,G]),Me="x"===a?Oe[0]:Oe[1],$e="x"===a?Oe[1]:Oe[0],ke=e.useMemo((()=>{const e=xe?xe+fe:null;return e?Math.floor(($e-ge)/e):1}),[xe,$e,fe,ge]),Te=e.useMemo((()=>{if("virtual"!==M.type||ke<=1)return[];const e=se.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:ke},(()=>[]));return e.forEach((e=>{t[e%ke].push(e)})),t}),[y,ke,M.type]),Ce=e.useMemo((()=>ke>1?Math.ceil(se.length/ke):se.length),[se.length,ke]),Re=e.useMemo((()=>{const e=ke||1;return xe?xe*e+(e-1)*be:"virtual"!==M.type?J.width:(Q.width+be)*e-be}),[xe,ke,be,J,Q,M.type]),ze=e.useMemo((()=>{const e=Ce-1,t=e<=0?0:e*fe;return ye?ye*Ce+t:"virtual"!==M.type?J.height:Q.height+t}),[ye,Ce,fe,J,Q,M.type]),Ae=e.useMemo((()=>ze?ze+he:0),[ze,he]),Se=e.useMemo((()=>Re?Re+ge:0),[Re,ge]),Be=(null===(C=S.current)||void 0===C?void 0:C.scrollTop)||0,Ne=Math.round(Be+Me)!==Ae,Ye=e.useMemo((()=>"hidden"===m&&Ae||0===ze?0:Me?Math.round(Me/Ae*Me):0),[Me,Ae,m]),Ve=e.useMemo((()=>Me?Ae-Me:Ae),[Ae,Me]),qe=e.useMemo((()=>Oe[0]&&Oe[1]?Oe[0]/2-Oe[1]/2:0),[Oe]),Fe=e.useMemo((()=>{let e=[],t=0;if("virtual"===M.type&&w){const r=Array.from({length:se.length},((e,t)=>t)),n=Math.abs(Math.floor(se.length/ke)*ke-se.length);e=n?r.slice(-n):[],"center"===w?t=((null!=xe?xe:0)+be)*(ke-n)/2:"end"===w&&(t=((null!=xe?xe:0)+be)*(ke-n))}return se.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,Te),s=function(e){return 0!==e?((null!=ye?ye:0)+fe)*e+ue:ue}("virtual"===M.type?ke>1?l[1]:n:0),o="virtual"===M.type&&ve[1]?s+ve[1]:0,i="virtual"===M.type&&xe?xe*l[0]+be*l[0]+me+(w&&e.length>0&&e.includes(n)?t:0):0;return{elementTop:s,elementBottom:o,left:i}}))}),[y,Te,ve,c,M.type,ke]),Ie=e.useMemo((()=>{var e,t;if(!j)return{};const[r,n="start"]=j,l="start"===r?"flex-start":"center"===r?"center":"flex-end",s="start"===n?"flex-start":"center"===n?"center":"flex-end",o=null!==(e=Oe[0])&&void 0!==e?e:0,i=null!==(t=Oe[1])&&void 0!==t?t:0,c="x"===a?o>Ae:i>Ae,u={};return("x"===a?i>Se:o>Se)&&(u.justifyContent="x"===a?s:l),c&&(u.alignItems="x"===a?l:s),u}),[j,a,Oe,Ae,Se]),Le=e.useCallback((e=>(e?Math.ceil:Math.floor)(Ae/Me)),[Me,Ae]),De=e=>{e&&(e.style.cursor="grabbing")},We=e=>{e&&"grabbing"===e.style.cursor&&(e.style.cursor="grab")},Xe=(e,t)=>{if(e){const r=e.querySelector(`.${t}`);r&&(r.style.opacity="0")}},He=e.useCallback((e=>{const t=S.current,r=B.current;if(!t||!r)return;const n=r.clientHeight,l=Le(),s=e=>tt(e);"first"===e&&t.scrollTop>0&&s(t.scrollTop<=Me?0:t.scrollTop-Me),"last"===e&&l&&t.scrollTop+Me!==n&&s(t.scrollTop+Me>=Me*l?n:t.scrollTop+Me)}),[S,B,Le]),Ge=e.useCallback((()=>{const e=S.current;if(e&&A.current&&Y.current){function t(){var t;const r=null===(t=Y.current)||void 0===t?void 0:t.querySelectorAll(".sliderElem");r&&r.forEach(((t,r)=>{var n,l;const s=(null!==(n=null==e?void 0:e.scrollTop)&&void 0!==n?n:0)>=Me*r&&(null!==(l=null==e?void 0:e.scrollTop)&&void 0!==l?l:0)<Me*(r+1);t.classList.toggle("active",s)}))}t()}}),[Me,Ae]),Pe=e.useCallback((()=>{const e=S.current;if(!e)return;const t=O||E;if(!X&&(null==E||E(!0)),t&&H(!0),D.current&&clearTimeout(D.current),D.current=setTimeout((()=>{t&&H(!1),null==E||E(!1),"default"!==M.type&&st()}),200),0!==Ye&&"hidden"!==m){const t=Math.abs(Math.round(e.scrollTop/Ve*(Me-Ye)));t!==L.current&&"slider"!==l&&(L.current=Ye+t>Me?Me-Ye:t),x&&x(e.scrollTop)}b&&Ge(),"default"!==M.type&&st(!1),R()}),[Me,Ye,L,m,x,Ge,b,E,O,$,M]),Je=e.useCallback((e=>{const t=S.current,r=Le();if(t&&r){if(["thumb","wrapp"].includes(q.current)){const n="thumb"===q.current?1:-1;t.scrollTop+=("x"===a?e.movementX:e.movementY)*r*n}if("slider"===q.current){const r=B.current;if(!r)return;const n=r.clientHeight,l=e=>tt(e,(()=>{F.current=0,R()})),s=e=>{const r=t.scrollTop+e*Me;l(e>0?Math.min(r,n-Me):Math.max(r,0))};e.movementY>0&&F.current<1?(F.current+=e.movementY,F.current>=1&&t.scrollTop+Me!=n&&s(1)):e.movementY<0&&F.current>-1&&(F.current-=Math.abs(e.movementY),F.current<=-1&&0!=t.scrollTop&&s(-1))}}}),[a,S,Le]),Ke=e.useCallback((e=>{if(window.removeEventListener("mousemove",Je),window.removeEventListener("mouseup",Ke),document.body.style.removeProperty("cursor"),We(B.current),We(N.current),q.current="none","hover"===m){let t=e.target,r=!1;for(;t&&t!==document.body;){if(t===A.current){r=!0;break}t=t.parentNode}r||Xe(A.current,"scroll"===l?"scrollBar":"sliderBar")}R()}),[Je,z,m,l]),Qe=e.useCallback((e=>{q.current=e,R(),window.addEventListener("mousemove",Je),window.addEventListener("mouseup",Ke),document.body.style.cursor="grabbing"}),[Je,Ke,z]),Ue=e.useCallback(((e,t)=>{const r={width:e,height:t-he};G.width===r.width&&G.height===r.height||P(r)}),[he,G]),Ze=e.useCallback(((e,t)=>{const r={width:e-ge,height:t-he};J.width===r.width&&J.height===r.height||K(r)}),[ge,he,J]),_e=e.useCallback(((e,t)=>{const r={width:e,height:t};Q.width===r.width&&Q.height===r.height||U(r)}),[Q]);let et;const tt=e.useCallback(((e,t)=>{const r=S.current;if(!r)return null;const n=r.scrollTop;let l=null;const s=o=>{null===l&&(l=o);const i=Math.round(o-l),a=Math.min(i/_.duration,1)||0;r.scrollTop=n+(e-n)*a,i<=_.duration?et=requestAnimationFrame(s):null==t||t()};return et=requestAnimationFrame(s),()=>cancelAnimationFrame(et)}),[S,_.duration,_.value]),rt=e.useCallback((()=>{"lazy"===M.type&&M.onVisible?(M.onVisible(),st()):st()}),[M]),nt=(t,n,l,s,o)=>{const i=h?e.createElement(e.Suspense,{fallback:g},s):s,c=Object.assign({width:xe?`${xe}px`:"",height:ye?`${ye}px`:""},"x"===a&&{display:"flex"}),u=Object.assign({width:ve[0]?`${ve[0]}px`:""},"x"===a&&{transform:"rotate(-90deg) scaleX(-1)"}),d={root:S.current,rootMargin:"lazy"===M.type?M.rootMargin:we,style:"virtual"===M.type?Object.assign(Object.assign(Object.assign(Object.assign({},c),{position:"absolute",top:`${t}px`}),n&&{left:`${n}px`}),!xe&&1===ke&&{transform:"translateX(-50%)"}):c,onVisible:rt},p=e.createElement("div",Object.assign({},l?{"wrap-id":l}:{},{onClick:ot,style:u}),i);return"virtual"===M.type?e.createElement("div",{key:o,style:Object.assign(Object.assign(Object.assign({position:"absolute",top:`${t}px`},n&&{left:`${n}px`}),!xe&&1===ke&&{transform:"translateX(-50%)"}),c)},p):"lazy"===M.type?e.createElement(r,Object.assign({key:o},d),p):e.createElement("div",{key:o,style:c},p)},lt=e.useCallback((()=>document.querySelectorAll(`[wrap-id^="${Z}-"]`)),[]),st=e.useCallback(((e=!0)=>{if(!$)return;const t=Array.from(lt()).filter((e=>0===e.children.length)).map((e=>{var t;return null===(t=e.getAttribute("wrap-id"))||void 0===t?void 0:t.split("-")[1]})).filter(Boolean).join("/");W.current?t&&!W.current.includes(t)&&(W.current=`${W.current}/${t}`):W.current=t,e&&R()}),[W.current]),ot=e.useCallback((e=>{var t;if(!(null===(t=null==$?void 0:$.clickTrigger)||void 0===t?void 0:t.selector))return;e.target.closest(null==$?void 0:$.clickTrigger.selector)&&(D.current&&clearTimeout(D.current),D.current=setTimeout((()=>{st()}),$.clickTrigger.delay))}),[$]);e.useEffect((()=>{st()}),[se.length]),e.useEffect((()=>{"virtual"===M.type&&R(),Ge()}),[]),e.useEffect((()=>{if(S.current&&se.length>0){let e;return"end"===_.value&&Ae>Me?(V.current||(V.current=oe),e=V.current===oe?tt(Ve):null,V.current=oe):"number"==typeof _.value&&(e=tt(_.value)),()=>{e&&e(),D.current&&clearTimeout(D.current),I.current=[]}}}),[null==f?void 0:f.updater,_.value,tt,Ve]),e.useEffect((()=>{if(O){const e=Array.from(lt(),(e=>e.getAttribute("wrap-id")));I.current=e}}),[O]);const it=e.createElement("div",{className:"objectsWrapper",ref:B,onMouseDown:()=>{p.content&&(Qe("wrapp"),De(B.current))},style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({height:"virtual"===M.type&&Ae||"none"!==i[1]?`${Ae}px`:"fit-content",width:Se?`${Se}px`:""},p.content&&{cursor:"grab"}),"virtual"===M.type&&{position:"relative"}),"virtual"!==M.type&&{display:"flex",alignContent:"center"}),"virtual"!==M.type&&"y"===a&&{alignItems:"center"}),"virtual"!==M.type&&ke>1&&{flexWrap:"wrap"}),"virtual"!==M.type&&ke<=1&&{flexDirection:"column"}),c&&"virtual"!==M.type&&{gap:`${fe}px ${be}px`}),w&&"virtual"!==M.type&&{justifyContent:"start"===w?"flex-start":"center"===w?"center":"flex-end"}),v&&{minHeight:Me-he+"px"})},se.map(((t,r)=>{var l,s,o;const c=t.key||"",u=O&&!I.current.includes(`${Z}-${c}`)&&X?g:"fallback"===(null==$?void 0:$.mode)&&W.current.includes(c)?null!==(l=$.element)&&void 0!==l?l:g:t,d="number"==typeof i[0]&&"number"==typeof i[1]||"firstChild"!==i[0]&&"firstChild"!==i[1]||0!==r?u:e.createElement(n,{onResize:_e},(()=>u));if("virtual"!==M.type)return nt(0,0,`${Z}-${c}`,d,c);{const{elementTop:e,elementBottom:t,left:n}=Fe[r];if(("x"===a?null!==(s=Oe[0])&&void 0!==s?s:0:null!==(o=Oe[1])&&void 0!==o?o:0)+je>e-Be&&t-Be>0-Ee)return nt(e,n,`${Z}-${c}`,d,c)}}))),at=e.createElement("div",{"morph-scroll":"〈♦〉",className:`${s&&s}`,ref:z,style:{width:`${Oe[2]}px`,height:`${Oe[3]}px`}},e.createElement("div",{className:"scrollContent",ref:A,onMouseEnter:()=>"hover"===m&&((e,t)=>{if(e){const r=e.querySelector(`.${t}`);r&&(r.style.opacity="1")}})(A.current,"scroll"===l?"scrollBar":"sliderBar"),onMouseLeave:()=>"hover"===m&&"thumb"!==q.current&&"slider"!==q.current&&Xe(A.current,"scroll"===l?"scrollBar":"sliderBar"),style:Object.assign(Object.assign({position:"relative",width:`${$e}px`,height:`${Me}px`},"x"===a&&{transform:`rotate(-90deg) translate(${qe}px, ${qe}px) scaleX(-1)`}),p.arrows&&ie.size&&("x"===a?{left:`${ie.size}px`}:{top:`${ie.size}px`}))},e.createElement("div",{className:"scrollElement",ref:S,onScroll:Pe,style:Object.assign(Object.assign(Object.assign({display:"flex",width:"100%",height:"100%"},Ie),p.wheel?{overflow:"hidden scroll"}:{overflow:"hidden hidden"}),"boolean"!=typeof p.progressElement||!1===p.progressElement?{scrollbarWidth:"none"}:{})},"none"!==i[0]&&"none"!==i[1]?it:e.createElement(n,{onResize:Ze},(()=>it))),b&&e.createElement("div",{className:"edge",style:Object.assign(Object.assign({},ce),{top:0,opacity:Be>1?1:0})}),b&&e.createElement("div",{className:"edge",style:Object.assign(Object.assign({},ce),{bottom:0,opacity:Ne?1:0,transform:"scaleY(-1)"})}),p.arrows&&e.createElement(e.Fragment,null,e.createElement("div",{className:"arrowBox"+(Be>1?" active":""),style:Object.assign(Object.assign({},ee),{top:0,transform:"translateY(-100%)",height:`${ie.size}px`}),onClick:()=>He("first")},ie.element),e.createElement("div",{className:"arrowBox"+(Ne?" active":""),style:Object.assign(Object.assign({},ee),{bottom:0,transform:"translateY(100%) scaleY(-1)",height:`${ie.size}px`}),onClick:()=>He("last")},ie.element)),"hidden"!==m&&Ye<ze&&"boolean"!=typeof p.progressElement&&e.createElement(e.Fragment,null,"slider"!==l?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!=!p.progressElement&&{pointerEvents:"none"}),"hover"===m&&{opacity:0,transition:"opacity 0.1s ease-in-out"})},e.createElement("div",{ref:N,className:"scrollBarThumb",onMouseDown:()=>{p.progressElement&&(Qe("thumb"),De(N.current))},style:Object.assign({height:`${Ye}px`,willChange:"transform",transform:`translateY(${L.current}px)`},p.progressElement&&{cursor:"grab"})},p.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}),!p.progressElement&&{pointerEvents:"none"}),"hover"===m&&{opacity:0,transition:"opacity 0.1s ease-in-out"}),ref:Y,onMouseDown:()=>Qe("slider")},Array.from({length:Le()||0},((t,r)=>e.createElement("div",{key:r,className:"sliderElem",style:{width:"fit-content"}},p.progressElement)))))));return o?at:e.createElement(n,{measure:"outer",onResize:Ue},(()=>at))},exports.ResizeTracker=n;
+"use strict";var e=require("react");const t=(e,t)=>{if(void 0!==e)return"number"==typeof e?[e,e,e,e]:2===e.length?t?[e[0],e[1],e[0],e[1]]:[e[1],e[0],e[1],e[0]]:4===e.length?t?[e[1],e[0],e[3],e[2]]:e:void 0},r=({style:r,root:n,children:l,threshold:s,rootMargin:o,visibleContent:i=!1,onVisible:a})=>{const[c,u]=e.useState(!1),d=e.useRef(null),p=t(o),m=p?`${p[0]}px ${p[1]}px ${p[2]}px ${p[3]}px`:"",h=e.useCallback((([e])=>{u(e.isIntersecting)}),[]),g=e.useMemo((()=>e.Children.toArray(l).filter((t=>e.isValidElement(t)))),[l]),f=e.useMemo((()=>{var e;return g.length>0&&null!==(e=g[0].key)&&void 0!==e?e:null}),[g]);e.useEffect((()=>{const e=new IntersectionObserver(h,{root:n,threshold:s,rootMargin:m});return d.current&&e.observe(d.current),()=>{e.disconnect()}}),[n,s,m]),e.useEffect((()=>{c&&a&&c&&a&&a(f||"")}),[c,a,f]);const v=i||c?l:null;return e.createElement("div",{ref:d,"intersection-tracker":"〈♦〉",style:r},v)},n=({measure:t="inner",style:r,onResize:n,children:l})=>{const s=e.useRef(null),[o,i]=e.useState({});e.useEffect((()=>{const e=s.current;if(!e)return;const t=new ResizeObserver((e=>{for(const t of e)i(t.contentRect),n&&n(t.contentRect)}));return t.observe(e),()=>{t.unobserve(e),t.disconnect()}}),[t,n]);const a={minWidth:"100%",minHeight:"100%"},c={width:"max-content",height:"max-content"},u={inner:Object.assign({},c),outer:Object.assign({},a),all:Object.assign(Object.assign({},a),c)};return e.createElement("div",{ref:s,"resize-tracker":"〈♦〉",style:Object.assign(Object.assign({},u[t]),r)},l(o))};let l=1;exports.IntersectionTracker=r,exports.MorphScroll=({type:s="scroll",className:o="",size:i,objectsSize:a,direction:c="y",gap:u,padding:d,progressReverse:p=!1,progressTrigger:m={wheel:!0},progressVisibility:h="visible",suspending:g=!1,fallback:f=null,scrollTop:v,edgeGradient:b,objectsWrapFullMinSize:y=!1,children:x,onScrollValue:w,elementsAlign:j=!1,contentAlign:E,isScrolling:O,stopLoadOnScroll:M=!1,render:k={type:"default"},emptyElements:$})=>{var C,T,R;const z=e.useReducer((()=>({})),{})[1],A=e.useRef(null),S=e.useRef(null),B=e.useRef(null),N=e.useRef(null),Y=e.useRef(null),V=e.useRef(null),q=e.useRef(null),F=e.useRef("none"),L=e.useRef(0),I=e.useRef([]),W=e.useRef(0),X=e.useRef(null),D=e.useRef(""),[H,G]=e.useState(!1),[P,J]=e.useState({width:0,height:0}),[K,Q]=e.useState({width:0,height:0}),[U,Z]=e.useState({width:0,height:0}),_=function(){const t=e.useRef(null);return null===t.current&&(t.current="."+l++),t.current}(),ee={value:null!==(C=null==v?void 0:v.value)&&void 0!==C?C:null,duration:null!==(T=null==v?void 0:v.duration)&&void 0!==T?T:200},te={position:"absolute",width:"100%",display:"flex",justifyContent:"center",alignItems:"center",cursor:"pointer"},re={color:null,size:40},ne=e.useCallback((t=>{if(null==t)return[];if(e.isValidElement(t)){const r=t;return r.type===e.Fragment?e.Children.toArray(r.props.children).flatMap(ne):[r]}return[t]}),[]),le="clear"===(null==$?void 0:$.mode),se=e.useMemo((()=>le?D.current:""),[le,D.current]),oe=e.useMemo((()=>e.Children.toArray(x).flatMap(ne).filter(Boolean).filter((t=>!le||!e.isValidElement(t)||!D.current.includes(t.key)))),[x,le,se]),ie=e.useMemo((()=>{if("end"!==ee.value)return null;if(oe.length>0){const t=oe[0];if(e.isValidElement(t))return t.key}return null}),[oe,ee.value]),ae=Object.assign(Object.assign({},{size:40}),"object"==typeof m.arrows?m.arrows:{}),ce="object"==typeof b?Object.assign(Object.assign({},re),b):re,ue=Object.assign({position:"absolute",left:0,width:"100%",pointerEvents:"none",transition:"opacity 0.1s ease-in-out",height:`${ce.size}px`},ce.color&&{background:`linear-gradient(${ce.color}, transparent)`}),[de,pe,me,he]=t(d,"x"===c)||[0,0,0,0],ge=de+me,fe=he+pe,[ve,be]=e.useMemo((()=>{var e,t,r,n;return"number"==typeof u?[u,u]:Array.isArray(u)?"x"===c?[null!==(e=u[0])&&void 0!==e?e:0,null!==(t=u[1])&&void 0!==t?t:0]:[null!==(r=u[1])&&void 0!==r?r:0,null!==(n=u[0])&&void 0!==n?n:0]:[0,0]}),[u,c]),ye=e.useMemo((()=>["number"==typeof a[0]?a[0]:"none"===a[0]?null:"firstChild"===a[0]?U.width:null,"number"==typeof a[1]?a[1]:"none"===a[1]?null:"firstChild"===a[1]?U.height:null]),[a,U]),xe="x"===c?ye[0]:ye[1],we="x"===c?ye[1]:ye[0],je=e.useMemo((()=>t("default"!==k.type&&k.rootMargin||0,"x"===c)),[k,c]),[Ee,Oe]=je?[je[2],je[0]]:[0,0],Me=e.useMemo((()=>{const[e,t]=i&&Array.isArray(i)?i:[P.width,P.height];return m.arrows&&ae.size?"x"===c?[e?e-2*ae.size:e,t,e,t]:[e,t?t-2*ae.size:t,e,t]:[e,t,e,t]}),[i,c,ae.size,P]),ke="x"===c?Me[0]:Me[1],$e="x"===c?Me[1]:Me[0],Ce=e.useMemo((()=>{const e=we?we+ve:null;return e?Math.floor(($e-fe)/e):1}),[we,$e,ve,fe]),Te=e.useMemo((()=>{if("virtual"!==k.type||Ce<=1)return[];const e=oe.map(((e,t)=>t));if(!e)return[];const t=Array.from({length:Ce},(()=>[]));return e.forEach((e=>{t[e%Ce].push(e)})),t}),[x,Ce,k.type]),Re=e.useMemo((()=>Ce>1?Math.ceil(oe.length/Ce):oe.length),[oe.length,Ce]),ze=e.useMemo((()=>{const e=Ce||1;return we?we*e+(e-1)*be:"virtual"!==k.type?K.width:(U.width+be)*e-be}),[we,Ce,be,K,U,k.type]),Ae=e.useMemo((()=>{const e=Re-1,t=e<=0?0:e*ve;return xe?xe*Re+t:"virtual"!==k.type?K.height:U.height+t}),[xe,Re,ve,K,U,k.type]),Se=e.useMemo((()=>Ae?Ae+ge:0),[Ae,ge]),Be=e.useMemo((()=>ze?ze+fe:0),[ze,fe]),Ne=(null===(R=B.current)||void 0===R?void 0:R.scrollTop)||0,Ye=Math.round(Ne+ke)!==Se,Ve=e.useMemo((()=>"hidden"===h&&Se||0===Ae?0:ke?Math.round(ke/Se*ke):0),[ke,Se,h]),qe=e.useMemo((()=>ke?Se-ke:Se),[Se,ke]),Fe=e.useMemo((()=>Me[0]&&Me[1]?Me[0]/2-Me[1]/2:0),[Me]),Le=e.useMemo((()=>{let e=[],t=0;if("virtual"===k.type&&j){const r=Array.from({length:oe.length},((e,t)=>t)),n=Math.abs(Math.floor(oe.length/Ce)*Ce-oe.length);e=n?r.slice(-n):[],"center"===j?t=((null!=we?we:0)+be)*(Ce-n)/2:"end"===j&&(t=((null!=we?we:0)+be)*(Ce-n))}return oe.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,Te),s=function(e){return 0!==e?((null!=xe?xe:0)+ve)*e+de:de}("virtual"===k.type?Ce>1?l[1]:n:0),o="virtual"===k.type&&ye[1]?s+ye[1]:0,i="virtual"===k.type&&we?we*l[0]+be*l[0]+he+(j&&e.length>0&&e.includes(n)?t:0):0;return{elementTop:s,elementBottom:o,left:i}}))}),[x,Te,ye,u,k.type,Ce]),Ie=e.useMemo((()=>{var e,t;if(!E)return{};const[r,n="start"]=E,l="start"===r?"flex-start":"center"===r?"center":"flex-end",s="start"===n?"flex-start":"center"===n?"center":"flex-end",o=null!==(e=Me[0])&&void 0!==e?e:0,i=null!==(t=Me[1])&&void 0!==t?t:0,a="x"===c?o>Se:i>Se,u={};return("x"===c?i>Be:o>Be)&&(u.justifyContent="x"===c?s:l),a&&(u.alignItems="x"===c?l:s),u}),[E,c,Me,Se,Be]),We=e.useCallback((e=>(e?Math.ceil:Math.floor)(Se/ke)),[ke,Se]),Xe=e=>{e&&(e.style.cursor="grabbing")},De=e=>{e&&"grabbing"===e.style.cursor&&(e.style.cursor="grab")},He=(e,t)=>{if(e){const r=e.querySelector(`.${t}`);r&&(r.style.opacity="0")}},Ge=e.useCallback((e=>{const t=B.current,r=N.current;if(!t||!r)return;const n=r.clientHeight,l=We(),s=e=>rt(e);"first"===e&&t.scrollTop>0&&s(t.scrollTop<=ke?0:t.scrollTop-ke),"last"===e&&l&&t.scrollTop+ke!==n&&s(t.scrollTop+ke>=ke*l?n:t.scrollTop+ke)}),[B,N,We]),Pe=e.useCallback((()=>{const e=B.current;if(e&&S.current&&V.current){function t(){var t;const r=null===(t=V.current)||void 0===t?void 0:t.querySelectorAll(".sliderElem");r&&r.forEach(((t,r)=>{var n,l;const s=(null!==(n=null==e?void 0:e.scrollTop)&&void 0!==n?n:0)>=ke*r&&(null!==(l=null==e?void 0:e.scrollTop)&&void 0!==l?l:0)<ke*(r+1);t.classList.toggle("active",s)}))}t()}}),[ke,Se]),Je=e.useCallback((()=>{const e=B.current;if(!e)return;const t=M||O;if(!H&&(null==O||O(!0)),t&&G(!0),X.current&&clearTimeout(X.current),X.current=setTimeout((()=>{t&&G(!1),null==O||O(!1),"default"!==k.type&&ot()}),200),0!==Ve&&"hidden"!==h){const t=Math.abs(Math.round(e.scrollTop/qe*(ke-Ve)));t!==W.current&&"slider"!==s&&(W.current=Ve+t>ke?ke-Ve:t),w&&w(e.scrollTop)}b&&Pe(),"default"!==k.type&&ot(!1),z()}),[ke,Ve,W,h,w,Pe,b,O,M,$,k]),Ke=e.useCallback((e=>{const t=B.current,r=We();if(t&&r){if(["thumb","wrapp"].includes(F.current)){const n="thumb"===F.current?1:-1;t.scrollTop+=("x"===c?e.movementX:e.movementY)*r*n}if("slider"===F.current){const r=N.current;if(!r)return;const n=r.clientHeight,l=e=>rt(e,(()=>{L.current=0,z()})),s=e=>{const r=t.scrollTop+e*ke;l(e>0?Math.min(r,n-ke):Math.max(r,0))};e.movementY>0&&L.current<1?(L.current+=e.movementY,L.current>=1&&t.scrollTop+ke!=n&&s(1)):e.movementY<0&&L.current>-1&&(L.current-=Math.abs(e.movementY),L.current<=-1&&0!=t.scrollTop&&s(-1))}}}),[c,B,We]),Qe=e.useCallback((e=>{if(window.removeEventListener("mousemove",Ke),window.removeEventListener("mouseup",Qe),document.body.style.removeProperty("cursor"),De(N.current),De(Y.current),F.current="none","hover"===h){let t=e.target,r=!1;for(;t&&t!==document.body;){if(t===S.current){r=!0;break}t=t.parentNode}r||He(S.current,"scroll"===s?"scrollBar":"sliderBar")}z()}),[Ke,A,h,s]),Ue=e.useCallback((e=>{F.current=e,z(),window.addEventListener("mousemove",Ke),window.addEventListener("mouseup",Qe),document.body.style.cursor="grabbing"}),[Ke,Qe,A]),Ze=e.useCallback((e=>{var t,r;const n={width:null!==(t=e.width)&&void 0!==t?t:0,height:null!==(r=e.height)&&void 0!==r?r:0};P.width===n.width&&P.height===n.height||J(n)}),[ge,P]),_e=e.useCallback((e=>{var t,r;const n={width:(null!==(t=e.width)&&void 0!==t?t:0)-fe,height:(null!==(r=e.height)&&void 0!==r?r:0)-ge};K.width===n.width&&K.height===n.height||Q(n)}),[fe,ge,K]),et=e.useCallback((e=>{var t,r;const n={width:null!==(t=e.width)&&void 0!==t?t:0,height:null!==(r=e.height)&&void 0!==r?r:0};U.width===n.width&&U.height===n.height||Z(n)}),[U]);let tt;const rt=e.useCallback(((e,t)=>{const r=B.current;if(!r)return null;const n=r.scrollTop;let l=null;const s=o=>{null===l&&(l=o);const i=Math.round(o-l),a=Math.min(i/ee.duration,1)||0;r.scrollTop=n+(e-n)*a,i<=ee.duration?tt=requestAnimationFrame(s):null==t||t()};return tt=requestAnimationFrame(s),()=>cancelAnimationFrame(tt)}),[B,ee.duration,ee.value]),nt=e.useCallback((e=>{"lazy"===k.type&&k.onVisible?(k.onVisible(e),ot()):ot()}),[k]),lt=(t,n,l,s,o)=>{const i=g?e.createElement(e.Suspense,{fallback:f},s):s,a=Object.assign({width:we?`${we}px`:"",height:xe?`${xe}px`:""},"x"===c&&{display:"flex"}),u=Object.assign({width:ye[0]?`${ye[0]}px`:""},"x"===c&&{transform:"rotate(-90deg) scaleX(-1)"}),d={root:B.current,rootMargin:"lazy"===k.type?k.rootMargin:je,style:"virtual"===k.type?Object.assign(Object.assign(Object.assign(Object.assign({},a),{position:"absolute",top:`${t}px`}),n&&{left:`${n}px`}),!we&&1===Ce&&{transform:"translateX(-50%)"}):a,onVisible:nt},p=e.createElement("div",Object.assign({},l?{"wrap-id":l}:{},{onClick:it,style:u,key:o}),i);return"virtual"===k.type?e.createElement("div",{key:o,style:Object.assign(Object.assign(Object.assign({position:"absolute",top:`${t}px`},n&&{left:`${n}px`}),!we&&1===Ce&&{transform:"translateX(-50%)"}),a)},p):"lazy"===k.type?e.createElement(r,Object.assign({key:o},d),p):e.createElement("div",{key:o,style:a},p)},st=e.useCallback((()=>document.querySelectorAll(`[wrap-id^="${_}-"]`)),[]),ot=e.useCallback(((e=!0)=>{if(!$)return;const t=Array.from(st()).filter((e=>0===e.children.length)).map((e=>{var t;return null===(t=e.getAttribute("wrap-id"))||void 0===t?void 0:t.split("-")[1]})).filter(Boolean).join("/");D.current?t&&!D.current.includes(t)&&(D.current=`${D.current}/${t}`):D.current=t,e&&z()}),[D.current]),it=e.useCallback((e=>{var t;if(!(null===(t=null==$?void 0:$.clickTrigger)||void 0===t?void 0:t.selector))return;e.target.closest(null==$?void 0:$.clickTrigger.selector)&&(X.current&&clearTimeout(X.current),X.current=setTimeout((()=>{ot()}),$.clickTrigger.delay))}),[$]);e.useEffect((()=>{ot()}),[oe.length]),e.useEffect((()=>{"virtual"===k.type&&z(),Pe()}),[]),e.useEffect((()=>{if(B.current&&oe.length>0){let e;return"end"===ee.value&&Se>ke?(q.current||(q.current=ie),e=q.current===ie?rt(qe):null,q.current=ie):"number"==typeof ee.value&&(e=rt(ee.value)),()=>{e&&e(),X.current&&clearTimeout(X.current),I.current=[]}}}),[null==v?void 0:v.updater,ee.value,rt,qe]),e.useEffect((()=>{if(M){const e=Array.from(st(),(e=>e.getAttribute("wrap-id")));I.current=e}}),[M]);const at=e.createElement("div",{className:"objectsWrapper",ref:N,onMouseDown:()=>{m.content&&(Ue("wrapp"),Xe(N.current))},style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({height:"virtual"===k.type&&Se||"none"!==a[1]?`${Se}px`:"fit-content",width:Be?`${Be}px`:""},m.content&&{cursor:"grab"}),"virtual"===k.type&&{position:"relative"}),"virtual"!==k.type&&{display:"flex",alignContent:"center"}),"virtual"!==k.type&&"y"===c&&{alignItems:"center"}),"virtual"!==k.type&&Ce>1&&{flexWrap:"wrap"}),"virtual"!==k.type&&Ce<=1&&{flexDirection:"column"}),u&&"virtual"!==k.type&&{gap:`${ve}px ${be}px`}),j&&"virtual"!==k.type&&{justifyContent:"start"===j?"flex-start":"center"===j?"center":"flex-end"}),y&&{minHeight:ke-ge+"px"})},oe.map(((t,r)=>{var l,s,o;const i=t.key||"",u=M&&!I.current.includes(`${_}-${i}`)&&H?f:"fallback"===(null==$?void 0:$.mode)&&D.current.includes(i)?null!==(l=$.element)&&void 0!==l?l:f:t,d="number"==typeof a[0]&&"number"==typeof a[1]||"firstChild"!==a[0]&&"firstChild"!==a[1]||0!==r?u:e.createElement(n,{onResize:et},(()=>u));if("virtual"!==k.type)return lt(0,0,`${_}-${i}`,d,i);{const{elementTop:e,elementBottom:t,left:n}=Le[r];if(("x"===c?null!==(s=Me[0])&&void 0!==s?s:0:null!==(o=Me[1])&&void 0!==o?o:0)+Ee>e-Ne&&t-Ne>0-Oe)return lt(e,n,`${_}-${i}`,d,i)}}))),ct=e.createElement("div",{"morph-scroll":"〈♦〉",className:`${o&&o}`,ref:A,style:{width:`${Me[2]}px`,height:`${Me[3]}px`}},e.createElement("div",{className:"scrollContent",ref:S,onMouseEnter:()=>"hover"===h&&((e,t)=>{if(e){const r=e.querySelector(`.${t}`);r&&(r.style.opacity="1")}})(S.current,"scroll"===s?"scrollBar":"sliderBar"),onMouseLeave:()=>"hover"===h&&"thumb"!==F.current&&"slider"!==F.current&&He(S.current,"scroll"===s?"scrollBar":"sliderBar"),style:Object.assign(Object.assign({position:"relative",width:`${$e}px`,height:`${ke}px`},"x"===c&&{transform:`rotate(-90deg) translate(${Fe}px, ${Fe}px) scaleX(-1)`}),m.arrows&&ae.size&&("x"===c?{left:`${ae.size}px`}:{top:`${ae.size}px`}))},e.createElement("div",{className:"scrollElement",ref:B,onScroll:Je,style:Object.assign(Object.assign(Object.assign({display:"flex",width:"100%",height:"100%"},Ie),m.wheel?{overflow:"hidden scroll"}:{overflow:"hidden hidden"}),"boolean"!=typeof m.progressElement||!1===m.progressElement?{scrollbarWidth:"none"}:{})},"none"!==a[0]&&"none"!==a[1]?at:e.createElement(n,{onResize:_e},(()=>at))),b&&e.createElement("div",{className:"edge",style:Object.assign(Object.assign({},ue),{top:0,opacity:Ne>1?1:0})}),b&&e.createElement("div",{className:"edge",style:Object.assign(Object.assign({},ue),{bottom:0,opacity:Ye?1:0,transform:"scaleY(-1)"})}),m.arrows&&e.createElement(e.Fragment,null,e.createElement("div",{className:"arrowBox"+(Ne>1?" active":""),style:Object.assign(Object.assign({},te),{top:0,transform:"translateY(-100%)",height:`${ae.size}px`}),onClick:()=>Ge("first")},ae.element),e.createElement("div",{className:"arrowBox"+(Ye?" active":""),style:Object.assign(Object.assign({},te),{bottom:0,transform:"translateY(100%) scaleY(-1)",height:`${ae.size}px`}),onClick:()=>Ge("last")},ae.element)),"hidden"!==h&&Ve<Ae&&"boolean"!=typeof m.progressElement&&e.createElement(e.Fragment,null,"slider"!==s?e.createElement("div",{className:"scrollBar",style:Object.assign(Object.assign(Object.assign(Object.assign({position:"absolute",top:0},p?{left:0}:{right:0}),{width:"fit-content",height:"100%"}),!1!=!m.progressElement&&{pointerEvents:"none"}),"hover"===h&&{opacity:0,transition:"opacity 0.1s ease-in-out"})},e.createElement("div",{ref:Y,className:"scrollBarThumb",onMouseDown:()=>{m.progressElement&&(Ue("thumb"),Xe(Y.current))},style:Object.assign({height:`${Ve}px`,willChange:"transform",transform:`translateY(${W.current}px)`},m.progressElement&&{cursor:"grab"})},m.progressElement)):e.createElement("div",{className:"sliderBar",style:Object.assign(Object.assign(Object.assign({position:"absolute",top:"50%",transform:"translateY(-50%)"},p?{left:0}:{right:0}),!m.progressElement&&{pointerEvents:"none"}),"hover"===h&&{opacity:0,transition:"opacity 0.1s ease-in-out"}),ref:V,onMouseDown:()=>Ue("slider")},Array.from({length:We()||0},((t,r)=>e.createElement("div",{key:r,className:"sliderElem",style:{width:"fit-content"}},m.progressElement)))))));return i?ct:e.createElement(n,{measure:"outer",onResize:Ze},(()=>ct))},exports.ResizeTracker=n;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphing-scroll",
-  "version": "1.4.1",
+  "version": "1.4.16",
   "description": "Library for using various methods of scrolling objects〈♦〉",
   "author": "Georg Schilin",
   "license": "MIT",
@@ -9,12 +9,10 @@
   "types": "./index.d.ts",
   "keywords": [
     "react",
-    "react-component",
-    "scroll",
-    "scroller"
+    "scroll"
   ],
   "peerDependencies": {
-    "react": ">=18 <20"
+    "react": ">=16.6 <20"
   },
   "repository": {
     "type": "git",