Merge branch 'main' into am-refactor-minmax-logic

Author: amanmahajan7

src/hooks/useColumnWidths.ts

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useState } from 'react';
+import { flushSync } from 'react-dom';
 
 import type { CalculatedColumn, ResizedWidth, StateSetter } from '../types';
 import type { DataGridProps } from '../DataGrid';
@@ -49,63 +50,72 @@ export function useColumnWidths<R, SR>(
 
   function updateMeasuredAndResizedWidths() {
     setPreviousGridWidth(gridWidth);
-
-    if (columnsToMeasure.length > 0) {
-      setMeasuredColumnWidths((measuredColumnWidths) => {
-        const newMeasuredColumnWidths = new Map(measuredColumnWidths);
-        let hasChanges = false;
-
-        for (const key of columnsToMeasure) {
-          const measuredWidth = measureColumnWidth(gridRef, key);
-          hasChanges ||= measuredWidth !== measuredColumnWidths.get(key);
-          if (measuredWidth === undefined) {
-            newMeasuredColumnWidths.delete(key);
-          } else {
-            newMeasuredColumnWidths.set(key, measuredWidth);
-          }
+    if (columnsToMeasure.length === 0) return;
+
+    setMeasuredColumnWidths((measuredColumnWidths) => {
+      const newMeasuredColumnWidths = new Map(measuredColumnWidths);
+      let hasChanges = false;
+
+      for (const key of columnsToMeasure) {
+        const measuredWidth = measureColumnWidth(gridRef, key);
+        hasChanges ||= measuredWidth !== measuredColumnWidths.get(key);
+        if (measuredWidth === undefined) {
+          newMeasuredColumnWidths.delete(key);
+        } else {
+          newMeasuredColumnWidths.set(key, measuredWidth);
         }
+      }
 
-        return hasChanges ? newMeasuredColumnWidths : measuredColumnWidths;
-      });
-    }
+      return hasChanges ? newMeasuredColumnWidths : measuredColumnWidths;
+    });
 
     if (columnToAutoResize !== null) {
-      setColumnToAutoResize(null);
+      const resizingKey = columnToAutoResize.key;
       setResizedColumnWidths((resizedColumnWidths) => {
-        const resizingKey = columnToAutoResize.key;
         const oldWidth = resizedColumnWidths.get(resizingKey);
         const newWidth = measureColumnWidth(gridRef, resizingKey);
         if (newWidth !== undefined && oldWidth !== newWidth) {
           const newResizedColumnWidths = new Map(resizedColumnWidths);
           newResizedColumnWidths.set(resizingKey, newWidth);
-          onColumnResize?.(viewportColumns.find((c) => c.key === resizingKey)!, newWidth);
           return newResizedColumnWidths;
         }
         return resizedColumnWidths;
       });
+      setColumnToAutoResize(null);
     }
   }
 
   function handleColumnResize(column: CalculatedColumn<R, SR>, nextWidth: ResizedWidth) {
     const { key: resizingKey } = column;
 
-    if (columnsCanFlex) {
-      // delete measured column widths for all other flex columns so they can be recalculated
-      setMeasuredColumnWidths((measuredColumnWidths) => {
-        const newMeasuredColumnWidths = new Map(measuredColumnWidths);
-        for (const { key, width } of viewportColumns) {
-          if (resizingKey !== key && typeof width === 'string' && !resizedColumnWidths.has(key)) {
-            newMeasuredColumnWidths.delete(key);
+    flushSync(() => {
+      if (columnsCanFlex) {
+        // remeasure all the columns that can flex and are not resized by the user
+        setMeasuredColumnWidths((measuredColumnWidths) => {
+          const newMeasuredColumnWidths = new Map(measuredColumnWidths);
+          for (const { key, width } of viewportColumns) {
+            if (resizingKey !== key && typeof width === 'string' && !resizedColumnWidths.has(key)) {
+              newMeasuredColumnWidths.delete(key);
+            }
           }
-        }
-        return newMeasuredColumnWidths;
-      });
-    }
+          return newMeasuredColumnWidths;
+        });
+      }
 
-    setColumnToAutoResize({
-      key: resizingKey,
-      width: nextWidth
+      setColumnToAutoResize({
+        key: resizingKey,
+        width: nextWidth
+      });
     });
+
+    if (onColumnResize) {
+      const previousWidth = resizedColumnWidths.get(resizingKey);
+      const newWidth =
+        typeof nextWidth === 'number' ? nextWidth : measureColumnWidth(gridRef, resizingKey);
+      if (newWidth !== undefined && newWidth !== previousWidth) {
+        onColumnResize(column, newWidth);
+      }
+    }
   }
 
   return {

test/browser/column/resizable.test.tsx

@@ -113,8 +113,10 @@ test('should auto resize column when resize handle is double clicked', async ()
   const [, col2] = getHeaderCells();
   await autoResize(col2);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '100px 327.703px' });
-  // This is called twice in strict mode
-  expect(onColumnResize).toHaveBeenCalledWith(expect.objectContaining(columns[1]), 327.703125);
+  expect(onColumnResize).toHaveBeenCalledExactlyOnceWith(
+    expect.objectContaining(columns[1]),
+    327.703125
+  );
 });
 
 test('should use the maxWidth if specified on auto resize', async () => {
@@ -192,10 +194,9 @@ test('should remeasure flex columns when resizing a column', async () => {
   const [col1] = getHeaderCells();
   await autoResize(col1);
   await expect.element(grid).toHaveStyle({ gridTemplateColumns: '79.1406px 919.422px 919.438px' });
-  expect(onColumnResize).toHaveBeenCalled();
-  onColumnResize.mockClear();
+  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' });
-  expect(onColumnResize).not.toHaveBeenCalled();
+  expect(onColumnResize).toHaveBeenCalledOnce();
 });

website/routes/CommonFeatures.tsx

@@ -96,6 +96,7 @@ function getColumns(
     {
       key: 'title',
       name: 'Task',
+      maxWidth: 500,
       frozen: true,
       renderEditCell: textEditor,
       renderSummaryCell({ row }) {
@@ -117,7 +118,7 @@ function getColumns(
     {
       key: 'country',
       name: 'Country',
-      maxWidth: 150,
+      maxWidth: 100,
       renderEditCell: (p) => (
         <select
           autoFocus