Merge branch 'main' into am-fix-act-warnings

package.json

@@ -69,7 +69,7 @@
     "@microsoft/api-extractor": "^7.23.0",
     "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
-    "@tanstack/react-router": "^1.70.0",
+    "@tanstack/react-router": "1.82.1",
     "@tanstack/router-plugin": "^1.69.1",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",

src/DataGrid.tsx

@@ -101,6 +101,7 @@ type SharedDivProps = Pick<
   | 'role'
   | 'aria-label'
   | 'aria-labelledby'
+  | 'aria-description'
   | 'aria-describedby'
   | 'aria-rowcount'
   | 'className'
@@ -260,6 +261,7 @@ function DataGrid<R, SR, K extends Key>(
     role: rawRole,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
+    'aria-description': ariaDescription,
     'aria-describedby': ariaDescribedBy,
     'aria-rowcount': rawAriaRowCount,
     'data-testid': testId
@@ -747,10 +749,10 @@ function DataGrid<R, SR, K extends Key>(
     if (!isCellWithinSelectionBounds(position)) return;
     commitEditorChanges();
 
-    const row = rows[position.rowIdx];
     const samePosition = isSamePosition(selectedPosition, position);
 
     if (enableEditor && isCellEditable(position)) {
+      const row = rows[position.rowIdx];
       setSelectedPosition({ ...position, mode: 'EDIT', row, originalRow: row });
     } else if (samePosition) {
       // Avoid re-renders if the selected cell state is the same
@@ -765,7 +767,7 @@ function DataGrid<R, SR, K extends Key>(
     if (onSelectedCellChange && !samePosition) {
       onSelectedCellChange({
         rowIdx: position.rowIdx,
-        row,
+        row: isRowIdxWithinViewportBounds(position.rowIdx) ? rows[position.rowIdx] : undefined,
         column: columns[position.idx]
       });
     }
@@ -1081,10 +1083,12 @@ function DataGrid<R, SR, K extends Key>(
     selectedPosition.idx === -1 && selectedPosition.rowIdx !== minRowIdx - 1;
 
   return (
+    // biome-ignore lint/a11y/useValidAriaProps: aria-description is a valid prop
     <div
       role={role}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
+      aria-description={ariaDescription}
       aria-describedby={ariaDescribedBy}
       aria-multiselectable={isSelectable ? true : undefined}
       aria-colcount={columns.length}

src/types.ts

@@ -196,7 +196,7 @@ export type CellKeyDownArgs<TRow, TSummaryRow = unknown> =
 
 export interface CellSelectArgs<TRow, TSummaryRow = unknown> {
   rowIdx: number;
-  row: TRow;
+  row: TRow | undefined;
   column: CalculatedColumn<TRow, TSummaryRow>;
 }
 

test/browser/events.test.tsx

@@ -170,6 +170,14 @@ describe('Events', () => {
       rowIdx: 0
     });
     expect(onSelectedCellChange).toHaveBeenCalledTimes(5);
+
+    // go to the header row
+    await userEvent.keyboard('{ArrowUp}');
+    expect(onSelectedCellChange).toHaveBeenCalledWith({
+      column: expect.objectContaining(columns[1]),
+      row: undefined,
+      rowIdx: -1
+    });
   });
 });
 

test/browser/label.test.ts

@@ -0,0 +1,18 @@
+import { getGrid, setup } from './utils';
+
+test('should set label and description', () => {
+  setup({
+    rows: [],
+    columns: [],
+    'aria-label': 'label',
+    'aria-labelledby': 'labelledby',
+    'aria-description': 'description',
+    'aria-describedby': 'describedby'
+  });
+
+  const grid = getGrid().element();
+  expect(grid).toHaveAttribute('aria-label', 'label');
+  expect(grid).toHaveAttribute('aria-labelledby', 'labelledby');
+  expect(grid).toHaveAttribute('aria-description', 'description');
+  expect(grid).toHaveAttribute('aria-describedby', 'describedby');
+});