@mui/x-data-grid-pro 5.8.0 → 5.11.0

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
-import { GridEvents, gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
+import { gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
@@ -82,7 +82,6 @@ export var columnResizeStateInitializer = function columnResizeStateInitializer(
   });
 };
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
@@ -102,17 +101,29 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
 
   var updateWidth = function updateWidth(newWidth) {
     logger.debug("Updating width to ".concat(newWidth, " for col ").concat(colDefRef.current.field));
+    var prevWidth = colElementRef.current.offsetWidth;
+    var widthDiff = newWidth - prevWidth;
     colDefRef.current.computedWidth = newWidth;
     colDefRef.current.width = newWidth;
-    colDefRef.current.flex = undefined;
+    colDefRef.current.flex = 0;
     colElementRef.current.style.width = "".concat(newWidth, "px");
     colElementRef.current.style.minWidth = "".concat(newWidth, "px");
     colElementRef.current.style.maxWidth = "".concat(newWidth, "px");
     colCellElementsRef.current.forEach(function (element) {
       var div = element;
-      div.style.width = "".concat(newWidth, "px");
-      div.style.minWidth = "".concat(newWidth, "px");
-      div.style.maxWidth = "".concat(newWidth, "px");
+      var finalWidth;
+
+      if (div.getAttribute('aria-colspan') === '1') {
+        finalWidth = "".concat(newWidth, "px");
+      } else {
+        // Cell with colspan > 1 cannot be just updated width new width.
+        // Instead, we add width diff to the current width.
+        finalWidth = "".concat(div.offsetWidth + widthDiff, "px");
+      }
+
+      div.style.width = finalWidth;
+      div.style.minWidth = finalWidth;
+      div.style.maxWidth = finalWidth;
     });
   };
 
@@ -122,12 +133,12 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     apiRef.current.updateColumn(colDefRef.current);
     clearTimeout(stopResizeEventTimeout.current);
     stopResizeEventTimeout.current = setTimeout(function () {
-      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
 
       if (colDefRef.current) {
         var _colDefRef$current;
 
-        apiRef.current.publishEvent(GridEvents.columnWidthChange, {
+        apiRef.current.publishEvent('columnWidthChange', {
           element: colElementRef.current,
           colDef: colDefRef.current,
           width: (_colDefRef$current = colDefRef.current) == null ? void 0 : _colDefRef$current.computedWidth
@@ -151,7 +162,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
       colDef: colDefRef.current,
       width: newWidth
     };
-    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+    apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   var handleColumnResizeMouseDown = useEventCallback(function (_ref, event) {
     var _apiRef$current$colum;
@@ -171,12 +182,12 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
 
     event.preventDefault();
     logger.debug("Start Resize on col ".concat(colDef.field));
-    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+    apiRef.current.publishEvent('columnResizeStart', {
       field: colDef.field
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current.querySelector("[data-field=\"".concat(colDef.field, "\"]"));
-    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     var doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
     separatorSide.current = getSeparatorSide(event.currentTarget);
@@ -196,7 +207,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     apiRef.current.updateColumn(colDefRef.current);
     clearTimeout(stopResizeEventTimeout.current);
     stopResizeEventTimeout.current = setTimeout(function () {
-      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
     });
     logger.debug("Updating col ".concat(colDefRef.current.field, " with new width: ").concat(colDefRef.current.width));
   });
@@ -221,7 +232,7 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
       colDef: colDefRef.current,
       width: newWidth
     };
-    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+    apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   var handleTouchStart = useEventCallback(function (event) {
     var _apiRef$current$colum2;
@@ -248,12 +259,12 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
     var field = getFieldFromHeaderElem(colElementRef.current);
     var colDef = apiRef.current.getColumn(field);
     logger.debug("Start Resize on col ".concat(colDef.field));
-    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+    apiRef.current.publishEvent('columnResizeStart', {
       field: field
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = findHeaderElementFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.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);
     var doc = ownerDocument(event.currentTarget);
@@ -302,9 +313,9 @@ export var useGridColumnResize = function useGridColumnResize(apiRef, props) {
   }, 'touchstart', handleTouchStart, {
     passive: doesSupportTouchActionNone()
   });
-  useGridApiEventHandler(apiRef, GridEvents.columnSeparatorMouseDown, handleColumnResizeMouseDown);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStart, handleResizeStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnResizeStop, handleResizeStop);
-  useGridApiOptionHandler(apiRef, GridEvents.columnResize, props.onColumnResize);
-  useGridApiOptionHandler(apiRef, GridEvents.columnWidthChange, props.onColumnWidthChange);
+  useGridApiEventHandler(apiRef, 'columnSeparatorMouseDown', handleColumnResizeMouseDown);
+  useGridApiEventHandler(apiRef, 'columnResizeStart', handleResizeStart);
+  useGridApiEventHandler(apiRef, 'columnResizeStop', handleResizeStop);
+  useGridApiOptionHandler(apiRef, 'columnResize', props.onColumnResize);
+  useGridApiOptionHandler(apiRef, 'columnWidthChange', props.onColumnWidthChange);
 };

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
@@ -36,14 +36,22 @@ export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
     apiRef.current.toggleDetailPanel(params.id);
   }, [apiRef, contentCache, props.getDetailPanelContent]);
   var handleCellKeyDown = React.useCallback(function (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);
+  useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   var addDetailHeight = React.useCallback(function (initialValue, row) {
     var _heightCache$row$id;
 
@@ -65,7 +73,7 @@ export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,
     stateSelector: gridDetailPanelExpandedRowIdsSelector,
-    changeEvent: GridEvents.detailPanelsExpandedRowIdsChange
+    changeEvent: 'detailPanelsExpandedRowIdsChange'
   });
   var toggleDetailPanel = React.useCallback(function (id) {
     if (props.getDetailPanelContent == null) {

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridApiEventHandler, gridRowIdsSelector, GridEvents } from '@mui/x-data-grid';
+import { useGridApiEventHandler, gridRowIdsSelector } from '@mui/x-data-grid';
 
 function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight) {
   if (typeof getDetailPanelContent !== 'function') {
@@ -39,7 +39,7 @@ export var useGridDetailPanelCache = function useGridDetailPanelCache(apiRef, pr
     });
     apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
-  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, updateCaches);
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCaches);
   var isFirstRender = React.useRef(true);
 
   if (isFirstRender.current) {

package/legacy/hooks/features/index.js

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

package/legacy/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -1,9 +1,8 @@
 import * as React from 'react';
-import { useGridSelector, GridEvents, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
+import { useGridSelector, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
 import { useGridVisibleRows } from '@mui/x-data-grid/internals';
 
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (state)
  * @requires useGridDimensions (method) - can be after
  * @requires useGridScroll (method
@@ -34,7 +33,7 @@ export var useGridInfiniteLoader = function useGridInfiniteLoader(apiRef, props)
         viewportPageSize: viewportPageSize,
         virtualRowsCount: currentPage.rows.length
       };
-      apiRef.current.publishEvent(GridEvents.rowsScrollEnd, rowScrollEndParam);
+      apiRef.current.publishEvent('rowsScrollEnd', rowScrollEndParam);
       isInScrollBottomArea.current = true;
     }
   }, [contentHeight, props.scrollEndThreshold, visibleColumns, apiRef, currentPage.rows.length]);
@@ -46,6 +45,6 @@ export var useGridInfiniteLoader = function useGridInfiniteLoader(apiRef, props)
       top: top
     });
   }, [handleRowsScrollEnd]);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleGridScroll);
-  useGridApiOptionHandler(apiRef, GridEvents.rowsScrollEnd, props.onRowsScrollEnd);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleGridScroll);
+  useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };

package/legacy/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -25,12 +25,12 @@ export var isGroupingColumn = function isGroupingColumn(field) {
 /**
  * When filtering a group, we only want to filter according to the items related to this grouping column.
  */
-var shouldApplyFilterItemOnGroup = function shouldApplyFilterItemOnGroup(item, node) {
-  if (item.columnField === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) {
+var shouldApplyFilterItemOnGroup = function shouldApplyFilterItemOnGroup(columnField, node) {
+  if (columnField === GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD) {
     return true;
   }
 
-  var groupingCriteriaField = getRowGroupingCriteriaFromGroupingField(item.columnField);
+  var groupingCriteriaField = getRowGroupingCriteriaFromGroupingField(columnField);
   return groupingCriteriaField === node.groupingField;
 };
 /**
@@ -56,8 +56,8 @@ export var filterRowTreeFromGroupingColumns = function filterRowTreeFromGrouping
     if (!isRowMatchingFilters) {
       isMatchingFilters = true;
     } else {
-      var shouldApplyItem = node.isAutoGenerated ? function (item) {
-        return shouldApplyFilterItemOnGroup(item, node);
+      var shouldApplyItem = node.isAutoGenerated ? function (columnField) {
+        return shouldApplyFilterItemOnGroup(columnField, node);
       } : undefined;
       isMatchingFilters = isRowMatchingFilters(node.id, shouldApplyItem);
     }

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

@@ -2,7 +2,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 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 { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
 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';
@@ -20,11 +20,9 @@ export var rowGroupingStateInitializer = function rowGroupingStateInitializer(st
   });
 };
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (state, method) - can be after, async only
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
- * TODO: Move the the Premium plan once available and remove the `experimentalFeatures.rowGrouping` flag
  */
 
 export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
@@ -33,7 +31,7 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
     propModel: props.rowGroupingModel,
     propOnChange: props.onRowGroupingModelChange,
     stateSelector: gridRowGroupingModelSelector,
-    changeEvent: GridEvents.rowGroupingModelChange
+    changeEvent: 'rowGroupingModelChange'
   });
   /**
    * API METHODS
@@ -183,21 +181,19 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
             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
 
       if (apiRef.current.unstable_getActiveStrategy('rowTree') === ROW_GROUPING_STRATEGY) {
-        apiRef.current.publishEvent(GridEvents.activeStrategyProcessorChange, 'rowTreeCreation');
+        apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
       }
     }
   }, [apiRef, props.disableRowGrouping]);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
-  useGridApiEventHandler(apiRef, GridEvents.columnsChange, checkGroupingColumnsModelDiff);
-  useGridApiEventHandler(apiRef, GridEvents.rowGroupingModelChange, checkGroupingColumnsModelDiff);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
+  useGridApiEventHandler(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
   /**
    * EFFECTS
    */

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

@@ -3,11 +3,11 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { gridColumnLookupSelector, gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
+import { sortRowTree } from '../../../utils/tree/sortRowTree';
+import { buildRowTree } from '../../../utils/tree/buildRowTree';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
 import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability } from './gridRowGroupingUtils';
-import { buildRowTree } from '../../../utils/tree/buildRowTree';
-import { sortRowTree } from '../../../utils/tree/sortRowTree';
 export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProcessors(apiRef, props) {
   var getGroupingColDefs = React.useCallback(function (columnsState) {
     if (props.disableRowGrouping) {

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

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
+import { renderRowReorderCell } from '../../../components/GridRowReorderCell';
+export var 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: function renderHeader() {
+    return ' ';
+  },
+  renderCell: renderRowReorderCell
+});

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

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

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

@@ -0,0 +1,115 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridLogger, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowTreeDepthSelector, useGridApiOptionHandler, gridEditRowsStateSelector } from '@mui/x-data-grid';
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  var slots = {
+    rowDragging: ['row--dragging']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+/**
+ * Only available in DataGridPro
+ * @requires useGridRows (method)
+ */
+
+
+export var useGridRowReorder = function useGridRowReorder(apiRef, props) {
+  var logger = useGridLogger(apiRef, 'useGridRowReorder');
+  var sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  var treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  var dragRowNode = React.useRef(null);
+  var originRowIndex = React.useRef(null);
+  var removeDnDStylesTimeout = React.useRef();
+  var ownerState = {
+    classes: props.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+
+  var _React$useState = React.useState(''),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      dragRowId = _React$useState2[0],
+      setDragRowId = _React$useState2[1];
+
+  React.useEffect(function () {
+    return function () {
+      clearTimeout(removeDnDStylesTimeout.current);
+    };
+  }, []); // TODO: remove sortModel check once row reorder is sorting compatible
+  // remove treeDepth once row reorder is tree compatible
+
+  var isRowReorderDisabled = React.useMemo(function () {
+    return !props.rowReordering || !!sortModel.length || treeDepth !== 1;
+  }, [props.rowReordering, sortModel, treeDepth]);
+  var handleDragStart = React.useCallback(function (params, event) {
+    // Call the gridEditRowsStateSelector directly to avoid infnite loop
+    var editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
+      return;
+    }
+
+    logger.debug("Start dragging row ".concat(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(function () {
+      dragRowNode.current.classList.remove(classes.rowDragging);
+    });
+    originRowIndex.current = apiRef.current.getRowIndex(params.id);
+  }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
+  var handleDragOver = React.useCallback(function (params, event) {
+    logger.debug("Dragging over row ".concat(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) {
+      var targetRowIndex = apiRef.current.getRowIndex(params.id);
+      apiRef.current.setRowIndex(dragRowId, targetRowIndex);
+    }
+  }, [apiRef, logger, dragRowId]);
+  var handleDragEnd = React.useCallback(function (params, event) {
+    // Call the gridEditRowsStateSelector directly to avoid infnite loop
+    var 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.
+      var rowOrderChangeParams = {
+        row: apiRef.current.getRow(dragRowId),
+        targetIndex: apiRef.current.getRowIndex(params.id),
+        oldIndex: originRowIndex.current
+      };
+      apiRef.current.publishEvent('rowOrderChange', rowOrderChangeParams);
+    }
+
+    setDragRowId('');
+  }, [isRowReorderDisabled, logger, apiRef, dragRowId]);
+  useGridApiEventHandler(apiRef, 'rowDragStart', handleDragStart);
+  useGridApiEventHandler(apiRef, 'rowDragOver', handleDragOver);
+  useGridApiEventHandler(apiRef, 'rowDragEnd', handleDragEnd);
+  useGridApiEventHandler(apiRef, 'cellDragOver', handleDragOver);
+  useGridApiOptionHandler(apiRef, 'rowOrderChange', props.onRowOrderChange);
+};

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

@@ -0,0 +1,52 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+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';
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var classes = ownerState.classes;
+  return React.useMemo(function () {
+    var slots = {
+      rowReorderCellContainer: ['rowReorderCellContainer'],
+      columnHeaderReorder: ['columnHeaderReorder']
+    };
+    return composeClasses(slots, getDataGridUtilityClass, classes);
+  }, [classes]);
+};
+
+export var useGridRowReorderPreProcessors = function useGridRowReorderPreProcessors(apiRef, props) {
+  var ownerState = {
+    classes: props.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var updateReorderColumn = React.useCallback(function (columnsState) {
+    var reorderColumn = _extends({}, GRID_REORDER_COL_DEF, {
+      cellClassName: classes.rowReorderCellContainer,
+      headerClassName: classes.columnHeaderReorder,
+      headerName: apiRef.current.getLocaleText('rowReorderingHeaderName')
+    });
+
+    var shouldHaveReorderColumn = props.rowReordering;
+    var haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
+
+    if (shouldHaveReorderColumn && haveReorderColumn) {
+      return columnsState;
+    }
+
+    if (shouldHaveReorderColumn && !haveReorderColumn) {
+      columnsState.lookup[reorderColumn.field] = reorderColumn;
+      columnsState.all = [reorderColumn.field].concat(_toConsumableArray(columnsState.all));
+    } else if (!shouldHaveReorderColumn && haveReorderColumn) {
+      delete columnsState.lookup[reorderColumn.field];
+      columnsState.all = columnsState.all.filter(function (field) {
+        return field !== reorderColumn.field;
+      });
+    }
+
+    return columnsState;
+  }, [apiRef, classes, props.rowReordering]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateReorderColumn);
+};

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

@@ -1,9 +1,5 @@
 import * as React from 'react';
-import { useGridApiEventHandler, GridEvents, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
-
-/**
- * Only available in DataGridPro
- */
+import { useGridApiEventHandler, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid';
 export var useGridTreeData = function useGridTreeData(apiRef) {
   /**
    * EVENTS
@@ -14,8 +10,6 @@ export var useGridTreeData = function useGridTreeData(apiRef) {
     if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
       var _gridFilteredDescenda;
 
-      event.stopPropagation();
-      event.preventDefault();
       var filteredDescendantCount = (_gridFilteredDescenda = gridFilteredDescendantCountLookupSelector(apiRef)[params.id]) != null ? _gridFilteredDescenda : 0;
 
       if (filteredDescendantCount === 0) {
@@ -25,5 +19,5 @@ export var useGridTreeData = function useGridTreeData(apiRef) {
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

package/legacy/index.js

@@ -1,9 +1,9 @@
-/** @license MUI v5.8.0
+/** @license MUI v5.11.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import './typeOverloads/modules';
+import './typeOverloads';
 export { LicenseInfo } from '@mui/x-license-pro';
 export * from '@mui/x-data-grid/components';
 export * from '@mui/x-data-grid/constants';
@@ -17,4 +17,8 @@ export * from './DataGridPro';
 export * from './hooks';
 export * from './models';
 export * from './components';
-export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
+export * from './utils';
+export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
+// We export them from here to avoid export duplication between pro and premium
+export * from './hooks/features/rowGrouping';
+export * from './models/gridGroupingValueGetterParams';

package/legacy/internals/index.js

@@ -0,0 +1,17 @@
+export * from '@mui/x-data-grid/internals';
+export { DataGridProVirtualScroller } from '../components/DataGridProVirtualScroller';
+export { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders';
+export { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
+export { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
+export { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
+export { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
+export { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
+export { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
+export { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
+export { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
+export { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
+export { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
+export { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
+export { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
+export { buildRowTree } from '../utils/tree/buildRowTree';
+export { sortRowTree } from '../utils/tree/sortRowTree';

package/legacy/models/gridRowOrderChangeParams.js

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

package/legacy/models/index.js

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

package/legacy/typeOverloads/index.js

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