@tanstack/virtual-core 3.0.0-beta.9 → 3.0.1

package/build/umd/index.development.js

@@ -14,546 +14,657 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.VirtualCore = {}));
 })(this, (function (exports) { 'use strict';
 
-  var props = ["bottom", "height", "left", "right", "top", "width"];
-
-  var rectChanged = function rectChanged(a, b) {
-    if (a === void 0) {
-      a = {};
-    }
-
-    if (b === void 0) {
-      b = {};
-    }
-
-    return props.some(function (prop) {
-      return a[prop] !== b[prop];
-    });
-  };
-
-  var observedNodes = /*#__PURE__*/new Map();
-  var rafId;
-
-  var run = function run() {
-    var changedStates = [];
-    observedNodes.forEach(function (state, node) {
-      var newRect = node.getBoundingClientRect();
-
-      if (rectChanged(newRect, state.rect)) {
-        state.rect = newRect;
-        changedStates.push(state);
-      }
-    });
-    changedStates.forEach(function (state) {
-      state.callbacks.forEach(function (cb) {
-        return cb(state.rect);
-      });
-    });
-    rafId = window.requestAnimationFrame(run);
-  };
-
-  function observeRect(node, cb) {
-    return {
-      observe: function observe() {
-        var wasEmpty = observedNodes.size === 0;
-
-        if (observedNodes.has(node)) {
-          observedNodes.get(node).callbacks.push(cb);
-        } else {
-          observedNodes.set(node, {
-            rect: undefined,
-            hasRectChanged: false,
-            callbacks: [cb]
-          });
-        }
-
-        if (wasEmpty) run();
-      },
-      unobserve: function unobserve() {
-        var state = observedNodes.get(node);
-
-        if (state) {
-          // Remove the callback
-          var index = state.callbacks.indexOf(cb);
-          if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
-
-          if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
-
-          if (!observedNodes.size) cancelAnimationFrame(rafId);
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
         }
       }
+      return target;
     };
+    return _extends.apply(this, arguments);
   }
 
   function memo(getDeps, fn, opts) {
-    let deps = [];
-    let result;
-    return () => {
-      let depTime;
+    var _opts$initialDeps;
+    var deps = (_opts$initialDeps = opts.initialDeps) != null ? _opts$initialDeps : [];
+    var result;
+    return function () {
+      var depTime;
       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);
-
+      var newDeps = getDeps();
+      var depsChanged = newDeps.length !== deps.length || newDeps.some(function (dep, index) {
+        return deps[index] !== dep;
+      });
       if (!depsChanged) {
         return result;
       }
-
       deps = newDeps;
-      let resultTime;
+      var 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);
-
+      result = fn.apply(void 0, newDeps);
       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) => {
+        var depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+        var resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+        var resultFpsPercentage = resultEndTime / 16;
+        var pad = function 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);
       }
-
+      opts == null || opts.onChange == null || opts.onChange(result);
       return result;
     };
   }
+  function notUndefined(value, msg) {
+    if (value === undefined) {
+      throw new Error("Unexpected undefined" + (msg ? ": " + msg : ''));
+    } else {
+      return value;
+    }
+  }
+  var approxEqual = function approxEqual(a, b) {
+    return Math.abs(a - b) < 1;
+  };
 
   //
-  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);
-    }
+  //
 
+  var defaultKeyExtractor = function defaultKeyExtractor(index) {
+    return index;
+  };
+  var defaultRangeExtractor = function defaultRangeExtractor(range) {
+    var start = Math.max(range.startIndex - range.overscan, 0);
+    var end = Math.min(range.endIndex + range.overscan, range.count - 1);
+    var arr = [];
+    for (var _i = start; _i <= end; _i++) {
+      arr.push(_i);
+    }
     return arr;
   };
-
-  const memoRectCallback = (instance, cb) => {
-    let prev = {
-      height: -1,
-      width: -1
-    };
-    return rect => {
-      if (instance.options.horizontal ? rect.width !== prev.width : rect.height !== prev.height) {
-        cb(rect);
+  var observeElementRect = function observeElementRect(instance, cb) {
+    var element = instance.scrollElement;
+    if (!element) {
+      return;
+    }
+    var handler = function handler(rect) {
+      var width = rect.width,
+        height = rect.height;
+      cb({
+        width: Math.round(width),
+        height: Math.round(height)
+      });
+    };
+    handler(element.getBoundingClientRect());
+    var observer = new ResizeObserver(function (entries) {
+      var entry = entries[0];
+      if (entry != null && entry.borderBoxSize) {
+        var box = entry.borderBoxSize[0];
+        if (box) {
+          handler({
+            width: box.inlineSize,
+            height: box.blockSize
+          });
+          return;
+        }
       }
-
-      prev = rect;
+      handler(element.getBoundingClientRect());
+    });
+    observer.observe(element, {
+      box: 'border-box'
+    });
+    return function () {
+      observer.unobserve(element);
     };
   };
-
-  const observeElementRect = (instance, cb) => {
-    const onResize = memoRectCallback(instance, cb);
-    const observer = observeRect(instance.scrollElement, rect => {
-      onResize(rect);
-    });
-
-    if (!instance.scrollElement) {
+  var observeWindowRect = function observeWindowRect(instance, cb) {
+    var element = instance.scrollElement;
+    if (!element) {
       return;
     }
-
-    onResize(instance.scrollElement.getBoundingClientRect());
-    observer.observe();
-    return () => {
-      observer.unobserve();
+    var handler = function handler() {
+      cb({
+        width: element.innerWidth,
+        height: element.innerHeight
+      });
     };
-  };
-  const observeWindowRect = (instance, cb) => {
-    const memoizedCallback = memoRectCallback(instance, cb);
-
-    const onResize = () => memoizedCallback({
-      width: instance.scrollElement.innerWidth,
-      height: instance.scrollElement.innerHeight
+    handler();
+    element.addEventListener('resize', handler, {
+      passive: true
     });
-
-    if (!instance.scrollElement) {
+    return function () {
+      element.removeEventListener('resize', handler);
+    };
+  };
+  var observeElementOffset = function observeElementOffset(instance, cb) {
+    var element = instance.scrollElement;
+    if (!element) {
       return;
     }
-
-    onResize();
-    instance.scrollElement.addEventListener('resize', onResize, {
-      capture: false,
+    var handler = function handler() {
+      cb(element[instance.options.horizontal ? 'scrollLeft' : 'scrollTop']);
+    };
+    handler();
+    element.addEventListener('scroll', handler, {
       passive: true
     });
-    return () => {
-      instance.scrollElement.removeEventListener('resize', onResize);
+    return function () {
+      element.removeEventListener('scroll', handler);
     };
   };
-  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 = () => {
-        cb(instance.scrollElement[instance.options.horizontal ? propX : propY]);
-      };
-
-      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
-      });
-      return () => {
-        instance.scrollElement.removeEventListener('scroll', onScroll);
-      };
+  var observeWindowOffset = function observeWindowOffset(instance, cb) {
+    var element = instance.scrollElement;
+    if (!element) {
+      return;
+    }
+    var handler = function handler() {
+      cb(element[instance.options.horizontal ? 'scrollX' : 'scrollY']);
+    };
+    handler();
+    element.addEventListener('scroll', handler, {
+      passive: true
+    });
+    return function () {
+      element.removeEventListener('scroll', handler);
     };
   };
-
-  const observeElementOffset = createOffsetObserver('element');
-  const observeWindowOffset = createOffsetObserver('window');
-  const measureElement = (element, instance) => {
-    return element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height'];
+  var measureElement = function measureElement(element, entry, instance) {
+    if (entry != null && entry.borderBoxSize) {
+      var box = entry.borderBoxSize[0];
+      if (box) {
+        var size = Math.round(box[instance.options.horizontal ? 'inlineSize' : 'blockSize']);
+        return size;
+      }
+    }
+    return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
   };
-  const windowScroll = (offset, canSmooth, instance) => {
-    var _instance$scrollEleme;
-    (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo({
-      [instance.options.horizontal ? 'left' : 'top']: offset,
-      behavior: canSmooth ? 'smooth' : undefined
-    });
+  var windowScroll = function windowScroll(offset, _ref, instance) {
+    var _instance$scrollEleme, _instance$scrollEleme2;
+    var _ref$adjustments = _ref.adjustments,
+      adjustments = _ref$adjustments === void 0 ? 0 : _ref$adjustments,
+      behavior = _ref.behavior;
+    var toOffset = offset + adjustments;
+    (_instance$scrollEleme = instance.scrollElement) == null || _instance$scrollEleme.scrollTo == null || _instance$scrollEleme.scrollTo((_instance$scrollEleme2 = {}, _instance$scrollEleme2[instance.options.horizontal ? 'left' : 'top'] = toOffset, _instance$scrollEleme2.behavior = behavior, _instance$scrollEleme2));
   };
-  const elementScroll = (offset, canSmooth, instance) => {
-    var _instance$scrollEleme2;
-    (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo({
-      [instance.options.horizontal ? 'left' : 'top']: offset,
-      behavior: canSmooth ? 'smooth' : undefined
-    });
+  var elementScroll = function elementScroll(offset, _ref2, instance) {
+    var _instance$scrollEleme3, _instance$scrollEleme4;
+    var _ref2$adjustments = _ref2.adjustments,
+      adjustments = _ref2$adjustments === void 0 ? 0 : _ref2$adjustments,
+      behavior = _ref2.behavior;
+    var toOffset = offset + adjustments;
+    (_instance$scrollEleme3 = instance.scrollElement) == null || _instance$scrollEleme3.scrollTo == null || _instance$scrollEleme3.scrollTo((_instance$scrollEleme4 = {}, _instance$scrollEleme4[instance.options.horizontal ? 'left' : 'top'] = toOffset, _instance$scrollEleme4.behavior = behavior, _instance$scrollEleme4));
   };
-  class Virtualizer {
-    constructor(_opts) {
-      var _this = this;
-
-      this.unsubs = [];
-      this.scrollElement = null;
-      this.measurementsCache = [];
-      this.itemMeasurementsCache = {};
-      this.pendingMeasuredCacheIndexes = [];
-      this.measureElementCache = {};
-
-      this.setOptions = opts => {
-        Object.entries(opts).forEach(_ref => {
-          let [key, value] = _ref;
-          if (typeof value === 'undefined') delete opts[key];
-        });
-        this.options = {
-          debug: false,
-          initialOffset: 0,
-          overscan: 1,
-          paddingStart: 0,
-          paddingEnd: 0,
-          scrollPaddingStart: 0,
-          scrollPaddingEnd: 0,
-          horizontal: false,
-          getItemKey: defaultKeyExtractor,
-          rangeExtractor: defaultRangeExtractor,
-          enableSmoothScroll: true,
-          onChange: () => {},
-          measureElement,
-          initialRect: {
-            width: 0,
-            height: 0
-          },
-          ...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 () => {
-          this.cleanup();
-        };
-      };
-
-      this._willUpdate = () => {
-        const scrollElement = this.options.getScrollElement();
-
-        if (this.scrollElement !== scrollElement) {
-          this.cleanup();
-          this.scrollElement = scrollElement;
-          this.unsubs.push(this.options.observeElementRect(this, rect => {
-            this.scrollRect = rect;
-            this.notify();
-          }));
-          this.unsubs.push(this.options.observeElementOffset(this, offset => {
-            this.scrollOffset = offset;
-            this.notify();
-          }));
+  var Virtualizer = function Virtualizer(_opts) {
+    var _this = this;
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.isScrolling = false;
+    this.isScrollingTimeoutId = null;
+    this.scrollToIndexTimeoutId = null;
+    this.measurementsCache = [];
+    this.itemSizeCache = new Map();
+    this.pendingMeasuredCacheIndexes = [];
+    this.scrollDirection = null;
+    this.scrollAdjustments = 0;
+    this.measureElementCache = new Map();
+    this.observer = function () {
+      var _ro = null;
+      var get = function get() {
+        if (_ro) {
+          return _ro;
+        } else if (typeof ResizeObserver !== 'undefined') {
+          return _ro = new ResizeObserver(function (entries) {
+            entries.forEach(function (entry) {
+              _this._measureElement(entry.target, entry);
+            });
+          });
+        } else {
+          return null;
         }
       };
-
-      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];
-          const start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
-          const size = typeof measuredSize === 'number' ? measuredSize : this.options.estimateSize(i);
-          const end = start + size;
-          measurements[i] = {
-            index: i,
-            start,
-            size,
-            end,
-            key
-          };
+      return {
+        disconnect: function disconnect() {
+          var _get;
+          return (_get = get()) == null ? void 0 : _get.disconnect();
+        },
+        observe: function observe(target) {
+          var _get2;
+          return (_get2 = get()) == null ? void 0 : _get2.observe(target, {
+            box: 'border-box'
+          });
+        },
+        unobserve: function unobserve(target) {
+          var _get3;
+          return (_get3 = get()) == null ? void 0 : _get3.unobserve(target);
         }
-
-        this.measurementsCache = measurements;
-        return measurements;
-      }, {
-        key: 'getMeasurements',
-        debug: () => this.options.debug
+      };
+    }();
+    this.range = null;
+    this.setOptions = function (opts) {
+      Object.entries(opts).forEach(function (_ref3) {
+        var key = _ref3[0],
+          value = _ref3[1];
+        if (typeof value === 'undefined') delete opts[key];
       });
-      this.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
-        return calculateRange({
-          measurements,
-          outerSize,
-          scrollOffset
-        });
-      }, {
-        key: 'calculateRange',
-        debug: () => this.options.debug
+      _this.options = _extends({
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        onChange: function onChange() {},
+        measureElement: measureElement,
+        initialRect: {
+          width: 0,
+          height: 0
+        },
+        scrollMargin: 0,
+        scrollingDelay: 150,
+        indexAttribute: 'data-index',
+        initialMeasurementsCache: [],
+        lanes: 1
+      }, opts);
+    };
+    this.notify = function (sync) {
+      _this.options.onChange == null || _this.options.onChange(_this, sync);
+    };
+    this.maybeNotify = memo(function () {
+      _this.calculateRange();
+      return [_this.isScrolling, _this.range ? _this.range.startIndex : null, _this.range ? _this.range.endIndex : null];
+    }, function (isScrolling) {
+      _this.notify(isScrolling);
+    }, {
+      key: 'maybeNotify',
+      debug: function debug() {
+        return _this.options.debug;
+      },
+      initialDeps: [this.isScrolling, this.range ? this.range.startIndex : null, this.range ? this.range.endIndex : null]
+    });
+    this.cleanup = function () {
+      _this.unsubs.filter(Boolean).forEach(function (d) {
+        return d();
       });
-      this.getIndexes = memo(() => [this.options.rangeExtractor, this.calculateRange(), this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
-        return rangeExtractor({ ...range,
-          overscan,
-          count: count
+      _this.unsubs = [];
+      _this.scrollElement = null;
+    };
+    this._didMount = function () {
+      _this.measureElementCache.forEach(_this.observer.observe);
+      return function () {
+        _this.observer.disconnect();
+        _this.cleanup();
+      };
+    };
+    this._willUpdate = function () {
+      var scrollElement = _this.options.getScrollElement();
+      if (_this.scrollElement !== scrollElement) {
+        _this.cleanup();
+        _this.scrollElement = scrollElement;
+        _this._scrollToOffset(_this.scrollOffset, {
+          adjustments: undefined,
+          behavior: undefined
         });
-      }, {
-        key: 'getIndexes'
-      });
-      this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements(), this.options.measureElement], (indexes, measurements, measureElement) => {
-        const makeMeasureElement = index => measurableItem => {
-          var _this$itemMeasurement;
-
-          const item = this.measurementsCache[index];
-
-          if (!measurableItem) {
+        _this.unsubs.push(_this.options.observeElementRect(_this, function (rect) {
+          _this.scrollRect = rect;
+          _this.maybeNotify();
+        }));
+        _this.unsubs.push(_this.options.observeElementOffset(_this, function (offset) {
+          _this.scrollAdjustments = 0;
+          if (_this.scrollOffset === offset) {
             return;
           }
-
-          const measuredItemSize = measureElement(measurableItem, this);
-          const itemSize = (_this$itemMeasurement = this.itemMeasurementsCache[item.key]) != null ? _this$itemMeasurement : item.size;
-
-          if (measuredItemSize !== itemSize) {
-            if (item.start < this.scrollOffset) {
-              if (this.options.debug) {
-                console.info('correction', measuredItemSize - itemSize);
-              }
-
-              if (!this.destinationOffset) {
-                this._scrollToOffset(this.scrollOffset + (measuredItemSize - itemSize), false);
-              }
-            }
-
-            this.pendingMeasuredCacheIndexes.push(index);
-            this.itemMeasurementsCache = { ...this.itemMeasurementsCache,
-              [item.key]: measuredItemSize
-            };
-            this.notify();
+          if (_this.isScrollingTimeoutId !== null) {
+            clearTimeout(_this.isScrollingTimeoutId);
+            _this.isScrollingTimeoutId = null;
           }
-        };
-
-        const virtualItems = [];
-        const currentMeasureElements = {};
-
-        for (let k = 0, len = indexes.length; k < len; k++) {
-          var _this$measureElementC;
-
-          const i = indexes[k];
-          const measurement = measurements[i];
-          const item = { ...measurement,
-            measureElement: currentMeasureElements[i] = (_this$measureElementC = this.measureElementCache[i]) != null ? _this$measureElementC : makeMeasureElement(i)
-          };
-          virtualItems.push(item);
+          _this.isScrolling = true;
+          _this.scrollDirection = _this.scrollOffset < offset ? 'forward' : 'backward';
+          _this.scrollOffset = offset;
+          _this.maybeNotify();
+          _this.isScrollingTimeoutId = setTimeout(function () {
+            _this.isScrollingTimeoutId = null;
+            _this.isScrolling = false;
+            _this.scrollDirection = null;
+            _this.maybeNotify();
+          }, _this.options.scrollingDelay);
+        }));
+      }
+    };
+    this.getSize = function () {
+      return _this.scrollRect[_this.options.horizontal ? 'width' : 'height'];
+    };
+    this.memoOptions = memo(function () {
+      return [_this.options.count, _this.options.paddingStart, _this.options.scrollMargin, _this.options.getItemKey];
+    }, function (count, paddingStart, scrollMargin, getItemKey) {
+      _this.pendingMeasuredCacheIndexes = [];
+      return {
+        count: count,
+        paddingStart: paddingStart,
+        scrollMargin: scrollMargin,
+        getItemKey: getItemKey
+      };
+    }, {
+      key: false
+    });
+    this.getFurthestMeasurement = function (measurements, index) {
+      var furthestMeasurementsFound = new Map();
+      var furthestMeasurements = new Map();
+      for (var m = index - 1; m >= 0; m--) {
+        var measurement = measurements[m];
+        if (furthestMeasurementsFound.has(measurement.lane)) {
+          continue;
         }
-
-        this.measureElementCache = currentMeasureElements;
-        return virtualItems;
-      }, {
-        key: 'getIndexes'
-      });
-
-      this.scrollToOffset = function (toOffset, _temp) {
-        let {
-          align
-        } = _temp === void 0 ? {
-          align: 'start'
-        } : _temp;
-
-        const attempt = () => {
-          const offset = _this.scrollOffset;
-
-          const size = _this.getSize();
-
-          if (align === 'auto') {
-            if (toOffset <= offset) {
-              align = 'start';
-            } else if (toOffset >= offset + size) {
-              align = 'end';
-            } else {
-              align = 'start';
-            }
-          }
-
-          if (align === 'start') {
-            _this._scrollToOffset(toOffset, true);
-          } else if (align === 'end') {
-            _this._scrollToOffset(toOffset - size, true);
-          } else if (align === 'center') {
-            _this._scrollToOffset(toOffset - size / 2, true);
-          }
+        var previousFurthestMeasurement = furthestMeasurements.get(measurement.lane);
+        if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) {
+          furthestMeasurements.set(measurement.lane, measurement);
+        } else if (measurement.end < previousFurthestMeasurement.end) {
+          furthestMeasurementsFound.set(measurement.lane, true);
+        }
+        if (furthestMeasurementsFound.size === _this.options.lanes) {
+          break;
+        }
+      }
+      return furthestMeasurements.size === _this.options.lanes ? Array.from(furthestMeasurements.values()).sort(function (a, b) {
+        return a.end - b.end;
+      })[0] : undefined;
+    };
+    this.getMeasurements = memo(function () {
+      return [_this.memoOptions(), _this.itemSizeCache];
+    }, function (_ref4, itemSizeCache) {
+      var count = _ref4.count,
+        paddingStart = _ref4.paddingStart,
+        scrollMargin = _ref4.scrollMargin,
+        getItemKey = _ref4.getItemKey;
+      var min = _this.pendingMeasuredCacheIndexes.length > 0 ? Math.min.apply(Math, _this.pendingMeasuredCacheIndexes) : 0;
+      _this.pendingMeasuredCacheIndexes = [];
+      var measurements = _this.measurementsCache.slice(0, min);
+      for (var _i2 = min; _i2 < count; _i2++) {
+        var key = getItemKey(_i2);
+        var furthestMeasurement = _this.options.lanes === 1 ? measurements[_i2 - 1] : _this.getFurthestMeasurement(measurements, _i2);
+        var start = furthestMeasurement ? furthestMeasurement.end : paddingStart + scrollMargin;
+        var measuredSize = itemSizeCache.get(key);
+        var size = typeof measuredSize === 'number' ? measuredSize : _this.options.estimateSize(_i2);
+        var end = start + size;
+        var lane = furthestMeasurement ? furthestMeasurement.lane : _i2 % _this.options.lanes;
+        measurements[_i2] = {
+          index: _i2,
+          start: start,
+          size: size,
+          end: end,
+          key: key,
+          lane: lane
         };
-
-        attempt();
-        requestAnimationFrame(() => {
-          attempt();
+      }
+      _this.measurementsCache = measurements;
+      return measurements;
+    }, {
+      key: 'getMeasurements',
+      debug: function debug() {
+        return _this.options.debug;
+      }
+    });
+    this.calculateRange = memo(function () {
+      return [_this.getMeasurements(), _this.getSize(), _this.scrollOffset];
+    }, function (measurements, outerSize, scrollOffset) {
+      return _this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
+        measurements: measurements,
+        outerSize: outerSize,
+        scrollOffset: scrollOffset
+      }) : null;
+    }, {
+      key: 'calculateRange',
+      debug: function debug() {
+        return _this.options.debug;
+      }
+    });
+    this.getIndexes = memo(function () {
+      return [_this.options.rangeExtractor, _this.calculateRange(), _this.options.overscan, _this.options.count];
+    }, function (rangeExtractor, range, overscan, count) {
+      return range === null ? [] : rangeExtractor(_extends({}, range, {
+        overscan: overscan,
+        count: count
+      }));
+    }, {
+      key: 'getIndexes',
+      debug: function debug() {
+        return _this.options.debug;
+      }
+    });
+    this.indexFromElement = function (node) {
+      var attributeName = _this.options.indexAttribute;
+      var indexStr = node.getAttribute(attributeName);
+      if (!indexStr) {
+        console.warn("Missing attribute name '" + attributeName + "={index}' on measured element.");
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this._measureElement = function (node, entry) {
+      var item = _this.measurementsCache[_this.indexFromElement(node)];
+      if (!item || !node.isConnected) {
+        _this.measureElementCache.forEach(function (cached, key) {
+          if (cached === node) {
+            _this.observer.unobserve(node);
+            _this.measureElementCache["delete"](key);
+          }
         });
-      };
-
-      this.scrollToIndex = function (index, _temp2) {
-        let {
-          align,
-          ...rest
-        } = _temp2 === void 0 ? {
-          align: 'auto'
-        } : _temp2;
-
-        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;
+        return;
+      }
+      var prevNode = _this.measureElementCache.get(item.key);
+      if (prevNode !== node) {
+        if (prevNode) {
+          _this.observer.unobserve(prevNode);
         }
-
-        if (align === 'auto') {
-          if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
-            align = 'end';
-          } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
-            align = 'start';
-          } else {
-            return;
+        _this.observer.observe(node);
+        _this.measureElementCache.set(item.key, node);
+      }
+      var measuredItemSize = _this.options.measureElement(node, entry, _this);
+      _this.resizeItem(item, measuredItemSize);
+    };
+    this.resizeItem = function (item, size) {
+      var _this$itemSizeCache$g;
+      var itemSize = (_this$itemSizeCache$g = _this.itemSizeCache.get(item.key)) != null ? _this$itemSizeCache$g : item.size;
+      var delta = size - itemSize;
+      if (delta !== 0) {
+        if (item.start < _this.scrollOffset) {
+          if (_this.options.debug) {
+            console.info('correction', delta);
           }
+          _this._scrollToOffset(_this.scrollOffset, {
+            adjustments: _this.scrollAdjustments += delta,
+            behavior: undefined
+          });
         }
-
-        const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
-
-        _this.scrollToOffset(toOffset, {
-          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, canSmooth) => {
-        clearTimeout(this.scrollCheckFrame);
-        this.destinationOffset = offset;
-        this.options.scrollToFn(offset, this.options.enableSmoothScroll && canSmooth, 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;
+        _this.pendingMeasuredCacheIndexes.push(item.index);
+        _this.itemSizeCache = new Map(_this.itemSizeCache.set(item.key, size));
+        _this.notify(false);
+      }
+    };
+    this.measureElement = function (node) {
+      if (!node) {
+        return;
+      }
+      _this._measureElement(node, undefined);
+    };
+    this.getVirtualItems = memo(function () {
+      return [_this.getIndexes(), _this.getMeasurements()];
+    }, function (indexes, measurements) {
+      var virtualItems = [];
+      for (var k = 0, len = indexes.length; k < len; k++) {
+        var _i3 = indexes[k];
+        var measurement = measurements[_i3];
+        virtualItems.push(measurement);
+      }
+      return virtualItems;
+    }, {
+      key: 'getIndexes',
+      debug: function debug() {
+        return _this.options.debug;
+      }
+    });
+    this.getVirtualItemForOffset = function (offset) {
+      var measurements = _this.getMeasurements();
+      return notUndefined(measurements[findNearestBinarySearch(0, measurements.length - 1, function (index) {
+        return notUndefined(measurements[index]).start;
+      }, offset)]);
+    };
+    this.getOffsetForAlignment = function (toOffset, align) {
+      var size = _this.getSize();
+      if (align === 'auto') {
+        if (toOffset <= _this.scrollOffset) {
+          align = 'start';
+        } else if (toOffset >= _this.scrollOffset + size) {
+          align = 'end';
+        } else {
+          align = 'start';
+        }
+      }
+      if (align === 'start') {
+        toOffset = toOffset;
+      } else if (align === 'end') {
+        toOffset = toOffset - size;
+      } else if (align === 'center') {
+        toOffset = toOffset - size / 2;
+      }
+      var scrollSizeProp = _this.options.horizontal ? 'scrollWidth' : 'scrollHeight';
+      var scrollSize = _this.scrollElement ? 'document' in _this.scrollElement ? _this.scrollElement.document.documentElement[scrollSizeProp] : _this.scrollElement[scrollSizeProp] : 0;
+      var maxOffset = scrollSize - _this.getSize();
+      return Math.max(Math.min(maxOffset, toOffset), 0);
+    };
+    this.getOffsetForIndex = function (index, align) {
+      if (align === void 0) {
+        align = 'auto';
+      }
+      index = Math.max(0, Math.min(index, _this.options.count - 1));
+      var measurement = notUndefined(_this.getMeasurements()[index]);
+      if (align === 'auto') {
+        if (measurement.end >= _this.scrollOffset + _this.getSize() - _this.options.scrollPaddingEnd) {
+          align = 'end';
+        } else if (measurement.start <= _this.scrollOffset + _this.options.scrollPaddingStart) {
+          align = 'start';
+        } else {
+          return [_this.scrollOffset, align];
+        }
+      }
+      var toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
+      return [_this.getOffsetForAlignment(toOffset, align), align];
+    };
+    this.isDynamicMode = function () {
+      return _this.measureElementCache.size > 0;
+    };
+    this.cancelScrollToIndex = function () {
+      if (_this.scrollToIndexTimeoutId !== null) {
+        clearTimeout(_this.scrollToIndexTimeoutId);
+        _this.scrollToIndexTimeoutId = null;
+      }
+    };
+    this.scrollToOffset = function (toOffset, _temp) {
+      var _ref5 = _temp === void 0 ? {} : _temp,
+        _ref5$align = _ref5.align,
+        align = _ref5$align === void 0 ? 'start' : _ref5$align,
+        behavior = _ref5.behavior;
+      _this.cancelScrollToIndex();
+      if (behavior === 'smooth' && _this.isDynamicMode()) {
+        console.warn('The `smooth` scroll behavior is not fully supported with dynamic size.');
+      }
+      _this._scrollToOffset(_this.getOffsetForAlignment(toOffset, align), {
+        adjustments: undefined,
+        behavior: behavior
+      });
+    };
+    this.scrollToIndex = function (index, _temp2) {
+      var _ref6 = _temp2 === void 0 ? {} : _temp2,
+        _ref6$align = _ref6.align,
+        initialAlign = _ref6$align === void 0 ? 'auto' : _ref6$align,
+        behavior = _ref6.behavior;
+      index = Math.max(0, Math.min(index, _this.options.count - 1));
+      _this.cancelScrollToIndex();
+      if (behavior === 'smooth' && _this.isDynamicMode()) {
+        console.warn('The `smooth` scroll behavior is not fully supported with dynamic size.');
+      }
+      var _this$getOffsetForInd = _this.getOffsetForIndex(index, initialAlign),
+        toOffset = _this$getOffsetForInd[0],
+        align = _this$getOffsetForInd[1];
+      _this._scrollToOffset(toOffset, {
+        adjustments: undefined,
+        behavior: behavior
+      });
+      if (behavior !== 'smooth' && _this.isDynamicMode()) {
+        _this.scrollToIndexTimeoutId = setTimeout(function () {
+          _this.scrollToIndexTimeoutId = null;
+          var elementInDOM = _this.measureElementCache.has(_this.options.getItemKey(index));
+          if (elementInDOM) {
+            var _this$getOffsetForInd2 = _this.getOffsetForIndex(index, align),
+              _toOffset = _this$getOffsetForInd2[0];
+            if (!approxEqual(_toOffset, _this.scrollOffset)) {
+              _this.scrollToIndex(index, {
+                align: align,
+                behavior: behavior
+              });
             }
-
-            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;
-    }
-
-  }
-
-  const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
+          } else {
+            _this.scrollToIndex(index, {
+              align: align,
+              behavior: behavior
+            });
+          }
+        });
+      }
+    };
+    this.scrollBy = function (delta, _temp3) {
+      var _ref7 = _temp3 === void 0 ? {} : _temp3,
+        behavior = _ref7.behavior;
+      _this.cancelScrollToIndex();
+      if (behavior === 'smooth' && _this.isDynamicMode()) {
+        console.warn('The `smooth` scroll behavior is not fully supported with dynamic size.');
+      }
+      _this._scrollToOffset(_this.scrollOffset + delta, {
+        adjustments: undefined,
+        behavior: behavior
+      });
+    };
+    this.getTotalSize = function () {
+      var _this$getMeasurements;
+      return (((_this$getMeasurements = _this.getMeasurements()[_this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || _this.options.paddingStart) - _this.options.scrollMargin + _this.options.paddingEnd;
+    };
+    this._scrollToOffset = function (offset, _ref8) {
+      var adjustments = _ref8.adjustments,
+        behavior = _ref8.behavior;
+      _this.options.scrollToFn(offset, {
+        behavior: behavior,
+        adjustments: adjustments
+      }, _this);
+    };
+    this.measure = function () {
+      _this.itemSizeCache = new Map();
+      _this.notify(false);
+    };
+    this.setOptions(_opts);
+    this.scrollRect = this.options.initialRect;
+    this.scrollOffset = this.options.initialOffset;
+    this.measurementsCache = this.options.initialMeasurementsCache;
+    this.measurementsCache.forEach(function (item) {
+      _this.itemSizeCache.set(item.key, item.size);
+    });
+    this.maybeNotify();
+  };
+  var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
     while (low <= high) {
-      const middle = (low + high) / 2 | 0;
-      const currentValue = getCurrentValue(middle);
-
+      var middle = (low + high) / 2 | 0;
+      var currentValue = getCurrentValue(middle);
       if (currentValue < value) {
         low = middle + 1;
       } else if (currentValue > value) {
@@ -562,43 +673,39 @@
         return middle;
       }
     }
-
     if (low > 0) {
       return low - 1;
     } else {
       return 0;
     }
   };
-
-  function calculateRange(_ref2) {
-    let {
-      measurements,
-      outerSize,
-      scrollOffset
-    } = _ref2;
-    const count = measurements.length - 1;
-
-    const getOffset = index => measurements[index].start;
-
-    const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
-    let endIndex = startIndex;
-
+  function calculateRange(_ref9) {
+    var measurements = _ref9.measurements,
+      outerSize = _ref9.outerSize,
+      scrollOffset = _ref9.scrollOffset;
+    var count = measurements.length - 1;
+    var getOffset = function getOffset(index) {
+      return measurements[index].start;
+    };
+    var startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+    var endIndex = startIndex;
     while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
       endIndex++;
     }
-
     return {
-      startIndex,
-      endIndex
+      startIndex: startIndex,
+      endIndex: endIndex
     };
   }
 
   exports.Virtualizer = Virtualizer;
+  exports.approxEqual = approxEqual;
   exports.defaultKeyExtractor = defaultKeyExtractor;
   exports.defaultRangeExtractor = defaultRangeExtractor;
   exports.elementScroll = elementScroll;
   exports.measureElement = measureElement;
   exports.memo = memo;
+  exports.notUndefined = notUndefined;
   exports.observeElementOffset = observeElementOffset;
   exports.observeElementRect = observeElementRect;
   exports.observeWindowOffset = observeWindowOffset;