morphing-scroll 1.3.3 → 1.4.1

package/README.md

@@ -34,7 +34,7 @@ npm install morphing-scroll
 
 - **`className`:** _Additional classes for the component._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> string<br />
   <br />
@@ -57,7 +57,7 @@ npm install morphing-scroll
 
 - **`children` (required):** _Custom user content._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> React.ReactNode<br />
   <br />
@@ -78,11 +78,13 @@ npm install morphing-scroll
 
   </details>
 
+<h2>
+
 ##### - SCROLL SETTINGS:
 
 - **`type`:** _Type of progress element._
     <details>
-    <summary><strong><em>MORE:</em></strong></summary>
+    <summary><strong><em>more</em></strong></summary>
   <br />
     <strong>• Type:</strong> "scroll" | "slider"<br />
     <br />
@@ -109,7 +111,7 @@ npm install morphing-scroll
 
 - **`direction`:** _Scrolling direction._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> "x" | "y"<br />
   <br />
@@ -135,16 +137,26 @@ npm install morphing-scroll
 
 - **`scrollTop`:** _Scroll position and animation duration._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
-  <strong>• Type:</strong> { value: number | "end" | null; duration?: number }<br />
+  <strong>• Type:</strong> {<br />
+      value: number | "end";<br />
+      duration?: number;<br />
+      updater?: boolean;<br />
+   }<br />
   <br />
-  <strong>• Default:</strong> { value: 1; duration: 200 }<br />
+  <strong>• Default:</strong> { value: 0; duration: 200; updater: false }<br />
   <br />
   <strong>• Description:</strong> <em><br />
-  This parameter will help you set your own scroll values.<br />
-  The default value for <code>value</code> is set to 1 to prevent sudden scrolling to the start of the list, especially when loading new elements at the top of the MorphScroll. The value parameter also accepts <code>null</code>, this is done so that after using <code>scrollTop</code> you can reset the passed value for later use of the same value. The value <code>"end"</code> scrolls to the end of the list upon loading and is useful when adding new items to the bottom of the list and will not work when adding new items to the top.<br />
-  The <code>duration</code> parameter specifies the scrolling speed for the <code>scrollTop</code> values. This parameter is optional and you can only use `value'.</em><br />
+  This parameter allows you to set custom scroll values.<br />
+  <br />
+  The <code>value</code> property accepts numerical pixel values.<br />
+  The <code>"end"</code> option scrolls to the bottom of the list upon loading, which is useful for scenarios like chat message lists. When new elements are appended to the list, the scroll position will update automatically. However, to prevent unwanted scrolling when adding elements to the beginning of the list, this property will not trigger.<br />
+  <br />
+  The <code>duration</code> property determines the animation speed for scrolling in ms.</em><br />
+  <br />
+  The <code>updater</code> property is a helper for the <code>value</code> property. When setting the same scroll value repeatedly (e.g., clicking a button to scroll to the top), React does not register the update. To force an update, toggle updater within setState, e.g.,<br />
+  <code>setScroll((prev) => ({ ...prev, value: 0, updater: !prev.updater }))</code></em><br />
   <br />
   <strong>• Example:</strong>
 
@@ -162,7 +174,7 @@ npm install morphing-scroll
 
 - **`stopLoadOnScroll`:** _Stop loading when scrolling._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> boolean<br />
   <br />
@@ -187,7 +199,7 @@ npm install morphing-scroll
 
 - **`onScrollValue`:** _Callback for scroll value._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> (scroll: number) => void<br />
   <br />
@@ -215,7 +227,7 @@ npm install morphing-scroll
 
 - **`isScrolling`:** _Callback function for scroll status._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> (motion: boolean) => void<br />
   <br />
@@ -237,11 +249,13 @@ npm install morphing-scroll
 
   </details>
 
+<h2>
+
 ##### - VISUAL SETTINGS:
 
 - **`size`:** _MorphScroll width and height._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> number[]<br />
   <br />
@@ -268,7 +282,7 @@ npm install morphing-scroll
 
 - **`objectsSize` (required):** _Required: Size of cells for each object._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> (number | "none" | "firstChild")[]<br />
   <br />
@@ -298,7 +312,7 @@ npm install morphing-scroll
 
 - **`gap`:** _Gap between cells._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> number[] | number<br />
   <br />
@@ -323,14 +337,17 @@ npm install morphing-scroll
 
 - **`padding`:** _Padding for the `objectsWrapper`._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> number[] | number<br />
   <br />
   <strong>• Description:</strong> <em><br />
   This parameter defines the spacing between the list items and their wrapper, effectively increasing the width or height of the scrollable area. You can provide a single number, which will apply to all sides, or an array of two or four numbers to specify spacing for specific directions.<br />
   <br />
-  *For a two-number array, the values follow the <code>horizontal/vertical</code> rule, while a four-number array follows the <code>top/right/bottom/left</code> rule. All values are in pixels and apply regardless of the <code>direction</code>.<br />
+  *This parameter accepts either a single number or an array of numbers.<br />
+  If a two-number array is provided, the values follow the <code>horizontal/vertical</code> rule.<br />
+  If a four-number array is provided, the values follow the <code>top/right/bottom/left</code> rule.<br />
+  All values are in pixels and apply regardless of the <code>direction</code>.<br />
   <br />
   *Important: this is not a CSS property, even though its name might suggest otherwise. It specifically refers to modifying the width and height of the scrollable wrapper, affecting the dimensions of the scrollable area.</em><br />
   <br />
@@ -352,18 +369,25 @@ npm install morphing-scroll
 
 - **`contentAlign`:** _Aligns the content when it is smaller than the MorphScroll `size`._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
-  <br />
-  <strong>• Type:</strong> ["start" | "center" | "end", "start" | "center" | "end"]<br />
+  <summary><strong><em>more</em></strong></summary>
   <br />
+  <strong>• Type:</strong> [<br />
+      "start" | "center" | "end",<br />
+      "start" | "center" | "end"<br />
+  ]<br />
   <strong>• Description:</strong> <em><br />
-  .</em><br />
+  This parameter aligns the `objectsWrapper`, which contains all the provided elements, relative to the scroll or the `size`.<br />
+  <br />
+  *Important: only takes effect when `objectsWrapper` is smaller than the scroll container.<br />
+  <br />
+  *The values are specified following the horizontal/vertical rule, regardless of the direction.</em><br />
   <br />
   <strong>• Example:</strong>
 
   ```tsx
   <MorphScroll
-  // another props
+    contentAlign={["center", "center"]}
+    // another props
   >
     {children}
   </MorphScroll>
@@ -374,18 +398,19 @@ npm install morphing-scroll
 
 - **`elementsAlign`:** _Aligns the objects within the `objectsWrapper`._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> "start" | "center" | "end"<br />
   <br />
   <strong>• Description:</strong> <em><br />
-  .</em><br />
+  This parameter aligns the provided custom objects within the `objectsWrapper`.</em><br />
   <br />
   <strong>• Example:</strong>
 
   ```tsx
   <MorphScroll
-  // another props
+    elementsAlign="center"
+    // another props
   >
     {children}
   </MorphScroll>
@@ -396,20 +421,27 @@ npm install morphing-scroll
 
 - **`edgeGradient`:** _Edge gradient._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> boolean | { color?: string; size?: number }<br />
   <br />
-  <strong>• Default:</strong> if true { color: "rgba(0,0,0,0.4)", size: 40 }<br />
+  <strong>• Default:</strong> When using true or color, the default size will be 40<br />
   <br />
   <strong>• Description:</strong> <em><br />
-  .</em><br />
+  This parameter creates two edge elements responsible for darkening the edges of the scroll when it overflows.<br />
+  <br />
+  The color property accepts any valid color format. If specified, the library will generate a gradient transitioning from the custom color to transparent. If omitted, the edge elements will have no color, allowing for custom styling via CSS classes.<br />
+  <br />
+  The size property, measured in pixels, adjusts the dimensions of the edge elements.</em><br />
   <br />
   <strong>• Example:</strong>
 
   ```tsx
   <MorphScroll
-  // another props
+    edgeGradient={{ color: "rgba(0, 0, 0, 0.5)" }}
+    // edgeGradient={{ color: "rgba(0, 0, 0, 0.5)", size: 20 }}
+    // edgeGradient
+    // another props
   >
     {children}
   </MorphScroll>
@@ -418,22 +450,27 @@ npm install morphing-scroll
   </details>
   <h2>
 
-- **`progressReverse`:** _Reverse the progress bar direction._
+- **`progressReverse`:** _Reverse the progress bar position._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> boolean<br />
   <br />
   <strong>• Default:</strong> false<br />
   <br />
   <strong>• Description:</strong> <em><br />
-  .</em><br />
+  This parameter changes the position of the progress bar based on the direction property.<br />
+  <br />
+  If direction="x", the progress bar will be positioned on the left by default or on the right when progressReverse is active.<br />
+  <br />
+  If direction="y", the progress bar will be positioned at the top by default or at the bottom when progressReverse is active.</em><br />
   <br />
   <strong>• Example:</strong>
 
   ```tsx
   <MorphScroll
-  // another props
+    progressReverse
+    // another props
   >
     {children}
   </MorphScroll>
@@ -444,20 +481,21 @@ npm install morphing-scroll
 
 - **`progressVisibility`:** _Visibility of the progress bar._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> "visible" | "hover" | "hidden"<br />
   <br />
   <strong>• Default:</strong> "visible"<br />
   <br />
   <strong>• Description:</strong> <em><br />
-  .</em><br />
+  This parameter controls the visibility of the progress bar regardless of the <code>type</code> value.</em><br />
   <br />
   <strong>• Example:</strong>
 
   ```tsx
   <MorphScroll
-  // another props
+    progressVisibility="hover"
+    // another props
   >
     {children}
   </MorphScroll>
@@ -468,7 +506,7 @@ npm install morphing-scroll
 
 - **`objectsWrapFullMinSize`:** _Sets the `min-height` CSS property of the `objectsWrapper` to match the height of the MorphScroll._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> boolean<br />
   <br />
@@ -489,11 +527,13 @@ npm install morphing-scroll
 
   </details>
 
+<h2>
+
 ##### - PROGRESS AND RENDERING:
 
 - **`progressTrigger`:** _Triggers for the progress bar._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> {<br />
     wheel?: boolean;<br />
@@ -505,13 +545,22 @@ npm install morphing-scroll
   <strong>• Default:</strong> { wheel: true }<br />
   <br />
   <strong>• Description:</strong> <em><br />
-  .</em><br />
+   This is one of the most important parameters, allowing you to define how users interact with the progress bar and customize its appearance.<br />
+  <br />
+  The <code>wheel</code> property determines whether the progress bar responds to mouse wheel scrolling.<br />
+  The <code>content</code> property enables interaction by clicking and dragging anywhere within the scrollable content to move it.<br />
+  The <code>progressElement</code> property defines whether the progress bar is controlled by a custom element. If your custom scroll element is not ready yet, you can simply pass <code>true</code>, which will display the browser's default scrollbar when <code>type="scroll"</code> is used. Alternatively, if <code>type="slider"</code> is set, a <code>sliderBar</code> element will be created, containing multiple <code>sliderElem</code> elements representing progress. Depending on the position, one of these elements will always have the <code>active</code> class.<br />
+  </em><br />
   <br />
   <strong>• Example:</strong>
 
   ```tsx
   <MorphScroll
-  // another props
+    progressTrigger={{
+      wheel: true,
+      progressElement: <div className="your-scroll-thumb" />,
+    }}
+    // another props
   >
     {children}
   </MorphScroll>
@@ -522,23 +571,36 @@ npm install morphing-scroll
 
 - **`render`:** _Types of rendering for optimization._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong><br />
     | { type: "default" }<br />
-    | { type: "lazy"; rootMargin?: number }<br />
-    | { type: "virtual" }<br />
+    | { type: "lazy"; rootMargin?: number | number[]; onVisible?: () => void }<br />
+    | { type: "virtual"; rootMargin?: number | number[] }<br />
   <br />
-  <strong>• Default:</strong> false<br />
+  <strong>• Default:</strong> { type: "default" }<br />
   <br />
   <strong>• Description:</strong> <em><br />
-  .</em><br />
+  This parameter defines the rendering type for optimization.<br />
+  The <code>type</code> property can be set to <code>default</code>, <code>lazy</code> or <code>virtual</code>.<br />
+  <br />
+  With <code>default</code>, no optimizations are applied.<br />
+  With <code>lazy</code>, containers are created but do not load content until they enter the viewport. The <code>rootMargin</code> property controls the threshold for loading, and the <code>onVisible</code>callback function can be used to trigger actions when a container becomes visible for each scrollable object.<br />
+  <br />
+  With <code>virtual</code>, a container is created for each scrollable object, and its absolute positioning is calculated based on <code>scrollTop</code> and scroll area dimensions. Rendering is dynamically adjusted according to the scroll position. The <code>rootMargin</code> property can also be used to extend the rendering area.<br />
+  <br />
+  *The <code>rootMargin</code> property accepts either a single number or an array of numbers.<br />
+  If a two-number array is provided, the values follow the <code>horizontal/vertical</code> rule.<br />
+  If a four-number array is provided, the values follow the <code>top/right/bottom/left</code> rule.<br />
+  All values are in pixels and apply regardless of the <code>direction</code>.<br /></em><br />
   <br />
   <strong>• Example:</strong>
 
   ```tsx
   <MorphScroll
-  // another props
+    render={{ type: "virtual" }}
+    // render={{ type: "lazy", rootMargin: [0, 100], onVisible: () => console.log("visible")) }}
+    // another props
   >
     {children}
   </MorphScroll>
@@ -547,31 +609,46 @@ npm install morphing-scroll
   </details>
   <h2>
 
-- **`emptyElements`:** _Processing of empty scroll elements._
+- **`emptyElements`:** _Handling of empty scroll elements._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong><br />
     | {
-        mode: "clear"
-        closeSelector?: string;
+        mode: "clear";
+        clickTrigger?: { selector: string; delay?: number };
       }<br />
     | {
         mode: "fallback";
-        closeSelector?: string;
-        element?: React.ReactNode
+        element?: React.ReactNode;
+        clickTrigger?: { selector: string; delay?: number };
       }<br />
   <br />
-  <strong>• Default:</strong> false<br />
-  <br />
   <strong>• Description:</strong> <em><br />
-  .</em><br />
+  If certain components might return nothing during rendering, this parameter helps manage them. The check and subsequent replacement with a fallback element or removal occur after the scroll elements are rendered. Due to this, when dynamically displaying elements in different <code>render</code> modes, you may notice slight position shifts during fast scrolling, as empty elements are removed, causing subsequent elements to reposition.<br />
+  <br />
+  <code>mode: "clear"</code> – automatically removes empty elements, eliminating unnecessary gaps in the scroll list.<br />
+  <br />
+  <code>clickTrigger</code> – if elements are removed via a click action, this property ensures cleanup is triggered accordingly. It accepts an object with a <code>selector</code> (such as a delete button’s class) and an optional <code>delay</code> (a delay in milliseconds to accommodate animations or complex removals).<br />
+  <br />
+  <code>mode: "fallback"</code> – replaces empty elements with a specified fallback component. By default, it uses the <code>fallback</code> props value, but you can also pass a separate placeholder element via the <code>element</code> property.</em><br />
   <br />
   <strong>• Example:</strong>
 
   ```tsx
   <MorphScroll
-  // another props
+    emptyElements={{
+      mode: "clear",
+      clickTrigger: { selector: ".close-button" },
+    }}
+    // emptyElements={{
+    //   mode: "fallback",
+    //   clickTrigger: {
+    //     selector: ".close-button",
+    //     delay: 100,
+    //   },
+    // }}
+    // another props
   >
     {children}
   </MorphScroll>
@@ -582,7 +659,7 @@ npm install morphing-scroll
 
 - **`suspending`:** _Adds React Suspense._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> boolean<br />
   <br />
@@ -606,7 +683,7 @@ npm install morphing-scroll
 
 - **`fallback`:** _Fallback element for error handling._
   <details>
-  <summary><strong><em>MORE:</em></strong></summary>
+  <summary><strong><em>more</em></strong></summary>
   <br />
   <strong>• Type:</strong> React.ReactNode<br />
   <br />

package/index.d.ts

@@ -155,7 +155,11 @@ export type MorphScrollT = {
   /**---
    * ✨ *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.*
    * @default-false
@@ -240,20 +244,20 @@ export type MorphScrollT = {
    */
   render?:
     | { type: "default" }
-    | { type: "lazy"; rootMargin?: number }
+    | { type: "lazy"; rootMargin?: number | number[] }
     | { type: "virtual" };
   /**---
-   * ✨ *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.*

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,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphing-scroll",
-  "version": "1.3.3",
+  "version": "1.4.1",
   "description": "Library for using various methods of scrolling objects〈♦〉",
   "author": "Georg Schilin",
   "license": "MIT",