@tanstack/virtual-core 3.0.0-beta.36 → 3.0.0-beta.40

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tanstack/virtual-core",
   "author": "Tanner Linsley",
-  "version": "3.0.0-beta.36",
+  "version": "3.0.0-beta.40",
   "description": "Headless UI for virtualizing scrollable elements in TS/JS + Frameworks",
   "license": "MIT",
   "homepage": "https://github.com/tanstack/virtual#readme",

package/src/index.ts

@@ -296,7 +296,10 @@ export class Virtualizer<
   scrollOffset: number
   scrollDirection: ScrollDirection | null = null
   private scrollAdjustments: number = 0
-  private measureElementCache: Record<Key, TItemElement> = {}
+  private measureElementCache: Record<
+    Key,
+    TItemElement & { __virtualizerSkipFirstNotSync?: boolean }
+  > = {}
   private getResizeObserver = (() => {
     let _ro: ResizeObserver | null = null
 
@@ -519,7 +522,7 @@ export class Virtualizer<
       return rangeExtractor({
         ...range,
         overscan,
-        count: count,
+        count,
       })
     },
     {
@@ -542,7 +545,7 @@ export class Virtualizer<
     return parseInt(indexStr, 10)
   }
 
-  private _measureElement = (node: TItemElement, _sync: boolean) => {
+  private _measureElement = (node: TItemElement, sync: boolean) => {
     const index = this.indexFromElement(node)
 
     const item = this.measurementsCache[index]
@@ -555,19 +558,24 @@ export class Virtualizer<
     const ro = this.getResizeObserver()
 
     if (!node.isConnected) {
-      if (prevNode) {
-        ro?.unobserve(prevNode)
+      ro?.unobserve(node)
+      if (node === prevNode) {
         delete this.measureElementCache[item.key]
       }
       return
     }
 
-    if (!prevNode || prevNode !== node) {
+    if (prevNode !== node) {
       if (prevNode) {
         ro?.unobserve(prevNode)
       }
-      this.measureElementCache[item.key] = node
       ro?.observe(node)
+      this.measureElementCache[item.key] = node
+    } else {
+      if (!sync && !prevNode.__virtualizerSkipFirstNotSync) {
+        prevNode.__virtualizerSkipFirstNotSync = true
+        return
+      }
     }
 
     const measuredItemSize = this.options.measureElement(node, this)
@@ -626,13 +634,12 @@ export class Virtualizer<
   )
 
   getOffsetForAlignment = (toOffset: number, align: ScrollAlignment) => {
-    const offset = this.scrollOffset
     const size = this.getSize()
 
     if (align === 'auto') {
-      if (toOffset <= offset) {
+      if (toOffset <= this.scrollOffset) {
         align = 'start'
-      } else if (toOffset >= offset + size) {
+      } else if (toOffset >= this.scrollOffset + size) {
         align = 'end'
       } else {
         align = 'start'
@@ -640,13 +647,25 @@ export class Virtualizer<
     }
 
     if (align === 'start') {
-      return toOffset
+      toOffset = toOffset
     } else if (align === 'end') {
-      return toOffset - size
+      toOffset = toOffset - size
     } else if (align === 'center') {
-      return toOffset - size / 2
+      toOffset = toOffset - size / 2
     }
-    return toOffset
+
+    const scrollSizeProp = this.options.horizontal
+      ? 'scrollWidth'
+      : 'scrollHeight'
+    const scrollSize = this.scrollElement
+      ? 'document' in this.scrollElement
+        ? this.scrollElement.document.documentElement[scrollSizeProp]
+        : this.scrollElement[scrollSizeProp]
+      : 0
+
+    const maxOffset = scrollSize - this.getSize()
+
+    return Math.max(Math.min(maxOffset, toOffset), 0)
   }
 
   scrollToOffset = (
@@ -724,16 +743,7 @@ export class Virtualizer<
           ? measurement.end + this.options.scrollPaddingEnd
           : measurement.start - this.options.scrollPaddingStart
 
-      const sizeProp = this.options.horizontal ? 'scrollWidth' : 'scrollHeight'
-      const scrollSize = this.scrollElement
-        ? 'document' in this.scrollElement
-          ? this.scrollElement.document.documentElement[sizeProp]
-          : this.scrollElement[sizeProp]
-        : 0
-
-      const maxOffset = scrollSize - this.getSize()
-
-      return Math.min(maxOffset, this.getOffsetForAlignment(toOffset, align))
+      return this.getOffsetForAlignment(toOffset, align)
     }
 
     const toOffset = getOffsetForIndexAndAlignment(measurement)