@mui/x-data-grid-pro 5.9.0 → 5.11.1

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

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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 { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, useGridApiMethod, useGridApiEventHandler } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems';
 import { GridPinnedPosition } from './gridColumnPinningInterface';
@@ -94,8 +94,8 @@ export var useGridColumnPinning = function useGridColumnPinning(apiRef, props) {
   var handleMouseLeave = React.useCallback(function (params, event) {
     updateHoveredClassOnSiblingRows(event);
   }, [updateHoveredClassOnSiblingRows]);
-  useGridApiEventHandler(apiRef, GridEvents.rowMouseEnter, handleMouseEnter);
-  useGridApiEventHandler(apiRef, GridEvents.rowMouseLeave, handleMouseLeave);
+  useGridApiEventHandler(apiRef, 'rowMouseEnter', handleMouseEnter);
+  useGridApiEventHandler(apiRef, 'rowMouseLeave', handleMouseLeave);
   /**
    * PRE-PROCESSING
    */
@@ -210,7 +210,7 @@ export var useGridColumnPinning = function useGridColumnPinning(apiRef, props) {
     propModel: props.pinnedColumns,
     propOnChange: props.onPinnedColumnsChange,
     stateSelector: gridPinnedColumnsSelector,
-    changeEvent: GridEvents.pinnedColumnsChange
+    changeEvent: 'pinnedColumnsChange'
   });
   var checkIfEnabled = React.useCallback(function (methodName) {
     if (props.disableColumnPinning) {

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridApiEventHandler, getDataGridUtilityClass, GridEvents, useGridLogger } from '@mui/x-data-grid';
+import { useGridApiEventHandler, getDataGridUtilityClass, useGridLogger } from '@mui/x-data-grid';
 import { gridColumnReorderDragColSelector } from './columnReorderSelector';
 var CURSOR_MOVE_DIRECTION_LEFT = 'left';
 var CURSOR_MOVE_DIRECTION_RIGHT = 'right';
@@ -30,7 +30,6 @@ export var columnReorderStateInitializer = function columnReorderStateInitialize
   });
 };
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (method)
  */
 
@@ -52,7 +51,7 @@ export var useGridColumnReorder = function useGridColumnReorder(apiRef, props) {
       clearTimeout(removeDnDStylesTimeout.current);
     };
   }, []);
-  var handleColumnHeaderDragStart = React.useCallback(function (params, event) {
+  var handleDragStart = React.useCallback(function (params, event) {
     if (props.disableColumnReorder || params.colDef.disableReorder) {
       return;
     }
@@ -162,10 +161,10 @@ export var useGridColumnReorder = function useGridColumnReorder(apiRef, props) {
     });
     apiRef.current.forceUpdate();
   }, [props.disableColumnReorder, logger, apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnHeaderDragStart);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnter, handleDragEnter);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragOver, handleDragOver);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleDragEnd);
-  useGridApiEventHandler(apiRef, GridEvents.cellDragEnter, handleDragEnter);
-  useGridApiEventHandler(apiRef, GridEvents.cellDragOver, handleDragOver);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleDragStart);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnter', handleDragEnter);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragOver', handleDragOver);
+  useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleDragEnd);
+  useGridApiEventHandler(apiRef, 'cellDragEnter', handleDragEnter);
+  useGridApiEventHandler(apiRef, 'cellDragOver', handleDragOver);
 };

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
  */
@@ -134,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
@@ -163,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;
@@ -183,7 +182,7 @@ 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;
@@ -208,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));
   });
@@ -233,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;
@@ -260,7 +259,7 @@ 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;
@@ -314,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';
@@ -50,8 +50,8 @@ export var useGridDetailPanel = function useGridDetailPanel(apiRef, props) {
       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;
 
@@ -73,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.sortedRowsSet, 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
@@ -189,13 +187,13 @@ export var useGridRowGrouping = function useGridRowGrouping(apiRef, props) {
       // 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
@@ -23,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.9.0
+/** @license MUI v5.11.1
  *
  * 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';

package/legacy/utils/index.js

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

package/legacy/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY0OTg4NzIwMDAwMA==";
+  var releaseInfo = "MTY1Mjk5NzYwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).