Merge branch 'main' into pr/Luisgustavom1/3520

Author: amanmahajan7

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,7 +1,9 @@
 ---
 name: Bug report
 about: Create a bug report
-labels: Bug
+title: ''
+labels: 'Status: Unconfirmed'
+assignees: ''
 ---
 
 ## Describe the bug <!-- A clear and concise description of what the bug is. -->
@@ -11,10 +13,12 @@ labels: Bug
 1.
 2.
 
-Link to code example:
-
 ## Expected behavior <!-- A clear and concise description of what you expected to happen. -->
 
+## Link to Minimal Reproducible Example
+
+<!-- Link to a playground, StackBlitz, or GitHub repo with a minimal reproduction of the problem. A minimal reproduction is required.  -->
+
 ## Environment
 
 - `react-data-grid` version:

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,7 +1,9 @@
 ---
 name: Feature request
 about: Request a new feature or enhancement
+title: ''
 labels: Feature Request
+assignees: ''
 ---
 
 ## Use case <!-- Please describe what it is you would like to achieve. -->

.github/workflows/ci.yml

@@ -8,21 +8,12 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        react: [18, 19]
-      fail-fast: false
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: 23
           check-latest: true
-      - name: set up react 19
-        if: matrix.react == 19
-        run: |
-          node ./.github/workflows/patch-react19.js
-          cat package.json
       - name: npm install
         run: npm i
       - name: Biome
@@ -45,12 +36,11 @@ jobs:
         run: node --run test
         timeout-minutes: 4
       - name: Upload coverage
-        if: matrix.react == 18
         uses: codecov/codecov-action@v5
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
       - name: Deploy gh-pages
-        if: matrix.react == 18 && github.event_name == 'push' && github.ref == 'refs/heads/main'
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
         run: |
           git config --global user.email 'action@github.com'
           git config --global user.name 'GitHub Action'

.github/workflows/patch-react19.js

@@ -8,3 +8,4 @@ __screenshots__
 
 npm-debug.log
 **.orig
+.idea

.gitignore

@@ -18,7 +18,7 @@
 
 ## Features
 
-- [React 18.0+](package.json) support
+- [React 19.0+](package.json) support
 - [Evergreen browsers and server-side rendering](browserslist) support
 - Tree-shaking support and only [one npm dependency](package.json) to keep your bundles slim
 - Great performance thanks to virtualization: columns and rows outside the viewport are not rendered
@@ -42,7 +42,7 @@
 - [Cell copy / pasting](https://adazzle.github.io/react-data-grid/#/AllFeatures)
 - [Cell value dragging / filling](https://adazzle.github.io/react-data-grid/#/AllFeatures)
 - [Customizable Renderers](https://adazzle.github.io/react-data-grid/#/CustomizableRenderers)
-- Right-to-left (RTL) support. We recommend using Firefox as Chrome has a [bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1140374) with frozen columns.
+- Right-to-left (RTL) support. We recommend using Firefox as Chrome has a [bug](https://issues.chromium.org/issues/40653832) with frozen columns.
 
 ## Links
 
@@ -57,14 +57,14 @@
 npm install react-data-grid
 ```
 
-`react-data-grid` is published as ECMAScript modules for evergreen browsers / bundlers, and CommonJS for server-side rendering / Jest.
+`react-data-grid` is published as ECMAScript modules for evergreen browsers, bundlers, and server-side rendering.
 
 ## Quick start
 
 ```jsx
 import 'react-data-grid/lib/styles.css';
 
-import DataGrid from 'react-data-grid';
+import { DataGrid } from 'react-data-grid';
 
 const columns = [
   { key: 'id', name: 'ID' },
@@ -114,7 +114,7 @@ An optional array of summary rows, usually used to display total values for exam
 A function returning a unique key/identifier per row. `rowKeyGetter` is required for row selection to work.
 
 ```tsx
-import DataGrid from 'react-data-grid';
+import { DataGrid } from 'react-data-grid';
 
 interface Row {
   id: number;
@@ -140,7 +140,7 @@ The second parameter is an object with an `indexes` array highlighting which row
 
 ```tsx
 import { useState } from 'react';
-import DataGrid from 'react-data-grid';
+import { DataGrid } from 'react-data-grid';
 
 function MyGrid() {
   const [rows, setRows] = useState(initialRows);
@@ -181,7 +181,7 @@ A function called when row selection is changed.
 
 ```tsx
 import { useState } from 'react';
-import DataGrid, { SelectColumn } from 'react-data-grid';
+import { DataGrid, SelectColumn } from 'react-data-grid';
 
 const rows: readonly Rows[] = [...];
 
@@ -224,7 +224,7 @@ A function called when sorting is changed
 
 ```tsx
 import { useState } from 'react';
-import DataGrid, { SelectColumn } from 'react-data-grid';
+import { DataGrid, SelectColumn } from 'react-data-grid';
 
 const rows: readonly Rows[] = [...];
 
@@ -282,10 +282,6 @@ function MyGrid() {
 
 ###### `onFill?: Maybe<(event: FillEvent<R>) => R>`
 
-###### `onCopy?: Maybe<(event: CopyEvent<R>) => void>`
-
-###### `onPaste?: Maybe<(event: PasteEvent<R>) => R>`
-
 ###### `onCellClick?: Maybe<(args: CellClickArgs<R, SR>, event: CellMouseEvent) => void>`
 
 Triggered when a cell is clicked. The default behavior is to select the cell. Call `preventGridDefault` to prevent the default behavior
@@ -379,7 +375,15 @@ function onCellKeyDown(args: CellKeyDownArgs<R, SR>, event: CellKeyboardEvent) {
 }
 ```
 
-Check [more examples](website/routes/CellNavigation.lazy.tsx)
+Check [more examples](website/routes/CellNavigation.tsx)
+
+###### `onCellCopy?: Maybe<(args: CellCopyEvent<NoInfer<R>, NoInfer<SR>>, event: CellClipboardEvent) => void>`
+
+A function called when copy event is triggered on a cell
+
+###### `onCellPaste?: Maybe<(args: CellPasteEvent<NoInfer<R>, NoInfer<SR>>, event: CellClipboardEvent) => void>`
+
+A function called when paste event is triggered on a cell
 
 ###### `onSelectedCellChange?: Maybe<(args: CellSelectArgs<R, SR>) => void>;`
 
@@ -419,16 +423,16 @@ interface Renderers<TRow, TSummaryRow> {
 }
 ```
 
-For example, the default `<Row />` component can be wrapped via the `renderRow` prop to add context providers or tweak props
+For example, the default `<Row />` component can be wrapped via the `renderRow` prop to add contexts or tweak props
 
 ```tsx
-import DataGrid, { RenderRowProps, Row } from 'react-data-grid';
+import { DataGrid, RenderRowProps, Row } from 'react-data-grid';
 
 function myRowRenderer(key: React.Key, props: RenderRowProps<Row>) {
   return (
-    <MyContext.Provider key={key} value={123}>
+    <MyContext key={key} value={123}>
       <Row {...props} />
-    </MyContext.Provider>
+    </MyContext>
   );
 }
 
@@ -444,7 +448,7 @@ function MyGrid() {
 A function to add a class on the row
 
 ```tsx
-import DataGrid from 'react-data-grid';
+import { DataGrid } from 'react-data-grid';
 
 function MyGrid() {
   return <DataGrid columns={columns} rows={rows} rowClass={rowClass} />;
@@ -455,6 +459,8 @@ function rowClass(row: Row, rowIdx: number) {
 }
 ```
 
+###### `headerRowClass?: Maybe<string>>`
+
 ###### `direction?: Maybe<'ltr' | 'rtl'>`
 
 This property sets the text direction of the grid, it defaults to `'ltr'` (left-to-right). Setting `direction` to `'rtl'` has the following effects:

README.md

@@ -1,18 +1,3 @@
 {
-  "presets": [
-    [
-      "@babel/env",
-      {
-        "loose": true,
-        "bugfixes": true,
-        "shippedProposals": true
-      }
-    ],
-    ["@babel/react", { "runtime": "automatic" }],
-    "@babel/typescript"
-  ],
-  "plugins": [
-    "@babel/transform-runtime",
-    ["optimize-clsx", { "functionNames": ["getCellClassname"] }]
-  ]
+  "presets": ["@babel/typescript"]
 }

babel.config.json

@@ -1,7 +1,7 @@
-import { fixupPluginRules } from '@eslint/compat';
 import typescriptEslint from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 import vitest from '@vitest/eslint-plugin';
+import { defineConfig, globalIgnores } from 'eslint/config';
 import jestDom from 'eslint-plugin-jest-dom';
 import react from 'eslint-plugin-react';
 import reactCompiler from 'eslint-plugin-react-compiler';
@@ -11,18 +11,23 @@ import sonarjs from 'eslint-plugin-sonarjs';
 import testingLibrary from 'eslint-plugin-testing-library';
 import markdown from '@eslint/markdown';
 
-export default [
+export default defineConfig([
+  globalIgnores(['.cache', 'coverage', 'dist', 'lib']),
+
   {
-    ignores: ['.cache', 'coverage', 'dist', 'lib']
+    linterOptions: {
+      reportUnusedInlineConfigs: 'warn'
+    }
   },
+
   {
     name: 'common',
     files: ['**/*.{js,ts,tsx}'],
 
     plugins: {
       react,
       'react-compiler': reactCompiler,
-      'react-hooks': fixupPluginRules(reactHooks),
+      'react-hooks': reactHooks,
       'react-hooks-extra': reactHooksExtra,
       sonarjs,
       '@typescript-eslint': typescriptEslint
@@ -387,9 +392,9 @@ export default [
 
       // 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/no-useless-custom-hooks': 1,
       'react-hooks-extra/prefer-use-state-lazy-initialization': 1,
 
       // SonarJS rules
@@ -472,6 +477,7 @@ export default [
       '@typescript-eslint/no-meaningless-void-operator': 0,
       '@typescript-eslint/no-misused-new': 1,
       '@typescript-eslint/no-misused-promises': 0,
+      '@typescript-eslint/no-misused-spread': 1,
       '@typescript-eslint/no-mixed-enums': 1,
       '@typescript-eslint/no-namespace': 1,
       '@typescript-eslint/no-non-null-asserted-nullish-coalescing': 1,
@@ -563,19 +569,10 @@ export default [
           importNames: ['default'],
           message: 'Use named imports instead.'
         },
-        {
-          name: 'react',
-          importNames: ['useLayoutEffect'],
-          message: 'Use the override from src/hooks instead.'
-        },
         {
           name: 'react-dom',
           importNames: ['default'],
           message: 'Use named imports instead.'
-        },
-        {
-          name: '@testing-library/dom',
-          message: 'Import @testing-library/react instead.'
         }
       ],
       '@typescript-eslint/no-shadow': 0,
@@ -628,15 +625,7 @@ export default [
       'vitest/no-interpolation-in-snapshots': 0,
       'vitest/no-large-snapshots': 0,
       'vitest/no-mocks-import': 1,
-      'vitest/no-restricted-matchers': [
-        1,
-        {
-          toBeTruthy: 'Use toBe(true) instead.',
-          'not.toBeTruthy': null,
-          toBeFalsy: 'Use toBe(false) instead.',
-          'not.toBeFalsy': null
-        }
-      ],
+      'vitest/no-restricted-matchers': 0,
       'vitest/no-restricted-vi-methods': 0,
       'vitest/no-standalone-expect': 1,
       'vitest/no-test-prefixes': 0,
@@ -653,6 +642,7 @@ export default [
       'vitest/prefer-mock-promise-shorthand': 1,
       'vitest/prefer-snapshot-hint': 0,
       'vitest/prefer-spy-on': 1,
+      'vitest/prefer-strict-boolean-matchers': 1,
       'vitest/prefer-strict-equal': 1,
       'vitest/prefer-to-be': 1,
       'vitest/prefer-to-be-falsy': 0,
@@ -664,6 +654,7 @@ export default [
       'vitest/prefer-vi-mocked': 1,
       'vitest/require-hook': 0,
       'vitest/require-local-test-context-for-concurrent-snapshots': 0,
+      'vitest/require-mock-type-parameters': 0,
       'vitest/require-to-throw-message': 0,
       'vitest/require-top-level-describe': 0,
       'vitest/valid-describe-callback': 1,
@@ -707,7 +698,7 @@ export default [
       'testing-library/prefer-explicit-assert': 1,
       'testing-library/prefer-find-by': 1,
       'testing-library/prefer-implicit-assert': 0,
-      'testing-library/prefer-presence-queries': 1,
+      'testing-library/prefer-presence-queries': 0,
       'testing-library/prefer-query-by-disappearance': 1,
       'testing-library/prefer-query-matchers': 0,
       'testing-library/prefer-screen-queries': 0,
@@ -748,4 +739,4 @@ export default [
       'markdown/no-missing-label-refs': 1
     }
   }
-];
+]);