From b5cdb3172816d01bdbcb05b79e6f346f67561ae7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E8=83=9C?= <2318857637@qq.com>
Date: Thu, 30 Jul 2026 20:14:40 +0800
Subject: [PATCH] docs: migrate virtual examples to TanStack Virtual

---
 package.json                           |  4 ++--
 src/hooks/useCombobox/react-virtual.js | 24 +++++++++++++++---------
 src/hooks/useSelect/react-virtual.js   | 24 +++++++++++++++---------
 3 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index e3607be..da4c856 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
   "keywords": [],
   "main": "src/index.js",
   "dependencies": {
+    "@tanstack/react-virtual": "3.14.9",
     "@apollo/client": "3.1.1",
     "@material-ui/core": "4.11.0",
     "@material-ui/icons": "4.9.1",
@@ -33,7 +34,6 @@
     "react-scripts": "3.4.3",
     "react-tiny-virtual-list": "2.1.6",
     "react-use": "15.3.4",
-    "react-virtual": "2.10.4",
     "react-virtualized": "9.22.2",
     "react-window": "1.2.4",
     "starwars-names": "1.6.0",
@@ -47,4 +47,4 @@
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
-}
\ No newline at end of file
+}
diff --git a/src/hooks/useCombobox/react-virtual.js b/src/hooks/useCombobox/react-virtual.js
index 49c3676..ba3be21 100644
--- a/src/hooks/useCombobox/react-virtual.js
+++ b/src/hooks/useCombobox/react-virtual.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import {useVirtual} from 'react-virtual'
+import {useVirtualizer} from '@tanstack/react-virtual'
 import {useCombobox} from 'downshift'
 import {items, menuStyles} from '../../shared'
 
@@ -14,10 +14,10 @@ export default function App() {
 
   const listRef = React.useRef()
 
-  const rowVirtualizer = useVirtual({
-    size: items.length,
-    parentRef: listRef,
-    estimateSize: React.useCallback(() => 20, []),
+  const rowVirtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => listRef.current,
+    estimateSize: () => 20,
     overscan: 2,
   })
 
@@ -35,7 +35,10 @@ export default function App() {
     onInputValueChange: ({inputValue: newValue}) => setInputValue(newValue),
     scrollIntoView: () => {},
     onHighlightedIndexChange: ({highlightedIndex, type}) => {
-      if (type !== useCombobox.stateChangeTypes.MenuMouseLeave) {
+      if (
+        highlightedIndex >= 0 &&
+        type !== useCombobox.stateChangeTypes.MenuMouseLeave
+      ) {
         rowVirtualizer.scrollToIndex(highlightedIndex)
       }
     },
@@ -57,10 +60,13 @@ export default function App() {
       >
         {isOpen && (
           <>
-            <li key="total-size" style={{height: rowVirtualizer.totalSize}} />
-            {rowVirtualizer.virtualItems.map((virtualRow) => (
+            <li
+              key="total-size"
+              style={{height: rowVirtualizer.getTotalSize()}}
+            />
+            {rowVirtualizer.getVirtualItems().map((virtualRow) => (
               <li
-                key={items[virtualRow.index].id}
+                key={virtualRow.key}
                 {...getItemProps({
                   index: virtualRow.index,
                   item: items[virtualRow.index],
diff --git a/src/hooks/useSelect/react-virtual.js b/src/hooks/useSelect/react-virtual.js
index 90308b1..4996ad4 100644
--- a/src/hooks/useSelect/react-virtual.js
+++ b/src/hooks/useSelect/react-virtual.js
@@ -1,16 +1,16 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import {useVirtual} from 'react-virtual'
+import {useVirtualizer} from '@tanstack/react-virtual'
 import {useSelect} from 'downshift'
 import {items, menuStyles, toggleElementStyles} from '../../shared'
 
 export default function App() {
   const listRef = React.useRef()
 
-  const rowVirtualizer = useVirtual({
-    size: items.length,
-    parentRef: listRef,
-    estimateSize: React.useCallback(() => 20, []),
+  const rowVirtualizer = useVirtualizer({
+    count: items.length,
+    getScrollElement: () => listRef.current,
+    estimateSize: () => 20,
     overscan: 2,
   })
 
@@ -26,7 +26,10 @@ export default function App() {
     items,
     scrollIntoView: () => {},
     onHighlightedIndexChange: ({highlightedIndex, type}) => {
-      if (type !== useSelect.stateChangeTypes.MenuMouseLeave) {
+      if (
+        highlightedIndex >= 0 &&
+        type !== useSelect.stateChangeTypes.MenuMouseLeave
+      ) {
         rowVirtualizer.scrollToIndex(highlightedIndex)
       }
     },
@@ -50,10 +53,13 @@ export default function App() {
       >
         {isOpen && (
           <>
-            <li key="total-size" style={{height: rowVirtualizer.totalSize}} />
-            {rowVirtualizer.virtualItems.map((virtualRow) => (
+            <li
+              key="total-size"
+              style={{height: rowVirtualizer.getTotalSize()}}
+            />
+            {rowVirtualizer.getVirtualItems().map((virtualRow) => (
               <li
-                key={items[virtualRow.index].id}
+                key={virtualRow.key}
                 {...getItemProps({
                   index: virtualRow.index,
                   item: items[virtualRow.index],