@tanstack/virtual-core 3.0.3 → 3.1.0

package/dist/esm/index.js

@@ -0,0 +1,645 @@
+import { memo, notUndefined, approxEqual } from "./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 observeElementRect = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const handler = (rect) => {
+    const { width, height } = rect;
+    cb({ width: Math.round(width), height: Math.round(height) });
+  };
+  handler(element.getBoundingClientRect());
+  const observer = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (entry == null ? void 0 : entry.borderBoxSize) {
+      const box = entry.borderBoxSize[0];
+      if (box) {
+        handler({ width: box.inlineSize, height: box.blockSize });
+        return;
+      }
+    }
+    handler(element.getBoundingClientRect());
+  });
+  observer.observe(element, { box: "border-box" });
+  return () => {
+    observer.unobserve(element);
+  };
+};
+const observeWindowRect = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const handler = () => {
+    cb({ width: element.innerWidth, height: element.innerHeight });
+  };
+  handler();
+  element.addEventListener("resize", handler, {
+    passive: true
+  });
+  return () => {
+    element.removeEventListener("resize", handler);
+  };
+};
+const observeElementOffset = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const handler = () => {
+    cb(element[instance.options.horizontal ? "scrollLeft" : "scrollTop"]);
+  };
+  handler();
+  element.addEventListener("scroll", handler, {
+    passive: true
+  });
+  return () => {
+    element.removeEventListener("scroll", handler);
+  };
+};
+const observeWindowOffset = (instance, cb) => {
+  const element = instance.scrollElement;
+  if (!element) {
+    return;
+  }
+  const handler = () => {
+    cb(element[instance.options.horizontal ? "scrollX" : "scrollY"]);
+  };
+  handler();
+  element.addEventListener("scroll", handler, {
+    passive: true
+  });
+  return () => {
+    element.removeEventListener("scroll", handler);
+  };
+};
+const measureElement = (element, entry, instance) => {
+  if (entry == null ? void 0 : entry.borderBoxSize) {
+    const box = entry.borderBoxSize[0];
+    if (box) {
+      const size = Math.round(
+        box[instance.options.horizontal ? "inlineSize" : "blockSize"]
+      );
+      return size;
+    }
+  }
+  return Math.round(
+    element.getBoundingClientRect()[instance.options.horizontal ? "width" : "height"]
+  );
+};
+const windowScroll = (offset, {
+  adjustments = 0,
+  behavior
+}, instance) => {
+  var _a, _b;
+  const toOffset = offset + adjustments;
+  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
+    [instance.options.horizontal ? "left" : "top"]: toOffset,
+    behavior
+  });
+};
+const elementScroll = (offset, {
+  adjustments = 0,
+  behavior
+}, instance) => {
+  var _a, _b;
+  const toOffset = offset + adjustments;
+  (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null ? void 0 : _b.call(_a, {
+    [instance.options.horizontal ? "left" : "top"]: toOffset,
+    behavior
+  });
+};
+class Virtualizer {
+  constructor(opts) {
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.isScrolling = false;
+    this.isScrollingTimeoutId = null;
+    this.scrollToIndexTimeoutId = null;
+    this.measurementsCache = [];
+    this.itemSizeCache = /* @__PURE__ */ new Map();
+    this.pendingMeasuredCacheIndexes = [];
+    this.scrollDirection = null;
+    this.scrollAdjustments = 0;
+    this.measureElementCache = /* @__PURE__ */ new Map();
+    this.observer = (() => {
+      let _ro = null;
+      const get = () => {
+        if (_ro) {
+          return _ro;
+        } else if (typeof ResizeObserver !== "undefined") {
+          return _ro = new ResizeObserver((entries) => {
+            entries.forEach((entry) => {
+              this._measureElement(entry.target, entry);
+            });
+          });
+        } else {
+          return null;
+        }
+      };
+      return {
+        disconnect: () => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.disconnect();
+        },
+        observe: (target) => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
+        },
+        unobserve: (target) => {
+          var _a;
+          return (_a = get()) == null ? void 0 : _a.unobserve(target);
+        }
+      };
+    })();
+    this.range = null;
+    this.setOptions = (opts2) => {
+      Object.entries(opts2).forEach(([key, value]) => {
+        if (typeof value === "undefined")
+          delete opts2[key];
+      });
+      this.options = {
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        onChange: () => {
+        },
+        measureElement,
+        initialRect: { width: 0, height: 0 },
+        scrollMargin: 0,
+        scrollingDelay: 150,
+        indexAttribute: "data-index",
+        initialMeasurementsCache: [],
+        lanes: 1,
+        ...opts2
+      };
+    };
+    this.notify = (sync) => {
+      var _a, _b;
+      (_b = (_a = this.options).onChange) == null ? void 0 : _b.call(_a, this, sync);
+    };
+    this.maybeNotify = memo(
+      () => {
+        this.calculateRange();
+        return [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ];
+      },
+      (isScrolling) => {
+        this.notify(isScrolling);
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "maybeNotify",
+        debug: () => this.options.debug,
+        initialDeps: [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ]
+      }
+    );
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach((d) => d());
+      this.unsubs = [];
+      this.scrollElement = null;
+    };
+    this._didMount = () => {
+      this.measureElementCache.forEach(this.observer.observe);
+      return () => {
+        this.observer.disconnect();
+        this.cleanup();
+      };
+    };
+    this._willUpdate = () => {
+      const scrollElement = this.options.getScrollElement();
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        this.scrollElement = scrollElement;
+        this._scrollToOffset(this.scrollOffset, {
+          adjustments: void 0,
+          behavior: void 0
+        });
+        this.unsubs.push(
+          this.options.observeElementRect(this, (rect) => {
+            this.scrollRect = rect;
+            this.maybeNotify();
+          })
+        );
+        this.unsubs.push(
+          this.options.observeElementOffset(this, (offset) => {
+            this.scrollAdjustments = 0;
+            if (this.scrollOffset === offset) {
+              return;
+            }
+            if (this.isScrollingTimeoutId !== null) {
+              clearTimeout(this.isScrollingTimeoutId);
+              this.isScrollingTimeoutId = null;
+            }
+            this.isScrolling = true;
+            this.scrollDirection = this.scrollOffset < offset ? "forward" : "backward";
+            this.scrollOffset = offset;
+            this.maybeNotify();
+            this.isScrollingTimeoutId = setTimeout(() => {
+              this.isScrollingTimeoutId = null;
+              this.isScrolling = false;
+              this.scrollDirection = null;
+              this.maybeNotify();
+            }, this.options.scrollingDelay);
+          })
+        );
+      }
+    };
+    this.getSize = () => {
+      return this.scrollRect[this.options.horizontal ? "width" : "height"];
+    };
+    this.memoOptions = memo(
+      () => [
+        this.options.count,
+        this.options.paddingStart,
+        this.options.scrollMargin,
+        this.options.getItemKey
+      ],
+      (count, paddingStart, scrollMargin, getItemKey) => {
+        this.pendingMeasuredCacheIndexes = [];
+        return {
+          count,
+          paddingStart,
+          scrollMargin,
+          getItemKey
+        };
+      },
+      {
+        key: false
+      }
+    );
+    this.getFurthestMeasurement = (measurements, index) => {
+      const furthestMeasurementsFound = /* @__PURE__ */ new Map();
+      const furthestMeasurements = /* @__PURE__ */ new Map();
+      for (let m = index - 1; m >= 0; m--) {
+        const measurement = measurements[m];
+        if (furthestMeasurementsFound.has(measurement.lane)) {
+          continue;
+        }
+        const 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((a, b) => {
+        if (a.end === b.end) {
+          return a.index - b.index;
+        }
+        return a.end - b.end;
+      })[0] : void 0;
+    };
+    this.getMeasurements = memo(
+      () => [this.memoOptions(), this.itemSizeCache],
+      ({ count, paddingStart, scrollMargin, getItemKey }, itemSizeCache) => {
+        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 furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
+          const start = furthestMeasurement ? furthestMeasurement.end : paddingStart + scrollMargin;
+          const measuredSize = itemSizeCache.get(key);
+          const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
+          const end = start + size;
+          const lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
+          measurements[i] = {
+            index: i,
+            start,
+            size,
+            end,
+            key,
+            lane
+          };
+        }
+        this.measurementsCache = measurements;
+        return measurements;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getMeasurements",
+        debug: () => this.options.debug
+      }
+    );
+    this.calculateRange = memo(
+      () => [this.getMeasurements(), this.getSize(), this.scrollOffset],
+      (measurements, outerSize, scrollOffset) => {
+        return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
+          measurements,
+          outerSize,
+          scrollOffset
+        }) : null;
+      },
+      {
+        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) => {
+        return range === null ? [] : rangeExtractor({
+          ...range,
+          overscan,
+          count
+        });
+      },
+      {
+        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.`
+        );
+        return -1;
+      }
+      return parseInt(indexStr, 10);
+    };
+    this._measureElement = (node, entry) => {
+      const item = this.measurementsCache[this.indexFromElement(node)];
+      if (!item || !node.isConnected) {
+        this.measureElementCache.forEach((cached, key) => {
+          if (cached === node) {
+            this.observer.unobserve(node);
+            this.measureElementCache.delete(key);
+          }
+        });
+        return;
+      }
+      const prevNode = this.measureElementCache.get(item.key);
+      if (prevNode !== node) {
+        if (prevNode) {
+          this.observer.unobserve(prevNode);
+        }
+        this.observer.observe(node);
+        this.measureElementCache.set(item.key, node);
+      }
+      const measuredItemSize = this.options.measureElement(node, entry, this);
+      this.resizeItem(item, measuredItemSize);
+    };
+    this.resizeItem = (item, size) => {
+      const itemSize = this.itemSizeCache.get(item.key) ?? item.size;
+      const delta = size - itemSize;
+      if (delta !== 0) {
+        if (item.start < this.scrollOffset + this.scrollAdjustments) {
+          if (process.env.NODE_ENV !== "production" && this.options.debug) {
+            console.info("correction", delta);
+          }
+          this._scrollToOffset(this.scrollOffset, {
+            adjustments: this.scrollAdjustments += delta,
+            behavior: void 0
+          });
+        }
+        this.pendingMeasuredCacheIndexes.push(item.index);
+        this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
+        this.notify(false);
+      }
+    };
+    this.measureElement = (node) => {
+      if (!node) {
+        return;
+      }
+      this._measureElement(node, void 0);
+    };
+    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: process.env.NODE_ENV !== "production" && "getIndexes",
+        debug: () => this.options.debug
+      }
+    );
+    this.getVirtualItemForOffset = (offset) => {
+      const measurements = this.getMeasurements();
+      return notUndefined(
+        measurements[findNearestBinarySearch(
+          0,
+          measurements.length - 1,
+          (index) => notUndefined(measurements[index]).start,
+          offset
+        )]
+      );
+    };
+    this.getOffsetForAlignment = (toOffset, align) => {
+      const 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;
+      }
+      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);
+    };
+    this.getOffsetForIndex = (index, align = "auto") => {
+      index = Math.max(0, Math.min(index, this.options.count - 1));
+      const 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];
+        }
+      }
+      const toOffset = align === "end" ? measurement.end + this.options.scrollPaddingEnd : measurement.start - this.options.scrollPaddingStart;
+      return [this.getOffsetForAlignment(toOffset, align), align];
+    };
+    this.isDynamicMode = () => this.measureElementCache.size > 0;
+    this.cancelScrollToIndex = () => {
+      if (this.scrollToIndexTimeoutId !== null) {
+        clearTimeout(this.scrollToIndexTimeoutId);
+        this.scrollToIndexTimeoutId = null;
+      }
+    };
+    this.scrollToOffset = (toOffset, { align = "start", 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: void 0,
+        behavior
+      });
+    };
+    this.scrollToIndex = (index, { align: initialAlign = "auto", 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."
+        );
+      }
+      const [toOffset, align] = this.getOffsetForIndex(index, initialAlign);
+      this._scrollToOffset(toOffset, { adjustments: void 0, behavior });
+      if (behavior !== "smooth" && this.isDynamicMode()) {
+        this.scrollToIndexTimeoutId = setTimeout(() => {
+          this.scrollToIndexTimeoutId = null;
+          const elementInDOM = this.measureElementCache.has(
+            this.options.getItemKey(index)
+          );
+          if (elementInDOM) {
+            const [toOffset2] = this.getOffsetForIndex(index, align);
+            if (!approxEqual(toOffset2, this.scrollOffset)) {
+              this.scrollToIndex(index, { align, behavior });
+            }
+          } else {
+            this.scrollToIndex(index, { align, behavior });
+          }
+        });
+      }
+    };
+    this.scrollBy = (delta, { 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: void 0,
+        behavior
+      });
+    };
+    this.getTotalSize = () => {
+      var _a;
+      const measurements = this.getMeasurements();
+      let end;
+      if (measurements.length === 0) {
+        end = this.options.paddingStart;
+      } else {
+        end = this.options.lanes === 1 ? ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0 : Math.max(
+          ...measurements.slice(-this.options.lanes).map((m) => m.end)
+        );
+      }
+      return end - this.options.scrollMargin + this.options.paddingEnd;
+    };
+    this._scrollToOffset = (offset, {
+      adjustments,
+      behavior
+    }) => {
+      this.options.scrollToFn(offset, { behavior, adjustments }, this);
+    };
+    this.measure = () => {
+      this.itemSizeCache = /* @__PURE__ */ 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((item) => {
+      this.itemSizeCache.set(item.key, item.size);
+    });
+    this.maybeNotify();
+  }
+}
+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) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+function calculateRange({
+  measurements,
+  outerSize,
+  scrollOffset
+}) {
+  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 };
+}
+export {
+  Virtualizer,
+  approxEqual,
+  defaultKeyExtractor,
+  defaultRangeExtractor,
+  elementScroll,
+  measureElement,
+  memo,
+  notUndefined,
+  observeElementOffset,
+  observeElementRect,
+  observeWindowOffset,
+  observeWindowRect,
+  windowScroll
+};
+//# sourceMappingURL=index.js.map