@tanstack/virtual-core 3.0.0-beta.2 → 3.0.0-beta.21

package/build/cjs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["export type NoInfer<A extends any> = [A][A extends any ? 0 : never]\n\nexport type PartialKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>\n\nexport function memo<TDeps extends readonly any[], TResult>(\n  getDeps: () => [...TDeps],\n  fn: (...args: NoInfer<[...TDeps]>) => TResult,\n  opts: {\n    key: any\n    debug?: () => any\n    onChange?: (result: TResult) => void\n  },\n): () => TResult {\n  let deps: any[] = []\n  let result: TResult | undefined\n\n  return () => {\n    let depTime: number\n    if (opts.key && opts.debug?.()) depTime = Date.now()\n\n    const newDeps = getDeps()\n\n    const depsChanged =\n      newDeps.length !== deps.length ||\n      newDeps.some((dep: any, index: number) => deps[index] !== dep)\n\n    if (!depsChanged) {\n      return result!\n    }\n\n    deps = newDeps\n\n    let resultTime: number\n    if (opts.key && opts.debug?.()) resultTime = Date.now()\n\n    result = fn(...newDeps)\n    opts?.onChange?.(result)\n\n    if (opts.key && opts.debug?.()) {\n      const depEndTime = Math.round((Date.now() - depTime!) * 100) / 100\n      const resultEndTime = Math.round((Date.now() - resultTime!) * 100) / 100\n      const resultFpsPercentage = resultEndTime / 16\n\n      const pad = (str: number | string, num: number) => {\n        str = String(str)\n        while (str.length < num) {\n          str = ' ' + str\n        }\n        return str\n      }\n\n      console.info(\n        `%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`,\n        `\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl(${Math.max(\n              0,\n              Math.min(120 - 120 * resultFpsPercentage, 120),\n            )}deg 100% 31%);`,\n        opts?.key,\n      )\n    }\n\n    return result!\n  }\n}\n"],"names":["memo","getDeps","fn","opts","deps","result","depTime","key","debug","Date","now","newDeps","depsChanged","length","some","dep","index","resultTime","onChange","depEndTime","Math","round","resultEndTime","resultFpsPercentage","pad","str","num","String","console","info","max","min"],"mappings":";;;;;;;;;;;;;;AAIO,SAASA,IAAT,CACLC,OADK,EAELC,EAFK,EAGLC,IAHK,EAQU;EACf,IAAIC,IAAW,GAAG,EAAlB,CAAA;AACA,EAAA,IAAIC,MAAJ,CAAA;AAEA,EAAA,OAAO,MAAM;AACX,IAAA,IAAIC,OAAJ,CAAA;AACA,IAAA,IAAIH,IAAI,CAACI,GAAL,IAAYJ,IAAI,CAACK,KAAjB,IAAYL,IAAAA,IAAAA,IAAI,CAACK,KAAL,EAAhB,EAAgCF,OAAO,GAAGG,IAAI,CAACC,GAAL,EAAV,CAAA;IAEhC,MAAMC,OAAO,GAAGV,OAAO,EAAvB,CAAA;IAEA,MAAMW,WAAW,GACfD,OAAO,CAACE,MAAR,KAAmBT,IAAI,CAACS,MAAxB,IACAF,OAAO,CAACG,IAAR,CAAa,CAACC,GAAD,EAAWC,KAAX,KAA6BZ,IAAI,CAACY,KAAD,CAAJ,KAAgBD,GAA1D,CAFF,CAAA;;IAIA,IAAI,CAACH,WAAL,EAAkB;AAChB,MAAA,OAAOP,MAAP,CAAA;AACD,KAAA;;AAEDD,IAAAA,IAAI,GAAGO,OAAP,CAAA;AAEA,IAAA,IAAIM,UAAJ,CAAA;AACA,IAAA,IAAId,IAAI,CAACI,GAAL,IAAYJ,IAAI,CAACK,KAAjB,IAAYL,IAAAA,IAAAA,IAAI,CAACK,KAAL,EAAhB,EAAgCS,UAAU,GAAGR,IAAI,CAACC,GAAL,EAAb,CAAA;AAEhCL,IAAAA,MAAM,GAAGH,EAAE,CAAC,GAAGS,OAAJ,CAAX,CAAA;IACAR,IAAI,IAAA,IAAJ,GAAAA,KAAAA,CAAAA,GAAAA,IAAI,CAAEe,QAAN,oBAAAf,IAAI,CAAEe,QAAN,CAAiBb,MAAjB,CAAA,CAAA;;AAEA,IAAA,IAAIF,IAAI,CAACI,GAAL,IAAYJ,IAAI,CAACK,KAAjB,IAAA,IAAA,IAAYL,IAAI,CAACK,KAAL,EAAhB,EAAgC;AAC9B,MAAA,MAAMW,UAAU,GAAGC,IAAI,CAACC,KAAL,CAAW,CAACZ,IAAI,CAACC,GAAL,EAAaJ,GAAAA,OAAd,IAA0B,GAArC,IAA4C,GAA/D,CAAA;AACA,MAAA,MAAMgB,aAAa,GAAGF,IAAI,CAACC,KAAL,CAAW,CAACZ,IAAI,CAACC,GAAL,EAAaO,GAAAA,UAAd,IAA6B,GAAxC,IAA+C,GAArE,CAAA;AACA,MAAA,MAAMM,mBAAmB,GAAGD,aAAa,GAAG,EAA5C,CAAA;;AAEA,MAAA,MAAME,GAAG,GAAG,CAACC,GAAD,EAAuBC,GAAvB,KAAuC;AACjDD,QAAAA,GAAG,GAAGE,MAAM,CAACF,GAAD,CAAZ,CAAA;;AACA,QAAA,OAAOA,GAAG,CAACZ,MAAJ,GAAaa,GAApB,EAAyB;UACvBD,GAAG,GAAG,MAAMA,GAAZ,CAAA;AACD,SAAA;;AACD,QAAA,OAAOA,GAAP,CAAA;OALF,CAAA;;AAQAG,MAAAA,OAAO,CAACC,IAAR,CAAA,WAAA,GACSL,GAAG,CAACF,aAAD,EAAgB,CAAhB,CADZ,GAAA,IAAA,GACmCE,GAAG,CAACL,UAAD,EAAa,CAAb,CADtC,uGAKmBC,IAAI,CAACU,GAAL,CACX,CADW,EAEXV,IAAI,CAACW,GAAL,CAAS,MAAM,GAAMR,GAAAA,mBAArB,EAA0C,GAA1C,CAFW,CALnB,GAAA,gBAAA,EASEpB,IATF,IASEA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,IAAI,CAAEI,GATR,CAAA,CAAA;AAWD,KAAA;;AAED,IAAA,OAAOF,MAAP,CAAA;GAhDF,CAAA;AAkDD;;;;"}

package/build/esm/index.js

@@ -8,76 +8,6 @@
  *
  * @license MIT
  */
-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 memo(getDeps, fn, opts) {
   let deps = [];
   let result;
@@ -132,9 +62,29 @@ const defaultRangeExtractor = range => {
 
   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);
+    }
+
+    prev = rect;
+  };
+};
+
 const observeElementRect = (instance, cb) => {
-  const observer = observeRect(instance.scrollElement, rect => {
-    cb(rect);
+  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) {
@@ -142,18 +92,18 @@ const observeElementRect = (instance, cb) => {
   }
 
   cb(instance.scrollElement.getBoundingClientRect());
-  observer.observe();
+  observer.observe(instance.scrollElement);
   return () => {
-    observer.unobserve();
+    observer.unobserve(instance.scrollElement);
   };
 };
 const observeWindowRect = (instance, cb) => {
-  const onResize = () => {
-    cb({
-      width: instance.scrollElement.innerWidth,
-      height: instance.scrollElement.innerHeight
-    });
-  };
+  const memoizedCallback = memoRectCallback(instance, cb);
+
+  const onResize = () => memoizedCallback({
+    width: instance.scrollElement.innerWidth,
+    height: instance.scrollElement.innerHeight
+  });
 
   if (!instance.scrollElement) {
     return;
@@ -168,52 +118,80 @@ const observeWindowRect = (instance, cb) => {
     instance.scrollElement.removeEventListener('resize', onResize);
   };
 };
-const observeElementOffset = (instance, cb) => {
-  const onScroll = () => cb(instance.scrollElement[instance.options.horizontal ? 'scrollLeft' : 'scrollTop']);
+const scrollProps = {
+  element: ['scrollLeft', 'scrollTop'],
+  window: ['scrollX', 'scrollY']
+};
 
-  if (!instance.scrollElement) {
-    return;
-  }
+const createOffsetObserver = mode => {
+  return (instance, cb) => {
+    if (!instance.scrollElement) {
+      return;
+    }
 
-  onScroll();
-  instance.scrollElement.addEventListener('scroll', onScroll, {
-    capture: false,
-    passive: true
-  });
-  return () => {
-    instance.scrollElement.removeEventListener('scroll', onScroll);
-  };
-};
-const observeWindowOffset = (instance, cb) => {
-  const onScroll = () => cb(instance.scrollElement[instance.options.horizontal ? 'scrollX' : 'scrollY']);
+    const propX = scrollProps[mode][0];
+    const propY = scrollProps[mode][1];
+    let prevX = instance.scrollElement[propX];
+    let prevY = instance.scrollElement[propY];
 
-  if (!instance.scrollElement) {
-    return;
-  }
+    const scroll = () => {
+      const offset = instance.scrollElement[instance.options.horizontal ? propX : propY];
+      cb(Math.max(0, offset - instance.options.scrollMargin));
+    };
 
-  onScroll();
-  instance.scrollElement.addEventListener('scroll', onScroll, {
-    capture: false,
-    passive: true
-  });
-  return () => {
-    instance.scrollElement.removeEventListener('scroll', onScroll);
+    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);
+    };
   };
 };
+
+const observeElementOffset = createOffsetObserver('element');
+const observeWindowOffset = createOffsetObserver('window');
 const measureElement = (element, instance) => {
-  return element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height'];
+  return Math.round(element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height']);
 };
-const windowScroll = (offset, canSmooth, instance) => {
+const windowScroll = (offset, _ref, instance) => {
   var _instance$scrollEleme;
-  (_instance$scrollEleme = instance.scrollElement) == null ? void 0 : _instance$scrollEleme.scrollTo({
-    [instance.options.horizontal ? 'left' : 'top']: offset,
+
+  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']: toOffset,
     behavior: canSmooth ? 'smooth' : undefined
   });
 };
-const elementScroll = (offset, canSmooth, instance) => {
+const elementScroll = (offset, _ref2, instance) => {
   var _instance$scrollEleme2;
-  (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo({
-    [instance.options.horizontal ? 'left' : 'top']: offset,
+
+  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']: toOffset,
     behavior: canSmooth ? 'smooth' : undefined
   });
 };
@@ -223,13 +201,26 @@ class Virtualizer {
 
     this.unsubs = [];
     this.scrollElement = null;
+    this.isScrolling = false;
+    this.isScrollingTimeoutId = null;
     this.measurementsCache = [];
     this.itemMeasurementsCache = {};
     this.pendingMeasuredCacheIndexes = [];
+    this.scrollDelta = 0;
+    this.measureElementCache = {};
+    this.ro = new ResizeObserver(entries => {
+      entries.forEach(entry => {
+        this._measureElement(entry.target, false);
+      });
+    });
+    this.range = {
+      startIndex: 0,
+      endIndex: 0
+    };
 
     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];
       });
       this.options = {
@@ -250,6 +241,9 @@ class Virtualizer {
           width: 0,
           height: 0
         },
+        scrollMargin: 0,
+        scrollingDelay: 150,
+        indexAttribute: 'data-index',
         ...opts
       };
     };
@@ -263,10 +257,13 @@ class Virtualizer {
     this.cleanup = () => {
       this.unsubs.filter(Boolean).forEach(d => d());
       this.unsubs = [];
+      this.scrollElement = null;
     };
 
     this._didMount = () => {
       return () => {
+        this.ro.disconnect();
+        this.measureElementCache = {};
         this.cleanup();
       };
     };
@@ -277,14 +274,41 @@ class Virtualizer {
       if (this.scrollElement !== scrollElement) {
         this.cleanup();
         this.scrollElement = scrollElement;
+
+        this._scrollToOffset(this.scrollOffset, {
+          canSmooth: false,
+          sync: true,
+          requested: false
+        });
+
         this.unsubs.push(this.options.observeElementRect(this, rect => {
           this.scrollRect = rect;
-          this.notify();
+          this.calculateRange();
         }));
         this.unsubs.push(this.options.observeElementOffset(this, offset => {
-          this.scrollOffset = offset;
-          this.notify();
+          if (this.isScrollingTimeoutId !== null) {
+            clearTimeout(this.isScrollingTimeoutId);
+            this.isScrollingTimeoutId = null;
+          }
+
+          if (this.scrollOffset !== offset) {
+            this.scrollOffset = offset;
+            this.isScrolling = true;
+            this.scrollDelta = 0;
+            this.isScrollingTimeoutId = setTimeout(() => {
+              this.isScrollingTimeoutId = null;
+              this.isScrolling = false;
+              this.notify();
+            }, this.options.scrollingDelay);
+          } else {
+            this.isScrolling = false;
+            this.scrollDelta = 0;
+          }
+
+          this.calculateRange();
         }));
+      } else if (!this.isScrolling) {
+        this.calculateRange();
       }
     };
 
@@ -315,108 +339,170 @@ class Virtualizer {
       this.measurementsCache = measurements;
       return measurements;
     }, {
-      key: process.env.NODE_ENV === 'development' && 'getMeasurements',
+      key: process.env.NODE_ENV !== 'production' && 'getMeasurements',
       debug: () => this.options.debug
     });
     this.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
-      return calculateRange({
+      const range = calculateRange({
         measurements,
         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 === 'development' && 'calculateRange',
+      key: process.env.NODE_ENV !== 'production' && 'calculateRange',
       debug: () => this.options.debug
     });
-    this.getIndexes = memo(() => [this.options.rangeExtractor, this.calculateRange(), this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
+    this.getIndexes = memo(() => [this.options.rangeExtractor, this.range, this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
       return rangeExtractor({ ...range,
         overscan,
         count: count
       });
     }, {
-      key: process.env.NODE_ENV === 'development' && 'getIndexes'
+      key: process.env.NODE_ENV !== 'production' && 'getIndexes',
+      debug: () => this.options.debug
     });
-    this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements(), this.options.measureElement], (indexes, measurements, measureElement) => {
+
+    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.");
+        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 key = String(item.key);
+      const prevNode = this.measureElementCache[key];
+
+      if (!node.isConnected) {
+        if (prevNode) {
+          this.ro.unobserve(prevNode);
+          delete this.measureElementCache[key];
+        }
+
+        return;
+      }
+
+      if (!prevNode || prevNode !== node) {
+        if (prevNode) {
+          this.ro.unobserve(prevNode);
+        }
+
+        this.measureElementCache[key] = node;
+        this.ro.observe(node);
+      }
+
+      const measuredItemSize = this.options.measureElement(node, this);
+      const itemSize = (_this$itemMeasurement = this.itemMeasurementsCache[item.key]) != null ? _this$itemMeasurement : item.size;
+
+      if (measuredItemSize !== itemSize) {
+        if (item.start < this.scrollOffset) {
+          if (process.env.NODE_ENV !== 'production' && this.options.debug) {
+            console.info('correction', measuredItemSize - itemSize);
+          }
+
+          if (this.destinationOffset === undefined) {
+            this.scrollDelta += measuredItemSize - itemSize;
+
+            this._scrollToOffset(this.scrollOffset + this.scrollDelta, {
+              canSmooth: false,
+              sync: false,
+              requested: false
+            });
+          }
+        }
+
+        this.pendingMeasuredCacheIndexes.push(index);
+        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];
-        const item = { ...measurement,
-          measureElement: measurableItem => {
-            if (measurableItem) {
-              const measuredItemSize = measureElement(measurableItem, this);
-
-              if (measuredItemSize !== item.size) {
-                if (item.start < this.scrollOffset) {
-                  if (process.env.NODE_ENV === 'development' && this.options.debug) console.info('correction', measuredItemSize - item.size);
-
-                  if (!this.destinationOffset) {
-                    this._scrollToOffset(this.scrollOffset + (measuredItemSize - item.size), false);
-                  }
-                }
-
-                this.pendingMeasuredCacheIndexes.push(i);
-                this.itemMeasurementsCache = { ...this.itemMeasurementsCache,
-                  [item.key]: measuredItemSize
-                };
-                this.notify();
-              }
-            }
-          }
-        };
-        virtualItems.push(item);
+        virtualItems.push(measurement);
       }
 
       return virtualItems;
     }, {
-      key: process.env.NODE_ENV === 'development' && 'getIndexes'
+      key: process.env.NODE_ENV !== 'production' && 'getIndexes',
+      debug: () => this.options.debug
     });
 
     this.scrollToOffset = function (toOffset, _temp) {
       let {
-        align
-      } = _temp === void 0 ? {
-        align: 'start'
-      } : _temp;
-
-      const attempt = () => {
-        const offset = _this.scrollOffset;
+        align = 'start',
+        smoothScroll = _this.options.enableSmoothScroll
+      } = _temp === void 0 ? {} : _temp;
+      const offset = _this.scrollOffset;
 
-        const size = _this.getSize();
+      const size = _this.getSize();
 
-        if (align === 'auto') {
-          if (toOffset <= offset) {
-            align = 'start';
-          } else if (toOffset >= offset + size) {
-            align = 'end';
-          } else {
-            align = 'start';
-          }
+      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);
-        }
+      const options = {
+        canSmooth: smoothScroll,
+        sync: false,
+        requested: true
       };
 
-      attempt();
-      requestAnimationFrame(() => {
-        attempt();
-      });
+      if (align === 'start') {
+        _this._scrollToOffset(toOffset, options);
+      } else if (align === 'end') {
+        _this._scrollToOffset(toOffset - size, options);
+      } else if (align === 'center') {
+        _this._scrollToOffset(toOffset - size / 2, options);
+      }
     };
 
     this.scrollToIndex = function (index, _temp2) {
       let {
-        align,
+        align = 'auto',
+        smoothScroll = _this.options.enableSmoothScroll,
         ...rest
-      } = _temp2 === void 0 ? {
-        align: 'auto'
-      } : _temp2;
+      } = _temp2 === void 0 ? {} : _temp2;
 
       const measurements = _this.getMeasurements();
 
@@ -447,6 +533,7 @@ class Virtualizer {
 
       _this.scrollToOffset(toOffset, {
         align,
+        smoothScroll,
         ...rest
       });
     };
@@ -457,10 +544,22 @@ class Virtualizer {
       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) => {
+    this._scrollToOffset = (offset, _ref4) => {
+      let {
+        requested,
+        canSmooth,
+        sync
+      } = _ref4;
       clearTimeout(this.scrollCheckFrame);
-      this.destinationOffset = offset;
-      this.options.scrollToFn(offset, this.options.enableSmoothScroll && canSmooth, this);
+
+      if (requested) {
+        this.destinationOffset = offset;
+      }
+
+      this.options.scrollToFn(offset, {
+        canSmooth,
+        sync
+      }, this);
       let scrollCheckFrame;
 
       const check = () => {
@@ -491,6 +590,7 @@ class Virtualizer {
     this.setOptions(_opts);
     this.scrollRect = this.options.initialRect;
     this.scrollOffset = this.options.initialOffset;
+    this.calculateRange();
   }
 
 }
@@ -516,12 +616,12 @@ const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
   }
 };
 
-function calculateRange(_ref2) {
+function calculateRange(_ref5) {
   let {
     measurements,
     outerSize,
     scrollOffset
-  } = _ref2;
+  } = _ref5;
   const count = measurements.length - 1;
 
   const getOffset = index => measurements[index].start;