Add support for React 19 (adazzle#3545)

* Add support for React 19

* react ci matrix

* --allow-unrelated-histories

* set up git user

* log diff with main

* merge website job into test job

Author: nstepien

.github/workflows/ci.yml

@@ -12,16 +12,26 @@ on:
 jobs:
   test:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        react: [18, 19]
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
           node-version: '22.x'
           check-latest: true
-      - uses: actions/cache@v4
-        with:
-          path: ~/.npm
-          key: npm-${{ hashFiles('package.json') }}
+      - name: Set up git user
+        run: |
+          git config --global user.email '[email protected]'
+          git config --global user.name 'GitHub Action'
+      - name: merge react 19 branch
+        if: matrix.react == 19
+        run: |
+          git fetch origin react19
+          git merge origin/react19 -X theirs --allow-unrelated-histories
+          git fetch origin main
+          git diff origin/main
       - name: npm install
         run: npm i
       - name: Biome
@@ -36,41 +46,18 @@ jobs:
         run: |
           node --run build
           node --run build:types
+      - name: Build website
+        run: node --run build:website
       - name: Test
         run: npm --run test
         timeout-minutes: 4
       - name: Upload coverage
+        if: matrix.react == 18
         uses: codecov/codecov-action@v4
         with:
           token: ${{ secrets.CODECOV_TOKEN }}
-
-  website:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '22.x'
-          check-latest: true
-      - uses: actions/cache@v4
-        with:
-          path: ~/.npm
-          key: npm-${{ hashFiles('package.json') }}
-      - uses: actions/cache@v4
-        with:
-          path: node_modules/.cache
-          key: build-${{ hashFiles('package.json') }}
-      - name: Build
-        run: |
-          npm i
-          node --run build:website
-      - name: Set up git user
-        if: github.event_name == 'push'
-        run: |
-          git config --global user.email '[email protected]'
-          git config --global user.name 'GitHub Action'
       - name: Deploy gh-pages
-        if: github.ref == 'refs/heads/main'
+        if: matrix.react == 18 && github.event_name == 'push' && github.ref == 'refs/heads/main'
         run: |
           git fetch origin gh-pages
           git worktree add gh-pages gh-pages

package.json

@@ -74,7 +74,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@types/lodash-es": "^4.17.7",
     "@types/node": "^20.10.3",
-    "@types/react": "^18.3.0",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
     "@typescript-eslint/parser": "^7.0.1",
@@ -110,7 +110,7 @@
     "vitest": "^2.0.1"
   },
   "peerDependencies": {
-    "react": "^18.0",
-    "react-dom": "^18.0"
+    "react": "^18.0 || ^19.0",
+    "react-dom": "^18.0 || ^19.0"
   }
 }

src/Cell.tsx

@@ -116,4 +116,4 @@ function Cell<R, SR>({
   );
 }
 
-export default memo(Cell) as <R, SR>(props: CellRendererProps<R, SR>) => JSX.Element;
+export default memo(Cell) as <R, SR>(props: CellRendererProps<R, SR>) => React.JSX.Element;

src/DataGrid.tsx

@@ -1225,4 +1225,4 @@ function isSamePosition(p1: Position, p2: Position) {
 
 export default forwardRef(DataGrid) as <R, SR = unknown, K extends Key = Key>(
   props: DataGridProps<R, SR, K> & RefAttributes<DataGridHandle>
-) => JSX.Element;
+) => React.JSX.Element;

src/EditCell.tsx

@@ -56,7 +56,7 @@ export default function EditCell<R, SR>({
   onKeyDown,
   navigate
 }: EditCellProps<R, SR>) {
-  const frameRequestRef = useRef<number | undefined>();
+  const frameRequestRef = useRef<number | undefined>(undefined);
   const commitOnOutsideClick = column.editorOptions?.commitOnOutsideClick !== false;
 
   // We need to prevent the `useEffect` from cleaning up between re-renders,

src/GroupCell.tsx

@@ -67,4 +67,4 @@ function GroupCell<R, SR>({
   );
 }
 
-export default memo(GroupCell) as <R, SR>(props: GroupCellProps<R, SR>) => JSX.Element;
+export default memo(GroupCell) as <R, SR>(props: GroupCellProps<R, SR>) => React.JSX.Element;

src/GroupRow.tsx

@@ -90,4 +90,6 @@ function GroupedRow<R, SR>({
   );
 }
 
-export default memo(GroupedRow) as <R, SR>(props: GroupRowRendererProps<R, SR>) => JSX.Element;
+export default memo(GroupedRow) as <R, SR>(
+  props: GroupRowRendererProps<R, SR>
+) => React.JSX.Element;

src/GroupedColumnHeaderRow.tsx

@@ -60,4 +60,4 @@ function GroupedColumnHeaderRow<R, SR>({
 
 export default memo(GroupedColumnHeaderRow) as <R, SR>(
   props: GroupedColumnHeaderRowProps<R, SR>
-) => JSX.Element;
+) => React.JSX.Element;

src/HeaderRow.tsx

@@ -102,4 +102,4 @@ function HeaderRow<R, SR, K extends React.Key>({
 
 export default memo(HeaderRow) as <R, SR, K extends React.Key>(
   props: HeaderRowProps<R, SR, K>
-) => JSX.Element;
+) => React.JSX.Element;

src/Row.tsx

@@ -104,7 +104,7 @@ function Row<R, SR>(
 
 const RowComponent = memo(forwardRef(Row)) as <R, SR>(
   props: RenderRowProps<R, SR> & RefAttributes<HTMLDivElement>
-) => JSX.Element;
+) => React.JSX.Element;
 
 export default RowComponent;
 

src/SummaryCell.tsx

@@ -58,4 +58,4 @@ function SummaryCell<R, SR>({
   );
 }
 
-export default memo(SummaryCell) as <R, SR>(props: SummaryCellProps<R, SR>) => JSX.Element;
+export default memo(SummaryCell) as <R, SR>(props: SummaryCellProps<R, SR>) => React.JSX.Element;

src/SummaryRow.tsx

@@ -113,4 +113,4 @@ function SummaryRow<R, SR>({
   );
 }
 
-export default memo(SummaryRow) as <R, SR>(props: SummaryRowProps<R, SR>) => JSX.Element;
+export default memo(SummaryRow) as <R, SR>(props: SummaryRowProps<R, SR>) => React.JSX.Element;

src/TreeDataGrid.tsx

@@ -439,4 +439,4 @@ function isReadonlyArray(arr: unknown): arr is readonly unknown[] {
 
 export default forwardRef(TreeDataGrid) as <R, SR = unknown, K extends Key = Key>(
   props: TreeDataGridProps<R, SR, K> & RefAttributes<DataGridHandle>
-) => JSX.Element;
+) => React.JSX.Element;

src/hooks/useColumnWidths.ts

@@ -9,7 +9,7 @@ export function useColumnWidths<R, SR>(
   columns: readonly CalculatedColumn<R, SR>[],
   viewportColumns: readonly CalculatedColumn<R, SR>[],
   templateColumns: readonly string[],
-  gridRef: React.RefObject<HTMLDivElement>,
+  gridRef: React.RefObject<HTMLDivElement | null>,
   gridWidth: number,
   resizedColumnWidths: ReadonlyMap<string, number>,
   measuredColumnWidths: ReadonlyMap<string, number>,
@@ -105,8 +105,8 @@ export function useColumnWidths<R, SR>(
   } as const;
 }
 
-function measureColumnWidth(gridRef: React.RefObject<HTMLDivElement>, key: string) {
+function measureColumnWidth(gridRef: React.RefObject<HTMLDivElement | null>, key: string) {
   const selector = `[data-measuring-cell-key="${CSS.escape(key)}"]`;
-  const measuringCell = gridRef.current!.querySelector(selector);
+  const measuringCell = gridRef.current?.querySelector(selector);
   return measuringCell?.getBoundingClientRect().width;
 }

website/demos/CommonFeatures.tsx

@@ -377,7 +377,7 @@ function ExportButton({
   children
 }: {
   onExport: () => Promise<unknown>;
-  children: React.ReactChild;
+  children: React.ReactNode;
 }) {
   const [exporting, setExporting] = useState(false);
   return (