Merge branch 'main' into vrt

Author: amanmahajan7

.github/workflows/ci.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Build website
         run: node --run build:website
       - name: Install Playwright Browsers
-        run: npx playwright install chromium
+        run: npx playwright install chromium firefox
       - name: Test
         run: node --run test
       - name: Visual regression test

package.json

@@ -69,7 +69,7 @@
     "@typescript-eslint/parser": "^8.39.1",
     "@vitejs/plugin-react": "^5.0.0",
     "@vitest/browser": "^4.0.0-beta.12",
-    "@vitest/coverage-v8": "^4.0.0-beta.12",
+    "@vitest/coverage-istanbul": "^4.0.0-beta.12",
     "@vitest/eslint-plugin": "^1.3.4",
     "@wyw-in-js/rollup": "^0.7.0",
     "@wyw-in-js/vite": "^0.7.0",

src/hooks/useViewportRows.ts

@@ -28,16 +28,48 @@ export function useViewportRows<R>({
       };
     }
 
-    let totalRowHeight = 0;
-    let gridTemplateRows = ' ';
     // Calcule the height of all the rows upfront. This can cause performance issues
     // and we can consider using a similar approach as react-window
     // https://github.com/bvaughn/react-window/blob/b0a470cc264e9100afcaa1b78ed59d88f7914ad4/src/VariableSizeList.js#L68
-    const rowPositions = rows.map((row) => {
+    let totalRowHeight = 0;
+    let gridTemplateRows = '';
+    let currentHeight: number | null = null;
+    let repeatCount = 0;
+
+    const rowPositions = rows.map((row, index) => {
       const currentRowHeight = rowHeight(row);
-      const position = { top: totalRowHeight, height: currentRowHeight };
-      gridTemplateRows += `${currentRowHeight}px `;
+
+      const position = {
+        top: totalRowHeight,
+        height: currentRowHeight
+      };
       totalRowHeight += currentRowHeight;
+
+      if (currentHeight === null) {
+        currentHeight = currentRowHeight;
+        repeatCount = 1;
+      } else if (currentHeight === currentRowHeight) {
+        // If the current row height is the same as the previous one, increment the repeat count
+        repeatCount++;
+      } else {
+        if (repeatCount > 1) {
+          gridTemplateRows += `repeat(${repeatCount}, ${currentHeight}px) `;
+        } else {
+          gridTemplateRows += `${currentHeight}px `;
+        }
+
+        currentHeight = currentRowHeight;
+        repeatCount = 1;
+      }
+
+      if (index === rows.length - 1) {
+        if (repeatCount > 1) {
+          gridTemplateRows += `repeat(${repeatCount}, ${currentHeight}px)`;
+        } else {
+          gridTemplateRows += `${currentHeight}px`;
+        }
+      }
+
       return position;
     });
 

test/browser/TextEditor.test.tsx

@@ -38,8 +38,7 @@ test('TextEditor', async () => {
   // input is focused
   expect(input).toHaveFocus();
   // input value is fully selected
-  expect(input.selectionStart).toBe(0);
-  expect(input.selectionEnd).toBe(initialRows[0].name.length);
+  expect(input).toHaveSelection(initialRows[0].name);
 
   // pressing escape closes the editor without committing
   await userEvent.keyboard('Test{escape}');

test/browser/column/grouping.test.ts

@@ -1,7 +1,7 @@
 import { page, userEvent } from '@vitest/browser/context';
 
 import type { ColumnOrColumnGroup } from '../../../src';
-import { getSelectedCell, setup, validateCellPosition } from '../utils';
+import { getSelectedCell, setup, tabIntoGrid, validateCellPosition } from '../utils';
 
 const columns: readonly ColumnOrColumnGroup<NonNullable<unknown>>[] = [
   { key: 'col1', name: 'col 1' },
@@ -248,12 +248,12 @@ test('grouping', async () => {
 });
 
 test('keyboard navigation', async () => {
-  setup({ columns, rows: [{}] });
+  setup({ columns, rows: [{}] }, true);
 
   // no initial selection
   await expect.element(getSelectedCell()).not.toBeInTheDocument();
 
-  await userEvent.tab();
+  await tabIntoGrid();
   validateCellPosition(0, 3);
 
   // arrow navigation

test/browser/column/renderEditCell.test.tsx

@@ -41,7 +41,8 @@ describe('Editor', () => {
   it('should open editor when user types', async () => {
     page.render(<EditorTest />);
     await userEvent.click(getCellsAtRowIndex(0)[0]);
-    await userEvent.keyboard('123{enter}');
+    // TODO: await userEvent.keyboard('123{enter}'); fails in FF
+    await userEvent.keyboard('{enter}123{enter}');
     expect(getCellsAtRowIndex(0)[0]).toHaveTextContent(/^1123$/);
   });
 
@@ -99,7 +100,8 @@ describe('Editor', () => {
     const editor = page.getByRole('spinbutton', { name: 'col1-editor' });
     await expect.element(editor).not.toBeInTheDocument();
     expect(getGrid().element().scrollTop).toBe(2000);
-    await userEvent.keyboard('123');
+    // TODO: await userEvent.keyboard('123'); fails in FF
+    await userEvent.keyboard('{enter}123');
     expect(getCellsAtRowIndex(0)).toHaveLength(2);
     await expect.element(editor).toHaveValue(123);
     expect(getGrid().element().scrollTop).toBe(0);
@@ -194,7 +196,8 @@ describe('Editor', () => {
         />
       );
       await userEvent.click(getCellsAtRowIndex(0)[1]);
-      await userEvent.keyboard('yz{enter}');
+      // TODO: await userEvent.keyboard('yz{enter}'); fails in FF
+      await userEvent.keyboard('{enter}yz{enter}');
       expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1yz$/);
       await userEvent.keyboard('x');
       await expect

test/browser/column/resizable.test.tsx

@@ -152,10 +152,17 @@ test('should auto resize column when resize handle is double clicked', async ()
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 200px' });
   const [, col2] = getHeaderCells();
   await autoResize(col2);
-  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 327.703px' });
+  await testGridTemplateColumns('100px 327.703px', '100px 327.833px', '100px 400px');
   expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(
     expect.objectContaining(columns[1]),
-    327.703125
+    // Due to differences in text rendering between browsers the measured width can vary
+    expect.toSatisfy(
+      (width) =>
+        // Chrome and Firefox on windows
+        (width >= 327.7 && width <= 327.9) ||
+        // Firefox on CI
+        width === 400
+    )
   );
 });
 
@@ -229,15 +236,23 @@ test('should remeasure flex columns when resizing a column', async () => {
     ],
     onColumnResize
   });
-  const grid = getGrid();
-  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '639.328px 639.328px 639.344px' });
+
+  await testGridTemplateColumns('639.328px 639.328px 639.344px', '639.333px 639.333px 639.333px');
   const [col1] = getHeaderCells();
   await autoResize(col1);
-  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '79.1406px 919.422px 919.438px' });
+  await testGridTemplateColumns(
+    '79.1406px 919.422px 919.438px',
+    '79.1667px 919.417px 919.417px',
+    '100.5px 908.75px 908.75px'
+  );
   expect(onColumnResize).toHaveBeenCalledOnce();
   // onColumnResize is not called if width is not changed
   await autoResize(col1);
-  await expect.element(grid).toHaveStyle({ gridTemplateColumns: '79.1406px 919.422px 919.438px' });
+  await testGridTemplateColumns(
+    '79.1406px 919.422px 919.438px',
+    '79.1667px 919.417px 919.417px',
+    '100.5px 908.75px 908.75px'
+  );
   expect(onColumnResize).toHaveBeenCalledOnce();
 });
 
@@ -330,3 +345,15 @@ test('should use columnWidths and onColumnWidthsChange props when provided', asy
   //   ])
   // );
 });
+
+async function testGridTemplateColumns(chrome: string, firefox: string, firefoxCI = firefox) {
+  const grid = getGrid();
+  if (navigator.userAgent.includes('Chrome')) {
+    await expect.element(grid).toHaveStyle({ gridTemplateColumns: chrome });
+  } else {
+    expect((grid.element() as HTMLDivElement).style.gridTemplateColumns).toBeOneOf([
+      firefox,
+      firefoxCI
+    ]);
+  }
+}

test/browser/direction.test.ts

@@ -1,7 +1,7 @@
 import { userEvent } from '@vitest/browser/context';
 
 import type { Column } from '../../src';
-import { getGrid, getSelectedCell, setup } from './utils';
+import { getGrid, getSelectedCell, setup, tabIntoGrid } from './utils';
 
 interface Row {
   id: number;
@@ -22,27 +22,27 @@ const columns: readonly Column<Row>[] = [
 const rows: readonly Row[] = [];
 
 test('should use left to right direction by default', async () => {
-  setup({ rows, columns });
+  setup({ rows, columns }, true);
   await expect.element(getGrid()).toHaveAttribute('dir', 'ltr');
-  await userEvent.tab();
+  await tabIntoGrid();
   await expect.element(getSelectedCell()).toHaveTextContent('ID');
   await userEvent.keyboard('{ArrowRight}');
   await expect.element(getSelectedCell()).toHaveTextContent('Name');
 });
 
 test('should use left to right direction if direction prop is set to ltr', async () => {
-  setup({ rows, columns, direction: 'ltr' });
+  setup({ rows, columns, direction: 'ltr' }, true);
   await expect.element(getGrid()).toHaveAttribute('dir', 'ltr');
-  await userEvent.tab();
+  await tabIntoGrid();
   await expect.element(getSelectedCell()).toHaveTextContent('ID');
   await userEvent.keyboard('{ArrowRight}');
   await expect.element(getSelectedCell()).toHaveTextContent('Name');
 });
 
 test('should use right to left direction if direction prop is set to rtl', async () => {
-  setup({ rows, columns, direction: 'rtl' });
+  setup({ rows, columns, direction: 'rtl' }, true);
   await expect.element(getGrid()).toHaveAttribute('dir', 'rtl');
-  await userEvent.tab();
+  await tabIntoGrid();
   await expect.element(getSelectedCell()).toHaveTextContent('ID');
   await userEvent.keyboard('{ArrowLeft}');
   await expect.element(getSelectedCell()).toHaveTextContent('Name');

test/browser/keyboardNavigation.test.tsx

@@ -7,6 +7,7 @@ import {
   getSelectedCell,
   scrollGrid,
   setup,
+  tabIntoGrid,
   validateCellPosition
 } from './utils';
 
@@ -27,13 +28,13 @@ const columns = [
 ] as const satisfies Column<Row, Row>[];
 
 test('keyboard navigation', async () => {
-  setup({ columns, rows, topSummaryRows, bottomSummaryRows });
+  setup({ columns, rows, topSummaryRows, bottomSummaryRows }, true);
 
   // no initial selection
   await expect.element(getSelectedCell()).not.toBeInTheDocument();
 
   // tab into the grid
-  await userEvent.tab();
+  await tabIntoGrid();
   validateCellPosition(0, 0);
 
   // tab to the next cell
@@ -103,10 +104,10 @@ test('keyboard navigation', async () => {
 });
 
 test('arrow and tab navigation', async () => {
-  setup({ columns, rows, bottomSummaryRows });
+  setup({ columns, rows, bottomSummaryRows }, true);
 
   // pressing arrowleft on the leftmost cell does nothing
-  await userEvent.tab();
+  await tabIntoGrid();
   await userEvent.keyboard('{arrowdown}');
   validateCellPosition(0, 1);
   await userEvent.keyboard('{arrowleft}');
@@ -128,14 +129,7 @@ test('arrow and tab navigation', async () => {
 });
 
 test('grid enter/exit', async () => {
-  page.render(
-    <>
-      <button type="button">Before</button>
-      <DataGrid columns={columns} rows={new Array(5)} bottomSummaryRows={bottomSummaryRows} />
-      <br />
-      <button type="button">After</button>
-    </>
-  );
+  setup({ columns, rows: new Array(5), bottomSummaryRows }, true);
 
   const beforeButton = page.getByRole('button', { name: 'Before' });
   const afterButton = page.getByRole('button', { name: 'After' });
@@ -144,8 +138,7 @@ test('grid enter/exit', async () => {
   await expect.element(getSelectedCell()).not.toBeInTheDocument();
 
   // tab into the grid
-  await userEvent.click(beforeButton);
-  await userEvent.tab();
+  await tabIntoGrid();
   validateCellPosition(0, 0);
 
   // shift+tab tabs out of the grid if we are at the first cell
@@ -178,8 +171,8 @@ test('grid enter/exit', async () => {
 });
 
 test('navigation with focusable cell renderer', async () => {
-  setup({ columns, rows: new Array(1), bottomSummaryRows });
-  await userEvent.tab();
+  setup({ columns, rows: new Array(1), bottomSummaryRows }, true);
+  await tabIntoGrid();
   await userEvent.keyboard('{arrowdown}');
   validateCellPosition(0, 1);
 
@@ -219,8 +212,8 @@ test('navigation when header and summary rows have focusable elements', async ()
     }
   ];
 
-  setup({ columns, rows: new Array(2), bottomSummaryRows });
-  await userEvent.tab();
+  setup({ columns, rows: new Array(2), bottomSummaryRows }, true);
+  await tabIntoGrid();
 
   // should set focus on the header filter
   expect(document.getElementById('header-filter1')).toHaveFocus();
@@ -259,8 +252,8 @@ test('navigation when selected cell not in the viewport', async () => {
   for (let i = 0; i < 99; i++) {
     columns.push({ key: `col${i}`, name: `col${i}`, frozen: i < 5 });
   }
-  setup({ columns, rows, bottomSummaryRows });
-  await userEvent.tab();
+  setup({ columns, rows, bottomSummaryRows }, true);
+  await tabIntoGrid();
   validateCellPosition(0, 0);
 
   await userEvent.keyboard('{Control>}{end}{/Control}{arrowup}{arrowup}');
@@ -331,8 +324,8 @@ test('reset selected cell when row is removed', async () => {
 });
 
 test('should not change the left and right arrow behavior for right to left languages', async () => {
-  setup({ rows, columns, direction: 'rtl' });
-  await userEvent.tab();
+  setup({ rows, columns, direction: 'rtl' }, true);
+  await tabIntoGrid();
   validateCellPosition(0, 0);
   await userEvent.tab();
   validateCellPosition(1, 0);