fix: grid SSR works with initial topmost item index

Author: petyosi

examples/grid-initial-item-count-initial-topmost-item-index.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { VirtuosoGrid } from '../src'
+
+export function Example() {
+  return <VirtuosoGrid id="root" initialTopMostItemIndex={10} totalCount={20000} initialItemCount={30} />
+}

examples/grid-initial-item-count.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
-import { VirtuosoGrid, GridComponents, ListRange } from '../src'
+import { VirtuosoGrid, GridComponents, ListRange, GridStateSnapshot } from '../src'
 import { debounce } from 'lodash'
-import { GridStateSnapshot } from '../src/gridSystem'
 import { createHashRouter, Link, RouterProvider, useParams, useSearchParams } from 'react-router-dom'
 
 function fetchData(page: number) {

src/gridSystem.ts

@@ -106,10 +106,7 @@ export const gridSystem = /*#__PURE__*/ u.system(
         u.filter(([_, location]) => !!location)
       ),
       () => {
-        // console.log('block rendering')
         u.publish(scrolledToInitialItem, false)
-        // topmost item index takes precedence over initial item count
-        u.publish(initialItemCount, 0)
       }
     )
 
@@ -235,8 +232,7 @@ export const gridSystem = /*#__PURE__*/ u.system(
 
             if (itemWidth === 0) {
               const startIndex = getInitialTopMostItemIndexNumber(initialTopMostItemIndex, totalCount)
-              // if the initial item count is set, we don't render the items from the initial item count.
-              const endIndex = startIndex === 0 ? Math.max(initialItemCount - 1, 0) : startIndex
+              const endIndex = Math.max(startIndex + initialItemCount - 1, 0)
               return buildProbeGridState(buildItems(startIndex, endIndex, data))
             }
 

test/ssr.test.tsx

@@ -25,6 +25,15 @@ describe('SSR List', () => {
   })
 
   it('renders 30 grid items with offset', () => {
+    const html = ReactDOMServer.renderToString(
+      <VirtuosoGrid id="root" initialTopMostItemIndex={10} totalCount={20000} initialItemCount={30} />
+    )
+    const { document } = new JSDOM(html).window
+    expect(document.querySelector('#root > div > div')!.childElementCount).toEqual(30)
+    expect(document.querySelector('#root > div > div > div')?.innerHTML).toEqual('Item 10')
+  })
+
+  it('renders 30 items with offset', () => {
     const html = ReactDOMServer.renderToString(
       <Virtuoso
         id="root"