Update typescript-eslint config (#3977)

* Update typescript-eslint config

* update

* fix

Author: nstepien

.github/dependabot.yml

@@ -11,9 +11,6 @@ updates:
         patterns:
           - 'react'
           - 'react-dom'
-      typescript-eslint:
-        patterns:
-          - '@typescript-eslint/*'
       vitest:
         patterns:
           - 'vitest'

eslint.config.js

@@ -55,8 +55,6 @@
     "@types/node": "^25.0.2",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
-    "@typescript-eslint/eslint-plugin": "^8.48.1",
-    "@typescript-eslint/parser": "^8.48.1",
     "@vitejs/plugin-react": "^5.1.1",
     "@vitest/browser-playwright": "^4.0.16",
     "@vitest/coverage-istanbul": "^4.0.16",
@@ -78,6 +76,7 @@
     "rolldown": "^1.0.0-rc.3",
     "rolldown-plugin-dts": "^0.22.1",
     "typescript": "~5.9.2",
+    "typescript-eslint": "^8.56.0",
     "vite": "^8.0.0-beta.13",
     "vitest": "^4.0.17",
     "vitest-browser-react": "^2.0.2"

package.json

@@ -139,13 +139,13 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
   }, [groupBy, rowGrouper, rawRows]);
 
   const [rows, isGroupRow] = useMemo((): [
-    ReadonlyArray<R | GroupRow<R>>,
+    readonly (R | GroupRow<R>)[],
     (row: R | GroupRow<R>) => row is GroupRow<R>
   ] => {
     const allGroupRows = new Set<unknown>();
     if (!groupedRows) return [rawRows, isGroupRow];
 
-    const flattenedRows: Array<R | GroupRow<R>> = [];
+    const flattenedRows: (R | GroupRow<R>)[] = [];
 
     const expandGroup = (
       rows: GroupByDictionary<R> | readonly R[],
@@ -298,7 +298,6 @@ export function TreeDataGrid<R, SR = unknown, K extends Key = Key>({
 
     if (args.mode === 'EDIT') return;
     const { column, rowIdx, selectCell } = args;
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     const idx = column?.idx ?? -1;
     const row = rows[rowIdx];
 

src/TreeDataGrid.tsx

@@ -8,7 +8,7 @@ import type { DataGridProps } from '../DataGrid';
 import renderHeaderCell from '../renderHeaderCell';
 
 type Mutable<T> = {
-  -readonly [P in keyof T]: T[P] extends ReadonlyArray<infer V> ? Mutable<V>[] : T[P];
+  -readonly [P in keyof T]: T[P] extends readonly (infer V)[] ? Mutable<V>[] : T[P];
 };
 
 interface WithParent<R, SR> {

src/hooks/useCalculatedColumns.ts

@@ -203,7 +203,7 @@ export interface CellMouseArgs<TRow, TSummaryRow = unknown> {
 
 interface SelectCellKeyDownArgs<TRow, TSummaryRow = unknown> {
   mode: 'SELECT';
-  column: CalculatedColumn<TRow, TSummaryRow>;
+  column: CalculatedColumn<TRow, TSummaryRow> | undefined;
   row: TRow;
   rowIdx: number;
   selectCell: (position: Position, options?: SelectCellOptions) => void;

src/types.ts

@@ -124,7 +124,6 @@ function TestGrid({
 
 function rowGrouper(rows: readonly Row[], columnKey: string) {
   // @ts-expect-error
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   return Object.groupBy(rows, (r) => r[columnKey]) as Record<string, readonly R[]>;
 }
 

test/browser/TreeDataGrid.test.tsx

@@ -14,7 +14,7 @@ test('renderHeaderCell is either undefined or a component', async () => {
     {
       key: 'name',
       name: 'Name',
-      renderHeaderCell: ({ column }) => `Fancy! ${column.name}`
+      renderHeaderCell: ({ column }) => `Fancy! ${column.name as string}`
     }
   ];
 

test/browser/column/renderHeaderCell.test.tsx

@@ -85,6 +85,5 @@ function rowKeyGetter(row: Row) {
 
 function rowGrouper(rows: readonly Row[], columnKey: string) {
   // @ts-expect-error
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-return
   return Object.groupBy(rows, (r) => r[columnKey]) as Record<string, readonly R[]>;
 }

test/visual/treeGrid.test.tsx

@@ -3,7 +3,6 @@ import { Link } from '@tanstack/react-router';
 import { css } from 'ecij';
 
 import type { Direction } from '../src/types';
-import { startViewTransition } from './utils';
 
 const headerClassname = css`
   border-inline-start: 4px solid light-dark(hsl(210deg 50% 80%), hsl(210deg 50% 40%));
@@ -64,7 +63,7 @@ export default function Nav({ direction, onDirectionChange }: Props) {
   const [theme, setTheme] = useState<Theme>('system');
 
   function onThemeChange(theme: Theme) {
-    startViewTransition(() => {
+    document.startViewTransition(() => {
       setTheme(theme);
     });
   }