From be13a5c8a075aa73f49680ccdc5d6b8855d2b40a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 22 Jan 2026 15:40:37 +0300
Subject: [PATCH] feat(VirtualList): add proximity and isVisible props

---
 src/shared/ui/VirtualList/VirtualList.svelte | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/shared/ui/VirtualList/VirtualList.svelte b/src/shared/ui/VirtualList/VirtualList.svelte
index cbc0ea1..719a957 100644
--- a/src/shared/ui/VirtualList/VirtualList.svelte
+++ b/src/shared/ui/VirtualList/VirtualList.svelte
@@ -52,7 +52,7 @@ interface Props {
      *
      * @template T - The type of items in the list
      */
-    children: Snippet<[{ item: T; index: number }]>;
+    children: Snippet<[{ item: T; index: number; isVisible: boolean; proximity: number }]>;
 }
 
 let { items, itemHeight = 80, overscan = 5, class: className, onVisibleItemsChange, children }:
@@ -76,8 +76,13 @@ $effect(() => {
     class={cn(
         'relative overflow-auto rounded-md bg-background',
         'h-150 w-full',
+        'scroll-smooth',
         className,
     )}
+    onfocusin={(e => {
+        // Prevent the browser from jumping the scroll when an inner element gets focus
+        e.preventDefault();
+    })}
 >
     <div
         style:height="{virtualizer.totalSize}px"
@@ -92,7 +97,12 @@ $effect(() => {
             class="absolute top-0 left-0 w-full"
             style:transform="translateY({item.start}px)"
         >
-            {@render children({ item: items[item.index], index: item.index })}
+            {@render children({
+    item: items[item.index],
+    index: item.index,
+    isVisible: item.isVisible,
+    proximity: item.proximity,
+})}
         </div>
     {/each}
 </div>