virtua 0.50.6 → 0.51.0

package/lib/solid/index.jsx

@@ -34,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(() => {
@@ -43,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
@@ -90,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) {
@@ -518,7 +510,6 @@ var createScrollScheduler = (store, initialized, scroll) => {
 		let stopped;
 		let timerId;
 		let unsubscribe;
-		const isSmooth = smooth && isSmoothScrollSupported();
 		const stop = cancelScroll = () => {
 			stopped = true;
 			cancelTimeout(timerId);
@@ -532,7 +523,7 @@ var createScrollScheduler = (store, initialized, scroll) => {
 				cancelTimeout(timerId);
 				timerId = timeout(stop, 150);
 			}
-			if (isSmooth) {
+			if (smooth) {
 				for (let [i, end] = store.$getRange(0); i <= end; i++) {
 					if (store.$isUnmeasuredItem(i)) {
 						return;
@@ -541,7 +532,7 @@ var createScrollScheduler = (store, initialized, scroll) => {
 				stop();
 			}
 			store.$update(7);
-			scroll(getTargetOffset(), isSmooth);
+			scroll(getTargetOffset(), smooth);
 		};
 		const start = () => {
 			if (stopped) {
@@ -560,7 +551,7 @@ var createScrollScheduler = (store, initialized, scroll) => {
 			});
 			onMeasured();
 		};
-		if (isSmooth) {
+		if (smooth) {
 			store.$update(8, getTargetOffset());
 			microtask(start);
 		} else {
@@ -574,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();
@@ -611,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];
@@ -622,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();
 				}
@@ -643,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) {
@@ -686,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();
 		},
@@ -737,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();
 		}
 	};
 };
@@ -757,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();
@@ -852,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];
@@ -862,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();
 			}
@@ -871,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);
@@ -909,7 +921,6 @@ var createContainerGridDriver = (rowStore, colStore) => {
 			}
 			colStore.$update(3, cols);
 		},
-		$isNegative: () => isNegative,
 		$scrollX: scheduleScrollX,
 		$scrollY: scheduleScrollY,
 		$effect() {
@@ -941,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) => {
@@ -991,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) {
@@ -1040,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) {
@@ -1114,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();
@@ -1205,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) {
@@ -1264,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();