Merge branch 'main' into react19

Author: amanmahajan7

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 22
+          node-version: 23
           check-latest: true
       - name: npm install
         run: npm i

README.md

@@ -224,6 +224,7 @@ interface Renderers<TRow, TSummaryRow> {
   renderCheckbox?: Maybe<(props: RenderCheckboxProps) => ReactNode>;
   renderRow?: Maybe<(key: Key, props: RenderRowProps<TRow, TSummaryRow>) => ReactNode>;
   renderSortStatus?: Maybe<(props: RenderSortStatusProps) => ReactNode>;
+  renderCell?: Maybe<(key: Key, props: CellRendererProps<TRow, TSummaryRow>) => ReactNode>;
   noRowsFallback?: Maybe<ReactNode>;
 }
 ```

eslint.config.js

@@ -4,7 +4,9 @@ import tsParser from '@typescript-eslint/parser';
 import vitest from '@vitest/eslint-plugin';
 import jestDom from 'eslint-plugin-jest-dom';
 import react from 'eslint-plugin-react';
+import reactCompiler from 'eslint-plugin-react-compiler';
 import reactHooks from 'eslint-plugin-react-hooks';
+import reactHooksExtra from 'eslint-plugin-react-hooks-extra';
 import sonarjs from 'eslint-plugin-sonarjs';
 import testingLibrary from 'eslint-plugin-testing-library';
 
@@ -18,7 +20,9 @@ export default [
 
     plugins: {
       react,
+      'react-compiler': reactCompiler,
       'react-hooks': fixupPluginRules(reactHooks),
+      'react-hooks-extra': reactHooksExtra,
       sonarjs,
       '@typescript-eslint': typescriptEslint
     },
@@ -371,11 +375,22 @@ export default [
       'react/style-prop-object': 0,
       'react/void-dom-elements-no-children': 1,
 
+      // React Compiler
+      // https://react.dev/learn/react-compiler#installing-eslint-plugin-react-compiler
+      'react-compiler/react-compiler': 1,
+
       // React Hooks
       // https://www.npmjs.com/package/eslint-plugin-react-hooks
       'react-hooks/rules-of-hooks': 1,
       'react-hooks/exhaustive-deps': 1,
 
+      // React Hooks Extra
+      // https://eslint-react.xyz/
+      'react-hooks-extra/no-redundant-custom-hook': 1,
+      'react-hooks-extra/no-unnecessary-use-callback': 1,
+      'react-hooks-extra/no-unnecessary-use-memo': 1,
+      'react-hooks-extra/prefer-use-state-lazy-initialization': 1,
+
       // SonarJS rules
       // https://github.com/SonarSource/eslint-plugin-sonarjs#rules
       'sonarjs/no-all-duplicated-branches': 1,
@@ -467,13 +482,14 @@ export default [
       '@typescript-eslint/no-this-alias': 0,
       '@typescript-eslint/no-type-alias': 0,
       '@typescript-eslint/no-unnecessary-boolean-literal-compare': 1,
-      '@typescript-eslint/no-unnecessary-condition': 1,
+      '@typescript-eslint/no-unnecessary-condition': [1, { checkTypePredicates: true }],
       '@typescript-eslint/no-unnecessary-parameter-property-assignment': 1,
       '@typescript-eslint/no-unnecessary-qualifier': 0,
       '@typescript-eslint/no-unnecessary-template-expression': 1,
       '@typescript-eslint/no-unnecessary-type-arguments': 1,
       '@typescript-eslint/no-unnecessary-type-assertion': 1,
       '@typescript-eslint/no-unnecessary-type-constraint': 1,
+      '@typescript-eslint/no-unnecessary-type-parameters': 1,
       '@typescript-eslint/no-unsafe-argument': 0,
       '@typescript-eslint/no-unsafe-assignment': 0,
       '@typescript-eslint/no-unsafe-call': 0,
@@ -553,10 +569,6 @@ export default [
         {
           name: '@testing-library/dom',
           message: 'Import @testing-library/react instead.'
-        },
-        {
-          name: 'lodash',
-          message: 'Import lodash-es instead.'
         }
       ],
       '@typescript-eslint/no-shadow': 0,
@@ -582,7 +594,7 @@ export default [
     plugins: {
       vitest,
       'jest-dom': jestDom,
-      'testing-library': fixupPluginRules(testingLibrary)
+      'testing-library': testingLibrary
     },
 
     rules: {
@@ -642,6 +654,7 @@ export default [
       'vitest/prefer-to-contain': 1,
       'vitest/prefer-to-have-length': 1,
       'vitest/prefer-todo': 1,
+      'vitest/prefer-vi-mocked': 1,
       'vitest/require-hook': 0,
       'vitest/require-local-test-context-for-concurrent-snapshots': 0,
       'vitest/require-to-throw-message': 0,

package.json

@@ -61,38 +61,40 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@babel/runtime": "^7.21.5",
-    "@biomejs/biome": "1.9.3",
-    "@eslint/compat": "^1.1.1",
+    "@biomejs/biome": "1.9.4",
+    "@eslint/compat": "^1.2.2",
     "@faker-js/faker": "^9.0.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.0.2",
     "@linaria/core": "^6.0.0",
     "@microsoft/api-extractor": "^7.23.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@tanstack/react-router": "^1.57.13",
-    "@tanstack/router-plugin": "^1.57.13",
+    "@tanstack/react-router": "^1.70.0",
+    "@tanstack/router-plugin": "^1.69.1",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^22.0.0",
     "@types/react": "npm:types-react@rc",
     "@types/react-dom": "npm:types-react-dom@rc",
-    "@typescript-eslint/eslint-plugin": "^8.7.0",
-    "@typescript-eslint/parser": "^8.7.0",
+    "@typescript-eslint/eslint-plugin": "^8.13.0",
+    "@typescript-eslint/parser": "^8.13.0",
     "@vitejs/plugin-react": "^4.3.1",
     "@vitest/browser": "^2.1.1",
     "@vitest/coverage-v8": "^2.1.1",
-    "@vitest/eslint-plugin": "^1.1.4",
+    "@vitest/eslint-plugin": "^1.1.8",
     "@wyw-in-js/rollup": "^0.5.0",
     "@wyw-in-js/vite": "^0.5.0",
     "babel-plugin-optimize-clsx": "^2.6.2",
     "browserslist": "^4.24.0",
-    "eslint": "^9.11.1",
+    "eslint": "^9.14.0",
     "eslint-plugin-jest-dom": "^5.0.1",
-    "eslint-plugin-react": "^7.36.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-sonarjs": "^2.0.2",
-    "eslint-plugin-testing-library": "^6.3.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-a7bf2bd-20241110",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks-extra": "^1.16.1",
+    "eslint-plugin-sonarjs": "^2.0.4",
+    "eslint-plugin-testing-library": "^6.4.0",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.5.23",
     "playwright": "^1.45.1",

src/Cell.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { forwardRef, memo, type RefAttributes } from 'react';
 import { css } from '@linaria/core';
 
 import { useRovingTabIndex } from './hooks';
@@ -25,31 +25,37 @@ const cellDraggedOver = css`
 
 const cellDraggedOverClassname = `rdg-cell-dragged-over ${cellDraggedOver}`;
 
-function Cell<R, SR>({
-  column,
-  colSpan,
-  isCellSelected,
-  isCopied,
-  isDraggedOver,
-  row,
-  rowIdx,
-  onClick,
-  onDoubleClick,
-  onContextMenu,
-  onRowChange,
-  selectCell,
-  ...props
-}: CellRendererProps<R, SR>) {
+function Cell<R, SR>(
+  {
+    column,
+    colSpan,
+    isCellSelected,
+    isCopied,
+    isDraggedOver,
+    row,
+    rowIdx,
+    className,
+    onClick,
+    onDoubleClick,
+    onContextMenu,
+    onRowChange,
+    selectCell,
+    style,
+    ...props
+  }: CellRendererProps<R, SR>,
+  ref: React.Ref<HTMLDivElement>
+) {
   const { tabIndex, childTabIndex, onFocus } = useRovingTabIndex(isCellSelected);
 
   const { cellClass } = column;
-  const className = getCellClassname(
+  className = getCellClassname(
     column,
     {
       [cellCopiedClassname]: isCopied,
       [cellDraggedOverClassname]: isDraggedOver
     },
-    typeof cellClass === 'function' ? cellClass(row) : cellClass
+    typeof cellClass === 'function' ? cellClass(row) : cellClass,
+    className
   );
   const isEditable = isCellEditableUtil(column, row);
 
@@ -95,9 +101,13 @@ function Cell<R, SR>({
       aria-colspan={colSpan}
       aria-selected={isCellSelected}
       aria-readonly={!isEditable || undefined}
+      ref={ref}
       tabIndex={tabIndex}
       className={className}
-      style={getCellStyle(column, colSpan)}
+      style={{
+        ...getCellStyle(column, colSpan),
+        ...style
+      }}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       onContextMenu={handleContextMenu}
@@ -116,4 +126,12 @@ function Cell<R, SR>({
   );
 }
 
-export default memo(Cell) as <R, SR>(props: CellRendererProps<R, SR>) => React.JSX.Element;
+const CellComponent = memo(forwardRef(Cell)) as <R, SR>(
+  props: CellRendererProps<R, SR> & RefAttributes<HTMLDivElement>
+) => React.JSX.Element;
+
+export default CellComponent;
+
+export function defaultRenderCell<R, SR>(key: React.Key, props: CellRendererProps<R, SR>) {
+  return <CellComponent key={key} {...props} />;
+}