diff --git a/docs/next.config.js b/docs/next.config.js
index 3a0ca09d9d549..c4118c0676851 100644
--- a/docs/next.config.js
+++ b/docs/next.config.js
@@ -17,7 +17,7 @@ const workspaceRoot = path.join(__dirname, '../');
* concurrent - ReactDOM.createRoot(Element).render()
* @type {ReactRenderMode | 'legacy-strict'}
*/
-const reactMode = 'legacy-strict';
+const reactMode = 'legacy';
// eslint-disable-next-line no-console
console.log(`Using React '${reactMode}' mode.`);
diff --git a/packages/grid/_modules_/grid/GridComponent.tsx b/packages/grid/_modules_/grid/GridComponent.tsx
index 7575c838940e0..7a16910569918 100644
--- a/packages/grid/_modules_/grid/GridComponent.tsx
+++ b/packages/grid/_modules_/grid/GridComponent.tsx
@@ -92,7 +92,7 @@ export const GridComponent = React.forwardRef {
@@ -220,7 +220,8 @@ export const GridComponent = React.forwardRef
diff --git a/packages/grid/_modules_/grid/components/column-header-item.tsx b/packages/grid/_modules_/grid/components/column-header-item.tsx
index 441f2d9696c8b..5649ee383206f 100644
--- a/packages/grid/_modules_/grid/components/column-header-item.tsx
+++ b/packages/grid/_modules_/grid/components/column-header-item.tsx
@@ -11,14 +11,14 @@ import { OptionsContext } from './options-context';
interface ColumnHeaderItemProps {
column: ColDef;
colIndex: number;
- onResizeColumn: any;
+ separatorProps: React.HTMLAttributes;
}
const headerAlignPropToCss = {
center: 'MuiDataGrid-colCellCenter',
right: 'MuiDataGrid-colCellRight',
};
export const ColumnHeaderItem = React.memo(
- ({ column, colIndex, onResizeColumn }: ColumnHeaderItemProps) => {
+ ({ column, colIndex, separatorProps }: ColumnHeaderItemProps) => {
const api = React.useContext(ApiContext);
const { headerHeight, showColumnRightBorder, disableColumnResize } = React.useContext(
OptionsContext,
@@ -91,8 +91,7 @@ export const ColumnHeaderItem = React.memo(
)}
);
diff --git a/packages/grid/_modules_/grid/components/column-header-separator.tsx b/packages/grid/_modules_/grid/components/column-header-separator.tsx
index 020b3b8b097d7..d07b3c904b9ac 100644
--- a/packages/grid/_modules_/grid/components/column-header-separator.tsx
+++ b/packages/grid/_modules_/grid/components/column-header-separator.tsx
@@ -1,29 +1,20 @@
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 {
- column: ColDef;
- onResizeColumn?: any;
+export interface ColumnHeaderSeparatorProps extends React.HTMLAttributes {
resizable: boolean;
}
export const ColumnHeaderSeparator = React.memo(function ColumnHeaderSeparator(
props: ColumnHeaderSeparatorProps,
) {
- const { column, onResizeColumn, resizable } = props;
+ const { resizable, ...other } = props;
const icons = useIcons();
const { showColumnRightBorder, headerHeight } = React.useContext(OptionsContext);
const Icon = icons!.columnResize!;
- const handleMouseDown = resizable
- ? (event) => {
- onResizeColumn(event, column);
- }
- : undefined;
-
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
diff --git a/packages/grid/_modules_/grid/components/column-headers.tsx b/packages/grid/_modules_/grid/components/column-headers.tsx
index d4b16cda3e4a9..df464f093bae9 100644
--- a/packages/grid/_modules_/grid/components/column-headers.tsx
+++ b/packages/grid/_modules_/grid/components/column-headers.tsx
@@ -6,15 +6,15 @@ import { LeftEmptyCell, RightEmptyCell } from './cell';
export interface ColumnHeadersItemCollectionProps {
columns: Columns;
- onResizeColumn: any;
+ separatorProps: React.HTMLAttributes;
}
export const ColumnHeaderItemCollection = React.memo(function ColumnHeaderItemCollection(
props: ColumnHeadersItemCollectionProps,
) {
- const { onResizeColumn, columns } = props;
+ const { separatorProps, columns } = props;
const items = columns.map((col, idx) => (
-
+
));
return {items};
@@ -23,13 +23,13 @@ export const ColumnHeaderItemCollection = React.memo(function ColumnHeaderItemCo
export interface ColumnsHeaderProps {
columns: Columns;
hasScrollX: boolean;
- onResizeColumn: any;
+ separatorProps: React.HTMLAttributes;
renderCtx: Partial | null;
}
export const ColumnsHeader = React.memo(
React.forwardRef(
- ({ columns, hasScrollX, onResizeColumn, renderCtx }, columnsHeaderRef) => {
+ ({ columns, hasScrollX, separatorProps, renderCtx }, columnsHeaderRef) => {
const wrapperCssClasses = `MuiDataGrid-colCellWrapper ${hasScrollX ? 'scroll' : ''}`;
const api = React.useContext(ApiContext);
@@ -68,7 +68,7 @@ export const ColumnsHeader = React.memo(
style={{ minWidth: renderCtx?.totalSizes?.width }}
>
-
+
);
diff --git a/packages/grid/_modules_/grid/hooks/features/useColumnResize.tsx b/packages/grid/_modules_/grid/hooks/features/useColumnResize.tsx
index 1d3eed8441d5f..c2be7d8298a14 100644
--- a/packages/grid/_modules_/grid/hooks/features/useColumnResize.tsx
+++ b/packages/grid/_modules_/grid/hooks/features/useColumnResize.tsx
@@ -67,7 +67,7 @@ export const useColumnResize = (columnsRef: React.RefObject, api
);
});
- const handleMouseDown = useEventCallback((event, colDef: ColDef) => {
+ const handleMouseDown = useEventCallback((event: React.MouseEvent) => {
// Only handle left clicks
if (event.button !== 0) {
return;
@@ -76,6 +76,10 @@ export const useColumnResize = (columnsRef: React.RefObject, api
// Avoid text selection
event.preventDefault();
+ colElementRef.current = event.currentTarget.closest('.MuiDataGrid-colCell') as HTMLDivElement;
+ const field = colElementRef.current.getAttribute('data-field') as string;
+ const colDef = apiRef.current.getColumnFromField(field);
+
logger.debug(`Start Resize on col ${colDef.field}`);
apiRef.current.publishEvent(COL_RESIZE_START);
@@ -117,5 +121,10 @@ export const useColumnResize = (columnsRef: React.RefObject, api
};
}, [stopListening]);
- return handleMouseDown;
+ return React.useMemo(
+ () => ({
+ onMouseDown: handleMouseDown,
+ }),
+ [handleMouseDown],
+ );
};