fix: recalc grid state when viewport dimensions change

CONTRIBUTING.md

@@ -1,14 +1,14 @@
 # Contributing to React Virtuoso
 
-Want to contribute to React Virtuoso? You will encounter a state management you are not familiar with - it's implemented using [URX](https://urx.virtuoso.dev). 
-Check the examples and the conceptual docs to get the gist of it. 
+Want to contribute to React Virtuoso? You will encounter a state management you are not familiar with - it's implemented using [URX](https://urx.virtuoso.dev).
+Check the examples and the conceptual docs to get the gist of it.
 
 ### How to add fixes and new features
 
-Virtuoso has an extensive unit/e2e test suite. To run the unit tests, use `npm run test`. An end-to-end browser-based test suite is runnable with `npm run e2e`. 
+Virtuoso has an extensive unit/e2e test suite. To run the unit tests, use `pnpm run test`. An end-to-end browser-based test suite is runnable with `pnpm run e2e`.
 
 A convenient way to debug something is to preview the test cases in the browser.
-To do that, run `npm run browse-examples` - it will open a simple UI that lets you browse the components in the `e2e` folder.
+To do that, run `pnpm run dev` - it will open a simple UI that lets you browse the components in the `examples` folder.
 
 ### How to add to the docs
 

examples/grid-responsive-columns.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { GridComponents, VirtuosoGrid } from '../src'
+import styled from '@emotion/styled'
+
+const ItemContainer = styled.div`
+  width: 100px;
+  height: 100px;
+  display: flex;
+`
+
+const ItemWrapper = styled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 80%;
+  border: 1px solid #000;
+  white-space: nowrap;
+`
+
+const ListContainer = styled.div`
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, 100px);
+  grid-template-rows: repeat(auto-fill, 100px);
+  justify-content: space-evenly;
+  margin: 10px;
+` as GridComponents['List']
+
+export function Example() {
+  return (
+    <VirtuosoGrid
+      style={{ height: 340 }}
+      totalCount={10000}
+      overscan={200}
+      components={{
+        Item: ItemContainer,
+        List: ListContainer,
+        ScrollSeekPlaceholder: () => (
+          <ItemContainer>
+            <ItemWrapper>{'--'}</ItemWrapper>
+          </ItemContainer>
+        ),
+      }}
+      itemContent={(index) => <ItemWrapper>Item {index}</ItemWrapper>}
+      scrollSeekConfiguration={{
+        enter: (velocity) => Math.abs(velocity) > 200,
+        exit: (velocity) => Math.abs(velocity) < 30,
+      }}
+    />
+  )
+}

src/gridSystem.ts

@@ -73,6 +73,9 @@ function buildItems<D>(startIndex: number, endIndex: number, data: D[] | undefin
 function gapComparator(prev: Gap, next: Gap) {
   return prev && prev.column === next.column && prev.row === next.row
 }
+function dimensionComparator(prev: ElementDimensions, next: ElementDimensions) {
+  return prev && prev.width === next.width && prev.height === next.height
+}
 export const gridSystem = /*#__PURE__*/ u.system(
   ([
     { overscan, visibleRange, listBoundary },
@@ -119,11 +122,11 @@ export const gridSystem = /*#__PURE__*/ u.system(
           u.duc(totalCount),
           visibleRange,
           u.duc(gap, gapComparator),
-          u.duc(itemDimensions, (prev, next) => prev && prev.width === next.width && prev.height === next.height),
+          u.duc(itemDimensions, dimensionComparator),
+          u.duc(viewportDimensions, dimensionComparator),
           data
         ),
-        u.withLatestFrom(viewportDimensions),
-        u.map(([[totalCount, [startOffset, endOffset], gap, item, data], viewport]) => {
+        u.map(([totalCount, [startOffset, endOffset], gap, item, viewport, data]) => {
           const { row: rowGap, column: columnGap } = gap
           const { height: itemHeight, width: itemWidth } = item
           const { width: viewportWidth } = viewport