[XGrid] Fix resize in strict mode

[XGrid] Second iteration on the logic

docs/next.config.js

@@ -17,7 +17,7 @@ const workspaceRoot = path.join(__dirname, '../');
  * concurrent - ReactDOM.createRoot(Element).render(<App />)
  * @type {ReactRenderMode | 'legacy-strict'}
  */
-const reactMode = 'legacy';
+const reactMode = 'legacy-strict';
 // eslint-disable-next-line no-console
 console.log(`Using React '${reactMode}' mode.`);
 

packages/grid/_modules_/grid/GridComponent.tsx

@@ -92,7 +92,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
     apiRef,
   );
 
-  const onResizeColumn = useColumnResize(columnsHeaderRef, apiRef, internalOptions.headerHeight);
+  const onResizeColumn = useColumnResize(columnsHeaderRef, apiRef);
   const paginationProps = usePagination(internalRows, internalColumns, internalOptions, apiRef);
 
   React.useEffect(() => {

packages/grid/_modules_/grid/components/column-header-item.tsx

@@ -11,7 +11,7 @@ import { OptionsContext } from './options-context';
 interface ColumnHeaderItemProps {
   column: ColDef;
   colIndex: number;
-  onResizeColumn?: (c: any) => void;
+  onResizeColumn: any;
 }
 const headerAlignPropToCss = {
   center: 'MuiDataGrid-colCellCenter',
@@ -44,8 +44,6 @@ export const ColumnHeaderItem = React.memo(
       });
     }
 
-    const handleResize = onResizeColumn ? () => onResizeColumn(column) : undefined;
-
     const width = column.width!;
 
     let ariaSort: any;
@@ -92,8 +90,9 @@ export const ColumnHeaderItem = React.memo(
           />
         )}
         <ColumnHeaderSeparator
-          resizable={!disableColumnResize && column.resizable}
-          onResize={handleResize}
+          resizable={disableColumnResize ? false : Boolean(column.resizable)}
+          onResizeColumn={onResizeColumn}
+          column={column}
         />
       </div>
     );

packages/grid/_modules_/grid/components/column-header-separator.tsx

@@ -1,32 +1,41 @@
 import * as React from 'react';
+import { ColDef } from '../models';
 import { useIcons } from '../hooks/utils/useIcons';
+import { classnames } from '../utils';
 import { OptionsContext } from './options-context';
 
 export interface ColumnHeaderSeparatorProps {
-  resizable: boolean | undefined;
-  onResize?: () => void;
+  column: ColDef;
+  onResizeColumn?: any;
+  resizable: boolean;
 }
 
-export const ColumnHeaderSeparator: React.FC<ColumnHeaderSeparatorProps> = React.memo(
-  ({ onResize, resizable }) => {
-    const icons = useIcons();
-    const { showColumnRightBorder, headerHeight } = React.useContext(OptionsContext);
+export const ColumnHeaderSeparator = React.memo(function ColumnHeaderSeparator(
+  props: ColumnHeaderSeparatorProps,
+) {
+  const { column, onResizeColumn, resizable } = props;
+  const icons = useIcons();
+  const { showColumnRightBorder, headerHeight } = React.useContext(OptionsContext);
+  const Icon = icons!.columnResize!;
 
-    const resizeIconProps = {
-      className: `MuiDataGrid-iconSeparator ${resizable ? 'MuiDataGrid-resizable' : ''}`,
-      ...(resizable && onResize ? { onMouseDown: onResize } : {}),
-    };
+  const handleMouseDown = resizable
+    ? (event) => {
+        onResizeColumn(event, column);
+      }
+    : undefined;
 
-    const icon = React.createElement(icons!.columnResize!, resizeIconProps);
-
-    return (
-      <div
-        className="MuiDataGrid-columnSeparator"
-        style={{ minHeight: headerHeight, opacity: showColumnRightBorder ? 0 : 1 }}
-      >
-        {icon}
-      </div>
-    );
-  },
-);
-ColumnHeaderSeparator.displayName = 'ColumnHeaderSeparator';
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className="MuiDataGrid-columnSeparator"
+      style={{ minHeight: headerHeight, opacity: showColumnRightBorder ? 0 : 1 }}
+      onMouseDown={handleMouseDown}
+    >
+      <Icon
+        className={classnames('MuiDataGrid-iconSeparator', {
+          'MuiDataGrid-resizable': resizable,
+        })}
+      />
+    </div>
+  );
+});

packages/grid/_modules_/grid/components/column-headers.tsx

@@ -1,33 +1,29 @@
 import * as React from 'react';
-import { ColDef, Columns, RenderContextProps } from '../models';
+import { Columns, RenderContextProps } from '../models';
 import { ColumnHeaderItem } from './column-header-item';
 import { ApiContext } from './api-context';
 import { LeftEmptyCell, RightEmptyCell } from './cell';
 
 export interface ColumnHeadersItemCollectionProps {
   columns: Columns;
-  onResizeColumn?: (col: ColDef) => void;
+  onResizeColumn: any;
 }
-export const ColumnHeaderItemCollection: React.FC<ColumnHeadersItemCollectionProps> = React.memo(
-  ({ onResizeColumn, columns }) => {
-    const items = columns.map((col, idx) => (
-      <ColumnHeaderItem
-        key={col.field}
-        column={col}
-        colIndex={idx}
-        onResizeColumn={onResizeColumn}
-      />
-    ));
 
-    return <React.Fragment>{items}</React.Fragment>;
-  },
-);
-ColumnHeaderItemCollection.displayName = 'ColumnHeaderItemCollection';
+export const ColumnHeaderItemCollection = React.memo(function ColumnHeaderItemCollection(
+  props: ColumnHeadersItemCollectionProps,
+) {
+  const { onResizeColumn, columns } = props;
+  const items = columns.map((col, idx) => (
+    <ColumnHeaderItem key={col.field} column={col} colIndex={idx} onResizeColumn={onResizeColumn} />
+  ));
+
+  return <React.Fragment>{items}</React.Fragment>;
+});
 
 export interface ColumnsHeaderProps {
   columns: Columns;
   hasScrollX: boolean;
-  onResizeColumn?: (col: ColDef) => void;
+  onResizeColumn: any;
   renderCtx: Partial<RenderContextProps> | null;
 }