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

package/build/{cjs → lib}/index.js

@@ -15,19 +15,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var utils = require('./utils.js');
 
 //
+
+//
+
 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,
@@ -37,25 +37,20 @@ const memoRectCallback = (instance, cb) => {
     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 () => {
@@ -64,16 +59,13 @@ const observeElementRect = (instance, cb) => {
 };
 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,
@@ -87,38 +79,30 @@ const scrollProps = {
   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
@@ -128,7 +112,6 @@ const createOffsetObserver = mode => {
     };
   };
 };
-
 const observeElementOffset = createOffsetObserver('element');
 const observeWindowOffset = createOffsetObserver('window');
 const measureElement = (element, instance) => {
@@ -136,34 +119,33 @@ const measureElement = (element, instance) => {
 };
 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;
@@ -171,9 +153,9 @@ class Virtualizer {
     this.measurementsCache = [];
     this.itemMeasurementsCache = {};
     this.pendingMeasuredCacheIndexes = [];
-    this.scrollDelta = 0;
+    this.scrollAdjustments = 0;
     this.measureElementCache = {};
-
+    this.pendingScrollToIndexCallback = null;
     this.getResizeObserver = (() => {
       let _ro = null;
       return () => {
@@ -190,12 +172,10 @@ class Virtualizer {
         }
       };
     })();
-
     this.range = {
       startIndex: 0,
       endIndex: 0
     };
-
     this.setOptions = opts => {
       Object.entries(opts).forEach(_ref3 => {
         let [key, value] = _ref3;
@@ -212,7 +192,6 @@ class Virtualizer {
         horizontal: false,
         getItemKey: defaultKeyExtractor,
         rangeExtractor: defaultRangeExtractor,
-        enableSmoothScroll: true,
         onChange: () => {},
         measureElement,
         initialRect: {
@@ -225,42 +204,35 @@ class Virtualizer {
         ...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();
@@ -270,11 +242,10 @@ class Virtualizer {
             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;
@@ -282,25 +253,21 @@ class Virtualizer {
             }, 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 = utils.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];
@@ -315,7 +282,6 @@ class Virtualizer {
           key
         };
       }
-
       this.measurementsCache = measurements;
       return measurements;
     }, {
@@ -328,19 +294,18 @@ class Virtualizer {
         outerSize,
         scrollOffset
       });
-
       if (range.startIndex !== this.range.startIndex || range.endIndex !== this.range.endIndex) {
         this.range = range;
         this.notify();
       }
-
       return this.range;
     }, {
       key: process.env.NODE_ENV !== 'production' && 'calculateRange',
       debug: () => this.options.debug
     });
     this.getIndexes = utils.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
       });
@@ -348,109 +313,84 @@ class Virtualizer {
       key: process.env.NODE_ENV !== 'production' && '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 (process.env.NODE_ENV !== 'production' && 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 = utils.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: process.env.NODE_ENV !== 'production' && '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';
@@ -460,13 +400,11 @@ class Virtualizer {
           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') {
@@ -475,29 +413,22 @@ class Virtualizer {
         _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';
@@ -507,78 +438,57 @@ class Virtualizer {
           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) {
@@ -587,14 +497,12 @@ const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
       return middle;
     }
   }
-
   if (low > 0) {
     return low - 1;
   } else {
     return 0;
   }
 };
-
 function calculateRange(_ref5) {
   let {
     measurements,
@@ -602,16 +510,12 @@ function calculateRange(_ref5) {
     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