virtua 0.51.3 → 0.52.0

package/lib/solid/index.jsx

@@ -3,10 +3,11 @@ import { Dynamic, isServer } from "solid-js/web";
 
 //#region src/core/utils.ts
 var NULL = null;
+var EMPTY = [];
 var { min, max, abs, floor } = Math;
 var clamp = (value, minValue, maxValue) => min(maxValue, max(minValue, value));
 var sort = (arr) => {
-	return [...arr].sort((a, b) => a - b);
+	return arr.sort((a, b) => a - b);
 };
 var timeout = setTimeout;
 var cancelTimeout = clearTimeout;
@@ -51,6 +52,7 @@ var ACTION_ITEMS_LENGTH_CHANGE = 5;
 var ACTION_START_OFFSET_CHANGE = 6;
 var ACTION_MANUAL_SCROLL = 7;
 var ACTION_BEFORE_MANUAL_SMOOTH_SCROLL = 8;
+var ACTION_RELAYOUT = 9;
 var UPDATE_VIRTUAL_STATE = 1;
 var UPDATE_SIZE_EVENT = 2;
 var UPDATE_SCROLL_EVENT = 4;
@@ -250,6 +252,11 @@ var createVirtualStore = ({ $getRange: getRange, $findIndex: findIndex, $getItem
 					_scrollMode = SCROLL_BY_MANUAL_SCROLL;
 					break;
 				}
+				case 9: {
+					applyJump(payload);
+					mutated = 1 + 2;
+					break;
+				}
 				case 8: {
 					_frozenRange = getRange(payload, payload + viewportSize);
 					mutated = 1;
@@ -382,10 +389,10 @@ var createListLayout = (length, itemSize, snapshot) => {
 				}
 			});
 			computedOffsetIndex = -1;
-			const sorted = sort(measuredSizes);
-			const len = sorted.length;
+			sort(measuredSizes);
+			const len = measuredSizes.length;
 			const mid = len / 2 | 0;
-			const median = len % 2 === 0 ? (sorted[mid - 1] + sorted[mid]) / 2 : sorted[mid];
+			const median = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
 			const prevDefaultItemSize = defaultItemSize;
 			return ((defaultItemSize = median) - prevDefaultItemSize) * max(startIndex - measuredCountBeforeStart, 0);
 		},
@@ -393,6 +400,459 @@ var createListLayout = (length, itemSize, snapshot) => {
 	};
 };
 
+//#endregion
+//#region src/core/layouts/grid.ts
+var getAxisLength = (axis) => typeof axis === "number" ? axis : axis.length;
+var getAxisItem = (axis, index) => typeof axis === "number" ? index : axis[index];
+var createGridLayout = (axis, size, gap = 0) => {
+	if (typeof size === "number") {
+		let length = getAxisLength(axis);
+		let itemSize = size;
+		const findIndex = (offset) => itemSize + gap ? clamp(floor(offset / (itemSize + gap)), 0, length - 1) : 0;
+		return {
+			$getRange: (startOffset, endOffset) => [findIndex(startOffset), findIndex(endOffset)],
+			$findIndex: findIndex,
+			$getItemOffset: (index) => index * (itemSize + gap),
+			$getItemSize: () => itemSize,
+			$setItemSize: () => false,
+			$isSizeEqual: () => false,
+			$getTotalSize: () => length ? length * (itemSize + gap) - gap : 0,
+			$getLength: () => length,
+			$setLength: (nextLength) => {
+				length = nextLength;
+				return 0;
+			},
+			$isMeasurable: () => false,
+			$setAxis: (_axis, nextSize, scrollOffset) => {
+				if (typeof nextSize !== "number" || nextSize === itemSize) {
+					return;
+				}
+				const jump = findIndex(scrollOffset) * (nextSize - itemSize);
+				itemSize = nextSize;
+				return jump;
+			}
+		};
+	}
+	const isAuto = size === "auto";
+	let currentAxis;
+	let currentSize = size;
+	const length = getAxisLength(axis);
+	const autos = [];
+	const inner = createListLayout(length, undefined, [[], 40 + gap]);
+	const isMeasurable = (index) => isAuto || !!autos[index];
+	const layout = {
+		$getRange: inner.$getRange,
+		$findIndex: inner.$findIndex,
+		$getItemOffset: inner.$getItemOffset,
+		$getItemSize: (index) => inner.$getItemSize(index) - gap,
+		$setItemSize: (index, s) => isMeasurable(index) && inner.$setItemSize(index, s + gap),
+		$isSizeEqual: (index, s) => inner.$isSizeEqual(index, s + gap),
+		$getTotalSize: () => inner.$getLength() ? inner.$getTotalSize() - gap : 0,
+		$getLength: inner.$getLength,
+		$setLength: inner.$setLength,
+		$estimateDefaultSize: isAuto ? inner.$estimateDefaultSize : undefined,
+		$isMeasurable: isMeasurable,
+		$setAxis: (nextAxis, requestedSize, scrollOffset, mutable) => {
+			if (isAuto) {
+				return;
+			}
+			const nextSize = typeof requestedSize === "number" || requestedSize === "auto" ? currentSize : requestedSize;
+			const length = inner.$getLength();
+			if (!mutable && nextAxis === currentAxis && nextSize === currentSize && length === autos.length) {
+				return;
+			}
+			currentAxis = nextAxis;
+			currentSize = nextSize;
+			autos.length = length;
+			const anchorIndex = inner.$findIndex(scrollOffset);
+			const prevOffset = inner.$getItemOffset(anchorIndex);
+			let changed;
+			for (let i = 0; i < length; i++) {
+				const item = nextAxis[i];
+				const itemSize = item !== null && typeof item === "object" ? item[nextSize] : null;
+				const isAutoItem = typeof itemSize !== "number";
+				if (!isAutoItem || !autos[i]) {
+					autos[i] = isAutoItem;
+					const target = isAutoItem ? -1 : itemSize + gap;
+					if (!inner.$isSizeEqual(i, target)) {
+						inner.$setItemSize(i, target);
+						changed = true;
+					}
+				}
+			}
+			if (!changed) {
+				return;
+			}
+			return inner.$getItemOffset(anchorIndex) - prevOffset;
+		}
+	};
+	layout.$setAxis(axis, size, 0);
+	return layout;
+};
+
+//#endregion
+//#region src/core/grid.ts
+var updateGridAxis = (store, layout, axis, size, mutable) => {
+	const length = getAxisLength(axis);
+	if (length !== store.$getItemsLength()) {
+		store.$update(5, [length]);
+	}
+	const jump = layout.$setAxis(axis, size, store.$getScrollOffset() - store.$getItemOffset(0), mutable);
+	if (jump != null) {
+		store.$update(9, jump);
+	}
+};
+var rowStatesCache = /*#__PURE__*/ new WeakMap();
+var hasTrackIn = (extras, from, to, pinnedStart, start, end, trailStart) => {
+	if (from < pinnedStart || max(from, start) < min(to, end + 1) || trailStart < to) {
+		return true;
+	}
+	for (const i of extras) {
+		if (i >= from && i < to) {
+			return true;
+		}
+	}
+	return false;
+};
+var getSectionStarts = (sectionRows, pinnedStart, trailStart) => {
+	const starts = [];
+	for (const rowIndex of sectionRows) {
+		if (rowIndex >= pinnedStart && rowIndex < trailStart) {
+			starts.push(rowIndex);
+		}
+	}
+	return sort(starts);
+};
+var getSection = (starts, rowIndex, trailStart) => {
+	if (rowIndex >= trailStart) {
+		return -1;
+	}
+	let lo = 0;
+	let hi = starts.length;
+	while (lo < hi) {
+		const mid = lo + hi >> 1;
+		if (starts[mid] <= rowIndex) {
+			lo = mid + 1;
+		} else {
+			hi = mid;
+		}
+	}
+	return lo - 1;
+};
+var addSectionHeader = (extras, sectionStarts, rowIndex, trailStart) => {
+	const section = getSection(sectionStarts, rowIndex, trailStart);
+	if (section >= 0) {
+		extras.push(sectionStarts[section]);
+	}
+};
+var getTrackIndexes = (extras, count, pinnedStart, start, end, trailStart) => {
+	const indexes = [];
+	for (let i = 0; i < pinnedStart; i++) {
+		indexes.push(i);
+	}
+	const extrasLength = extras.length;
+	let e = 0;
+	let last = pinnedStart - 1;
+	for (; e < extrasLength && extras[e] < start; e++) {
+		const i = extras[e];
+		if (i > last) {
+			indexes.push(i);
+			last = i;
+		}
+	}
+	for (let i = start; i <= end; i++) {
+		indexes.push(i);
+	}
+	last = end;
+	for (; e < extrasLength && extras[e] < trailStart; e++) {
+		const i = extras[e];
+		if (i > last) {
+			indexes.push(i);
+			last = i;
+		}
+	}
+	for (let i = trailStart; i < count; i++) {
+		indexes.push(i);
+	}
+	return indexes;
+};
+var getSpanRowEnd = (span, rowCount) => min(span.rowIndex + (span.rowSpan || 1), rowCount);
+var getSpanColEnd = (span, colCount) => min(span.colIndex + (span.colSpan || 1), colCount);
+var getTemplate = (layout, indexes, measured, sortedCuts, measuredSize, count) => {
+	const indexesLength = indexes.length;
+	const cutsLength = sortedCuts.length;
+	let template = "[l0]";
+	let line = 0;
+	let i = 0;
+	let c = 0;
+	while (i < indexesLength || c < cutsLength) {
+		const index = i < indexesLength ? indexes[i] : count;
+		const cut = c < cutsLength ? sortedCuts[c] : count;
+		if (cut <= line) {
+			c++;
+		} else {
+			let to;
+			let size;
+			if (index === line) {
+				to = line + 1;
+				const m = measured[i];
+				size = m == null ? layout.$getItemSize(line) + "px" : m ? measuredSize : "minmax(" + layout.$getItemSize(line) + "px,auto)";
+				i++;
+			} else {
+				to = min(index, cut);
+				size = "minmax(" + (layout.$getItemOffset(to - 1) + layout.$getItemSize(to - 1) - layout.$getItemOffset(line)) + "px,auto)";
+			}
+			template += " " + size + " [l" + to + "]";
+			line = to;
+		}
+	}
+	if (line < count) {
+		template += " minmax(" + (layout.$getTotalSize() - layout.$getItemOffset(line)) + "px,auto) [l" + count + "]";
+	}
+	return template;
+};
+var gridStyleToString = (style) => {
+	let css = "";
+	for (const key in style) {
+		css += key.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase()) + ":" + style[key] + ";";
+	}
+	return css;
+};
+var createGridPlan = (rowLayout, colLayout, rowRange, colRange, headerRows = 0, sectionRows = EMPTY, footerRows = 0, headerCols = 0, footerCols = 0, spans = EMPTY, kept = EMPTY, sortedCell) => {
+	const rowCount = rowLayout.$getLength();
+	const colCount = colLayout.$getLength();
+	const rowPinnedStart = min(headerRows, rowCount);
+	const rowTrailStart = max(rowCount - footerRows, rowPinnedStart);
+	const colPinnedStart = min(headerCols, colCount);
+	const colTrailStart = max(colCount - footerCols, colPinnedStart);
+	const rowRangeStart = clamp(rowRange[0], rowPinnedStart, rowTrailStart);
+	const rowRangeEnd = min(rowRange[1], rowTrailStart - 1);
+	const colRangeStart = clamp(colRange[0], colPinnedStart, colTrailStart);
+	const colRangeEnd = min(colRange[1], colTrailStart - 1);
+	const sectionStarts = getSectionStarts(sectionRows, rowPinnedStart, rowTrailStart);
+	const rowHeaderCol = max(colPinnedStart - 1, 0);
+	const extraRows = [];
+	const extraCols = [];
+	const extraCells = [];
+	for (const cell of kept) {
+		if (cell.rowIndex < rowCount && cell.colIndex < colCount) {
+			extraCells.push(cell);
+		}
+	}
+	const sectionLength = sectionStarts.length;
+	if (sectionLength) {
+		addSectionHeader(extraRows, sectionStarts, rowRangeStart, rowTrailStart);
+		extraCols.push(rowHeaderCol);
+	}
+	let waiting = spans;
+	let l = 0;
+	do {
+		for (; l < extraCells.length; l++) {
+			const { rowIndex, colIndex } = extraCells[l];
+			extraRows.push(rowIndex);
+			addSectionHeader(extraRows, sectionStarts, rowIndex, rowTrailStart);
+			extraCols.push(colIndex);
+		}
+		const rest = [];
+		for (const span of waiting) {
+			const row = span.rowIndex;
+			const col = span.colIndex;
+			const rowTo = getSpanRowEnd(span, rowCount);
+			const colTo = getSpanColEnd(span, colCount);
+			if (row < rowCount && col < colCount && (rowTo - row > 1 || colTo - col > 1)) {
+				if (hasTrackIn(extraRows, row, rowTo, rowPinnedStart, rowRangeStart, rowRangeEnd, rowTrailStart)) {
+					if (hasTrackIn(extraCols, col, colTo, colPinnedStart, colRangeStart, colRangeEnd, colTrailStart)) {
+						extraCells.push(span);
+					} else {
+						const section = getSection(sectionStarts, rowTo - 1, rowTrailStart);
+						if (row < rowPinnedStart || section >= 0 && sectionStarts[section] >= row) {
+							rest.push(span);
+						}
+					}
+				} else if (col < colPinnedStart) {
+					rest.push(span);
+				}
+			}
+		}
+		waiting = rest;
+	} while (l < extraCells.length);
+	sort(extraRows);
+	sort(extraCols);
+	const rowIndexes = getTrackIndexes(extraRows, rowCount, rowPinnedStart, rowRangeStart, rowRangeEnd, rowTrailStart);
+	const cols = getTrackIndexes(extraCols, colCount, colPinnedStart, colRangeStart, colRangeEnd, colTrailStart);
+	const rowLength = rowIndexes.length;
+	const colLength = cols.length;
+	const spanCells = new Map();
+	const rowCuts = [];
+	const colCuts = [];
+	for (const span of extraCells) {
+		const rowTo = getSpanRowEnd(span, rowCount);
+		const colTo = getSpanColEnd(span, colCount);
+		rowCuts.push(rowTo);
+		colCuts.push(colTo);
+		const colStart = cols.indexOf(span.colIndex);
+		for (let i = rowIndexes.indexOf(span.rowIndex); i < rowLength && rowIndexes[i] < rowTo; i++) {
+			const rowKey = rowIndexes[i] * colCount;
+			for (let j = colStart; j < colLength && cols[j] < colTo; j++) {
+				spanCells.set(rowKey + cols[j], span);
+			}
+		}
+	}
+	const measuredCols = [];
+	for (const colIndex of cols) {
+		measuredCols.push(colLayout.$isMeasurable(colIndex) ? false : null);
+	}
+	const measuredRows = [];
+	const stickyTop = rowLayout.$getItemOffset(rowPinnedStart);
+	const groups = [];
+	let groupRows = groups;
+	const prev = rowStatesCache.get(rowLayout);
+	const rowStates = new Map();
+	for (const rowIndex of rowIndexes) {
+		const pinnedTop = rowIndex < rowPinnedStart;
+		const pinnedBottom = rowIndex >= rowTrailStart;
+		const rowInRangeOrPinnedToEnd = pinnedBottom || rowIndex >= rowRangeStart && rowIndex <= rowRangeEnd;
+		const section = getSection(sectionStarts, rowIndex, rowTrailStart);
+		const groupStart = pinnedTop ? 0 : pinnedBottom ? rowTrailStart : section < 0 ? -1 : sectionStarts[section];
+		if (rowIndex === groupStart) {
+			const groupEnd = pinnedTop ? rowPinnedStart : pinnedBottom ? rowCount : section + 1 < sectionLength ? sectionStarts[section + 1] : rowTrailStart;
+			rowCuts.push(groupEnd);
+			const rows = [];
+			groups.push({
+				$key: pinnedTop ? -1 : pinnedBottom ? -2 : -3 - groupStart,
+				$rows: rows,
+				$style: getBoxStyle(groupStart, groupEnd, pinnedTop || pinnedBottom ? 0 : null, pinnedBottom ? "bottom" : "top", 4)
+			});
+			groupRows = rows;
+		} else if (groupStart < 0) {
+			groupRows = groups;
+		}
+		const isSectionHeaderRow = section >= 0 && rowIndex === groupStart;
+		const rowTop = isSectionHeaderRow ? stickyTop : null;
+		const rowKey = rowIndex * colCount;
+		const prevRow = prev && prev.get(rowIndex);
+		const prevCells = prevRow && prevRow.$cells;
+		const rowCells = [];
+		let p = 0;
+		let measuredRow = rowLayout.$isMeasurable(rowIndex) ? false : null;
+		let rowEnd = rowIndex + 1;
+		let changed = false;
+		for (let i = 0; i < colLength; i++) {
+			const colIndex = cols[i];
+			const startPinned = colIndex < colPinnedStart;
+			const endPinned = colIndex >= colTrailStart;
+			const colInRangeOrPinnedToEnd = endPinned || colIndex >= colRangeStart && colIndex <= colRangeEnd;
+			const span = spanCells.get(rowKey + colIndex);
+			if (span ? span.rowIndex !== rowIndex || span.colIndex !== colIndex : !(rowInRangeOrPinnedToEnd && colInRangeOrPinnedToEnd) && !pinnedTop && !isSectionHeaderRow && !startPinned) {
+				continue;
+			}
+			const rowTo = span ? getSpanRowEnd(span, rowCount) : rowIndex + 1;
+			const colTo = span ? getSpanColEnd(span, colCount) : colIndex + 1;
+			const spansRows = rowTo - rowIndex > 1;
+			const spansCols = colTo - colIndex > 1;
+			const spanning = spansRows || spansCols;
+			const rowSpan = spanning ? rowTo - rowIndex : undefined;
+			const colSpan = spanning ? colTo - colIndex : undefined;
+			let measureRowIndex;
+			let measureColIndex;
+			rowEnd = max(rowEnd, rowTo);
+			const stickyStart = startPinned ? colLayout.$getItemOffset(colIndex) : null;
+			const stickyEnd = endPinned ? colLayout.$getTotalSize() - colLayout.$getItemOffset(colTo - 1) - colLayout.$getItemSize(colTo - 1) : null;
+			if (measuredRow === false && !spansRows) {
+				measureRowIndex = rowIndex;
+				measuredRow = true;
+			}
+			if (measuredCols[i] === false && !spansCols) {
+				measureColIndex = colIndex;
+				measuredCols[i] = true;
+			}
+			const role = pinnedTop ? "columnheader" : colIndex === rowHeaderCol && (startPinned || isSectionHeaderRow) ? "rowheader" : "cell";
+			const sortOrder = role !== "cell" && sortedCell && sortedCell.rowIndex === rowIndex && sortedCell.colIndex === colIndex ? sortedCell.order : undefined;
+			let cell;
+			if (prevCells) {
+				while (p < prevCells.length && prevCells[p].$col < colIndex) {
+					p++;
+				}
+				if (p < prevCells.length) {
+					cell = prevCells[p];
+				}
+			}
+			if (!cell || cell.$col !== colIndex || cell.$rowSpan !== rowSpan || cell.$colSpan !== colSpan || cell.$start !== stickyStart || cell.$end !== stickyEnd || cell.$measureRow !== measureRowIndex || cell.$measureCol !== measureColIndex || cell.$role !== role || cell.$sort !== sortOrder) {
+				const style = {
+					contain: "layout style",
+					display: "grid",
+					gridArea: spanning ? "1/l" + colIndex + "/l" + rowTo + "/l" + colTo : "1/l" + colIndex
+				};
+				if (spansRows) {
+					style["height"] = "0px";
+					style["minHeight"] = "100%";
+					style["zIndex"] = 1;
+				}
+				if (spansCols) {
+					style["width"] = "0px";
+					style["minWidth"] = "100%";
+				}
+				if (startPinned || endPinned) {
+					if (startPinned) {
+						style["insetInlineStart"] = stickyStart + "px";
+					} else {
+						style["insetInlineEnd"] = stickyEnd + "px";
+					}
+					style["position"] = "sticky";
+					style["zIndex"] = 2;
+				}
+				cell = {
+					$col: colIndex,
+					$rowSpan: rowSpan,
+					$colSpan: colSpan,
+					$measureRow: measureRowIndex,
+					$measureCol: measureColIndex,
+					$role: role,
+					$sort: sortOrder,
+					$style: style,
+					$start: stickyStart,
+					$end: stickyEnd
+				};
+				changed = true;
+			}
+			rowCells.push(cell);
+		}
+		measuredRows.push(measuredRow);
+		if (!rowCells.length) {
+			continue;
+		}
+		const row = prevRow && !changed && prevRow.$cells.length === rowCells.length && prevRow.$top === rowTop ? prevRow : {
+			$row: rowIndex,
+			$cells: rowCells,
+			$style: getBoxStyle(rowIndex, rowEnd, rowTop, "top", 3),
+			$top: rowTop
+		};
+		rowStates.set(rowIndex, row);
+		groupRows.push(row);
+	}
+	rowStatesCache.set(rowLayout, rowStates);
+	return {
+		$rowTemplate: getTemplate(rowLayout, rowIndexes, measuredRows, sort(rowCuts), "max-content", rowCount),
+		$colTemplate: getTemplate(colLayout, cols, measuredCols, sort(colCuts), "minmax(max-content,auto)", colCount),
+		$groups: groups
+	};
+};
+var getBoxStyle = (from, to, inset, edge, zIndex) => {
+	const style = {
+		display: "grid",
+		gridTemplateRows: "subgrid",
+		gridTemplateColumns: "subgrid",
+		gridColumn: "1/-1",
+		gridRow: "l" + from + "/l" + to
+	};
+	if (inset != null) {
+		style["position"] = "sticky";
+		style[edge] = inset + "px";
+		style["zIndex"] = zIndex;
+	}
+	return style;
+};
+
 //#endregion
 //#region src/core/observer.ts
 var createResizeObserver = (cb) => {
@@ -716,14 +1176,11 @@ var createContainerGridDriver = (rowStore, colStore) => {
 	let rowScrollObserver;
 	let colScrollObserver;
 	let initialized = createPromise();
-	const mountedIndexes = new WeakMap();
-	const maybeCachedRowIndexes = new Set();
-	const maybeCachedColIndexes = new Set();
-	const sizeCache = new Map();
-	const getKey = (rowIndex, colIndex) => `${rowIndex}-${colIndex}`;
+	const mountedRowIndexes = new WeakMap();
+	const mountedColIndexes = new WeakMap();
 	const resizeObserver = createResizeObserver((entries) => {
-		const resizedRows = new Set();
-		const resizedCols = new Set();
+		const rowResizes = [];
+		const colResizes = [];
 		for (const { target, contentRect: { width, height } } of entries) {
 			if (target === viewportElement) {
 				if (width || height) {
@@ -731,82 +1188,43 @@ var createContainerGridDriver = (rowStore, colStore) => {
 					colStore.$update(4, width);
 				}
 			} else if (target.offsetParent) {
-				const cell = mountedIndexes.get(target);
-				if (cell) {
-					const [rowIndex, colIndex] = cell;
-					const key = getKey(rowIndex, colIndex);
-					const prevSize = sizeCache.get(key);
-					let rowResized;
-					let colResized;
-					if (!prevSize) {
-						rowResized = colResized = true;
-					} else {
-						if (prevSize[0] !== height) {
-							rowResized = true;
-						}
-						if (prevSize[1] !== width) {
-							colResized = true;
-						}
-					}
-					if (rowResized) {
-						resizedRows.add(rowIndex);
-					}
-					if (colResized) {
-						resizedCols.add(colIndex);
-					}
-					if (rowResized || colResized) {
-						sizeCache.set(key, [height, width]);
-					}
+				const rowIndex = mountedRowIndexes.get(target);
+				const colIndex = mountedColIndexes.get(target);
+				if (rowIndex != null) {
+					rowResizes.push([rowIndex, height]);
+				}
+				if (colIndex != null) {
+					colResizes.push([colIndex, width]);
 				}
 			}
 		}
-		if (resizedRows.size) {
-			const heightResizes = [];
-			resizedRows.forEach((rowIndex) => {
-				let maxHeight = 0;
-				maybeCachedColIndexes.forEach((colIndex) => {
-					const size = sizeCache.get(getKey(rowIndex, colIndex));
-					if (size) {
-						maxHeight = max(maxHeight, size[0]);
-					}
-				});
-				if (maxHeight) {
-					heightResizes.push([rowIndex, maxHeight]);
-				}
-			});
-			rowStore.$update(3, heightResizes);
+		if (rowResizes.length) {
+			rowStore.$update(3, rowResizes);
 		}
-		if (resizedCols.size) {
-			const widthResizes = [];
-			resizedCols.forEach((colIndex) => {
-				let maxWidth = 0;
-				maybeCachedRowIndexes.forEach((rowIndex) => {
-					const size = sizeCache.get(getKey(rowIndex, colIndex));
-					if (size) {
-						maxWidth = max(maxWidth, size[1]);
-					}
-				});
-				if (maxWidth) {
-					widthResizes.push([colIndex, maxWidth]);
-				}
-			});
-			colStore.$update(3, widthResizes);
+		if (colResizes.length) {
+			colStore.$update(3, colResizes);
 		}
 	});
 	return {
-		$observe(containerElement, viewport = containerElement.parentElement) {
-			resizeObserver._observe(viewportElement = viewport);
-			const isRtl = getComputedStyle(viewport).direction === "rtl";
-			const hackOverflow = (overflowKey) => () => {
+		async $scroll(isHorizontal, getTargetOffset) {
+			if (await initialized[0]) {
+				(isHorizontal ? colScrollObserver : rowScrollObserver)._scroll(getTargetOffset);
+			}
+		},
+		$observe(containerElement) {
+			const viewport = viewportElement = containerElement.parentElement;
+			resizeObserver._observe(viewport);
+			const observe = (store, isHorizontal) => 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;
 				});
-			};
-			rowScrollObserver = createScrollObserver(rowStore, viewport, viewport, false, false, hackOverflow("overflowY"));
-			colScrollObserver = createScrollObserver(colStore, viewport, viewport, true, isRtl, hackOverflow("overflowX"));
+			});
+			rowScrollObserver = observe(rowStore, false);
+			colScrollObserver = observe(colStore, true);
 			initialized[1](true);
 		},
 		$dispose() {
@@ -817,41 +1235,19 @@ var createContainerGridDriver = (rowStore, colStore) => {
 			initialized = createPromise();
 		},
 		$observeItem(el, rowIndex, colIndex) {
-			mountedIndexes.set(el, [rowIndex, colIndex]);
-			maybeCachedRowIndexes.add(rowIndex);
-			maybeCachedColIndexes.add(colIndex);
+			if (rowIndex != null) {
+				mountedRowIndexes.set(el, rowIndex);
+			}
+			if (colIndex != null) {
+				mountedColIndexes.set(el, colIndex);
+			}
 			resizeObserver._observe(el);
 			return () => {
-				mountedIndexes.delete(el);
+				mountedRowIndexes.delete(el);
+				mountedColIndexes.delete(el);
 				resizeObserver._unobserve(el);
 			};
 		},
-		$resizeRows(rows) {
-			for (const [r] of rows) {
-				for (let c = 0; c < colStore.$getItemsLength(); c++) {
-					sizeCache.delete(getKey(r, c));
-				}
-			}
-			rowStore.$update(3, rows);
-		},
-		$resizeCols(cols) {
-			for (const [c] of cols) {
-				for (let r = 0; r < rowStore.$getItemsLength(); r++) {
-					sizeCache.delete(getKey(r, c));
-				}
-			}
-			colStore.$update(3, cols);
-		},
-		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();
@@ -884,32 +1280,65 @@ var scrollToIndex = (driver, store, index, { align, smooth, offset = 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) => {
-	if (row != null) {
-		driver.$scrollY(() => row);
+var gridScrollTo = (driver, vertical, horizontal) => {
+	if (vertical != null) {
+		driver.$scroll(false, () => vertical);
 	}
-	if (col != null) {
-		driver.$scrollX(() => col);
+	if (horizontal != null) {
+		driver.$scroll(true, () => horizontal);
 	}
 };
-var gridScrollBy = (driver, rowStore, colStore, row, col) => {
-	if (row != null) {
-		const target = row + rowStore.$getScrollOffset();
-		driver.$scrollY(() => target);
+var gridScrollBy = (driver, rowStore, colStore, vertical, horizontal) => {
+	if (vertical != null) {
+		const offset = vertical + rowStore.$getScrollOffset();
+		driver.$scroll(false, () => offset);
+	}
+	if (horizontal != null) {
+		const offset = horizontal + colStore.$getScrollOffset();
+		driver.$scroll(true, () => offset);
 	}
-	if (col != null) {
-		const target = col + colStore.$getScrollOffset();
-		driver.$scrollX(() => target);
+};
+var scrollGridAxisToIndex = (driver, store, header, sections, footer, index, align, isHorizontal) => {
+	const count = store.$getItemsLength();
+	const pinnedStart = min(header, count);
+	const trailStart = max(count - footer, pinnedStart);
+	index = clamp(index, 0, count - 1);
+	const starts = getSectionStarts(sections, pinnedStart, trailStart);
+	const section = getSection(starts, index, trailStart);
+	const sectionHeader = section < 0 ? -1 : starts[section];
+	const getInsets = () => [store.$getItemOffset(pinnedStart) - store.$getItemOffset(0) + (sectionHeader < 0 || sectionHeader === index ? 0 : store.$getItemOffset(sectionHeader + 1) - store.$getItemOffset(sectionHeader)), store.$getItemOffset(count) - store.$getItemOffset(trailStart)];
+	if (align === "nearest") {
+		if (index < pinnedStart || index >= trailStart) {
+			return;
+		}
+		const [insetStart, insetEnd] = getInsets();
+		const scrollOffset = store.$getScrollOffset();
+		const itemSize = store.$getItemSize(index);
+		let itemOffset = store.$getItemOffset(index);
+		if (sectionHeader === index) {
+			const lastIndex = (section + 1 < starts.length ? starts[section + 1] : trailStart) - 1;
+			itemOffset = max(itemOffset, min(scrollOffset + insetStart, store.$getItemOffset(lastIndex) + store.$getItemSize(lastIndex) - itemSize));
+		}
+		if (itemOffset < scrollOffset + insetStart) {
+			align = "start";
+		} else if (itemOffset + itemSize > scrollOffset + store.$getViewportSize() - insetEnd) {
+			align = "end";
+		} else {
+			return;
+		}
 	}
+	driver.$scroll(isHorizontal, () => {
+		const [insetStart, insetEnd] = getInsets();
+		const rest = store.$getItemSize(index) - store.$getViewportSize();
+		return store.$getItemOffset(index) + (align === "end" ? rest + insetEnd : align === "center" ? (rest + insetEnd - insetStart) / 2 : -insetStart);
+	});
 };
-var gridScrollToIndex = (driver, rowStore, colStore, row, col) => {
-	if (row != null) {
-		const index = clamp(row, 0, rowStore.$getItemsLength() - 1);
-		driver.$scrollY(() => rowStore.$getItemOffset(index));
+var gridScrollToIndex = (driver, rowStore, colStore, headerRows = 0, sectionRows = EMPTY, footerRows = 0, headerCols = 0, footerCols = 0, { rowIndex, colIndex, rowAlign, colAlign }) => {
+	if (rowIndex != null) {
+		scrollGridAxisToIndex(driver, rowStore, headerRows, sectionRows, footerRows, rowIndex, rowAlign, false);
 	}
-	if (col != null) {
-		const index = clamp(col, 0, colStore.$getItemsLength() - 1);
-		driver.$scrollX(() => colStore.$getItemOffset(index));
+	if (colIndex != null) {
+		scrollGridAxisToIndex(driver, colStore, headerCols, EMPTY, footerCols, colIndex, colAlign, true);
 	}
 };
 
@@ -1218,5 +1647,195 @@ var WindowVirtualizer = (props) => {
 };
 
 //#endregion
-export { VList, Virtualizer, WindowVirtualizer };
+//#region src/solid/VGrid.tsx
+var GridCell = (props) => {
+	let elementRef;
+	const [state, setState] = createSignal(undefined);
+	createComputed(() => setState(props._state));
+	const measureRowIndex = createMemo(() => state().$measureRow);
+	const measureColIndex = createMemo(() => state().$measureCol);
+	const row = createMemo(() => props._row);
+	const col = createMemo(() => props._col);
+	const children = createMemo(() => {
+		const r = row();
+		const c = col();
+		return untrack(() => props._children(r, c, {
+			rowIndex: props._rowIndex,
+			colIndex: state().$col
+		}));
+	});
+	createEffect(on([measureRowIndex, measureColIndex], ([rowIndex, colIndex]) => {
+		if (!elementRef || rowIndex == null && colIndex == null) return;
+		onCleanup(props._resizer(elementRef, rowIndex, colIndex));
+	}));
+	const style = createMemo(() => gridStyleToString(state().$style));
+	return <div ref={elementRef} role={state().$role} aria-colindex={state().$col + 1} aria-rowspan={state().$rowSpan} aria-colspan={state().$colSpan} aria-sort={state().$sort} style={style()}>
+      {children()}
+    </div>;
+};
+var GridRow = (props) => {
+	const state = createMemo(() => props._state);
+	const cols = createMemo(() => state().$cells.map((cell) => cell.$col));
+	const style = createMemo(() => gridStyleToString(state().$style));
+	return <div role="row" aria-rowindex={state().$row + 1} style={style()}>
+      <For each={cols()}>
+        {(colIndex, i) => <GridCell _state={state().$cells[i()]} _children={props._children} _row={props._row} _col={getAxisItem(props._cols, colIndex)} _rowIndex={state().$row} _resizer={props._resizer} />}
+      </For>
+    </div>;
+};
+var GridRowGroup = (props) => {
+	const rows = createMemo(() => props._state.$rows.map((row) => row.$row));
+	const style = createMemo(() => gridStyleToString(props._state.$style));
+	return <div role="rowgroup" style={style()}>
+      <For each={rows()}>
+        {(rowIndex, i) => <GridRow _state={props._state.$rows[i()]} _children={props._children} _row={getAxisItem(props._rows, rowIndex)} _cols={props._cols} _resizer={props._resizer} />}
+      </For>
+    </div>;
+};
+var VGrid = (props) => {
+	let containerRef;
+	const withDefaults = mergeProps({ gap: 0 }, props);
+	const { rows, cols, rowHeight, colWidth, gap } = withDefaults;
+	const [, others] = splitProps(props, [
+		"ref",
+		"children",
+		"rows",
+		"cols",
+		"rowHeight",
+		"colWidth",
+		"headerRows",
+		"sectionRows",
+		"footerRows",
+		"headerCols",
+		"footerCols",
+		"spans",
+		"keepMounted",
+		"bufferSize",
+		"gap",
+		"ariaSort",
+		"onVerticalScroll",
+		"onHorizontalScroll",
+		"onScrollEnd",
+		"style"
+	]);
+	const rowLayout = createGridLayout(rows, rowHeight, gap);
+	const colLayout = createGridLayout(cols, colWidth, gap);
+	const rowStore = createVirtualStore(rowLayout);
+	const colStore = createVirtualStore(colLayout);
+	const driver = createContainerGridDriver(rowStore, colStore);
+	const getStateVersion = () => rowStore.$getStateVersion() + colStore.$getStateVersion();
+	const [stateVersion, setRerender] = createSignal(getStateVersion());
+	const rerender = () => setRerender(getStateVersion());
+	rowStore.$subscribe(1, rerender);
+	colStore.$subscribe(1, rerender);
+	let scrolled = false;
+	rowStore.$subscribe(4, () => {
+		scrolled = true;
+		props.onVerticalScroll && props.onVerticalScroll(rowStore.$getScrollOffset());
+	});
+	colStore.$subscribe(4, () => {
+		scrolled = true;
+		props.onHorizontalScroll && props.onHorizontalScroll(colStore.$getScrollOffset());
+	});
+	const notifyScrollEnd = () => {
+		if (scrolled && !rowStore.$isScrolling() && !colStore.$isScrolling()) {
+			scrolled = false;
+			props.onScrollEnd && props.onScrollEnd();
+		}
+	};
+	rowStore.$subscribe(8, notifyScrollEnd);
+	colStore.$subscribe(8, notifyScrollEnd);
+	createComputed(() => {
+		updateGridAxis(rowStore, rowLayout, props.rows, props.rowHeight, true);
+	});
+	createComputed(() => {
+		updateGridAxis(colStore, colLayout, props.cols, props.colWidth, true);
+	});
+	const rowCount = createMemo(() => stateVersion() && rowStore.$getItemsLength());
+	const colCount = createMemo(() => stateVersion() && colStore.$getItemsLength());
+	const plan = createMemo(() => {
+		stateVersion();
+		return createGridPlan(rowLayout, colLayout, rowStore.$getRange(props.bufferSize), colStore.$getRange(props.bufferSize), props.headerRows, props.sectionRows, props.footerRows, props.headerCols, props.footerCols, props.spans, props.keepMounted, props.ariaSort);
+	});
+	const keys = createMemo(() => plan().$groups.map((state) => "$rows" in state ? state.$key : state.$row));
+	const isScrolling = createMemo(() => stateVersion() && (rowStore.$isScrolling() || colStore.$isScrolling()));
+	const containerStyle = createMemo(() => {
+		const { $rowTemplate, $colTemplate } = plan();
+		const marginTop = rowStore.$getItemOffset(0);
+		const marginInlineStart = colStore.$getItemOffset(0);
+		return {
+			contain: "size style",
+			"overflow-anchor": "none",
+			flex: "none",
+			display: "grid",
+			"grid-template-rows": $rowTemplate,
+			"grid-template-columns": $colTemplate,
+			gap: withDefaults.gap + "px",
+			"margin-top": marginTop + "px",
+			"margin-inline-start": marginInlineStart + "px",
+			height: getScrollSize(rowStore) - marginTop + "px",
+			"pointer-events": isScrolling() ? "none" : undefined
+		};
+	});
+	const ref = props.ref;
+	if (!isServer && ref) {
+		ref({
+			get verticalScrollOffset() {
+				return rowStore.$getScrollOffset();
+			},
+			get horizontalScrollOffset() {
+				return colStore.$getScrollOffset();
+			},
+			get scrollHeight() {
+				return getScrollSize(rowStore);
+			},
+			get scrollWidth() {
+				return getScrollSize(colStore);
+			},
+			get viewportHeight() {
+				return rowStore.$getViewportSize();
+			},
+			get viewportWidth() {
+				return colStore.$getViewportSize();
+			},
+			findRowIndex: rowStore.$findItemIndex,
+			findColIndex: colStore.$findItemIndex,
+			getRowOffset: rowStore.$getItemOffset,
+			getColOffset: colStore.$getItemOffset,
+			getRowSize: rowStore.$getItemSize,
+			getColSize: colStore.$getItemSize,
+			scrollToIndex: (opts) => gridScrollToIndex(driver, rowStore, colStore, props.headerRows, props.sectionRows, props.footerRows, props.headerCols, props.footerCols, opts),
+			scrollTo: ({ vertical, horizontal }) => gridScrollTo(driver, vertical, horizontal),
+			scrollBy: ({ vertical, horizontal }) => gridScrollBy(driver, rowStore, colStore, vertical, horizontal)
+		});
+		onCleanup(() => ref());
+	}
+	onMount(() => {
+		driver.$observe(containerRef);
+		onCleanup(() => {
+			rowStore.$dispose();
+			colStore.$dispose();
+			driver.$dispose();
+		});
+	});
+	createEffect(on(stateVersion, () => {
+		driver.$effect();
+	}));
+	return <div role="table" aria-rowcount={rowCount()} aria-colcount={colCount()} {...others} style={{
+		overflow: "auto",
+		contain: "strict",
+		width: "100%",
+		height: "100%",
+		...props.style
+	}}>
+      <div ref={containerRef} style={containerStyle()}>
+        <For each={keys()}>
+          {(key, i) => key < 0 ? <GridRowGroup _state={plan().$groups[i()]} _children={props.children} _rows={props.rows} _cols={props.cols} _resizer={driver.$observeItem} /> : <GridRow _state={plan().$groups[i()]} _children={props.children} _row={getAxisItem(props.rows, key)} _cols={props.cols} _resizer={driver.$observeItem} />}
+        </For>
+      </div>
+    </div>;
+};
+
+//#endregion
+export { VGrid, VList, Virtualizer, WindowVirtualizer };
 //# sourceMappingURL=index.jsx.map