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