fix(Virtualized): use version which supports React 19

Author: rwieruch

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "clsx": "1.1.1",
-    "react-virtualized-auto-sizer": "1.0.7",
+    "react-virtualized-auto-sizer": "1.0.26",
     "react-window": "1.8.7"
   },
   "devDependencies": {
@@ -53,7 +53,7 @@
     "@types/node": "17.0.14",
     "@types/react": "17.0.38",
     "@types/react-dom": "17.0.11",
-    "@types/react-virtualized-auto-sizer": "1.0.1",
+    "@types/react-virtualized-auto-sizer": "1.0.8",
     "@types/react-window": "1.8.5",
     "@typescript-eslint/eslint-plugin": "5.10.2",
     "@typescript-eslint/parser": "5.10.2",

src/common/util/useIdReducer/index.ts

@@ -12,7 +12,7 @@ import {
   MiddlewareFunction,
   IdReducerFunctions,
 } from '@table-library/react-table-library/types/common';
-import { Data, TableNode } from '@table-library/react-table-library/types/table';
+import { Data, Identifier, TableNode } from '@table-library/react-table-library/types/table';
 
 const addById = (state: State, action: Action) => {
   return {
@@ -142,7 +142,7 @@ const getMergedOptions = (options: Record<string, any>) => ({
   ...options,
 });
 
-const getRecursiveIds = (id: string, nodes: TableNode[]) => {
+const getRecursiveIds = (id: Identifier, nodes: TableNode[]) => {
   const node = findNodeById(nodes, id);
 
   return [node, ...fromTreeToList(node?.nodes)].map((item) => item!.id);
@@ -163,7 +163,10 @@ const useIdReducer = <T extends TableNode>(
   );
 
   // exclusive for select feature
-  const shiftToggle = React.useRef({
+  const shiftToggle = React.useRef<{
+    lastToggledId: Identifier | null;
+    currentShiftIds: Identifier[];
+  }>({
     lastToggledId: null,
     currentShiftIds: [],
   });
@@ -178,7 +181,7 @@ const useIdReducer = <T extends TableNode>(
     );
 
   const onAddById = React.useCallback(
-    (id) =>
+    (id: Identifier) =>
       dispatchWithMiddleware({
         type: ADD_BY_ID,
         payload: { id },
@@ -187,7 +190,7 @@ const useIdReducer = <T extends TableNode>(
   );
 
   const onRemoveById = React.useCallback(
-    (id) =>
+    (id: Identifier) =>
       dispatchWithMiddleware({
         type: REMOVE_BY_ID,
         payload: { id },
@@ -196,7 +199,7 @@ const useIdReducer = <T extends TableNode>(
   );
 
   const onToggleById = React.useCallback(
-    (id) => {
+    (id: Identifier) => {
       if (state.ids.includes(id)) {
         onRemoveById(id);
       } else {
@@ -210,7 +213,7 @@ const useIdReducer = <T extends TableNode>(
   );
 
   const onAddByIds = React.useCallback(
-    (ids, options) => {
+    (ids: Identifier[], options) => {
       const mergedOptions = getMergedOptions(options);
 
       dispatchWithMiddleware({
@@ -225,7 +228,7 @@ const useIdReducer = <T extends TableNode>(
   );
 
   const onRemoveByIds = React.useCallback(
-    (ids) => {
+    (ids: Identifier[]) => {
       dispatchWithMiddleware({
         type: REMOVE_BY_IDS,
         payload: { ids },
@@ -235,7 +238,7 @@ const useIdReducer = <T extends TableNode>(
   );
 
   const onToggleByIdRecursively = React.useCallback(
-    (id, options) => {
+    (id: Identifier, options) => {
       const mergedOptions = getMergedOptions(options);
 
       const ids = getRecursiveIds(id, data.nodes);
@@ -274,7 +277,7 @@ const useIdReducer = <T extends TableNode>(
   );
 
   const onRemoveByIdRecursively = React.useCallback(
-    (id) => {
+    (id: Identifier) => {
       const ids = getRecursiveIds(id, data.nodes);
 
       onRemoveByIds(ids);
@@ -283,7 +286,7 @@ const useIdReducer = <T extends TableNode>(
   );
 
   const onAddByIdExclusively = React.useCallback(
-    (id) => {
+    (id: Identifier) => {
       dispatchWithMiddleware({
         type: ADD_BY_ID_EXCLUSIVELY,
         payload: { id },
@@ -299,7 +302,7 @@ const useIdReducer = <T extends TableNode>(
   }, [dispatchWithMiddleware]);
 
   const onToggleByIdExclusively = React.useCallback(
-    (id) => {
+    (id: Identifier) => {
       if (id === state.id) {
         onRemoveByIdExclusively();
       } else {

src/compact/VirtualizedTable.tsx

@@ -85,8 +85,9 @@ export const VirtualizedTable = <T extends TableNode>({
   ...tableProps
 }: VirtualizedTableProps<T>) => {
   return (
+    // @ts-ignore
     <AutoSizer>
-      {({ width, height }: { width: any; height: any }) => (
+      {({ width, height }: { width: number; height: number }) => (
         <VariableSizeList
           height={height}
           width={width}

src/virtualized/Virtualized.tsx

@@ -21,8 +21,9 @@ const Virtualized = <T extends TableNode>({
   return (
     <>
       {tableOptions?.renderBeforeTable && tableOptions.renderBeforeTable()}
+      {/* @ts-ignore */}
       <AutoSizer>
-        {({ width, height }) => (
+        {({ width, height }: { width: number; height: number }) => (
           <VariableSizeList
             height={height}
             width={width}

yarn.lock

@@ -4682,12 +4682,12 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-virtualized-auto-sizer@1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
-  integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
+"@types/react-virtualized-auto-sizer@1.0.8":
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.8.tgz#97d6b8e403450483b3d5e452a64729273e662109"
+  integrity sha512-keJpNyhiwfl2+N12G1ocCVA5ZDBArbPLe/S90X3kt7fam9naeHdaYYWbpe2sHczp70JWJ+2QLhBE8kLvLuVNjA==
   dependencies:
-    "@types/react" "*"
+    react-virtualized-auto-sizer "*"
 
 "@types/react-window@1.8.5":
   version "1.8.5"
@@ -14833,10 +14833,10 @@ react-transition-group@^4.4.2:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
-react-virtualized-auto-sizer@1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.7.tgz#bfb8414698ad1597912473de3e2e5f82180c1195"
-  integrity sha512-Mxi6lwOmjwIjC1X4gABXMJcKHsOo0xWl3E3ugOgufB8GJU+MqrtY35aBuvCYv/razQ1Vbp7h1gWJjGjoNN5pmA==
+react-virtualized-auto-sizer@*, react-virtualized-auto-sizer@1.0.26:
+  version "1.0.26"
+  resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz#e9470ef6a778dc4f1d5fd76305fa2d8b610c357a"
+  integrity sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==
 
 react-window@1.8.7:
   version "1.8.7"