From 370023ba69b15c5a47e6defe7f1308c17deb31e3 Mon Sep 17 00:00:00 2001
From: Adam <phazei@gmail.com>
Date: Fri, 19 Jul 2024 21:00:17 -0700
Subject: [PATCH] fix: account for headerHeight when restoring state (#1110)

Co-authored-by: Adam Segal <asegal@genasys.com>
---
 examples/state.tsx     |  7 +++++++
 src/stateLoadSystem.ts | 10 +++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/examples/state.tsx b/examples/state.tsx
index 712d3b867..0cbb866af 100644
--- a/examples/state.tsx
+++ b/examples/state.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
 import { StateSnapshot, Virtuoso, VirtuosoHandle } from '../src'
 
+function Header() {
+  return <div>Header</div>
+}
+
 export function Example() {
   const ref = React.useRef<VirtuosoHandle>(null)
   const state = React.useRef<StateSnapshot | undefined>(undefined)
@@ -25,6 +29,9 @@ export function Example() {
         ref={ref}
         restoreStateFrom={state.current}
         computeItemKey={(key: number) => `item-${key.toString()}`}
+        components={{
+          Header,
+        }}
         totalCount={100}
         itemContent={(index) => <div style={{ height: index % 2 ? 30 : 20 }}>Item {index}</div>}
         style={{ height: 300 }}
diff --git a/src/stateLoadSystem.ts b/src/stateLoadSystem.ts
index b49ef34a9..1b14b6ecd 100644
--- a/src/stateLoadSystem.ts
+++ b/src/stateLoadSystem.ts
@@ -9,7 +9,7 @@ import { windowScrollerSystem } from './windowScrollerSystem'
 export const stateLoadSystem = u.system(
   ([
     { sizes, sizeRanges },
-    { scrollTop },
+    { scrollTop, headerHeight },
     { initialTopMostItemIndex },
     { didMount },
     { useWindowScroll, windowScrollContainerState, windowViewportRect },
@@ -24,12 +24,16 @@ export const stateLoadSystem = u.system(
     u.connect(windowViewportRect, statefulWindowViewportRect)
 
     u.subscribe(
-      u.pipe(getState, u.withLatestFrom(sizes, scrollTop, useWindowScroll, statefulWindowScrollContainerState, statefulWindowViewportRect)),
-      ([callback, sizes, scrollTop, useWindowScroll, windowScrollContainerState, windowViewportRect]) => {
+      u.pipe(
+        getState,
+        u.withLatestFrom(sizes, scrollTop, useWindowScroll, statefulWindowScrollContainerState, statefulWindowViewportRect, headerHeight)
+      ),
+      ([callback, sizes, scrollTop, useWindowScroll, windowScrollContainerState, windowViewportRect, headerHeight]) => {
         const ranges = sizeTreeToRanges(sizes.sizeTree)
         if (useWindowScroll && windowScrollContainerState !== null && windowViewportRect !== null) {
           scrollTop = windowScrollContainerState.scrollTop - windowViewportRect.offsetTop
         }
+        scrollTop -= headerHeight
         callback({ ranges, scrollTop })
       }
     )