@mui/x-data-grid-pro 5.7.0 → 5.10.0

package/modern/components/GridRowReorderCell.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { GridEvents, gridRowTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridEditRowsStateSelector } from '@mui/x-data-grid';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    isDraggable,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['rowReorderCell', isDraggable && 'rowReorderCell--draggable'],
+    placeholder: ['rowReorderCellPlaceholder']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridRowReorderCell = params => {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector); // eslint-disable-next-line no-underscore-dangle
+
+  const cellValue = params.row.__reorder__ || params.id; // TODO: remove sortModel and treeDepth checks once row reorder is compatible
+
+  const isDraggable = !!rootProps.rowReordering && !sortModel.length && treeDepth === 1 && Object.keys(editRowsState).length === 0;
+  const ownerState = {
+    isDraggable,
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const publish = React.useCallback((eventName, propHandler) => event => {
+    // Ignore portal
+    // The target is not an element when triggered by a Select inside the cell
+    // See https://github.com/mui/material-ui/issues/10534
+    if (event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
+      return;
+    } // The row might have been deleted
+
+
+    if (!apiRef.current.getRow(params.row.id)) {
+      return;
+    }
+
+    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.row.id), event);
+
+    if (propHandler) {
+      propHandler(event);
+    }
+  }, [apiRef, params.row.id]);
+  const draggableEventHandlers = {
+    onDragStart: publish(GridEvents.rowDragStart),
+    onDragOver: publish(GridEvents.rowDragOver),
+    onDragEnd: publish(GridEvents.rowDragEnd)
+  };
+  return /*#__PURE__*/_jsxs("div", _extends({
+    className: classes.root,
+    draggable: isDraggable
+  }, draggableEventHandlers, {
+    children: [/*#__PURE__*/_jsx(rootProps.components.RowReorderIcon, {}), /*#__PURE__*/_jsx("div", {
+      className: classes.placeholder,
+      children: cellValue
+    })]
+  }));
+};
+
+export { GridRowReorderCell };
+export const renderRowReorderCell = params => /*#__PURE__*/_jsx(GridRowReorderCell, _extends({}, params));

package/modern/components/GridTreeDataGroupingCell.js

@@ -105,16 +105,27 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
    */
   field: PropTypes.string.isRequired,
 
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: PropTypes.any.isRequired,
+  formattedValue: PropTypes.any,
 
   /**
    * Get the cell value of a row and field.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -138,7 +149,7 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.
@@ -153,6 +164,6 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired
+  value: PropTypes.any
 } : void 0;
 export { GridTreeDataGroupingCell };

package/modern/hooks/features/columnPinning/useGridColumnPinning.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import MuiDivider from '@mui/material/Divider';
 import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, GridEvents, useGridApiMethod, useGridApiEventHandler } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems';
 import { GridPinnedPosition } from './gridColumnPinningInterface';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
@@ -175,11 +175,11 @@ export const useGridColumnPinning = (apiRef, props) => {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
-  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
-  useGridRegisterPreProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   apiRef.current.unstable_updateControlState({
     stateId: 'pinnedColumns',
     propModel: props.pinnedColumns,

package/modern/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
 import { columnPinningStateInitializer } from './useGridColumnPinning';
 import { filterColumns } from '../../../components/DataGridProVirtualScroller';
@@ -41,5 +41,5 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
       all: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
   }, [disableColumnPinning, pinnedColumns]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
 };

package/modern/hooks/features/columnReorder/useGridColumnReorder.js

@@ -50,7 +50,7 @@ export const useGridColumnReorder = (apiRef, props) => {
       clearTimeout(removeDnDStylesTimeout.current);
     };
   }, []);
-  const handleColumnHeaderDragStart = React.useCallback((params, event) => {
+  const handleDragStart = React.useCallback((params, event) => {
     if (props.disableColumnReorder || params.colDef.disableReorder) {
       return;
     }
@@ -116,7 +116,7 @@ export const useGridColumnReorder = (apiRef, props) => {
           canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
         }
 
-        const canBeReorderedProcessed = apiRef.current.unstable_applyPreProcessors('canBeReordered', canBeReordered, {
+        const canBeReorderedProcessed = apiRef.current.unstable_applyPipeProcessors('canBeReordered', canBeReordered, {
           targetIndex: targetColVisibleIndex
         });
 
@@ -156,7 +156,7 @@ export const useGridColumnReorder = (apiRef, props) => {
     }));
     apiRef.current.forceUpdate();
   }, [props.disableColumnReorder, logger, apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnHeaderDragStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleDragStart);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnter, handleDragEnter);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragOver, handleDragOver);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleDragEnd);

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -100,17 +100,29 @@ export const useGridColumnResize = (apiRef, props) => {
 
   const updateWidth = newWidth => {
     logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
+    const prevWidth = colElementRef.current.offsetWidth;
+    const widthDiff = newWidth - prevWidth;
     colDefRef.current.computedWidth = newWidth;
     colDefRef.current.width = newWidth;
-    colDefRef.current.flex = undefined;
+    colDefRef.current.flex = 0;
     colElementRef.current.style.width = `${newWidth}px`;
     colElementRef.current.style.minWidth = `${newWidth}px`;
     colElementRef.current.style.maxWidth = `${newWidth}px`;
     colCellElementsRef.current.forEach(element => {
       const div = element;
-      div.style.width = `${newWidth}px`;
-      div.style.minWidth = `${newWidth}px`;
-      div.style.maxWidth = `${newWidth}px`;
+      let finalWidth;
+
+      if (div.getAttribute('aria-colspan') === '1') {
+        finalWidth = `${newWidth}px`;
+      } else {
+        // Cell with colspan > 1 cannot be just updated width new width.
+        // Instead, we add width diff to the current width.
+        finalWidth = `${div.offsetWidth + widthDiff}px`;
+      }
+
+      div.style.width = finalWidth;
+      div.style.minWidth = finalWidth;
+      div.style.maxWidth = finalWidth;
     });
   };
 
@@ -170,7 +182,7 @@ export const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = apiRef.current.columnHeadersContainerElementRef?.current.querySelector(`[data-field="${colDef.field}"]`);
-    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
     separatorSide.current = getSeparatorSide(event.currentTarget);
@@ -245,7 +257,7 @@ export const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = findHeaderElementFromField(apiRef.current.columnHeadersElementRef?.current, colDef.field);
-    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     separatorSide.current = getSeparatorSide(event.target);
     initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
     const doc = ownerDocument(event.currentTarget);

package/modern/hooks/features/detailPanel/useGridDetailPanel.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
 export const detailPanelStateInitializer = (state, props) => {
@@ -33,11 +33,19 @@ export const useGridDetailPanel = (apiRef, props) => {
     apiRef.current.toggleDetailPanel(params.id);
   }, [apiRef, contentCache, props.getDetailPanelContent]);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    if (!event.ctrlKey || event.key !== 'Enter' || props.getDetailPanelContent == null) {
+    if (props.getDetailPanelContent == null) {
       return;
     }
 
-    apiRef.current.toggleDetailPanel(params.id);
+    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+      // TODO v6: only support Space on the detail toggle
+      apiRef.current.toggleDetailPanel(params.id);
+      return;
+    }
+
+    if (params.field === GRID_DETAIL_PANEL_TOGGLE_FIELD && event.key === ' ') {
+      apiRef.current.toggleDetailPanel(params.id);
+    }
   }, [apiRef, props.getDetailPanelContent]);
   useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
   useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
@@ -54,7 +62,7 @@ export const useGridDetailPanel = (apiRef, props) => {
 
     });
   }, [apiRef, expandedRowIds]);
-  useGridRegisterPreProcessor(apiRef, 'rowHeight', addDetailHeight);
+  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
   apiRef.current.unstable_updateControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,

package/modern/hooks/features/detailPanel/useGridDetailPanelCache.js

@@ -39,7 +39,7 @@ export const useGridDetailPanelCache = (apiRef, props) => {
     });
     apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
-  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, updateCaches);
+  useGridApiEventHandler(apiRef, GridEvents.sortedRowsSet, updateCaches);
   const isFirstRender = React.useRef(true);
 
   if (isFirstRender.current) {

package/modern/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
 export const useGridDetailPanelPreProcessors = (apiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
@@ -24,5 +24,5 @@ export const useGridDetailPanelPreProcessors = (apiRef, props) => {
     columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
     return columnsState;
   }, [props.getDetailPanelContent]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addToggleColumn);
 };

package/modern/hooks/features/index.js

@@ -3,5 +3,6 @@ export * from './columnPinning';
 export * from './columnReorder';
 export * from './columnResize';
 export * from './rowGrouping';
+export * from './rowReorder';
 export * from './treeData';
 export * from './detailPanel';

package/modern/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import { GridEvents, useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor, isDeepEqual } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector, gridRowGroupingStateSelector } from './gridRowGroupingSelector';
 import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability } from './gridRowGroupingUtils';
 import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
@@ -137,9 +137,9 @@ export const useGridRowGrouping = (apiRef, props) => {
 
     return params;
   }, [apiRef, props.disableRowGrouping]);
-  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   /**
    * EVENTS
    */
@@ -169,10 +169,8 @@ export const useGridRowGrouping = (apiRef, props) => {
         rowGrouping: _extends({}, state.rowGrouping, {
           unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
         })
-      })); // Refresh the column pre-processing
-      // TODO: Add a clean way to re-run a pipe processing without faking a change
-
-      apiRef.current.updateColumns([]);
+      }));
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
       setStrategyAvailability(apiRef, props.disableRowGrouping); // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
 

package/modern/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { gridColumnLookupSelector, gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
 import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability } from './gridRowGroupingUtils';
@@ -177,7 +177,7 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
       disableChildrenSorting: false
     });
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTree);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'sorting', sortRows);

package/modern/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
+import { renderRowReorderCell } from '../../../components/GridRowReorderCell';
+export const GRID_REORDER_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  field: '__reorder__',
+  type: 'reorder',
+  sortable: false,
+  filterable: false,
+  width: 50,
+  align: 'center',
+  headerAlign: 'center',
+  disableColumnMenu: true,
+  disableExport: true,
+  disableReorder: true,
+  resizable: false,
+  renderHeader: () => ' ',
+  renderCell: renderRowReorderCell
+});

package/modern/hooks/features/rowReorder/index.js

@@ -0,0 +1 @@
+export * from './gridRowReorderColDef';

package/modern/hooks/features/rowReorder/useGridRowReorder.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridLogger, GridEvents, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowTreeDepthSelector, useGridApiOptionHandler, gridEditRowsStateSelector } from '@mui/x-data-grid';
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    rowDragging: ['row--dragging']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+/**
+ * Only available in DataGridPro
+ * @requires useGridRows (method)
+ */
+
+
+export const useGridRowReorder = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridRowReorder');
+  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const dragRowNode = React.useRef(null);
+  const originRowIndex = React.useRef(null);
+  const removeDnDStylesTimeout = React.useRef();
+  const ownerState = {
+    classes: props.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const [dragRowId, setDragRowId] = React.useState('');
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(removeDnDStylesTimeout.current);
+    };
+  }, []); // TODO: remove sortModel check once row reorder is sorting compatible
+  // remove treeDepth once row reorder is tree compatible
+
+  const isRowReorderDisabled = React.useMemo(() => {
+    return !props.rowReordering || !!sortModel.length || treeDepth !== 1;
+  }, [props.rowReordering, sortModel, treeDepth]);
+  const handleDragStart = React.useCallback((params, event) => {
+    // Call the gridEditRowsStateSelector directly to avoid infnite loop
+    const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
+      return;
+    }
+
+    logger.debug(`Start dragging row ${params.id}`); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    dragRowNode.current = event.currentTarget;
+    dragRowNode.current.classList.add(classes.rowDragging);
+    setDragRowId(params.id);
+    removeDnDStylesTimeout.current = setTimeout(() => {
+      dragRowNode.current.classList.remove(classes.rowDragging);
+    });
+    originRowIndex.current = apiRef.current.getRowIndex(params.id);
+  }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
+  const handleDragOver = React.useCallback((params, event) => {
+    logger.debug(`Dragging over row ${params.id}`);
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+
+    if (params.id !== dragRowId) {
+      const targetRowIndex = apiRef.current.getRowIndex(params.id);
+      apiRef.current.setRowIndex(dragRowId, targetRowIndex);
+    }
+  }, [apiRef, logger, dragRowId]);
+  const handleDragEnd = React.useCallback((params, event) => {
+    // Call the gridEditRowsStateSelector directly to avoid infnite loop
+    const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
+      return;
+    }
+
+    logger.debug('End dragging row');
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    clearTimeout(removeDnDStylesTimeout.current);
+    dragRowNode.current = null; // Check if the row was dropped outside the grid.
+
+    if (event.dataTransfer.dropEffect === 'none') {
+      // Accessing params.field may contain the wrong field as header elements are reused
+      apiRef.current.setRowIndex(dragRowId, originRowIndex.current);
+      originRowIndex.current = null;
+    } else {
+      // Emit the rowOrderChange event only once when the reordering stops.
+      const rowOrderChangeParams = {
+        row: apiRef.current.getRow(dragRowId),
+        targetIndex: apiRef.current.getRowIndex(params.id),
+        oldIndex: originRowIndex.current
+      };
+      apiRef.current.publishEvent(GridEvents.rowOrderChange, rowOrderChangeParams);
+    }
+
+    setDragRowId('');
+  }, [isRowReorderDisabled, logger, apiRef, dragRowId]);
+  useGridApiEventHandler(apiRef, GridEvents.rowDragStart, handleDragStart);
+  useGridApiEventHandler(apiRef, GridEvents.rowDragOver, handleDragOver);
+  useGridApiEventHandler(apiRef, GridEvents.rowDragEnd, handleDragEnd);
+  useGridApiEventHandler(apiRef, GridEvents.cellDragOver, handleDragOver);
+  useGridApiOptionHandler(apiRef, GridEvents.rowOrderChange, props.onRowOrderChange);
+};

package/modern/hooks/features/rowReorder/useGridRowReorderPreProcessors.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getDataGridUtilityClass } from '@mui/x-data-grid';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+import { GRID_REORDER_COL_DEF } from './gridRowReorderColDef';
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  return React.useMemo(() => {
+    const slots = {
+      rowReorderCellContainer: ['rowReorderCellContainer'],
+      columnHeaderReorder: ['columnHeaderReorder']
+    };
+    return composeClasses(slots, getDataGridUtilityClass, classes);
+  }, [classes]);
+};
+
+export const useGridRowReorderPreProcessors = (apiRef, props) => {
+  const ownerState = {
+    classes: props.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const updateReorderColumn = React.useCallback(columnsState => {
+    const reorderColumn = _extends({}, GRID_REORDER_COL_DEF, {
+      cellClassName: classes.rowReorderCellContainer,
+      headerClassName: classes.columnHeaderReorder,
+      headerName: apiRef.current.getLocaleText('rowReorderingHeaderName')
+    });
+
+    const shouldHaveReorderColumn = props.rowReordering;
+    const haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
+
+    if (shouldHaveReorderColumn && haveReorderColumn) {
+      return columnsState;
+    }
+
+    if (shouldHaveReorderColumn && !haveReorderColumn) {
+      columnsState.lookup[reorderColumn.field] = reorderColumn;
+      columnsState.all = [reorderColumn.field, ...columnsState.all];
+    } else if (!shouldHaveReorderColumn && haveReorderColumn) {
+      delete columnsState.lookup[reorderColumn.field];
+      columnsState.all = columnsState.all.filter(field => field !== reorderColumn.field);
+    }
+
+    return columnsState;
+  }, [apiRef, classes, props.rowReordering]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateReorderColumn);
+};

package/modern/hooks/features/treeData/useGridTreeData.js

@@ -12,8 +12,6 @@ export const useGridTreeData = apiRef => {
     const cellParams = apiRef.current.getCellParams(params.id, params.field);
 
     if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
-      event.stopPropagation();
-      event.preventDefault();
       const filteredDescendantCount = gridFilteredDescendantCountLookupSelector(apiRef)[params.id] ?? 0;
 
       if (filteredDescendantCount === 0) {

package/modern/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
 import { gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from './gridTreeDataGroupColDef';
 import { filterRowTreeFromTreeData, TREE_DATA_STRATEGY } from './gridTreeDataUtils';
 import { GridTreeDataGroupingCell } from '../../../components';
@@ -110,7 +110,7 @@ export const useGridTreeDataPreProcessors = (apiRef, props) => {
       disableChildrenSorting: props.disableChildrenSorting
     });
   }, [apiRef, props.disableChildrenSorting]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateGroupingColumn);
   useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'rowTreeCreation', createRowTree);
   useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(apiRef, TREE_DATA_STRATEGY, 'sorting', sortRows);

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.7.0
+/** @license MUI v5.10.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -11,8 +11,8 @@ export * from '@mui/x-data-grid/hooks';
 export * from '@mui/x-data-grid/locales';
 export * from '@mui/x-data-grid/models';
 export * from '@mui/x-data-grid/context';
-export * from '@mui/x-data-grid/colDef';
 export * from '@mui/x-data-grid/utils';
+export * from '@mui/x-data-grid/colDef';
 export * from './DataGridPro';
 export * from './hooks';
 export * from './models';

package/modern/models/gridRowOrderChangeParams.js

@@ -0,0 +1 @@
+export {};

package/modern/models/index.js

@@ -1,4 +1,5 @@
 export * from './gridGroupingColDefOverride';
 export * from './gridRowScrollEndParams';
+export * from './gridRowOrderChangeParams';
 export * from './gridGroupingValueGetterParams';
 export {};