intelliwaketssveltekitv25 1.0.21 → 1.0.22

package/dist/VirtualList.svelte

@@ -34,6 +34,8 @@
 	let is_scrolling = false
 	let is_refreshing = false
 
+	let previous_length = $state(0)
+
 	let visible = $derived(
 		items.slice(start, end).map((data, i) => ({
 			index: i + start,
@@ -41,9 +43,44 @@
 		}))
 	)
 
-	// whenever `items` changes, invalidate the current heightmap
+	// whenever `items` changes, reset if needed and refresh the window
 	$effect(() => {
-		if (mounted && !is_scrolling && !is_refreshing && viewport) {
+		if (!mounted || !viewport) return
+
+		const len = items.length
+
+		// list became empty → hard reset
+		if (len === 0) {
+			start = 0
+			end = 0
+			top = 0
+			bottom = 0
+			height_map = []
+			average_height = undefined
+			viewport.scrollTo(0, 0)
+			previous_length = len
+			return
+		}
+
+		// if the list shrank, or our window is now out of bounds, reset to top
+		if (
+			len < previous_length ||  // list shrank (likely filtering)
+			start >= len ||          // start is past end of list
+			end === 0 ||             // nothing visible
+			end > len                // end beyond list
+		) {
+			start = 0
+			end = 0
+			top = 0
+			bottom = 0
+			height_map = []
+			average_height = undefined
+			viewport.scrollTo(0, 0)
+		}
+
+		previous_length = len
+
+		if (!is_scrolling && !is_refreshing) {
 			refresh(items, viewport_height, itemHeight)
 		}
 	})
@@ -80,7 +117,7 @@
 		end = i
 
 		const remaining = items.length - end
-		average_height = Math.max((top + content_height) / end, min_row_height)
+		average_height = Math.round(Math.max((top + content_height) / end, min_row_height))
 
 		bottom = remaining * average_height
 		height_map.length = items.length
@@ -127,7 +164,7 @@
 		end = i
 
 		const remaining = items.length - end
-		average_height = y / end
+		average_height = Math.round(y / end)
 
 		while (i < items.length) height_map[i++] = average_height
 		bottom = remaining * average_height
@@ -204,4 +241,4 @@
     .virtual-list-row {
         overflow: hidden;
     }
-</style>
+</style>

package/dist/VirtualTable.svelte

@@ -33,7 +33,7 @@
 	let height_map: number[] = $state([])
 	let rows: HTMLCollectionOf<Element> | undefined = $state()
 	let viewport: HTMLElement | undefined = $state()
-	let contents: HTMLElement | undefined = $state()
+	let contents: HTMLTableElement | undefined = $state()
 	let viewport_height = $state(0)
 	let mounted = $state(false)
 
@@ -44,6 +44,8 @@
 	let is_scrolling = false
 	let is_refreshing = false
 
+	let previous_length = $state(0)
+
 	let visible = $derived(
 		items.slice(start, end).map((data, i) => ({
 			index: i + start,
@@ -51,9 +53,44 @@
 		}))
 	)
 
-	// whenever `items` changes, invalidate the current heightmap
+	// whenever `items` changes, reset if needed and refresh the window
 	$effect(() => {
-		if (mounted && !is_scrolling && !is_refreshing && viewport) {
+		if (!mounted || !viewport) return
+
+		const len = items.length
+
+		// list became empty → hard reset
+		if (len === 0) {
+			start = 0
+			end = 0
+			top = 0
+			bottom = 0
+			height_map = []
+			average_height = undefined
+			viewport.scrollTo(0, 0)
+			previous_length = len
+			return
+		}
+
+		// if the list shrank, or our window is now out of bounds, reset to top
+		if (
+			len < previous_length || // list shrank (likely filtering)
+			start >= len ||          // start is past end of list
+			end === 0 ||             // nothing visible
+			end > len                // end beyond list
+		) {
+			start = 0
+			end = 0
+			top = 0
+			bottom = 0
+			height_map = []
+			average_height = undefined
+			viewport.scrollTo(0, 0)
+		}
+
+		previous_length = len
+
+		if (!is_scrolling && !is_refreshing) {
 			refresh(items, viewport_height, itemHeight)
 		}
 	})
@@ -119,7 +156,6 @@
 			if (y + row_height > scrollTop) {
 				start = i
 				top = y
-
 				break
 			}
 
@@ -157,7 +193,9 @@
 			}
 
 			const d = actual_height - expected_height
-			viewport.scrollTo(0, scrollTop + d)
+			if (d !== 0) {
+				viewport.scrollTo(0, scrollTop + d)
+			}
 		}
 
 		is_scrolling = false
@@ -188,10 +226,12 @@
 		<tbody class="virtual-table-body">
 		<tr class="virtual-table-spacer" style="height: {top}px;"></tr>
 		{#each visible as item (item.index)}
-			<tr class="virtual-table-row {classRow}"
-					class:hover:bg-slate-100={!!onclick}
-					class:cursor-pointer={!!onclick}
-					onclick={(e) => onclick?.(item.data, item.index, e)}>
+			<tr
+				class="virtual-table-row {classRow}"
+				class:hover:bg-slate-100={!!onclick}
+				class:cursor-pointer={!!onclick}
+				onclick={(e) => onclick?.(item.data, item.index, e)}
+			>
 				{@render tbody_tr(item.data, item.index)}
 			</tr>
 		{/each}
@@ -241,5 +281,4 @@
     .virtual-table-spacer {
         height: 0;
     }
-
-</style>
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelliwaketssveltekitv25",
-  "version": "1.0.21",
+  "version": "1.0.22",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",