refactor: move placement logic into hook

Author: mxschll

…al/__tests__/use-virtual-offset.test.tsx …e-virtual/__tests__/use-virtual.test.tsxsrc/internal/hooks/use-virtual/__tests__/use-virtual-offset.test.tsx renamed to src/internal/hooks/use-virtual/__tests__/use-virtual.test.tsx src/internal/hooks/use-virtual/__tests__/use-virtual-offset.test.tsx renamed to src/internal/hooks/use-virtual/__tests__/use-virtual.test.tsx

@@ -6,7 +6,6 @@ import { render } from '@testing-library/react';
 
 import { useVirtual } from '../index';
 
-// Mock the vendor react-virtual to avoid ES module issues
 jest.mock('../../../vendor/react-virtual', () => ({
   useVirtual: jest.fn(),
 }));
@@ -129,4 +128,94 @@ describe('useVirtual', () => {
     // totalSize = 160 - (3 items * 1 overlap) - 60 (firstItemSize) + 2 = 99
     expect(capturedResult!.totalSize).toBe(99);
   });
+
+  test('calculates item positions without itemOverlap=0', () => {
+    const items: TestItem[] = [{ id: '1' }, { id: '2' }, { id: '3' }];
+
+    mockUseVirtual.mockReturnValue({
+      virtualItems: [
+        { index: 0, size: 50, start: 0, end: 50, measureRef: mockMeasureRef },
+        { index: 1, size: 50, start: 50, end: 100, measureRef: mockMeasureRef },
+        { index: 2, size: 50, start: 100, end: 150, measureRef: mockMeasureRef },
+      ],
+      totalSize: 150,
+      scrollToIndex: mockScrollToIndex,
+    });
+
+    let capturedResult: ReturnType<typeof useVirtual<TestItem>> | null = null;
+    render(<TestComponent items={items} onResult={result => (capturedResult = result)} />);
+
+    expect(capturedResult!.virtualItems[0].start).toBe(0);
+    expect(capturedResult!.virtualItems[1].start).toBe(50);
+    expect(capturedResult!.virtualItems[2].start).toBe(100);
+  });
+
+  test('calculates item positions with itemOverlap=1', () => {
+    const items: TestItem[] = [{ id: '1' }, { id: '2' }, { id: '3' }];
+
+    mockUseVirtual.mockReturnValue({
+      virtualItems: [
+        { index: 0, size: 50, start: 0, end: 50, measureRef: mockMeasureRef },
+        { index: 1, size: 50, start: 50, end: 100, measureRef: mockMeasureRef },
+        { index: 2, size: 50, start: 100, end: 150, measureRef: mockMeasureRef },
+      ],
+      totalSize: 150,
+      scrollToIndex: mockScrollToIndex,
+    });
+
+    let capturedResult: ReturnType<typeof useVirtual<TestItem>> | null = null;
+    render(<TestComponent items={items} itemOverlap={1} onResult={result => (capturedResult = result)} />);
+
+    expect(capturedResult!.virtualItems[0].start).toBe(0);
+    expect(capturedResult!.virtualItems[1].start).toBe(49);
+    expect(capturedResult!.virtualItems[2].start).toBe(98);
+  });
+
+  test('calculates item positions with sticky first item and itemOverlap=0', () => {
+    const items: TestItem[] = [{ id: '1' }, { id: '2' }, { id: '3' }];
+
+    mockUseVirtual.mockReturnValue({
+      virtualItems: [
+        { index: 0, size: 60, start: 0, end: 60, measureRef: mockMeasureRef },
+        { index: 1, size: 50, start: 60, end: 110, measureRef: mockMeasureRef },
+        { index: 2, size: 50, start: 110, end: 160, measureRef: mockMeasureRef },
+      ],
+      totalSize: 160,
+      scrollToIndex: mockScrollToIndex,
+    });
+
+    let capturedResult: ReturnType<typeof useVirtual<TestItem>> | null = null;
+    render(<TestComponent items={items} firstItemSticky={true} onResult={result => (capturedResult = result)} />);
+
+    expect(capturedResult!.virtualItems[1].start).toBe(62);
+    expect(capturedResult!.virtualItems[2].start).toBe(112);
+  });
+
+  test('calculates item positions with sticky first item and itemOverlap=1', () => {
+    const items: TestItem[] = [{ id: '1' }, { id: '2' }, { id: '3' }];
+
+    mockUseVirtual.mockReturnValue({
+      virtualItems: [
+        { index: 0, size: 60, start: 0, end: 60, measureRef: mockMeasureRef },
+        { index: 1, size: 50, start: 60, end: 110, measureRef: mockMeasureRef },
+        { index: 2, size: 50, start: 110, end: 160, measureRef: mockMeasureRef },
+      ],
+      totalSize: 160,
+      scrollToIndex: mockScrollToIndex,
+    });
+
+    let capturedResult: ReturnType<typeof useVirtual<TestItem>> | null = null;
+    render(
+      <TestComponent
+        items={items}
+        firstItemSticky={true}
+        itemOverlap={1}
+        onResult={result => (capturedResult = result)}
+      />
+    );
+
+    expect(capturedResult!.virtualItems[0].start).toBe(1);
+    expect(capturedResult!.virtualItems[1].start).toBe(61);
+    expect(capturedResult!.virtualItems[2].start).toBe(110);
+  });
 });

src/internal/hooks/use-virtual/index.ts

@@ -63,17 +63,30 @@ export function useVirtual<Item extends object>({
 
   const virtualItems = useMemo(
     () =>
-      rowVirtualizer.virtualItems.map(virtualItem => ({
-        ...virtualItem,
-        measureRef: (node: null | HTMLElement) => {
-          const mountedCount = measuresCache.current.get(items[virtualItem.index]) ?? 0;
-          if (mountedCount < MAX_ITEM_MOUNTS) {
-            virtualItem.measureRef(node);
-            measuresCache.current.set(items[virtualItem.index], mountedCount + 1);
-          }
-        },
-      })),
-    [items, rowVirtualizer.virtualItems]
+      rowVirtualizer.virtualItems.map((virtualItem, index) => {
+        let adjustedStart: number;
+
+        if (firstItemSticky && virtualItem.index === 0) {
+          adjustedStart = virtualItem.start + 1;
+        } else if (firstItemSticky) {
+          adjustedStart = virtualItem.start + 2 - index * itemOverlap;
+        } else {
+          adjustedStart = virtualItem.start - index * itemOverlap;
+        }
+
+        return {
+          ...virtualItem,
+          start: adjustedStart,
+          measureRef: (node: null | HTMLElement) => {
+            const mountedCount = measuresCache.current.get(items[virtualItem.index]) ?? 0;
+            if (mountedCount < MAX_ITEM_MOUNTS) {
+              virtualItem.measureRef(node);
+              measuresCache.current.set(items[virtualItem.index], mountedCount + 1);
+            }
+          },
+        };
+      }),
+    [items, rowVirtualizer.virtualItems, firstItemSticky, itemOverlap]
   );
 
   // Adjust totalSize to account for 1px overlap per item When firstItemSticky

src/select/utils/render-options.tsx

@@ -65,29 +65,11 @@ export const renderOptions = ({
     const ListItem = useInteractiveGroups ? MultiselectItem : Item;
     const isSticky = firstOptionSticky && globalIndex === 0;
 
-    // Adjust virtual position to create 1px overlap between consecutive selected items
-    // When firstOptionSticky is enabled (enableSelectAll), the select-all option needs to be shifted down by 1,
-    // and all subsequent items need to be shifted up by (index + 1) instead of just index
-    let adjustedVirtualPosition: number | undefined = undefined;
-
-    if (!virtualItem) {
-      adjustedVirtualPosition = undefined;
-    } else if (!firstOptionSticky) {
-      // Shift every item up by one to create a 1px overlap
-      adjustedVirtualPosition = virtualItem.start - index * 1;
-    } else if (globalIndex === 0) {
-      // Shift select-all down by one
-      adjustedVirtualPosition = virtualItem.start + 1;
-    } else {
-      // Shift items down by 2 if first item is sticky
-      adjustedVirtualPosition = virtualItem.start + 2 - index * 1;
-    }
-
     return (
       <ListItem
         key={globalIndex}
         {...props}
-        virtualPosition={adjustedVirtualPosition}
+        virtualPosition={virtualItem?.start}
         ref={isSticky && stickyOptionRef ? stickyOptionRef : virtualItem && virtualItem.measureRef}
         padBottom={padBottom}
         screenReaderContent={screenReaderContent}