Build(deps): Bump react-window from 1.8.11 to 2.0.2 in /page (#499)

Bumps [react-window](https://github.com/bvaughn/react-window) from 1.8.11 to 2.0.2. <details> <summary>Release notes</summary> <p><em>Sourced from <a href="https://github.com/bvaughn/react-window/releases">react-window's releases</a>.</em></p> <blockquote> <h2>2.0.2</h2> <p>Fixed edge-case bug with <code>Grid</code> imperative API <code>scrollToCell</code> method and "smooth" scrolling behavior.</p> <h2>2.0.1</h2> <ul> <li>Remove ARIA <code>role</code> attribute from <code>List</code> and <code>Grid</code>. This resulted in potentially invalid configurations (e.g. a ARIA <em>list</em> should contain at least one <em>listitem</em> but that was not enforced by this library). Users of this library should specify the <code>role</code> attribute that makes the most sense to them <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role#best_practices">based on mdn guidelines</a>. For example:</li> </ul> <pre lang="tsx"><code><List role="list" rowComponent={RowComponent} rowCount={names.length} rowHeight={25} rowProps={{ names }} />; <p>function RowComponent({ index, style, ...rest }: RowComponentProps<object>) { return ( <div role="listitem" style={style}> ... </div> ); } </code></pre></p> <h2>2.0.0</h2> <p>Version 2 is a major rewrite that offers the following benefits:</p> <ul> <li>More ergonomic props API</li> <li>Automatic memoization of row/cell renderers and props/context</li> <li>Automatically sizing for <code>List</code> and <code>Grid</code> (no more need for <code>AutoSizer</code>)</li> <li>Native TypeScript support (no more need for <code>@types/react-window</code>)</li> <li>Smaller bundle size</li> </ul> <h2>Upgrade path</h2> <p>See the <a href="https://react-window.vercel.app/">documentation</a> for more details, but here is an example of what the v1 to v2 upgrade might look like:</p> <h3>Before</h3> <pre lang="tsx"><code>import { FixedSizeList, type ListChildComponentProps } from "react-window"; <p>function Example({ names }: { names: string[] }) { const itemData = useMemo<ItemData>(() => ({ names }), [names]);</p> <p>return ( <FixedSizeList children={Row} height={150} itemCount={1000} </tr></table> </code></pre></p> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Changelog</summary> <p><em>Sourced from <a href="https://github.com/bvaughn/react-window/blob/master/CHANGELOG.md">react-window's changelog</a>.</em></p> <blockquote> <h2>2.0.2</h2> <p>Fixed edge-case bug with <code>Grid</code> imperative API <code>scrollToCell</code> method and "smooth" scrolling behavior.</p> <h2>2.0.1</h2> <ul> <li>Remove ARIA <code>role</code> attribute from <code>List</code> and <code>Grid</code>. This resulted in potentially invalid configurations (e.g. a ARIA <em>list</em> should contain at least one <em>listitem</em> but that was not enforced by this library). Users of this library should specify the <code>role</code> attribute that makes the most sense to them <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role#best_practices">based on mdn guidelines</a>. For example:</li> </ul> <pre lang="tsx"><code><List role="list" rowComponent={RowComponent} rowCount={names.length} rowHeight={25} rowProps={{ names }} />; <p>function RowComponent({ index, style, ...rest }: RowComponentProps<object>) { return ( <div role="listitem" style={style}> ... </div> ); } </code></pre></p> <h2>2.0.0</h2> <p>Version 2 is a major rewrite that offers the following benefits:</p> <ul> <li>More ergonomic props API</li> <li>Automatic memoization of row/cell renderers and props/context</li> <li>Automatically sizing for <code>List</code> and <code>Grid</code> (no more need for <code>AutoSizer</code>)</li> <li>Native TypeScript support (no more need for <code>@types/react-window</code>)</li> <li>Smaller bundle size</li> </ul> <h2>Upgrade path</h2> <p>See the <a href="https://react-window.vercel.app/">documentation</a> for more details, but here is an example of what the v1 to v2 upgrade might look like:</p> <h3>Before</h3> <pre lang="tsx"><code>import { FixedSizeList, type ListChildComponentProps } from "react-window"; <p>function Example({ names }: { names: string[] }) { const itemData = useMemo<ItemData>(() => ({ names }), [names]);</p> <p>return ( <FixedSizeList </tr></table> </code></pre></p> </blockquote> <p>... (truncated)</p> </details> <details> <summary>Commits</summary> <ul> <li><a href="c9349a4b7b"><code>c9349a4</code></a> 2.0.1 -> 2.0.2</li> <li><a href="6adc6c04a1"><code>6adc6c0</code></a> Merge pull request <a href="https://redirect.github.com/bvaughn/react-window/issues/832">#832</a> from bvaughn/issues/831</li> <li><a href="bd562c5734"><code>bd562c5</code></a> Add tests</li> <li><a href="cced926021"><code>cced926</code></a> Fix scrollToCell bug</li> <li><a href="d1af943a69"><code>d1af943</code></a> README formatting</li> <li><a href="caa4266121"><code>caa4266</code></a> README formatting</li> <li><a href="2e326fbb73"><code>2e326fb</code></a> 2.0.0 -> 2.0.1</li> <li><a href="6bcf34eec6"><code>6bcf34e</code></a> README formatting tweak</li> <li><a href="ddfab80999"><code>ddfab80</code></a> Lighthouse changes to docs site</li> <li><a href="e46efe922f"><code>e46efe9</code></a> Update README</li> <li>Additional commits viewable in <a href="https://github.com/bvaughn/react-window/compare/1.8.11...2.0.2">compare view</a></li> </ul> </details> <br /> [![Dependabot compatibility score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=react-window&package-manager=npm_and_yarn&previous-version=1.8.11&new-version=2.0.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`. [//]: # (dependabot-automerge-start) [//]: # (dependabot-automerge-end) --- <details> <summary>Dependabot commands and options</summary> <br /> You can trigger Dependabot actions by commenting on this PR: - `@dependabot rebase` will rebase this PR - `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it - `@dependabot merge` will merge this PR after your CI passes on it - `@dependabot squash and merge` will squash and merge this PR after your CI passes on it - `@dependabot cancel merge` will cancel a previously requested merge and block automerging - `@dependabot reopen` will reopen this PR if it is closed - `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually - `@dependabot show <dependency name> ignore conditions` will show all of the ignore conditions of the specified dependency - `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself) - `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) </details>
2026-01-18 11:13:57 +00:00 · 2025-09-05 14:59:16 +01:00
parent e8d63ce9e8 0f4d61e3f1
commit 423cd0812f
3 changed files with 45 additions and 69 deletions
--- a/page/package-lock.json
+++ b/page/package-lock.json
@@ -22,7 +22,6 @@
        "@radix-ui/react-tabs": "^1.1.13",
        "@radix-ui/react-tooltip": "^1.2.8",
        "@tailwindcss/vite": "^4.1.12",
-        "@types/react-window": "^1.8.8",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
        "flatbuffers": "^25.2.10",
@@ -36,7 +35,7 @@
        "react-helmet": "^6.1.0",
        "react-resizable-panels": "^3.0.5",
        "react-router-dom": "^7.8.2",
-        "react-window": "^1.8.11",
+        "react-window": "^2.0.2",
        "shell-quote": "^1.8.3",
        "tailwind-merge": "^3.3.1",
        "tailwindcss": "^4.1.12",
@@ -421,18 +420,6 @@
        "@babel/core": "^7.0.0-0"
      }
    },
-    "node_modules/@babel/runtime": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
-      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
-      "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
    "node_modules/@babel/template": {
      "version": "7.27.2",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
@@ -3634,6 +3621,7 @@
      "version": "19.1.12",
      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
      "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
+      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "csstype": "^3.0.2"
@@ -3659,15 +3647,6 @@
        "@types/react": "*"
      }
    },
-    "node_modules/@types/react-window": {
-      "version": "1.8.8",
-      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.8.tgz",
-      "integrity": "sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/react": "*"
-      }
-    },
    "node_modules/@types/shell-quote": {
      "version": "1.7.5",
      "resolved": "https://registry.npmjs.org/@types/shell-quote/-/shell-quote-1.7.5.tgz",
@@ -4261,6 +4240,7 @@
      "version": "3.1.3",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "devOptional": true,
      "license": "MIT"
    },
    "node_modules/debug": {
@@ -5319,12 +5299,6 @@
        "@jridgewell/sourcemap-codec": "^1.5.0"
      }
    },
-    "node_modules/memoize-one": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
-      "integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==",
-      "license": "MIT"
-    },
    "node_modules/merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5881,20 +5855,13 @@
      }
    },
    "node_modules/react-window": {
-      "version": "1.8.11",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.11.tgz",
-      "integrity": "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-2.0.2.tgz",
+      "integrity": "sha512-KCDGR+5qB6hG/eDWCNZku5ERMV21vjMEDJeobqPXI0/foVDaqjf+Fsum4iJu0ftLUTxh9yvZ9t7T+SJ7woOLFw==",
      "license": "MIT",
-      "dependencies": {
-        "@babel/runtime": "^7.0.0",
-        "memoize-one": ">=3.1.1 <6"
-      },
-      "engines": {
-        "node": ">8.0.0"
-      },
      "peerDependencies": {
-        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
      }
    },
    "node_modules/readable-stream": {
@@ -5912,12 +5879,6 @@
        "util-deprecate": "~1.0.1"
      }
    },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
    "node_modules/resolve-from": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
--- a/page/package.json
+++ b/page/package.json
@@ -24,7 +24,6 @@
    "@radix-ui/react-tabs": "^1.1.13",
    "@radix-ui/react-tooltip": "^1.2.8",
    "@tailwindcss/vite": "^4.1.12",
-    "@types/react-window": "^1.8.8",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "flatbuffers": "^25.2.10",
@@ -38,7 +37,7 @@
    "react-helmet": "^6.1.0",
    "react-resizable-panels": "^3.0.5",
    "react-router-dom": "^7.8.2",
-    "react-window": "^1.8.11",
+    "react-window": "^2.0.2",
    "shell-quote": "^1.8.3",
    "tailwind-merge": "^3.3.1",
    "tailwindcss": "^4.1.12",
--- a/page/src/components/output.tsx
+++ b/page/src/components/output.tsx
@@ -1,5 +1,10 @@
 import React from "react";
-import { FixedSizeList as List } from "react-window";
+import {
+  List,
+  ListImperativeAPI,
+  useListRef,
+  type RowComponentProps,
+} from "react-window";

 interface OutputProps {}

@@ -156,9 +161,26 @@ class OutputGrouper {
  }
 }

+function LogLineRow({
+  index,
+  lines,
+  style,
+}: RowComponentProps<{
+  lines: LogLine[];
+}>) {
+  {
+    const line = lines[index];
+    return (
+      <span className={line.classNames} style={style}>
+        {line.text}
+      </span>
+    );
+  }
+}
+
 export class Output extends React.Component<OutputProps, FullOutputState> {
  private outputRef: React.RefObject<HTMLDivElement | null>;
-  private listRef: React.RefObject<List | null>;
+  private listRef: React.RefObject<ListImperativeAPI | null>;
  private resizeObserver: ResizeObserver;

  constructor(props: OutputProps) {
@@ -201,13 +223,14 @@ export class Output extends React.Component<OutputProps, FullOutputState> {

  componentDidUpdate(_: OutputProps, prevState: FullOutputState) {
    if (
-      prevState.lines.length == this.state.lines.length ||
-      !this.listRef.current
+      !this.listRef.current ||
+      this.state.lines.length == 0 ||
+      prevState.lines.length == this.state.lines.length
    ) {
      return;
    }

-    this.listRef.current.scrollToItem(this.state.lines.length - 1);
+    this.listRef.current.scrollToRow({ index: this.state.lines.length - 1 });
  }

  clear() {
@@ -261,21 +284,14 @@ export class Output extends React.Component<OutputProps, FullOutputState> {
    return (
      <div className="terminal-output" ref={this.outputRef}>
        <List
-          ref={this.listRef}
-          width={this.state.width}
-          height={this.state.height}
-          itemCount={this.state.lines.length}
-          itemSize={20}
-        >
-          {({ index, style }) => {
-            const line = this.state.lines[index];
-            return (
-              <span className={line.classNames} style={style}>
-                {line.text}
-              </span>
-            );
-          }}
-        </List>
+          listRef={this.listRef}
+          overscanCount={30}
+          rowComponent={LogLineRow}
+          rowCount={this.state.lines.length}
+          rowProps={{ lines: this.state.lines }}
+          rowHeight={20}
+          style={{ height: this.state.height, width: this.state.width }}
+        />
      </div>
    );
  }