virtua 0.50.5 → 0.51.0

package/lib/solid/index.jsx

@@ -9,6 +9,7 @@ var sort = (arr) => {
 	return [...arr].sort((a, b) => a - b);
 };
 var timeout = setTimeout;
+var cancelTimeout = clearTimeout;
 var microtask = typeof queueMicrotask === "function" ? queueMicrotask : (fn) => {
 	Promise.resolve().then(fn);
 };
@@ -33,7 +34,6 @@ var once = (fn) => {
 //#endregion
 //#region src/core/environment.ts
 var isBrowser = typeof window !== "undefined";
-var getDocumentElement = (doc) => doc.documentElement;
 var getCurrentDocument = (node) => node.ownerDocument;
 var getCurrentWindow = (doc) => doc.defaultView;
 var isIOSWebKit = /*#__PURE__*/ once(() => {
@@ -42,9 +42,6 @@ var isIOSWebKit = /*#__PURE__*/ once(() => {
 	}
 	return navigator.platform === "MacIntel" && navigator.maxTouchPoints > 0;
 });
-var isSmoothScrollSupported = /*#__PURE__*/ once(() => {
-	return "scrollBehavior" in getDocumentElement(document).style;
-});
 
 //#endregion
 //#region src/core/store.ts
@@ -89,12 +86,8 @@ var createVirtualStore = ({ $getRange: getRange, $findIndex: findIndex, $getItem
 	const subscribers = new Set();
 	const getRelativeScrollOffset = () => scrollOffset - startSpacerSize;
 	const getVisibleOffset = () => getRelativeScrollOffset() + pendingJump + jump;
-	const getItemOffset = (index, fromEnd) => {
-		const offset = getOffset(index) - pendingJump;
-		if (fromEnd) {
-			return getTotalSize() - offset - getItemSize(index);
-		}
-		return offset;
+	const getItemOffset = (index) => {
+		return getOffset(index) - pendingJump;
 	};
 	const applyJump = (j) => {
 		if (j) {
@@ -425,42 +418,30 @@ var createResizeObserver = (cb) => {
 		}
 	};
 };
-var debounce = (fn, ms) => {
-	let id;
-	const cancel = () => {
-		if (id != null) {
-			clearTimeout(id);
-		}
-	};
-	const debouncedFn = () => {
-		cancel();
-		id = timeout(() => {
-			id = null;
-			fn();
-		}, ms);
-	};
-	debouncedFn._cancel = cancel;
-	return debouncedFn;
-};
 var normalizeScrollOffset = (offset, isNegative) => {
 	return isNegative ? -offset : offset;
 };
 var createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, updateScrollOffset, getStartOffset) => {
-	const now = Date.now;
 	let lastScrollTime = 0;
 	let wheeling = false;
 	let touching = false;
 	let justTouchEnded = false;
 	let stillMomentumScrolling = false;
-	const onScrollEnd = debounce(() => {
+	let scrollEndTimer;
+	const now = Date.now;
+	const onScrollEnd = () => {
 		if (wheeling || touching) {
 			wheeling = false;
-			onScrollEnd();
+			scheduleScrollEnd();
 			return;
 		}
 		justTouchEnded = false;
 		store.$update(2);
-	}, 150);
+	};
+	const scheduleScrollEnd = () => {
+		cancelTimeout(scrollEndTimer);
+		scrollEndTimer = timeout(onScrollEnd, 150);
+	};
 	const onScroll = () => {
 		lastScrollTime = now();
 		if (justTouchEnded) {
@@ -470,7 +451,7 @@ var createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, upda
 			store.$update(6, getStartOffset());
 		}
 		store.$update(1, getScrollOffset());
-		onScrollEnd();
+		scheduleScrollEnd();
 	};
 	const onWheel = ((e) => {
 		if (wheeling || !store.$isScrolling() || e.ctrlKey) {
@@ -501,7 +482,7 @@ var createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, upda
 			viewport.removeEventListener("wheel", onWheel);
 			viewport.removeEventListener("touchstart", onTouchStart);
 			viewport.removeEventListener("touchend", onTouchEnd);
-			onScrollEnd._cancel();
+			cancelTimeout(scrollEndTimer);
 		},
 		_fixScrollJump: () => {
 			const [jump, shift] = store._flushJump();
@@ -526,57 +507,55 @@ var createScrollScheduler = (store, initialized, scroll) => {
 		if (cancelScroll) {
 			cancelScroll();
 		}
-		const waitForMeasurement = () => {
-			const [promise, resolve] = createPromise();
-			cancelScroll = () => {
-				resolve(false);
-			};
+		let stopped;
+		let timerId;
+		let unsubscribe;
+		const stop = cancelScroll = () => {
+			stopped = true;
+			cancelTimeout(timerId);
+			unsubscribe && unsubscribe();
+		};
+		const onMeasured = () => {
+			if (stopped) {
+				return;
+			}
 			if (store.$getViewportSize()) {
-				timeout(cancelScroll, 150);
+				cancelTimeout(timerId);
+				timerId = timeout(stop, 150);
 			}
-			return [promise, store.$subscribe(2, () => {
-				resolve(true);
-			})];
-		};
-		if (smooth && isSmoothScrollSupported()) {
-			store.$update(8, getTargetOffset());
-			microtask(async () => {
-				while (true) {
-					let done = true;
-					for (let [i, end] = store.$getRange(); i <= end; i++) {
-						if (store.$isUnmeasuredItem(i)) {
-							done = false;
-							break;
-						}
-					}
-					if (done) {
-						break;
-					}
-					const [promise, unsubscribe] = waitForMeasurement();
-					try {
-						if (!await promise) {
-							return;
-						}
-					} finally {
-						unsubscribe();
-					}
-				}
-				store.$update(7);
-				scroll(getTargetOffset(), smooth);
-			});
-		} else {
-			while (true) {
-				const [promise, unsubscribe] = waitForMeasurement();
-				try {
-					store.$update(7);
-					scroll(getTargetOffset());
-					if (!await promise) {
+			if (smooth) {
+				for (let [i, end] = store.$getRange(0); i <= end; i++) {
+					if (store.$isUnmeasuredItem(i)) {
 						return;
 					}
-				} finally {
-					unsubscribe();
 				}
+				stop();
+			}
+			store.$update(7);
+			scroll(getTargetOffset(), smooth);
+		};
+		const start = () => {
+			if (stopped) {
+				return;
 			}
+			let queued;
+			unsubscribe = store.$subscribe(2, () => {
+				if (queued) {
+					return;
+				}
+				queued = true;
+				microtask(() => {
+					queued = false;
+					onMeasured();
+				});
+			});
+			onMeasured();
+		};
+		if (smooth) {
+			store.$update(8, getTargetOffset());
+			microtask(start);
+		} else {
+			start();
 		}
 	}, () => {
 		cancelScroll && cancelScroll();
@@ -586,19 +565,15 @@ var createContainerDriver = (store, isHorizontal) => {
 	let viewportElement;
 	let scrollObserver;
 	let initialized = createPromise();
-	let isNegative = false;
+	let isRtl = false;
 	const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
+	const scrollToKey = isHorizontal ? "left" : "top";
 	const overflowKey = isHorizontal ? "overflowX" : "overflowY";
 	const [scheduleScroll, cancelScroll] = createScrollScheduler(store, () => initialized[0], (offset, smooth) => {
-		offset = normalizeScrollOffset(offset, isNegative);
-		if (smooth) {
-			viewportElement.scrollTo({
-				[isHorizontal ? "left" : "top"]: offset,
-				behavior: "smooth"
-			});
-		} else {
-			viewportElement[scrollOffsetKey] = offset;
-		}
+		viewportElement.scrollTo({
+			[scrollToKey]: normalizeScrollOffset(offset, isRtl),
+			behavior: smooth ? "smooth" : "instant"
+		});
 	});
 	const sizeKey = isHorizontal ? "width" : "height";
 	const mountedIndexes = new WeakMap();
@@ -623,9 +598,9 @@ var createContainerDriver = (store, isHorizontal) => {
 		$observe(containerElement, viewport = containerElement.parentElement) {
 			resizeObserver._observe(viewportElement = viewport);
 			if (isHorizontal) {
-				isNegative = getComputedStyle(viewport).direction === "rtl";
+				isRtl = getComputedStyle(viewport).direction === "rtl";
 			}
-			scrollObserver = createScrollObserver(store, viewport, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], isNegative), (jump, shift, isMomentumScrolling) => {
+			scrollObserver = createScrollObserver(store, viewport, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], isRtl), (jump, shift, isMomentumScrolling) => {
 				if (isMomentumScrolling) {
 					const style = viewport.style;
 					const prev = style[overflowKey];
@@ -634,7 +609,18 @@ var createContainerDriver = (store, isHorizontal) => {
 						style[overflowKey] = prev;
 					});
 				}
-				viewport[scrollOffsetKey] = normalizeScrollOffset(store.$getScrollOffset() + jump, isNegative);
+				const target = store.$getScrollOffset() + jump;
+				if (target <= 0 || target >= store.$getStartSpacerSize() + store.$getTotalSize() - store.$getViewportSize()) {
+					viewport.scrollTo({
+						[scrollToKey]: normalizeScrollOffset(target, isRtl),
+						behavior: "instant"
+					});
+				} else {
+					viewport.scrollBy({
+						[scrollToKey]: normalizeScrollOffset(jump, isRtl),
+						behavior: "instant"
+					});
+				}
 				if (shift) {
 					cancelScroll();
 				}
@@ -655,39 +641,38 @@ var createContainerDriver = (store, isHorizontal) => {
 				resizeObserver._unobserve(el);
 			};
 		},
-		$isNegative: () => isNegative,
 		$scroll: scheduleScroll,
 		$effect() {
 			scrollObserver && scrollObserver._fixScrollJump();
 		},
-		$getBaseOffset: store.$getStartSpacerSize,
-		$getScrollbarSize: () => 0
+		$getBaseOffset: store.$getStartSpacerSize
 	};
 };
 var createWindowDriver = (store, isHorizontal) => {
-	let containerElement;
+	let viewportElement;
 	let scrollObserver;
 	let cleanupOnWindowResize;
+	let getBaseOffset;
+	let onViewportResize;
 	let initialized = createPromise();
-	let isNegative = false;
+	let isRtl = false;
+	const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
 	const scrollToKey = isHorizontal ? "left" : "top";
-	const [scheduleScroll] = createScrollScheduler(store, () => initialized[0], (offset, smooth) => {
-		offset = normalizeScrollOffset(offset, isNegative);
-		const window = getCurrentWindow(getCurrentDocument(containerElement));
-		if (smooth) {
-			window.scroll({
-				[scrollToKey]: offset,
-				behavior: "smooth"
-			});
-		} else {
-			window.scroll({ [scrollToKey]: offset });
-		}
+	const [scheduleScroll, cancelScroll] = createScrollScheduler(store, () => initialized[0], (offset, smooth) => {
+		viewportElement.scrollTo({
+			[scrollToKey]: normalizeScrollOffset(offset, isRtl),
+			behavior: smooth ? "smooth" : "instant"
+		});
 	});
 	const sizeKey = isHorizontal ? "width" : "height";
 	const mountedIndexes = new WeakMap();
 	const resizeObserver = createResizeObserver((entries) => {
 		const resizes = [];
 		for (const { target, contentRect } of entries) {
+			if (target === viewportElement) {
+				onViewportResize && onViewportResize();
+				continue;
+			}
 			if (!target.offsetParent) continue;
 			const index = mountedIndexes.get(target);
 			if (index != null) {
@@ -698,46 +683,58 @@ var createWindowDriver = (store, isHorizontal) => {
 			store.$update(3, resizes);
 		}
 	});
-	const calcOffsetToViewport = (node, viewport, window, isHorizontal, offset = 0) => {
+	const calcOffsetToViewport = (node, viewport, until, isHorizontal, offset = 0) => {
 		const offsetKey = isHorizontal ? "offsetLeft" : "offsetTop";
-		const offsetSum = offset + (isHorizontal && isNegative ? window.innerWidth - node[offsetKey] - node.offsetWidth : node[offsetKey]);
+		const offsetSum = offset + (isRtl ? viewport.clientWidth - node[offsetKey] - node.offsetWidth : node[offsetKey]);
 		const parent = node.offsetParent;
-		if (node === viewport || !parent) {
+		if (node === until || !parent) {
 			return offsetSum;
 		}
-		return calcOffsetToViewport(parent, viewport, window, isHorizontal, offsetSum);
+		return calcOffsetToViewport(parent, viewport, until, isHorizontal, offsetSum);
 	};
 	return {
 		$observe(container) {
-			containerElement = container;
-			const scrollOffsetKey = isHorizontal ? "scrollX" : "scrollY";
 			const document = getCurrentDocument(container);
 			const window = getCurrentWindow(document);
-			const onWindowResize = () => {
-				store.$update(4, window[isHorizontal ? "innerWidth" : "innerHeight"]);
+			const viewport = viewportElement = document.scrollingElement;
+			const baseOffset = getBaseOffset = () => {
+				return calcOffsetToViewport(container, viewport, document.body, isHorizontal);
+			};
+			const onWindowResize = onViewportResize = () => {
+				store.$update(4, viewport[isHorizontal ? "clientWidth" : "clientHeight"]);
 			};
 			window.addEventListener("resize", onWindowResize);
-			microtask(onWindowResize);
+			resizeObserver._observe(viewport);
 			cleanupOnWindowResize = () => {
 				window.removeEventListener("resize", onWindowResize);
 			};
 			if (isHorizontal) {
-				isNegative = getComputedStyle(getDocumentElement(document)).direction === "rtl";
+				isRtl = getComputedStyle(viewport).direction === "rtl";
 			}
-			scrollObserver = createScrollObserver(store, window, isHorizontal, () => normalizeScrollOffset(window[scrollOffsetKey], isNegative), (jump, shift) => {
-				if (shift) {
-					window.scroll({ [scrollToKey]: normalizeScrollOffset(store.$getScrollOffset() + jump, isNegative) });
+			scrollObserver = createScrollObserver(store, window, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], isRtl), (jump, shift) => {
+				const target = store.$getScrollOffset() + jump;
+				if (target <= 0 || target >= store.$getStartSpacerSize() + store.$getTotalSize() - store.$getViewportSize()) {
+					viewport.scrollTo({
+						[scrollToKey]: normalizeScrollOffset(target, isRtl),
+						behavior: "instant"
+					});
 				} else {
-					window.scrollBy({ [scrollToKey]: normalizeScrollOffset(jump, isNegative) });
+					viewport.scrollBy({
+						[scrollToKey]: normalizeScrollOffset(jump, isRtl),
+						behavior: "instant"
+					});
 				}
-			}, () => calcOffsetToViewport(container, document.body, window, isHorizontal));
+				if (shift) {
+					cancelScroll();
+				}
+			}, baseOffset);
 			initialized[1](true);
 		},
 		$dispose() {
 			cleanupOnWindowResize && cleanupOnWindowResize();
 			resizeObserver._dispose();
 			scrollObserver && scrollObserver._dispose();
-			containerElement = undefined;
+			viewportElement = undefined;
 			initialized[1](false);
 			initialized = createPromise();
 		},
@@ -749,18 +746,12 @@ var createWindowDriver = (store, isHorizontal) => {
 				resizeObserver._unobserve(el);
 			};
 		},
-		$isNegative: () => isNegative,
 		$scroll: scheduleScroll,
 		$effect() {
 			scrollObserver && scrollObserver._fixScrollJump();
 		},
 		$getBaseOffset() {
-			const document = getCurrentDocument(containerElement);
-			return calcOffsetToViewport(containerElement, document.body, getCurrentWindow(document), isHorizontal);
-		},
-		$getScrollbarSize() {
-			const html = getDocumentElement(getCurrentDocument(containerElement));
-			return store.$getViewportSize() - (isHorizontal ? html.clientWidth : html.clientHeight);
+			return getBaseOffset();
 		}
 	};
 };
@@ -769,20 +760,18 @@ var createContainerGridDriver = (rowStore, colStore) => {
 	let rowScrollObserver;
 	let colScrollObserver;
 	let initialized = createPromise();
-	let isNegative = false;
+	let isRtl = false;
 	const [scheduleScrollX, cancelScrollX] = createScrollScheduler(colStore, () => initialized[0], (offset, smooth) => {
-		const opts = { left: normalizeScrollOffset(offset, isNegative) };
-		if (smooth) {
-			opts.behavior = "smooth";
-		}
-		viewportElement.scrollTo(opts);
+		viewportElement.scrollTo({
+			left: normalizeScrollOffset(offset, isRtl),
+			behavior: smooth ? "smooth" : "instant"
+		});
 	});
 	const [scheduleScrollY, cancelScrollY] = createScrollScheduler(rowStore, () => initialized[0], (offset, smooth) => {
-		const opts = { top: offset };
-		if (smooth) {
-			opts.behavior = "smooth";
-		}
-		viewportElement.scrollTo(opts);
+		viewportElement.scrollTo({
+			top: offset,
+			behavior: smooth ? "smooth" : "instant"
+		});
 	});
 	const mountedIndexes = new WeakMap();
 	const maybeCachedRowIndexes = new Set();
@@ -864,8 +853,8 @@ var createContainerGridDriver = (rowStore, colStore) => {
 		const viewport = viewportElement;
 		const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
 		const overflowKey = isHorizontal ? "overflowX" : "overflowY";
-		const negative = isHorizontal && isNegative;
-		return createScrollObserver(store, viewport, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], negative), (jump, shift, isMomentumScrolling) => {
+		const rtl = isHorizontal && isRtl;
+		return createScrollObserver(store, viewport, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], rtl), (jump, shift, isMomentumScrolling) => {
 			if (isMomentumScrolling) {
 				const style = viewport.style;
 				const prev = style[overflowKey];
@@ -874,7 +863,18 @@ var createContainerGridDriver = (rowStore, colStore) => {
 					style[overflowKey] = prev;
 				});
 			}
-			viewport[scrollOffsetKey] = normalizeScrollOffset(store.$getScrollOffset() + jump, negative);
+			const target = store.$getScrollOffset() + jump;
+			if (target <= 0 || target >= store.$getStartSpacerSize() + store.$getTotalSize() - store.$getViewportSize()) {
+				viewport.scrollTo({
+					[isHorizontal ? "left" : "top"]: normalizeScrollOffset(target, rtl),
+					behavior: "instant"
+				});
+			} else {
+				viewport.scrollBy({
+					[isHorizontal ? "left" : "top"]: normalizeScrollOffset(jump, rtl),
+					behavior: "instant"
+				});
+			}
 			if (shift) {
 				cancelScroll();
 			}
@@ -883,7 +883,7 @@ var createContainerGridDriver = (rowStore, colStore) => {
 	return {
 		$observe(containerElement, viewport = containerElement.parentElement) {
 			resizeObserver._observe(viewportElement = viewport);
-			isNegative = getComputedStyle(viewport).direction === "rtl";
+			isRtl = getComputedStyle(viewport).direction === "rtl";
 			rowScrollObserver = observeAxisScroll(rowStore, false, cancelScrollY);
 			colScrollObserver = observeAxisScroll(colStore, true, cancelScrollX);
 			initialized[1](true);
@@ -921,7 +921,6 @@ var createContainerGridDriver = (rowStore, colStore) => {
 			}
 			colStore.$update(3, cols);
 		},
-		$isNegative: () => isNegative,
 		$scrollX: scheduleScrollX,
 		$scrollY: scheduleScrollY,
 		$effect() {
@@ -953,7 +952,7 @@ var scrollToIndex = (driver, store, index, { align, smooth, offset = 0 } = {}) =
 		}
 	}
 	driver.$scroll(() => {
-		return offset + driver.$getBaseOffset() + store.$getItemOffset(index) + (align === "end" ? store.$getItemSize(index) - (store.$getViewportSize() - driver.$getScrollbarSize()) : align === "center" ? (store.$getItemSize(index) - (store.$getViewportSize() - driver.$getScrollbarSize())) / 2 : 0);
+		return offset + driver.$getBaseOffset() + store.$getItemOffset(index) + (align === "end" ? store.$getItemSize(index) - store.$getViewportSize() : align === "center" ? (store.$getItemSize(index) - store.$getViewportSize()) / 2 : 0);
 	}, smooth);
 };
 var gridScrollTo = (driver, row, col) => {
@@ -1003,7 +1002,7 @@ var ListItem = (props) => {
 			position: hide && isSSR ? undefined : "absolute",
 			[isHorizontal ? "height" : "width"]: "100%",
 			[isHorizontal ? "top" : "left"]: "0px",
-			[isHorizontal ? "left" : "top"]: props._offset + "px",
+			[isHorizontal ? "inset-inline-start" : "top"]: props._offset + "px",
 			visibility: !hide || isSSR ? undefined : "hidden"
 		};
 		if (isHorizontal) {
@@ -1052,7 +1051,6 @@ var Virtualizer = (props) => {
 	});
 	const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
 	const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
-	const isNegative = createMemo(() => stateVersion() && driver.$isNegative());
 	onMount(() => {
 		setIsSSR(false);
 		if (props.ref) {
@@ -1126,7 +1124,7 @@ var Virtualizer = (props) => {
 	const renderItem = (data, index) => {
 		const offset = createMemo(() => {
 			stateVersion();
-			return store.$getItemOffset(index(), isNegative());
+			return store.$getItemOffset(index());
 		});
 		const hide = createMemo(() => {
 			stateVersion();
@@ -1217,7 +1215,6 @@ var WindowVirtualizer = (props) => {
 	});
 	const isScrolling = createMemo(() => stateVersion() && store.$isScrolling());
 	const totalSize = createMemo(() => stateVersion() && store.$getTotalSize());
-	const isNegative = createMemo(() => stateVersion() && driver.$isNegative());
 	onMount(() => {
 		setIsSSR(false);
 		if (props.ref) {
@@ -1276,7 +1273,7 @@ var WindowVirtualizer = (props) => {
 		const itemIndex = createMemo(() => range()[0] + index());
 		const offset = createMemo(() => {
 			stateVersion();
-			return store.$getItemOffset(itemIndex(), isNegative());
+			return store.$getItemOffset(itemIndex());
 		});
 		const hide = createMemo(() => {
 			stateVersion();