@tanstack/virtual-core 3.0.0-beta.23 → 3.0.0-beta.28

package/build/umd/index.development.js

@@ -22,53 +22,48 @@
       if (opts.key && opts.debug != null && opts.debug()) depTime = Date.now();
       const newDeps = getDeps();
       const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
-
       if (!depsChanged) {
         return result;
       }
-
       deps = newDeps;
       let resultTime;
       if (opts.key && opts.debug != null && opts.debug()) resultTime = Date.now();
       result = fn(...newDeps);
       opts == null ? void 0 : opts.onChange == null ? void 0 : opts.onChange(result);
-
       if (opts.key && opts.debug != null && opts.debug()) {
         const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
         const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
         const resultFpsPercentage = resultEndTime / 16;
-
         const pad = (str, num) => {
           str = String(str);
-
           while (str.length < num) {
             str = ' ' + str;
           }
-
           return str;
         };
-
-        console.info("%c\u23F1 " + pad(resultEndTime, 5) + " /" + pad(depEndTime, 5) + " ms", "\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl(" + Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120)) + "deg 100% 31%);", opts == null ? void 0 : opts.key);
+        console.info(`%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`, `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120))}deg 100% 31%);`, opts == null ? void 0 : opts.key);
       }
-
       return result;
     };
   }
 
   //
+
+  //
+
   const defaultKeyExtractor = index => index;
   const defaultRangeExtractor = range => {
     const start = Math.max(range.startIndex - range.overscan, 0);
     const end = Math.min(range.endIndex + range.overscan, range.count - 1);
     const arr = [];
-
     for (let i = start; i <= end; i++) {
       arr.push(i);
     }
-
     return arr;
   };
-
   const memoRectCallback = (instance, cb) => {
     let prev = {
       height: -1,
@@ -78,25 +73,20 @@
       if (instance.options.horizontal ? rect.width !== prev.width : rect.height !== prev.height) {
         cb(rect);
       }
-
       prev = rect;
     };
   };
-
   const observeElementRect = (instance, cb) => {
     const observer = new ResizeObserver(entries => {
       var _entries$, _entries$2;
-
       cb({
         width: (_entries$ = entries[0]) == null ? void 0 : _entries$.contentRect.width,
         height: (_entries$2 = entries[0]) == null ? void 0 : _entries$2.contentRect.height
       });
     });
-
     if (!instance.scrollElement) {
       return;
     }
-
     cb(instance.scrollElement.getBoundingClientRect());
     observer.observe(instance.scrollElement);
     return () => {
@@ -105,16 +95,13 @@
   };
   const observeWindowRect = (instance, cb) => {
     const memoizedCallback = memoRectCallback(instance, cb);
-
     const onResize = () => memoizedCallback({
       width: instance.scrollElement.innerWidth,
       height: instance.scrollElement.innerHeight
     });
-
     if (!instance.scrollElement) {
       return;
     }
-
     onResize();
     instance.scrollElement.addEventListener('resize', onResize, {
       capture: false,
@@ -128,38 +115,30 @@
     element: ['scrollLeft', 'scrollTop'],
     window: ['scrollX', 'scrollY']
   };
-
   const createOffsetObserver = mode => {
     return (instance, cb) => {
       if (!instance.scrollElement) {
         return;
       }
-
       const propX = scrollProps[mode][0];
       const propY = scrollProps[mode][1];
       let prevX = instance.scrollElement[propX];
       let prevY = instance.scrollElement[propY];
-
       const scroll = () => {
         const offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
         cb(Math.max(0, offset - instance.options.scrollMargin));
       };
-
       scroll();
-
       const onScroll = e => {
         const target = e.currentTarget;
         const scrollX = target[propX];
         const scrollY = target[propY];
-
         if (instance.options.horizontal ? prevX - scrollX : prevY - scrollY) {
           scroll();
         }
-
         prevX = scrollX;
         prevY = scrollY;
       };
-
       instance.scrollElement.addEventListener('scroll', onScroll, {
         capture: false,
         passive: true
@@ -169,7 +148,6 @@
       };
     };
   };
-
   const observeElementOffset = createOffsetObserver('element');
   const observeWindowOffset = createOffsetObserver('window');
   const measureElement = (element, instance) => {
@@ -177,34 +155,33 @@
   };
   const windowScroll = (offset, _ref, instance) => {
     var _instance$scrollEleme;
-
     let {
-      canSmooth,
+      adjustments,
+      behavior,
       sync
     } = _ref;
-    const toOffset = sync ? offset : offset + instance.options.scrollMargin;
+    const toOffset = (sync ? offset : offset + instance.options.scrollMargin) + (adjustments ?? 0);
     (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo == null ? void 0 : _instance$scrollEleme.scrollTo({
       [instance.options.horizontal ? 'left' : 'top']: toOffset,
-      behavior: canSmooth ? 'smooth' : undefined
+      behavior
     });
   };
   const elementScroll = (offset, _ref2, instance) => {
     var _instance$scrollEleme2;
-
     let {
-      canSmooth,
+      adjustments,
+      behavior,
       sync
     } = _ref2;
-    const toOffset = sync ? offset : offset + instance.options.scrollMargin;
+    const toOffset = (sync ? offset : offset + instance.options.scrollMargin) + (adjustments ?? 0);
     (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo == null ? void 0 : _instance$scrollEleme2.scrollTo({
       [instance.options.horizontal ? 'left' : 'top']: toOffset,
-      behavior: canSmooth ? 'smooth' : undefined
+      behavior
     });
   };
   class Virtualizer {
     constructor(_opts) {
       var _this = this;
-
       this.unsubs = [];
       this.scrollElement = null;
       this.isScrolling = false;
@@ -212,9 +189,9 @@
       this.measurementsCache = [];
       this.itemMeasurementsCache = {};
       this.pendingMeasuredCacheIndexes = [];
-      this.scrollDelta = 0;
+      this.scrollAdjustments = 0;
       this.measureElementCache = {};
-
+      this.pendingScrollToIndexCallback = null;
       this.getResizeObserver = (() => {
         let _ro = null;
         return () => {
@@ -231,12 +208,10 @@
           }
         };
       })();
-
       this.range = {
         startIndex: 0,
         endIndex: 0
       };
-
       this.setOptions = opts => {
         Object.entries(opts).forEach(_ref3 => {
           let [key, value] = _ref3;
@@ -253,7 +228,6 @@
           horizontal: false,
           getItemKey: defaultKeyExtractor,
           rangeExtractor: defaultRangeExtractor,
-          enableSmoothScroll: true,
           onChange: () => {},
           measureElement,
           initialRect: {
@@ -266,42 +240,35 @@
           ...opts
         };
       };
-
       this.notify = () => {
         var _this$options$onChang, _this$options;
-
         (_this$options$onChang = (_this$options = this.options).onChange) == null ? void 0 : _this$options$onChang.call(_this$options, this);
       };
-
       this.cleanup = () => {
         this.unsubs.filter(Boolean).forEach(d => d());
         this.unsubs = [];
         this.scrollElement = null;
       };
-
       this._didMount = () => {
         return () => {
           var _this$getResizeObserv;
-
           (_this$getResizeObserv = this.getResizeObserver()) == null ? void 0 : _this$getResizeObserv.disconnect();
           this.measureElementCache = {};
           this.cleanup();
         };
       };
-
       this._willUpdate = () => {
+        var _this$pendingScrollTo;
+        (_this$pendingScrollTo = this.pendingScrollToIndexCallback) == null ? void 0 : _this$pendingScrollTo.call(this);
         const scrollElement = this.options.getScrollElement();
-
         if (this.scrollElement !== scrollElement) {
           this.cleanup();
           this.scrollElement = scrollElement;
-
           this._scrollToOffset(this.scrollOffset, {
-            canSmooth: false,
-            sync: true,
-            requested: false
+            adjustments: undefined,
+            behavior: undefined,
+            sync: true
           });
-
           this.unsubs.push(this.options.observeElementRect(this, rect => {
             this.scrollRect = rect;
             this.calculateRange();
@@ -311,11 +278,10 @@
               clearTimeout(this.isScrollingTimeoutId);
               this.isScrollingTimeoutId = null;
             }
-
             if (this.scrollOffset !== offset) {
               this.scrollOffset = offset;
               this.isScrolling = true;
-              this.scrollDelta = 0;
+              this.scrollAdjustments = 0;
               this.isScrollingTimeoutId = setTimeout(() => {
                 this.isScrollingTimeoutId = null;
                 this.isScrolling = false;
@@ -323,25 +289,21 @@
               }, this.options.scrollingDelay);
             } else {
               this.isScrolling = false;
-              this.scrollDelta = 0;
+              this.scrollAdjustments = 0;
             }
-
             this.calculateRange();
           }));
         } else if (!this.isScrolling) {
           this.calculateRange();
         }
       };
-
       this.getSize = () => {
         return this.scrollRect[this.options.horizontal ? 'width' : 'height'];
       };
-
       this.getMeasurements = memo(() => [this.options.count, this.options.paddingStart, this.options.getItemKey, this.itemMeasurementsCache], (count, paddingStart, getItemKey, measurementsCache) => {
         const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
         this.pendingMeasuredCacheIndexes = [];
         const measurements = this.measurementsCache.slice(0, min);
-
         for (let i = min; i < count; i++) {
           const key = getItemKey(i);
           const measuredSize = measurementsCache[key];
@@ -356,7 +318,6 @@
             key
           };
         }
-
         this.measurementsCache = measurements;
         return measurements;
       }, {
@@ -369,19 +330,18 @@
           outerSize,
           scrollOffset
         });
-
         if (range.startIndex !== this.range.startIndex || range.endIndex !== this.range.endIndex) {
           this.range = range;
           this.notify();
         }
-
         return this.range;
       }, {
         key: 'calculateRange',
         debug: () => this.options.debug
       });
       this.getIndexes = memo(() => [this.options.rangeExtractor, this.range, this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
-        return rangeExtractor({ ...range,
+        return rangeExtractor({
+          ...range,
           overscan,
           count: count
         });
@@ -389,109 +349,84 @@
         key: 'getIndexes',
         debug: () => this.options.debug
       });
-
       this.indexFromElement = node => {
         const attributeName = this.options.indexAttribute;
         const indexStr = node.getAttribute(attributeName);
-
         if (!indexStr) {
-          console.warn("Missing attribute name '" + attributeName + "={index}' on measured element.");
+          console.warn(`Missing attribute name '${attributeName}={index}' on measured element.`);
           return -1;
         }
-
         return parseInt(indexStr, 10);
       };
-
       this._measureElement = (node, _sync) => {
-        var _this$itemMeasurement;
-
         const index = this.indexFromElement(node);
         const item = this.measurementsCache[index];
-
         if (!item) {
           return;
         }
-
         const prevNode = this.measureElementCache[item.key];
         const ro = this.getResizeObserver();
-
         if (!node.isConnected) {
           if (prevNode) {
             ro == null ? void 0 : ro.unobserve(prevNode);
             delete this.measureElementCache[item.key];
           }
-
           return;
         }
-
         if (!prevNode || prevNode !== node) {
           if (prevNode) {
             ro == null ? void 0 : ro.unobserve(prevNode);
           }
-
           this.measureElementCache[item.key] = node;
           ro == null ? void 0 : ro.observe(node);
         }
-
         const measuredItemSize = this.options.measureElement(node, this);
-        const itemSize = (_this$itemMeasurement = this.itemMeasurementsCache[item.key]) != null ? _this$itemMeasurement : item.size;
+        const itemSize = this.itemMeasurementsCache[item.key] ?? item.size;
         const delta = measuredItemSize - itemSize;
-
         if (delta !== 0) {
-          if (item.start < this.scrollOffset && this.isScrolling && this.destinationOffset === undefined) {
+          if (item.start < this.scrollOffset && this.isScrolling) {
             if (this.options.debug) {
               console.info('correction', delta);
             }
-
-            this.scrollDelta += delta;
-
-            this._scrollToOffset(this.scrollOffset + this.scrollDelta, {
-              canSmooth: false,
-              sync: false,
-              requested: false
+            this._scrollToOffset(this.scrollOffset, {
+              adjustments: this.scrollAdjustments += delta,
+              behavior: undefined,
+              sync: false
             });
           }
-
           this.pendingMeasuredCacheIndexes.push(index);
-          this.itemMeasurementsCache = { ...this.itemMeasurementsCache,
+          this.itemMeasurementsCache = {
+            ...this.itemMeasurementsCache,
             [item.key]: measuredItemSize
           };
           this.notify();
         }
       };
-
       this.measureElement = node => {
         if (!node) {
           return;
         }
-
         this._measureElement(node, true);
       };
-
       this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements()], (indexes, measurements) => {
         const virtualItems = [];
-
         for (let k = 0, len = indexes.length; k < len; k++) {
           const i = indexes[k];
           const measurement = measurements[i];
           virtualItems.push(measurement);
         }
-
         return virtualItems;
       }, {
         key: 'getIndexes',
         debug: () => this.options.debug
       });
-
       this.scrollToOffset = function (toOffset, _temp) {
         let {
           align = 'start',
-          smoothScroll = _this.options.enableSmoothScroll
+          behavior
         } = _temp === void 0 ? {} : _temp;
         const offset = _this.scrollOffset;
-
         const size = _this.getSize();
-
         if (align === 'auto') {
           if (toOffset <= offset) {
             align = 'start';
@@ -501,13 +436,11 @@
             align = 'start';
           }
         }
-
         const options = {
-          canSmooth: smoothScroll,
-          sync: false,
-          requested: true
+          adjustments: undefined,
+          behavior,
+          sync: false
         };
-
         if (align === 'start') {
           _this._scrollToOffset(toOffset, options);
         } else if (align === 'end') {
@@ -516,29 +449,22 @@
           _this._scrollToOffset(toOffset - size / 2, options);
         }
       };
-
       this.scrollToIndex = function (index, _temp2) {
         let {
           align = 'auto',
-          smoothScroll = _this.options.enableSmoothScroll,
           ...rest
         } = _temp2 === void 0 ? {} : _temp2;
-
+        _this.pendingScrollToIndexCallback = null;
         const measurements = _this.getMeasurements();
-
         const offset = _this.scrollOffset;
-
         const size = _this.getSize();
-
         const {
           count
         } = _this.options;
         const measurement = measurements[Math.max(0, Math.min(index, count - 1))];
-
         if (!measurement) {
           return;
         }
-
         if (align === 'auto') {
           if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
             align = 'end';
@@ -548,78 +474,57 @@
             return;
           }
         }
-
         const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
-
         _this.scrollToOffset(toOffset, {
           align,
-          smoothScroll,
           ...rest
         });
+        const isDynamic = Object.keys(_this.measureElementCache).length > 0;
+        if (isDynamic) {
+          const didSeen = () => typeof _this.itemMeasurementsCache[_this.options.getItemKey(index)] === 'number';
+          if (!didSeen()) {
+            _this.pendingScrollToIndexCallback = () => {
+              if (didSeen()) {
+                _this.pendingScrollToIndexCallback = null;
+                _this.scrollToIndex(index, {
+                  align,
+                  ...rest
+                });
+              }
+            };
+          }
+        }
       };
-
       this.getTotalSize = () => {
         var _this$getMeasurements;
-
         return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
       };
-
       this._scrollToOffset = (offset, _ref4) => {
         let {
-          requested,
-          canSmooth,
+          adjustments,
+          behavior,
           sync
         } = _ref4;
-        clearTimeout(this.scrollCheckFrame);
-
-        if (requested) {
-          this.destinationOffset = offset;
-        }
-
         this.options.scrollToFn(offset, {
-          canSmooth,
-          sync
+          behavior,
+          sync,
+          adjustments
         }, this);
-        let scrollCheckFrame;
-
-        const check = () => {
-          let lastOffset = this.scrollOffset;
-          this.scrollCheckFrame = scrollCheckFrame = setTimeout(() => {
-            if (this.scrollCheckFrame !== scrollCheckFrame) {
-              return;
-            }
-
-            if (this.scrollOffset === lastOffset) {
-              this.destinationOffset = undefined;
-              return;
-            }
-
-            lastOffset = this.scrollOffset;
-            check();
-          }, 100);
-        };
-
-        check();
       };
-
       this.measure = () => {
         this.itemMeasurementsCache = {};
         this.notify();
       };
-
       this.setOptions(_opts);
       this.scrollRect = this.options.initialRect;
       this.scrollOffset = this.options.initialOffset;
       this.calculateRange();
     }
-
   }
-
   const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
     while (low <= high) {
       const middle = (low + high) / 2 | 0;
       const currentValue = getCurrentValue(middle);
-
       if (currentValue < value) {
         low = middle + 1;
       } else if (currentValue > value) {
@@ -628,14 +533,12 @@
         return middle;
       }
     }
-
     if (low > 0) {
       return low - 1;
     } else {
       return 0;
     }
   };
-
   function calculateRange(_ref5) {
     let {
       measurements,
@@ -643,16 +546,12 @@
       scrollOffset
     } = _ref5;
     const count = measurements.length - 1;
-
     const getOffset = index => measurements[index].start;
-
     const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
     let endIndex = startIndex;
-
     while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
       endIndex++;
     }
-
     return {
       startIndex,
       endIndex