@etsoo/react 1.7.25 → 1.7.26

package/lib/components/ScrollerGrid.js

@@ -220,7 +220,7 @@ export const ScrollerGrid = (props) => {
             state.isMounted = false;
         };
     }, []);
-    // Force update to work with the new width
+    // Force update to work with the new width and rowHeight
     React.useEffect(() => {
         var _a;
         (_a = ref.current) === null || _a === void 0 ? void 0 : _a.resetAfterIndices({
@@ -228,7 +228,7 @@ export const ScrollerGrid = (props) => {
             rowIndex: 0,
             shouldForceUpdate: true
         });
-    }, [width]);
+    }, [width, rowHeight]);
     // Rows
     const rowLength = rows.length;
     // Row count
@@ -244,11 +244,10 @@ export const ScrollerGrid = (props) => {
     // Layout
     return (React.createElement(React.Fragment, null,
         headerRenderer && headerRenderer(state),
-        React.createElement(VariableSizeGrid, { itemKey: ({ columnIndex, rowIndex }) => {
-                const data = rows[rowIndex];
+        React.createElement(VariableSizeGrid, { itemKey: ({ columnIndex, rowIndex, data }) => {
                 if (data == null)
                     return [rowIndex, columnIndex].join(',');
-                return [data[idField], columnIndex].join(',');
+                return [`${data[idField]}-${rowIndex}`, columnIndex].join(',');
             }, onItemsRendered: onItemsRenderedLocal, ref: ref, rowCount: rowCount, rowHeight: typeof rowHeight === 'function'
                 ? rowHeight
                 : () => rowHeight, style: { overflowX: 'hidden' }, width: width, ...rest }, (props) => itemRendererLocal(props, state)),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.7.25",
+    "version": "1.7.26",
     "description": "TypeScript ReactJs UI Independent Framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -48,25 +48,25 @@
         "@dnd-kit/core": "^6.1.0",
         "@dnd-kit/sortable": "^8.0.0",
         "@emotion/css": "^11.11.2",
-        "@emotion/react": "^11.11.3",
+        "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.0",
-        "@etsoo/appscript": "^1.4.74",
+        "@etsoo/appscript": "^1.4.76",
         "@etsoo/notificationbase": "^1.1.35",
         "@etsoo/shared": "^1.2.26",
-        "@types/react": "^18.2.58",
+        "@types/react": "^18.2.60",
         "@types/react-dom": "^18.2.19",
         "@types/react-window": "^1.8.8",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.22.1",
+        "react-router-dom": "^6.22.2",
         "react-window": "^1.8.10"
     },
     "devDependencies": {
         "@babel/cli": "^7.23.9",
-        "@babel/core": "^7.23.9",
-        "@babel/plugin-transform-runtime": "^7.23.9",
-        "@babel/preset-env": "^7.23.9",
-        "@babel/runtime-corejs3": "^7.23.9",
+        "@babel/core": "^7.24.0",
+        "@babel/plugin-transform-runtime": "^7.24.0",
+        "@babel/preset-env": "^7.24.0",
+        "@babel/runtime-corejs3": "^7.24.0",
         "@testing-library/jest-dom": "^6.4.2",
         "@testing-library/react": "^14.2.1",
         "@types/jest": "^29.5.12",

package/src/components/ScrollerGrid.tsx

@@ -434,14 +434,14 @@ export const ScrollerGrid = <
         };
     }, []);
 
-    // Force update to work with the new width
+    // Force update to work with the new width and rowHeight
     React.useEffect(() => {
         ref.current?.resetAfterIndices({
             columnIndex: 0,
             rowIndex: 0,
             shouldForceUpdate: true
         });
-    }, [width]);
+    }, [width, rowHeight]);
 
     // Rows
     const rowLength = rows.length;
@@ -462,10 +462,11 @@ export const ScrollerGrid = <
         <React.Fragment>
             {headerRenderer && headerRenderer(state)}
             <VariableSizeGrid<T>
-                itemKey={({ columnIndex, rowIndex }) => {
-                    const data = rows[rowIndex];
+                itemKey={({ columnIndex, rowIndex, data }) => {
                     if (data == null) return [rowIndex, columnIndex].join(',');
-                    return [data[idField], columnIndex].join(',');
+                    return [`${data[idField]}-${rowIndex}`, columnIndex].join(
+                        ','
+                    );
                 }}
                 onItemsRendered={onItemsRenderedLocal}
                 ref={ref}