virtua 0.50.6 → 0.51.1

package/lib/solid/index.jsx

@@ -20,32 +20,19 @@ var createPromise = () => {
 	});
 	return [promise, resolve];
 };
-var once = (fn) => {
-	let cache;
-	return () => {
-		if (fn) {
-			cache = fn();
-			fn = undefined;
-		}
-		return cache;
-	};
-};
 
 //#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(() => {
-	if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
-		return true;
+var isIOS;
+var isIOSWebKit = () => {
+	if (isIOS == null) {
+		isIOS = /iP(hone|od|ad)/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 0;
 	}
-	return navigator.platform === "MacIntel" && navigator.maxTouchPoints > 0;
-});
-var isSmoothScrollSupported = /*#__PURE__*/ once(() => {
-	return "scrollBehavior" in getDocumentElement(document).style;
-});
+	return isIOS;
+};
 
 //#endregion
 //#region src/core/store.ts
@@ -90,12 +77,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) {
@@ -426,17 +409,27 @@ var createResizeObserver = (cb) => {
 		}
 	};
 };
-var normalizeScrollOffset = (offset, isNegative) => {
-	return isNegative ? -offset : offset;
-};
-var createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, updateScrollOffset, getStartOffset) => {
+var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMomentumJump, getStartOffset) => {
 	let lastScrollTime = 0;
 	let wheeling = false;
 	let touching = false;
 	let justTouchEnded = false;
 	let stillMomentumScrolling = false;
+	let cancelScroll;
 	let scrollEndTimer;
 	const now = Date.now;
+	const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
+	const scrollToKey = isHorizontal ? "left" : "top";
+	const normalizeScrollOffset = (offset) => {
+		return isRtl ? -offset : offset;
+	};
+	const getScrollOffset = () => normalizeScrollOffset(scroller[scrollOffsetKey]);
+	const scrollTo = (offset, smooth) => {
+		scroller.scrollTo({
+			[scrollToKey]: normalizeScrollOffset(offset),
+			behavior: smooth ? "smooth" : "instant"
+		});
+	};
 	const onScrollEnd = () => {
 		if (wheeling || touching) {
 			wheeling = false;
@@ -495,99 +488,90 @@ var createScrollObserver = (store, viewport, isHorizontal, getScrollOffset, upda
 		_fixScrollJump: () => {
 			const [jump, shift] = store._flushJump();
 			if (!jump) return;
-			updateScrollOffset(jump, shift, stillMomentumScrolling);
+			if (stillMomentumScrolling && onMomentumJump) {
+				onMomentumJump();
+			}
 			stillMomentumScrolling = false;
-			if (shift && store.$getViewportSize() > store.$getTotalSize()) {
-				store.$update(1, getScrollOffset());
+			const target = store.$getScrollOffset() + jump;
+			if (target <= 0 || target >= store.$getStartSpacerSize() + store.$getTotalSize() - store.$getViewportSize()) {
+				scrollTo(target);
+			} else {
+				scroller.scrollBy({
+					[scrollToKey]: normalizeScrollOffset(jump),
+					behavior: "instant"
+				});
 			}
-		}
-	};
-};
-
-//#endregion
-//#region src/core/driver.ts
-var createScrollScheduler = (store, initialized, scroll) => {
-	let cancelScroll;
-	return [async (getTargetOffset, smooth) => {
-		if (!await initialized()) {
-			return;
-		}
-		if (cancelScroll) {
-			cancelScroll();
-		}
-		let stopped;
-		let timerId;
-		let unsubscribe;
-		const isSmooth = smooth && isSmoothScrollSupported();
-		const stop = cancelScroll = () => {
-			stopped = true;
-			cancelTimeout(timerId);
-			unsubscribe && unsubscribe();
-		};
-		const onMeasured = () => {
-			if (stopped) {
-				return;
+			if (shift) {
+				cancelScroll && cancelScroll();
+				if (store.$getViewportSize() > store.$getTotalSize()) {
+					store.$update(1, getScrollOffset());
+				}
 			}
-			if (store.$getViewportSize()) {
-				cancelTimeout(timerId);
-				timerId = timeout(stop, 150);
+		},
+		_scroll: (getTargetOffset, smooth) => {
+			if (cancelScroll) {
+				cancelScroll();
 			}
-			if (isSmooth) {
-				for (let [i, end] = store.$getRange(0); i <= end; i++) {
-					if (store.$isUnmeasuredItem(i)) {
-						return;
+			let stopped;
+			let timerId;
+			let unsubscribe;
+			const stop = cancelScroll = () => {
+				stopped = true;
+				cancelTimeout(timerId);
+				unsubscribe && unsubscribe();
+			};
+			const onMeasured = () => {
+				if (stopped) {
+					return;
+				}
+				if (store.$getViewportSize()) {
+					cancelTimeout(timerId);
+					timerId = timeout(stop, 150);
+				}
+				if (smooth) {
+					for (let [i, end] = store.$getRange(0); i <= end; i++) {
+						if (store.$isUnmeasuredItem(i)) {
+							return;
+						}
 					}
+					stop();
 				}
-				stop();
-			}
-			store.$update(7);
-			scroll(getTargetOffset(), isSmooth);
-		};
-		const start = () => {
-			if (stopped) {
-				return;
-			}
-			let queued;
-			unsubscribe = store.$subscribe(2, () => {
-				if (queued) {
+				store.$update(7);
+				scrollTo(getTargetOffset(), smooth);
+			};
+			const start = () => {
+				if (stopped) {
 					return;
 				}
-				queued = true;
-				microtask(() => {
-					queued = false;
-					onMeasured();
+				let queued;
+				unsubscribe = store.$subscribe(2, () => {
+					if (queued) {
+						return;
+					}
+					queued = true;
+					microtask(() => {
+						queued = false;
+						onMeasured();
+					});
 				});
-			});
-			onMeasured();
-		};
-		if (isSmooth) {
-			store.$update(8, getTargetOffset());
-			microtask(start);
-		} else {
-			start();
+				onMeasured();
+			};
+			if (smooth) {
+				store.$update(8, getTargetOffset());
+				microtask(start);
+			} else {
+				start();
+			}
 		}
-	}, () => {
-		cancelScroll && cancelScroll();
-	}];
+	};
 };
+
+//#endregion
+//#region src/core/driver.ts
 var createContainerDriver = (store, isHorizontal) => {
 	let viewportElement;
 	let scrollObserver;
 	let initialized = createPromise();
-	let isNegative = false;
-	const scrollOffsetKey = isHorizontal ? "scrollLeft" : "scrollTop";
-	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;
-		}
-	});
 	const sizeKey = isHorizontal ? "width" : "height";
 	const mountedIndexes = new WeakMap();
 	const resizeObserver = createResizeObserver((entries) => {
@@ -610,22 +594,14 @@ var createContainerDriver = (store, isHorizontal) => {
 	return {
 		$observe(containerElement, viewport = containerElement.parentElement) {
 			resizeObserver._observe(viewportElement = viewport);
-			if (isHorizontal) {
-				isNegative = getComputedStyle(viewport).direction === "rtl";
-			}
-			scrollObserver = createScrollObserver(store, viewport, isHorizontal, () => normalizeScrollOffset(viewport[scrollOffsetKey], isNegative), (jump, shift, isMomentumScrolling) => {
-				if (isMomentumScrolling) {
-					const style = viewport.style;
-					const prev = style[overflowKey];
-					style[overflowKey] = "hidden";
-					timeout(() => {
-						style[overflowKey] = prev;
-					});
-				}
-				viewport[scrollOffsetKey] = normalizeScrollOffset(store.$getScrollOffset() + jump, isNegative);
-				if (shift) {
-					cancelScroll();
-				}
+			scrollObserver = createScrollObserver(store, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
+				const overflowKey = isHorizontal ? "overflowX" : "overflowY";
+				const style = viewport.style;
+				const prev = style[overflowKey];
+				style[overflowKey] = "hidden";
+				timeout(() => {
+					style[overflowKey] = prev;
+				});
 			});
 			initialized[1](true);
 		},
@@ -643,39 +619,33 @@ var createContainerDriver = (store, isHorizontal) => {
 				resizeObserver._unobserve(el);
 			};
 		},
-		$isNegative: () => isNegative,
-		$scroll: scheduleScroll,
+		async $scroll(getTargetOffset, smooth) {
+			if (await initialized[0]) {
+				scrollObserver._scroll(getTargetOffset, smooth);
+			}
+		},
 		$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;
-	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 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) {
@@ -686,46 +656,40 @@ var createWindowDriver = (store, isHorizontal) => {
 			store.$update(3, resizes);
 		}
 	});
-	const calcOffsetToViewport = (node, viewport, window, isHorizontal, offset = 0) => {
-		const offsetKey = isHorizontal ? "offsetLeft" : "offsetTop";
-		const offsetSum = offset + (isHorizontal && isNegative ? window.innerWidth - node[offsetKey] - node.offsetWidth : node[offsetKey]);
-		const parent = node.offsetParent;
-		if (node === viewport || !parent) {
-			return offsetSum;
-		}
-		return calcOffsetToViewport(parent, viewport, window, 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 isRtl = isHorizontal && getComputedStyle(viewport).direction === "rtl";
+			const calcOffsetToViewport = (node, viewport, until, isHorizontal, offset = 0) => {
+				const offsetKey = isHorizontal ? "offsetLeft" : "offsetTop";
+				const offsetSum = offset + (isRtl ? viewport.clientWidth - node[offsetKey] - node.offsetWidth : node[offsetKey]);
+				const parent = node.offsetParent;
+				if (node === until || !parent) {
+					return offsetSum;
+				}
+				return calcOffsetToViewport(parent, viewport, until, isHorizontal, offsetSum);
+			};
+			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";
-			}
-			scrollObserver = createScrollObserver(store, window, isHorizontal, () => normalizeScrollOffset(window[scrollOffsetKey], isNegative), (jump, shift) => {
-				if (shift) {
-					window.scroll({ [scrollToKey]: normalizeScrollOffset(store.$getScrollOffset() + jump, isNegative) });
-				} else {
-					window.scrollBy({ [scrollToKey]: normalizeScrollOffset(jump, isNegative) });
-				}
-			}, () => calcOffsetToViewport(container, document.body, window, isHorizontal));
+			scrollObserver = createScrollObserver(store, window, viewport, isHorizontal, isRtl, null, baseOffset);
 			initialized[1](true);
 		},
 		$dispose() {
 			cleanupOnWindowResize && cleanupOnWindowResize();
 			resizeObserver._dispose();
 			scrollObserver && scrollObserver._dispose();
-			containerElement = undefined;
+			viewportElement = undefined;
 			initialized[1](false);
 			initialized = createPromise();
 		},
@@ -737,18 +701,16 @@ var createWindowDriver = (store, isHorizontal) => {
 				resizeObserver._unobserve(el);
 			};
 		},
-		$isNegative: () => isNegative,
-		$scroll: scheduleScroll,
+		async $scroll(getTargetOffset, smooth) {
+			if (await initialized[0]) {
+				scrollObserver._scroll(getTargetOffset, smooth);
+			}
+		},
 		$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();
 		}
 	};
 };
@@ -757,21 +719,6 @@ var createContainerGridDriver = (rowStore, colStore) => {
 	let rowScrollObserver;
 	let colScrollObserver;
 	let initialized = createPromise();
-	let isNegative = false;
-	const [scheduleScrollX, cancelScrollX] = createScrollScheduler(colStore, () => initialized[0], (offset, smooth) => {
-		const opts = { left: normalizeScrollOffset(offset, isNegative) };
-		if (smooth) {
-			opts.behavior = "smooth";
-		}
-		viewportElement.scrollTo(opts);
-	});
-	const [scheduleScrollY, cancelScrollY] = createScrollScheduler(rowStore, () => initialized[0], (offset, smooth) => {
-		const opts = { top: offset };
-		if (smooth) {
-			opts.behavior = "smooth";
-		}
-		viewportElement.scrollTo(opts);
-	});
 	const mountedIndexes = new WeakMap();
 	const maybeCachedRowIndexes = new Set();
 	const maybeCachedColIndexes = new Set();
@@ -848,32 +795,20 @@ var createContainerGridDriver = (rowStore, colStore) => {
 			colStore.$update(3, widthResizes);
 		}
 	});
-	const observeAxisScroll = (store, isHorizontal, cancelScroll) => {
-		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) => {
-			if (isMomentumScrolling) {
+	return {
+		$observe(containerElement, viewport = containerElement.parentElement) {
+			resizeObserver._observe(viewportElement = viewport);
+			const isRtl = getComputedStyle(viewport).direction === "rtl";
+			const hackOverflow = (overflowKey) => () => {
 				const style = viewport.style;
 				const prev = style[overflowKey];
 				style[overflowKey] = "hidden";
 				timeout(() => {
 					style[overflowKey] = prev;
 				});
-			}
-			viewport[scrollOffsetKey] = normalizeScrollOffset(store.$getScrollOffset() + jump, negative);
-			if (shift) {
-				cancelScroll();
-			}
-		});
-	};
-	return {
-		$observe(containerElement, viewport = containerElement.parentElement) {
-			resizeObserver._observe(viewportElement = viewport);
-			isNegative = getComputedStyle(viewport).direction === "rtl";
-			rowScrollObserver = observeAxisScroll(rowStore, false, cancelScrollY);
-			colScrollObserver = observeAxisScroll(colStore, true, cancelScrollX);
+			};
+			rowScrollObserver = createScrollObserver(rowStore, viewport, viewport, false, false, hackOverflow("overflowY"));
+			colScrollObserver = createScrollObserver(colStore, viewport, viewport, true, isRtl, hackOverflow("overflowX"));
 			initialized[1](true);
 		},
 		$dispose() {
@@ -909,9 +844,16 @@ var createContainerGridDriver = (rowStore, colStore) => {
 			}
 			colStore.$update(3, cols);
 		},
-		$isNegative: () => isNegative,
-		$scrollX: scheduleScrollX,
-		$scrollY: scheduleScrollY,
+		async $scrollX(getTargetOffset, smooth) {
+			if (await initialized[0]) {
+				colScrollObserver._scroll(getTargetOffset, smooth);
+			}
+		},
+		async $scrollY(getTargetOffset, smooth) {
+			if (await initialized[0]) {
+				rowScrollObserver._scroll(getTargetOffset, smooth);
+			}
+		},
 		$effect() {
 			rowScrollObserver && rowScrollObserver._fixScrollJump();
 			colScrollObserver && colScrollObserver._fixScrollJump();
@@ -941,7 +883,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) => {
@@ -991,7 +933,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) {
@@ -999,7 +941,7 @@ var ListItem = (props) => {
 		}
 		return style;
 	});
-	return <Dynamic component={props._as} index={props._index} ref={elementRef} style={style()}>
+	return <Dynamic component={props._as} index={typeof props._as === "string" ? undefined : props._index} ref={elementRef} style={style()}>
       {props._children}
     </Dynamic>;
 };
@@ -1040,7 +982,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) {
@@ -1114,7 +1055,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();
@@ -1205,7 +1146,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) {
@@ -1264,7 +1204,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();