@tanstack/react-virtual - npm Package Compare versions

Comparing version 3.0.0-beta.18 to 3.0.0-beta.19

build/cjs/virtual-core/build/esm/index.js

@@ -152,3 +152,4 @@ /**
     const scroll = () => {
-      cb(instance.scrollElement[instance.options.horizontal ? propX : propY]);
+      const offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
+      cb(Math.max(0, offset - instance.options.scrollMargin));
     };
@@ -186,13 +187,25 @@
 };
-const windowScroll = (offset, canSmooth, instance) => {
+const windowScroll = (offset, _ref, instance) => {
   var _instance$scrollEleme;
+
+  let {
+    canSmooth,
+    sync
+  } = _ref;
+  const toOffset = sync ? offset : offset + instance.options.scrollMargin;
   (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo == null ? void 0 : _instance$scrollEleme.scrollTo({
-    [instance.options.horizontal ? 'left' : 'top']: offset,
+    [instance.options.horizontal ? 'left' : 'top']: toOffset,
     behavior: canSmooth ? 'smooth' : undefined
   });
 };
-const elementScroll = (offset, canSmooth, instance) => {
+const elementScroll = (offset, _ref2, instance) => {
   var _instance$scrollEleme2;
+
+  let {
+    canSmooth,
+    sync
+  } = _ref2;
+  const toOffset = sync ? offset : offset + instance.options.scrollMargin;
   (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo == null ? void 0 : _instance$scrollEleme2.scrollTo({
-    [instance.options.horizontal ? 'left' : 'top']: offset,
+    [instance.options.horizontal ? 'left' : 'top']: toOffset,
     behavior: canSmooth ? 'smooth' : undefined
@@ -207,2 +220,4 @@ });
     this.scrollElement = null;
+    this.isScrolling = false;
+    this.isScrollingTimeoutId = null;
     this.measurementsCache = [];
@@ -218,4 +233,4 @@ this.itemMeasurementsCache = {};
     this.setOptions = opts => {
-      Object.entries(opts).forEach(_ref => {
-        let [key, value] = _ref;
+      Object.entries(opts).forEach(_ref3 => {
+        let [key, value] = _ref3;
         if (typeof value === 'undefined') delete opts[key];
@@ -241,2 +256,4 @@ });
         },
+        scrollMargin: 0,
+        scrollingDelay: 150,
         ...opts
@@ -271,3 +288,6 @@ };
 
-        this._scrollToOffset(this.scrollOffset, false);
+        this._scrollToOffset(this.scrollOffset, {
+          canSmooth: false,
+          sync: true
+        });
 
@@ -279,5 +299,23 @@ this.unsubs.push(this.options.observeElementRect(this, rect => {
         this.unsubs.push(this.options.observeElementOffset(this, offset => {
-          this.scrollOffset = offset;
+          if (this.isScrollingTimeoutId !== null) {
+            clearTimeout(this.isScrollingTimeoutId);
+            this.isScrollingTimeoutId = null;
+          }
+
+          if (this.scrollOffset !== offset) {
+            this.isScrolling = true;
+            this.scrollOffset = offset;
+            this.isScrollingTimeoutId = setTimeout(() => {
+              this.isScrollingTimeoutId = null;
+              this.isScrolling = false;
+              this.notify();
+            }, this.options.scrollingDelay);
+          } else {
+            this.isScrolling = false;
+          }
+
           this.calculateRange();
         }));
+      } else if (!this.isScrolling) {
+        this.calculateRange();
       }
@@ -362,3 +400,6 @@ };
             if (!this.destinationOffset) {
-              this._scrollToOffset(this.scrollOffset + (measuredItemSize - itemSize), false);
+              this._scrollToOffset(this.scrollOffset + (measuredItemSize - itemSize), {
+                canSmooth: false,
+                sync: false
+              });
             }
@@ -415,8 +456,13 @@ }
 
+      const options = {
+        canSmooth: smoothScroll,
+        sync: false
+      };
+
       if (align === 'start') {
-        _this._scrollToOffset(toOffset, smoothScroll);
+        _this._scrollToOffset(toOffset, options);
       } else if (align === 'end') {
-        _this._scrollToOffset(toOffset - size, smoothScroll);
+        _this._scrollToOffset(toOffset - size, options);
       } else if (align === 'center') {
-        _this._scrollToOffset(toOffset - size / 2, smoothScroll);
+        _this._scrollToOffset(toOffset - size / 2, options);
       }
@@ -428,3 +474,2 @@ };
         align = 'auto',
-        smoothScroll = _this.options.enableSmoothScroll,
         ...rest
@@ -462,3 +507,2 @@ } = _temp2 === void 0 ? {} : _temp2;
         align,
-        smoothScroll,
         ...rest
@@ -474,6 +518,6 @@ });
 
-    this._scrollToOffset = (offset, canSmooth) => {
+    this._scrollToOffset = (offset, options) => {
       clearTimeout(this.scrollCheckFrame);
       this.destinationOffset = offset;
-      this.options.scrollToFn(offset, canSmooth, this);
+      this.options.scrollToFn(offset, options, this);
       let scrollCheckFrame;
@@ -535,3 +579,3 @@
 
-function calculateRange(_ref2) {
+function calculateRange(_ref4) {
   let {
@@ -541,3 +585,3 @@ measurements,
     scrollOffset
-  } = _ref2;
+  } = _ref4;
   const count = measurements.length - 1;
@@ -544,0 +588,0 @@

build/esm/index.js

@@ -150,3 +150,4 @@ /**
     const scroll = () => {
-      cb(instance.scrollElement[instance.options.horizontal ? propX : propY]);
+      const offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
+      cb(Math.max(0, offset - instance.options.scrollMargin));
     };
@@ -184,13 +185,25 @@
 };
-const windowScroll = (offset, canSmooth, instance) => {
+const windowScroll = (offset, _ref, instance) => {
   var _instance$scrollEleme;
+
+  let {
+    canSmooth,
+    sync
+  } = _ref;
+  const toOffset = sync ? offset : offset + instance.options.scrollMargin;
   (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo == null ? void 0 : _instance$scrollEleme.scrollTo({
-    [instance.options.horizontal ? 'left' : 'top']: offset,
+    [instance.options.horizontal ? 'left' : 'top']: toOffset,
     behavior: canSmooth ? 'smooth' : undefined
   });
 };
-const elementScroll = (offset, canSmooth, instance) => {
+const elementScroll = (offset, _ref2, instance) => {
   var _instance$scrollEleme2;
+
+  let {
+    canSmooth,
+    sync
+  } = _ref2;
+  const toOffset = sync ? offset : offset + instance.options.scrollMargin;
   (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo == null ? void 0 : _instance$scrollEleme2.scrollTo({
-    [instance.options.horizontal ? 'left' : 'top']: offset,
+    [instance.options.horizontal ? 'left' : 'top']: toOffset,
     behavior: canSmooth ? 'smooth' : undefined
@@ -205,2 +218,4 @@ });
     this.scrollElement = null;
+    this.isScrolling = false;
+    this.isScrollingTimeoutId = null;
     this.measurementsCache = [];
@@ -216,4 +231,4 @@ this.itemMeasurementsCache = {};
     this.setOptions = opts => {
-      Object.entries(opts).forEach(_ref => {
-        let [key, value] = _ref;
+      Object.entries(opts).forEach(_ref3 => {
+        let [key, value] = _ref3;
         if (typeof value === 'undefined') delete opts[key];
@@ -239,2 +254,4 @@ });
         },
+        scrollMargin: 0,
+        scrollingDelay: 150,
         ...opts
@@ -269,3 +286,6 @@ };
 
-        this._scrollToOffset(this.scrollOffset, false);
+        this._scrollToOffset(this.scrollOffset, {
+          canSmooth: false,
+          sync: true
+        });
 
@@ -277,5 +297,23 @@ this.unsubs.push(this.options.observeElementRect(this, rect => {
         this.unsubs.push(this.options.observeElementOffset(this, offset => {
-          this.scrollOffset = offset;
+          if (this.isScrollingTimeoutId !== null) {
+            clearTimeout(this.isScrollingTimeoutId);
+            this.isScrollingTimeoutId = null;
+          }
+
+          if (this.scrollOffset !== offset) {
+            this.isScrolling = true;
+            this.scrollOffset = offset;
+            this.isScrollingTimeoutId = setTimeout(() => {
+              this.isScrollingTimeoutId = null;
+              this.isScrolling = false;
+              this.notify();
+            }, this.options.scrollingDelay);
+          } else {
+            this.isScrolling = false;
+          }
+
           this.calculateRange();
         }));
+      } else if (!this.isScrolling) {
+        this.calculateRange();
       }
@@ -360,3 +398,6 @@ };
             if (!this.destinationOffset) {
-              this._scrollToOffset(this.scrollOffset + (measuredItemSize - itemSize), false);
+              this._scrollToOffset(this.scrollOffset + (measuredItemSize - itemSize), {
+                canSmooth: false,
+                sync: false
+              });
             }
@@ -413,8 +454,13 @@ }
 
+      const options = {
+        canSmooth: smoothScroll,
+        sync: false
+      };
+
       if (align === 'start') {
-        _this._scrollToOffset(toOffset, smoothScroll);
+        _this._scrollToOffset(toOffset, options);
       } else if (align === 'end') {
-        _this._scrollToOffset(toOffset - size, smoothScroll);
+        _this._scrollToOffset(toOffset - size, options);
       } else if (align === 'center') {
-        _this._scrollToOffset(toOffset - size / 2, smoothScroll);
+        _this._scrollToOffset(toOffset - size / 2, options);
       }
@@ -426,3 +472,2 @@ };
         align = 'auto',
-        smoothScroll = _this.options.enableSmoothScroll,
         ...rest
@@ -460,3 +505,2 @@ } = _temp2 === void 0 ? {} : _temp2;
         align,
-        smoothScroll,
         ...rest
@@ -472,6 +516,6 @@ });
 
-    this._scrollToOffset = (offset, canSmooth) => {
+    this._scrollToOffset = (offset, options) => {
       clearTimeout(this.scrollCheckFrame);
       this.destinationOffset = offset;
-      this.options.scrollToFn(offset, canSmooth, this);
+      this.options.scrollToFn(offset, options, this);
       let scrollCheckFrame;
@@ -533,3 +577,3 @@
 
-function calculateRange(_ref2) {
+function calculateRange(_ref4) {
   let {
@@ -539,3 +583,3 @@ measurements,
     scrollOffset
-  } = _ref2;
+  } = _ref4;
   const count = measurements.length - 1;
@@ -542,0 +586,0 @@

build/stats.json

@@ -14,7 +14,7 @@ {
                 "name": "virtual-core/build/esm/index.js",
-                "uid": "97f2-14"
+                "uid": "7f54-14"
               },
               {
                 "name": "react-virtual/src/index.tsx",
-                "uid": "97f2-16"
+                "uid": "7f54-16"
               }
@@ -29,20 +29,20 @@ ]
   "nodeParts": {
-    "97f2-14": {
-      "renderedLength": 16012,
-      "gzipLength": 3800,
+    "7f54-14": {
+      "renderedLength": 17251,
+      "gzipLength": 4015,
       "brotliLength": 0,
-      "mainUid": "97f2-13"
+      "mainUid": "7f54-13"
     },
-    "97f2-16": {
+    "7f54-16": {
       "renderedLength": 1281,
       "gzipLength": 441,
       "brotliLength": 0,
-      "mainUid": "97f2-15"
+      "mainUid": "7f54-15"
     }
   },
   "nodeMetas": {
-    "97f2-13": {
+    "7f54-13": {
       "id": "/packages/virtual-core/build/esm/index.js",
       "moduleParts": {
-        "index.production.js": "97f2-14"
+        "index.production.js": "7f54-14"
       },
@@ -52,17 +52,17 @@ "imported": [],
         {
-          "uid": "97f2-15"
+          "uid": "7f54-15"
         }
       ]
     },
-    "97f2-15": {
+    "7f54-15": {
       "id": "/packages/react-virtual/src/index.tsx",
       "moduleParts": {
-        "index.production.js": "97f2-16"
+        "index.production.js": "7f54-16"
       },
       "imported": [
         {
-          "uid": "97f2-17"
+          "uid": "7f54-17"
         },
         {
-          "uid": "97f2-13"
+          "uid": "7f54-13"
         }
@@ -73,3 +73,3 @@ ],
     },
-    "97f2-17": {
+    "7f54-17": {
       "id": "react",
@@ -80,3 +80,3 @@ "moduleParts": {},
         {
-          "uid": "97f2-15"
+          "uid": "7f54-15"
         }
@@ -83,0 +83,0 @@ ],

build/umd/index.development.js

@@ -174,3 +174,4 @@ /**
       const scroll = () => {
-        cb(instance.scrollElement[instance.options.horizontal ? propX : propY]);
+        const offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
+        cb(Math.max(0, offset - instance.options.scrollMargin));
       };
@@ -208,13 +209,25 @@
   };
-  const windowScroll = (offset, canSmooth, instance) => {
+  const windowScroll = (offset, _ref, instance) => {
     var _instance$scrollEleme;
+
+    let {
+      canSmooth,
+      sync
+    } = _ref;
+    const toOffset = sync ? offset : offset + instance.options.scrollMargin;
     (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo == null ? void 0 : _instance$scrollEleme.scrollTo({
-      [instance.options.horizontal ? 'left' : 'top']: offset,
+      [instance.options.horizontal ? 'left' : 'top']: toOffset,
       behavior: canSmooth ? 'smooth' : undefined
     });
   };
-  const elementScroll = (offset, canSmooth, instance) => {
+  const elementScroll = (offset, _ref2, instance) => {
     var _instance$scrollEleme2;
+
+    let {
+      canSmooth,
+      sync
+    } = _ref2;
+    const toOffset = sync ? offset : offset + instance.options.scrollMargin;
     (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo == null ? void 0 : _instance$scrollEleme2.scrollTo({
-      [instance.options.horizontal ? 'left' : 'top']: offset,
+      [instance.options.horizontal ? 'left' : 'top']: toOffset,
       behavior: canSmooth ? 'smooth' : undefined
@@ -229,2 +242,4 @@ });
       this.scrollElement = null;
+      this.isScrolling = false;
+      this.isScrollingTimeoutId = null;
       this.measurementsCache = [];
@@ -240,4 +255,4 @@ this.itemMeasurementsCache = {};
       this.setOptions = opts => {
-        Object.entries(opts).forEach(_ref => {
-          let [key, value] = _ref;
+        Object.entries(opts).forEach(_ref3 => {
+          let [key, value] = _ref3;
           if (typeof value === 'undefined') delete opts[key];
@@ -263,2 +278,4 @@ });
           },
+          scrollMargin: 0,
+          scrollingDelay: 150,
           ...opts
@@ -293,3 +310,6 @@ };
 
-          this._scrollToOffset(this.scrollOffset, false);
+          this._scrollToOffset(this.scrollOffset, {
+            canSmooth: false,
+            sync: true
+          });
 
@@ -301,5 +321,23 @@ this.unsubs.push(this.options.observeElementRect(this, rect => {
           this.unsubs.push(this.options.observeElementOffset(this, offset => {
-            this.scrollOffset = offset;
+            if (this.isScrollingTimeoutId !== null) {
+              clearTimeout(this.isScrollingTimeoutId);
+              this.isScrollingTimeoutId = null;
+            }
+
+            if (this.scrollOffset !== offset) {
+              this.isScrolling = true;
+              this.scrollOffset = offset;
+              this.isScrollingTimeoutId = setTimeout(() => {
+                this.isScrollingTimeoutId = null;
+                this.isScrolling = false;
+                this.notify();
+              }, this.options.scrollingDelay);
+            } else {
+              this.isScrolling = false;
+            }
+
             this.calculateRange();
           }));
+        } else if (!this.isScrolling) {
+          this.calculateRange();
         }
@@ -384,3 +422,6 @@ };
               if (!this.destinationOffset) {
-                this._scrollToOffset(this.scrollOffset + (measuredItemSize - itemSize), false);
+                this._scrollToOffset(this.scrollOffset + (measuredItemSize - itemSize), {
+                  canSmooth: false,
+                  sync: false
+                });
               }
@@ -437,8 +478,13 @@ }
 
+        const options = {
+          canSmooth: smoothScroll,
+          sync: false
+        };
+
         if (align === 'start') {
-          _this._scrollToOffset(toOffset, smoothScroll);
+          _this._scrollToOffset(toOffset, options);
         } else if (align === 'end') {
-          _this._scrollToOffset(toOffset - size, smoothScroll);
+          _this._scrollToOffset(toOffset - size, options);
         } else if (align === 'center') {
-          _this._scrollToOffset(toOffset - size / 2, smoothScroll);
+          _this._scrollToOffset(toOffset - size / 2, options);
         }
@@ -450,3 +496,2 @@ };
           align = 'auto',
-          smoothScroll = _this.options.enableSmoothScroll,
           ...rest
@@ -484,3 +529,2 @@ } = _temp2 === void 0 ? {} : _temp2;
           align,
-          smoothScroll,
           ...rest
@@ -496,6 +540,6 @@ });
 
-      this._scrollToOffset = (offset, canSmooth) => {
+      this._scrollToOffset = (offset, options) => {
         clearTimeout(this.scrollCheckFrame);
         this.destinationOffset = offset;
-        this.options.scrollToFn(offset, canSmooth, this);
+        this.options.scrollToFn(offset, options, this);
         let scrollCheckFrame;
@@ -557,3 +601,3 @@
 
-  function calculateRange(_ref2) {
+  function calculateRange(_ref4) {
     let {
@@ -563,3 +607,3 @@ measurements,
       scrollOffset
-    } = _ref2;
+    } = _ref4;
     const count = measurements.length - 1;
@@ -566,0 +610,0 @@

build/umd/index.production.js

@@ -21,3 +21,3 @@ /**
    * @license MIT
-   */function o(e,t,s){let n,o=[];return()=>{let i;s.key&&null!=s.debug&&s.debug()&&(i=Date.now());const l=e();if(!(l.length!==o.length||l.some(((e,t)=>o[t]!==e))))return n;let r;if(o=l,s.key&&null!=s.debug&&s.debug()&&(r=Date.now()),n=t(...l),null==s||null==s.onChange||s.onChange(n),s.key&&null!=s.debug&&s.debug()){const e=Math.round(100*(Date.now()-i))/100,t=Math.round(100*(Date.now()-r))/100,n=t/16,o=(e,t)=>{for(e=String(e);e.length<t;)e=" "+e;return e};console.info("%c⏱ "+o(t,5)+" /"+o(e,5)+" ms","\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl("+Math.max(0,Math.min(120-120*n,120))+"deg 100% 31%);",null==s?void 0:s.key)}return n}}const i=e=>e,l=e=>{const t=Math.max(e.startIndex-e.overscan,0),s=Math.min(e.endIndex+e.overscan,e.count-1),n=[];for(let e=t;e<=s;e++)n.push(e);return n},r=(e,t)=>{const s=new ResizeObserver((e=>{var s,n;t({width:null==(s=e[0])?void 0:s.contentRect.width,height:null==(n=e[0])?void 0:n.contentRect.height})}));if(e.scrollElement)return t(e.scrollElement.getBoundingClientRect()),s.observe(e.scrollElement),()=>{s.unobserve(e.scrollElement)}},c=(e,t)=>{const s=((e,t)=>{let s={height:-1,width:-1};return n=>{(e.options.horizontal?n.width!==s.width:n.height!==s.height)&&t(n),s=n}})(e,t),n=()=>s({width:e.scrollElement.innerWidth,height:e.scrollElement.innerHeight});if(e.scrollElement)return n(),e.scrollElement.addEventListener("resize",n,{capture:!1,passive:!0}),()=>{e.scrollElement.removeEventListener("resize",n)}},a={element:["scrollLeft","scrollTop"],window:["scrollX","scrollY"]},h=e=>(t,s)=>{if(!t.scrollElement)return;const n=a[e][0],o=a[e][1];let i=t.scrollElement[n],l=t.scrollElement[o];const r=()=>{s(t.scrollElement[t.options.horizontal?n:o])};r();const c=e=>{const s=e.currentTarget,c=s[n],a=s[o];(t.options.horizontal?i-c:l-a)&&r(),i=c,l=a};return t.scrollElement.addEventListener("scroll",c,{capture:!1,passive:!0}),()=>{t.scrollElement.removeEventListener("scroll",c)}},u=h("element"),d=h("window"),f=(e,t)=>e.getBoundingClientRect()[t.options.horizontal?"width":"height"],m=(e,t,s)=>{var n;null==(n=s.scrollElement)||null==n.scrollTo||n.scrollTo({[s.options.horizontal?"left":"top"]:e,behavior:t?"smooth":void 0})},g=(e,t,s)=>{var n;null==(n=s.scrollElement)||null==n.scrollTo||n.scrollTo({[s.options.horizontal?"left":"top"]:e,behavior:t?"smooth":void 0})};class p{constructor(e){var t=this;this.unsubs=[],this.scrollElement=null,this.measurementsCache=[],this.itemMeasurementsCache={},this.pendingMeasuredCacheIndexes=[],this.measureElementCache={},this.range={startIndex:0,endIndex:0},this.setOptions=e=>{Object.entries(e).forEach((t=>{let[s,n]=t;void 0===n&&delete e[s]})),this.options={debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:i,rangeExtractor:l,enableSmoothScroll:!0,onChange:()=>{},measureElement:f,initialRect:{width:0,height:0},...e}},this.notify=()=>{var e,t;null==(e=(t=this.options).onChange)||e.call(t,this)},this.cleanup=()=>{this.unsubs.filter(Boolean).forEach((e=>e())),this.unsubs=[],this.scrollElement=null},this._didMount=()=>()=>{this.cleanup()},this._willUpdate=()=>{const e=this.options.getScrollElement();this.scrollElement!==e&&(this.cleanup(),this.scrollElement=e,this._scrollToOffset(this.scrollOffset,!1),this.unsubs.push(this.options.observeElementRect(this,(e=>{this.scrollRect=e,this.calculateRange()}))),this.unsubs.push(this.options.observeElementOffset(this,(e=>{this.scrollOffset=e,this.calculateRange()}))))},this.getSize=()=>this.scrollRect[this.options.horizontal?"width":"height"],this.getMeasurements=o((()=>[this.options.count,this.options.paddingStart,this.options.getItemKey,this.itemMeasurementsCache]),((e,t,s,n)=>{const o=this.pendingMeasuredCacheIndexes.length>0?Math.min(...this.pendingMeasuredCacheIndexes):0;this.pendingMeasuredCacheIndexes=[];const i=this.measurementsCache.slice(0,o);for(let l=o;l<e;l++){const e=s(l),o=n[e],r=i[l-1]?i[l-1].end:t,c="number"==typeof o?o:this.options.estimateSize(l),a=r+c;i[l]={index:l,start:r,size:c,end:a,key:e}}return this.measurementsCache=i,i}),{key:!1,debug:()=>this.options.debug}),this.calculateRange=o((()=>[this.getMeasurements(),this.getSize(),this.scrollOffset]),((e,t,s)=>{const n=function(e){let{measurements:t,outerSize:s,scrollOffset:n}=e;const o=t.length-1,i=((e,t,s,n)=>{for(;e<=t;){const o=(e+t)/2|0,i=s(o);if(i<n)e=o+1;else{if(!(i>n))return o;t=o-1}}return e>0?e-1:0})(0,o,(e=>t[e].start),n);let l=i;for(;l<o&&t[l].end<n+s;)l++;return{startIndex:i,endIndex:l}}({measurements:e,outerSize:t,scrollOffset:s});return n.startIndex===this.range.startIndex&&n.endIndex===this.range.endIndex||(this.range=n,this.notify()),this.range}),{key:!1,debug:()=>this.options.debug}),this.getIndexes=o((()=>[this.options.rangeExtractor,this.range,this.options.overscan,this.options.count]),((e,t,s,n)=>e({...t,overscan:s,count:n})),{key:!1,debug:()=>this.options.debug}),this.getVirtualItems=o((()=>[this.getIndexes(),this.getMeasurements(),this.options.measureElement]),((e,t,s)=>{const n=e=>t=>{var n;const o=this.measurementsCache[e];if(!t)return;const i=s(t,this),l=null!=(n=this.itemMeasurementsCache[o.key])?n:o.size;i!==l&&(o.start<this.scrollOffset&&(this.destinationOffset||this._scrollToOffset(this.scrollOffset+(i-l),!1)),this.pendingMeasuredCacheIndexes.push(e),this.itemMeasurementsCache={...this.itemMeasurementsCache,[o.key]:i},this.notify())},o=[],i={};for(let s=0,r=e.length;s<r;s++){var l;const r=e[s],c={...t[r],measureElement:i[r]=null!=(l=this.measureElementCache[r])?l:n(r)};o.push(c)}return this.measureElementCache=i,o}),{key:!1,debug:()=>this.options.debug}),this.scrollToOffset=function(e,s){let{align:n="start",smoothScroll:o=t.options.enableSmoothScroll}=void 0===s?{}:s;const i=t.scrollOffset,l=t.getSize();"auto"===n&&(n=e<=i?"start":e>=i+l?"end":"start"),"start"===n?t._scrollToOffset(e,o):"end"===n?t._scrollToOffset(e-l,o):"center"===n&&t._scrollToOffset(e-l/2,o)},this.scrollToIndex=function(e,s){let{align:n="auto",smoothScroll:o=t.options.enableSmoothScroll,...i}=void 0===s?{}:s;const l=t.getMeasurements(),r=t.scrollOffset,c=t.getSize(),{count:a}=t.options,h=l[Math.max(0,Math.min(e,a-1))];if(!h)return;if("auto"===n)if(h.end>=r+c-t.options.scrollPaddingEnd)n="end";else{if(!(h.start<=r+t.options.scrollPaddingStart))return;n="start"}const u="end"===n?h.end+t.options.scrollPaddingEnd:h.start-t.options.scrollPaddingStart;t.scrollToOffset(u,{align:n,smoothScroll:o,...i})},this.getTotalSize=()=>{var e;return((null==(e=this.getMeasurements()[this.options.count-1])?void 0:e.end)||this.options.paddingStart)+this.options.paddingEnd},this._scrollToOffset=(e,t)=>{let s;clearTimeout(this.scrollCheckFrame),this.destinationOffset=e,this.options.scrollToFn(e,t,this);const n=()=>{let e=this.scrollOffset;this.scrollCheckFrame=s=setTimeout((()=>{this.scrollCheckFrame===s&&(this.scrollOffset!==e?(e=this.scrollOffset,n()):this.destinationOffset=void 0)}),100)};n()},this.measure=()=>{this.itemMeasurementsCache={},this.notify()},this.setOptions(e),this.scrollRect=this.options.initialRect,this.scrollOffset=this.options.initialOffset,this.calculateRange()}}const E="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;function b(e){const t=n.useReducer((()=>({})),{})[1],s={...e,onChange:s=>{t(),null==e.onChange||e.onChange(s)}},[o]=n.useState((()=>new p(s)));return o.setOptions(s),n.useEffect((()=>o._didMount()),[]),E((()=>o._willUpdate())),o}e.Virtualizer=p,e.defaultKeyExtractor=i,e.defaultRangeExtractor=l,e.elementScroll=g,e.measureElement=f,e.memo=o,e.observeElementOffset=u,e.observeElementRect=r,e.observeWindowOffset=d,e.observeWindowRect=c,e.useVirtualizer=function(e){return b({observeElementRect:r,observeElementOffset:u,scrollToFn:g,...e})},e.useWindowVirtualizer=function(e){return b({getScrollElement:()=>"undefined"!=typeof window?window:null,observeElementRect:c,observeElementOffset:d,scrollToFn:m,...e})},e.windowScroll=m,Object.defineProperty(e,"__esModule",{value:!0})}));
+   */function o(e,t,s){let n,o=[];return()=>{let i;s.key&&null!=s.debug&&s.debug()&&(i=Date.now());const l=e();if(!(l.length!==o.length||l.some(((e,t)=>o[t]!==e))))return n;let r;if(o=l,s.key&&null!=s.debug&&s.debug()&&(r=Date.now()),n=t(...l),null==s||null==s.onChange||s.onChange(n),s.key&&null!=s.debug&&s.debug()){const e=Math.round(100*(Date.now()-i))/100,t=Math.round(100*(Date.now()-r))/100,n=t/16,o=(e,t)=>{for(e=String(e);e.length<t;)e=" "+e;return e};console.info("%c⏱ "+o(t,5)+" /"+o(e,5)+" ms","\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl("+Math.max(0,Math.min(120-120*n,120))+"deg 100% 31%);",null==s?void 0:s.key)}return n}}const i=e=>e,l=e=>{const t=Math.max(e.startIndex-e.overscan,0),s=Math.min(e.endIndex+e.overscan,e.count-1),n=[];for(let e=t;e<=s;e++)n.push(e);return n},r=(e,t)=>{const s=new ResizeObserver((e=>{var s,n;t({width:null==(s=e[0])?void 0:s.contentRect.width,height:null==(n=e[0])?void 0:n.contentRect.height})}));if(e.scrollElement)return t(e.scrollElement.getBoundingClientRect()),s.observe(e.scrollElement),()=>{s.unobserve(e.scrollElement)}},c=(e,t)=>{const s=((e,t)=>{let s={height:-1,width:-1};return n=>{(e.options.horizontal?n.width!==s.width:n.height!==s.height)&&t(n),s=n}})(e,t),n=()=>s({width:e.scrollElement.innerWidth,height:e.scrollElement.innerHeight});if(e.scrollElement)return n(),e.scrollElement.addEventListener("resize",n,{capture:!1,passive:!0}),()=>{e.scrollElement.removeEventListener("resize",n)}},h={element:["scrollLeft","scrollTop"],window:["scrollX","scrollY"]},a=e=>(t,s)=>{if(!t.scrollElement)return;const n=h[e][0],o=h[e][1];let i=t.scrollElement[n],l=t.scrollElement[o];const r=()=>{const e=t.scrollElement[t.options.horizontal?n:o];s(Math.max(0,e-t.options.scrollMargin))};r();const c=e=>{const s=e.currentTarget,c=s[n],h=s[o];(t.options.horizontal?i-c:l-h)&&r(),i=c,l=h};return t.scrollElement.addEventListener("scroll",c,{capture:!1,passive:!0}),()=>{t.scrollElement.removeEventListener("scroll",c)}},u=a("element"),d=a("window"),f=(e,t)=>e.getBoundingClientRect()[t.options.horizontal?"width":"height"],m=(e,t,s)=>{var n;let{canSmooth:o,sync:i}=t;const l=i?e:e+s.options.scrollMargin;null==(n=s.scrollElement)||null==n.scrollTo||n.scrollTo({[s.options.horizontal?"left":"top"]:l,behavior:o?"smooth":void 0})},g=(e,t,s)=>{var n;let{canSmooth:o,sync:i}=t;const l=i?e:e+s.options.scrollMargin;null==(n=s.scrollElement)||null==n.scrollTo||n.scrollTo({[s.options.horizontal?"left":"top"]:l,behavior:o?"smooth":void 0})};class p{constructor(e){var t=this;this.unsubs=[],this.scrollElement=null,this.isScrolling=!1,this.isScrollingTimeoutId=null,this.measurementsCache=[],this.itemMeasurementsCache={},this.pendingMeasuredCacheIndexes=[],this.measureElementCache={},this.range={startIndex:0,endIndex:0},this.setOptions=e=>{Object.entries(e).forEach((t=>{let[s,n]=t;void 0===n&&delete e[s]})),this.options={debug:!1,initialOffset:0,overscan:1,paddingStart:0,paddingEnd:0,scrollPaddingStart:0,scrollPaddingEnd:0,horizontal:!1,getItemKey:i,rangeExtractor:l,enableSmoothScroll:!0,onChange:()=>{},measureElement:f,initialRect:{width:0,height:0},scrollMargin:0,scrollingDelay:150,...e}},this.notify=()=>{var e,t;null==(e=(t=this.options).onChange)||e.call(t,this)},this.cleanup=()=>{this.unsubs.filter(Boolean).forEach((e=>e())),this.unsubs=[],this.scrollElement=null},this._didMount=()=>()=>{this.cleanup()},this._willUpdate=()=>{const e=this.options.getScrollElement();this.scrollElement!==e?(this.cleanup(),this.scrollElement=e,this._scrollToOffset(this.scrollOffset,{canSmooth:!1,sync:!0}),this.unsubs.push(this.options.observeElementRect(this,(e=>{this.scrollRect=e,this.calculateRange()}))),this.unsubs.push(this.options.observeElementOffset(this,(e=>{null!==this.isScrollingTimeoutId&&(clearTimeout(this.isScrollingTimeoutId),this.isScrollingTimeoutId=null),this.scrollOffset!==e?(this.isScrolling=!0,this.scrollOffset=e,this.isScrollingTimeoutId=setTimeout((()=>{this.isScrollingTimeoutId=null,this.isScrolling=!1,this.notify()}),this.options.scrollingDelay)):this.isScrolling=!1,this.calculateRange()})))):this.isScrolling||this.calculateRange()},this.getSize=()=>this.scrollRect[this.options.horizontal?"width":"height"],this.getMeasurements=o((()=>[this.options.count,this.options.paddingStart,this.options.getItemKey,this.itemMeasurementsCache]),((e,t,s,n)=>{const o=this.pendingMeasuredCacheIndexes.length>0?Math.min(...this.pendingMeasuredCacheIndexes):0;this.pendingMeasuredCacheIndexes=[];const i=this.measurementsCache.slice(0,o);for(let l=o;l<e;l++){const e=s(l),o=n[e],r=i[l-1]?i[l-1].end:t,c="number"==typeof o?o:this.options.estimateSize(l),h=r+c;i[l]={index:l,start:r,size:c,end:h,key:e}}return this.measurementsCache=i,i}),{key:!1,debug:()=>this.options.debug}),this.calculateRange=o((()=>[this.getMeasurements(),this.getSize(),this.scrollOffset]),((e,t,s)=>{const n=function(e){let{measurements:t,outerSize:s,scrollOffset:n}=e;const o=t.length-1,i=((e,t,s,n)=>{for(;e<=t;){const o=(e+t)/2|0,i=s(o);if(i<n)e=o+1;else{if(!(i>n))return o;t=o-1}}return e>0?e-1:0})(0,o,(e=>t[e].start),n);let l=i;for(;l<o&&t[l].end<n+s;)l++;return{startIndex:i,endIndex:l}}({measurements:e,outerSize:t,scrollOffset:s});return n.startIndex===this.range.startIndex&&n.endIndex===this.range.endIndex||(this.range=n,this.notify()),this.range}),{key:!1,debug:()=>this.options.debug}),this.getIndexes=o((()=>[this.options.rangeExtractor,this.range,this.options.overscan,this.options.count]),((e,t,s,n)=>e({...t,overscan:s,count:n})),{key:!1,debug:()=>this.options.debug}),this.getVirtualItems=o((()=>[this.getIndexes(),this.getMeasurements(),this.options.measureElement]),((e,t,s)=>{const n=e=>t=>{var n;const o=this.measurementsCache[e];if(!t)return;const i=s(t,this),l=null!=(n=this.itemMeasurementsCache[o.key])?n:o.size;i!==l&&(o.start<this.scrollOffset&&(this.destinationOffset||this._scrollToOffset(this.scrollOffset+(i-l),{canSmooth:!1,sync:!1})),this.pendingMeasuredCacheIndexes.push(e),this.itemMeasurementsCache={...this.itemMeasurementsCache,[o.key]:i},this.notify())},o=[],i={};for(let s=0,r=e.length;s<r;s++){var l;const r=e[s],c={...t[r],measureElement:i[r]=null!=(l=this.measureElementCache[r])?l:n(r)};o.push(c)}return this.measureElementCache=i,o}),{key:!1,debug:()=>this.options.debug}),this.scrollToOffset=function(e,s){let{align:n="start",smoothScroll:o=t.options.enableSmoothScroll}=void 0===s?{}:s;const i=t.scrollOffset,l=t.getSize();"auto"===n&&(n=e<=i?"start":e>=i+l?"end":"start");const r={canSmooth:o,sync:!1};"start"===n?t._scrollToOffset(e,r):"end"===n?t._scrollToOffset(e-l,r):"center"===n&&t._scrollToOffset(e-l/2,r)},this.scrollToIndex=function(e,s){let{align:n="auto",...o}=void 0===s?{}:s;const i=t.getMeasurements(),l=t.scrollOffset,r=t.getSize(),{count:c}=t.options,h=i[Math.max(0,Math.min(e,c-1))];if(!h)return;if("auto"===n)if(h.end>=l+r-t.options.scrollPaddingEnd)n="end";else{if(!(h.start<=l+t.options.scrollPaddingStart))return;n="start"}const a="end"===n?h.end+t.options.scrollPaddingEnd:h.start-t.options.scrollPaddingStart;t.scrollToOffset(a,{align:n,...o})},this.getTotalSize=()=>{var e;return((null==(e=this.getMeasurements()[this.options.count-1])?void 0:e.end)||this.options.paddingStart)+this.options.paddingEnd},this._scrollToOffset=(e,t)=>{let s;clearTimeout(this.scrollCheckFrame),this.destinationOffset=e,this.options.scrollToFn(e,t,this);const n=()=>{let e=this.scrollOffset;this.scrollCheckFrame=s=setTimeout((()=>{this.scrollCheckFrame===s&&(this.scrollOffset!==e?(e=this.scrollOffset,n()):this.destinationOffset=void 0)}),100)};n()},this.measure=()=>{this.itemMeasurementsCache={},this.notify()},this.setOptions(e),this.scrollRect=this.options.initialRect,this.scrollOffset=this.options.initialOffset,this.calculateRange()}}const E="undefined"!=typeof window?n.useLayoutEffect:n.useEffect;function b(e){const t=n.useReducer((()=>({})),{})[1],s={...e,onChange:s=>{t(),null==e.onChange||e.onChange(s)}},[o]=n.useState((()=>new p(s)));return o.setOptions(s),n.useEffect((()=>o._didMount()),[]),E((()=>o._willUpdate())),o}e.Virtualizer=p,e.defaultKeyExtractor=i,e.defaultRangeExtractor=l,e.elementScroll=g,e.measureElement=f,e.memo=o,e.observeElementOffset=u,e.observeElementRect=r,e.observeWindowOffset=d,e.observeWindowRect=c,e.useVirtualizer=function(e){return b({observeElementRect:r,observeElementOffset:u,scrollToFn:g,...e})},e.useWindowVirtualizer=function(e){return b({getScrollElement:()=>"undefined"!=typeof window?window:null,observeElementRect:c,observeElementOffset:d,scrollToFn:m,...e})},e.windowScroll=m,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.production.js.map

package.json

 {
   "name": "@tanstack/react-virtual",
   "author": "Tanner Linsley",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "description": "Headless UI for virtualizing scrollable elements in React",
@@ -40,3 +40,3 @@ "license": "MIT",
   "dependencies": {
-    "@tanstack/virtual-core": "3.0.0-beta.18"
+    "@tanstack/virtual-core": "3.0.0-beta.19"
   },
@@ -43,0 +43,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

326997

increased by4.37%

Lines of code

1919

increased by6.67%

Dependency changes

• + Added@tanstack/virtual-core@3.0.0-beta.19(transitive)

• - Removed@tanstack/virtual-core@3.0.0-beta.18(transitive)

• Updated@tanstack/virtual-core@3.0.0-beta.19