feat: update react-virtual (#913)

KaneFreeman · web-flow · commit edba6a69a48e · 2023-10-04T11:48:47.000-04:00
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -83,6 +83,7 @@
     "@styled-icons/material-rounded": "10.47.0",
     "@styled-icons/remix-editor": "10.46.0",
     "@styled-icons/simple-icons": "10.46.0",
+    "@tanstack/react-virtual": "3.0.0-beta.61",
     "@udecode/plate": "23.7.4",
     "@udecode/plate-cursor": "23.7.4",
     "@udecode/plate-juice": "23.7.4",
@@ -146,7 +147,6 @@
     "react-router-dom": "6.10.0",
     "react-scroll-sync": "0.11.0",
     "react-topbar-progress-indicator": "4.1.1",
-    "react-virtual": "2.10.4",
     "react-virtualized-auto-sizer": "1.0.15",
     "react-waypoint": "10.3.0",
     "react-window": "1.8.9",
diff --git a/packages/core/src/components/collections/entries/EntryListingTable.tsx b/packages/core/src/components/collections/entries/EntryListingTable.tsx
@@ -1,5 +1,5 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useVirtual } from 'react-virtual';
 
 import useTranslate from '@staticcms/core/lib/hooks/useTranslate';
 import classNames from '@staticcms/core/lib/util/classNames.util';
@@ -40,20 +40,25 @@ const EntryListingTable: FC<EntryListingTableProps> = ({
 
   const tableContainerRef = useRef<HTMLDivElement | null>(null);
 
-  const { virtualItems: virtualRows, totalSize } = useVirtual({
-    parentRef: tableContainerRef,
-    size: entryData.length,
+  const rowVirtualizer = useVirtualizer({
+    getScrollElement: () => tableContainerRef.current,
+    count: entryData.length,
     overscan: 10,
+    estimateSize: () => 45,
   });
 
+  const virtualRows = rowVirtualizer.getVirtualItems();
+
   const paddingTop = useMemo(
     () => (virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0),
     [virtualRows],
   );
   const paddingBottom = useMemo(
     () =>
-      virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0,
-    [totalSize, virtualRows],
+      virtualRows.length > 0
+        ? rowVirtualizer.getTotalSize() - (virtualRows?.[virtualRows.length - 1]?.end || 0)
+        : 0,
+    [rowVirtualizer, virtualRows],
   );
 
   const fetchMoreOnBottomReached = useCallback(
@@ -108,7 +113,7 @@ const EntryListingTable: FC<EntryListingTableProps> = ({
               <td style={{ height: `${paddingTop}px` }} />
             </tr>
           )}
-          {virtualRows.map(virtualRow => {
+          {rowVirtualizer.getVirtualItems().map(virtualRow => {
             const data = entryData[virtualRow.index];
             return (
               <EntryRow
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -40,7 +40,6 @@
     "@next/eslint-plugin-next": "13.5.4",
     "@types/js-yaml": "4.0.5",
     "@types/node": "18.16.14",
-    "@types/prettier": "3.0.0",
     "@types/prismjs": "1.26.0",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
diff --git a/yarn.lock b/yarn.lock
@@ -3577,11 +3577,6 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@reach/observe-rect@^1.1.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.2.0.tgz#d7a6013b8aafcc64c778a0ccb83355a11204d3b2"
-  integrity sha512-Ba7HmkFgfQxZqqaeIWWkNK0rEhpxVQHIoVyW1YDSkGsGIXzcaW4deC8B0pZrNSSyLTdIk7y+5olKt5+g0GmFIQ==
-
 "@react-dnd/asap@^5.0.1":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"
@@ -3870,6 +3865,18 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tanstack/react-virtual@3.0.0-beta.61":
+  version "3.0.0-beta.61"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.0.0-beta.61.tgz#1c2e64affe677c883a475847e66b8774f731fa69"
+  integrity sha512-ElaOqL3FvJE075/6mRbv8VBHhiF5kHjGA7eo1O+x7sPWO7+fzkTr7t7AhNaWzRLxhUpQfbb6XG3ltp8mpfFLQg==
+  dependencies:
+    "@tanstack/virtual-core" "3.0.0-beta.61"
+
+"@tanstack/virtual-core@3.0.0-beta.61":
+  version "3.0.0-beta.61"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.0.0-beta.61.tgz#a37b29d807e82b33d7d27a5fbee51de0f2a1f98a"
+  integrity sha512-C3iu9rkWvjJ/KbYAjuwLTjqiR9fcf9lXjRBLHDzsL/M6cR7/HLSU94abSdVrzuiqRvP7u7e0FeqPK0O3VbvWyg==
+
 "@testing-library/dom@9.2.0", "@testing-library/dom@^9.0.0":
   version "9.2.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.2.0.tgz#0e1f45e956f2a16f471559c06edd8827c4832f04"
@@ -4295,13 +4302,6 @@
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-6.0.3.tgz#705bb349e789efa06f43f128cef51240753424cb"
   integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==
 
-"@types/prettier@3.0.0":
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-3.0.0.tgz#e9bc8160230d3a461dab5c5b41cceef1ef723057"
-  integrity sha512-mFMBfMOz8QxhYVbuINtswBp9VL2b4Y0QqYHwqLz3YbgtfAcat2Dl6Y1o4e22S/OVE6Ebl9m7wWiMT2lSbAs1wA==
-  dependencies:
-    prettier "*"
-
 "@types/prettier@^2.1.5":
   version "2.7.2"
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.2.tgz#6c2324641cc4ba050a8c710b2b251b377581fbf0"
@@ -6531,16 +6531,11 @@ ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
-ci-info@^3.2.0:
+ci-info@^3.2.0, ci-info@^3.8.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
   integrity sha512-eXTggHWSooYhq49F2opQhuHWgzucfF2YgODK4e1566GQs5BIfP30B0oenwBJHfWxAs2fyPB1s7Mg949zLf61Yw==
 
-ci-info@^3.8.0:
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4"
-  integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==
-
 cjs-module-lexer@^1.0.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
@@ -13990,7 +13985,7 @@ prettier-linter-helpers@^1.0.0:
   dependencies:
     fast-diff "^1.1.2"
 
-prettier@*, prettier@3.0.3:
+prettier@3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643"
   integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==
@@ -14454,13 +14449,6 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-virtual@2.10.4:
-  version "2.10.4"
-  resolved "https://registry.yarnpkg.com/react-virtual/-/react-virtual-2.10.4.tgz#08712f0acd79d7d6f7c4726f05651a13b24d8704"
-  integrity sha512-Ir6+oPQZTVHfa6+JL9M7cvMILstFZH/H3jqeYeKI4MSUX+rIruVwFC6nGVXw9wqAw8L0Kg2KvfXxI85OvYQdpQ==
-  dependencies:
-    "@reach/observe-rect" "^1.1.0"
-
 react-virtualized-auto-sizer@1.0.15:
   version "1.0.15"
   resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.15.tgz#84558bcab61a625d13ec37876639bb09c5a3ec0b"
