@mui/x-data-grid-pro 5.8.0 → 5.11.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 { 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('rowDragStart'),
+    onDragOver: publish('rowDragOver'),
+    onDragEnd: publish('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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
-import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass, GridEvents } from '@mui/x-data-grid';
+import { useGridSelector, gridFilteredDescendantCountLookupSelector, getDataGridUtilityClass } from '@mui/x-data-grid';
 import { isNavigationKey } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
@@ -45,7 +45,7 @@ const GridTreeDataGroupingCell = props => {
     }
 
     if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, props, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   };
 
@@ -105,10 +105,21 @@ 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.
@@ -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

@@ -1,7 +1,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 { 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';
@@ -77,8 +77,8 @@ export const useGridColumnPinning = (apiRef, props) => {
   const handleMouseLeave = React.useCallback((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
    */
@@ -185,7 +185,7 @@ export const useGridColumnPinning = (apiRef, props) => {
     propModel: props.pinnedColumns,
     propOnChange: props.onPinnedColumnsChange,
     stateSelector: gridPinnedColumnsSelector,
-    changeEvent: GridEvents.pinnedColumnsChange
+    changeEvent: 'pinnedColumnsChange'
   });
   const checkIfEnabled = React.useCallback(methodName => {
     if (props.disableColumnPinning) {

package/modern/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';
 const CURSOR_MOVE_DIRECTION_LEFT = 'left';
 const CURSOR_MOVE_DIRECTION_RIGHT = 'right';
@@ -28,7 +28,6 @@ export const columnReorderStateInitializer = state => _extends({}, state, {
   }
 });
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (method)
  */
 
@@ -50,7 +49,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;
     }
@@ -156,10 +155,10 @@ export const 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/modern/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.
@@ -80,7 +80,6 @@ export const columnResizeStateInitializer = state => _extends({}, state, {
   }
 });
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
@@ -100,17 +99,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;
     });
   };
 
@@ -120,10 +131,10 @@ export const useGridColumnResize = (apiRef, props) => {
     apiRef.current.updateColumn(colDefRef.current);
     clearTimeout(stopResizeEventTimeout.current);
     stopResizeEventTimeout.current = setTimeout(() => {
-      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
 
       if (colDefRef.current) {
-        apiRef.current.publishEvent(GridEvents.columnWidthChange, {
+        apiRef.current.publishEvent('columnWidthChange', {
           element: colElementRef.current,
           colDef: colDefRef.current,
           width: colDefRef.current?.computedWidth
@@ -147,7 +158,7 @@ export const useGridColumnResize = (apiRef, props) => {
       colDef: colDefRef.current,
       width: newWidth
     };
-    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+    apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   const handleColumnResizeMouseDown = useEventCallback(({
     colDef
@@ -165,12 +176,12 @@ export const useGridColumnResize = (apiRef, props) => {
 
     event.preventDefault();
     logger.debug(`Start Resize on col ${colDef.field}`);
-    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+    apiRef.current.publishEvent('columnResizeStart', {
       field: colDef.field
     }, 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);
@@ -190,7 +201,7 @@ export const useGridColumnResize = (apiRef, props) => {
     apiRef.current.updateColumn(colDefRef.current);
     clearTimeout(stopResizeEventTimeout.current);
     stopResizeEventTimeout.current = setTimeout(() => {
-      apiRef.current.publishEvent(GridEvents.columnResizeStop, null, nativeEvent);
+      apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
     });
     logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
   });
@@ -215,7 +226,7 @@ export const useGridColumnResize = (apiRef, props) => {
       colDef: colDefRef.current,
       width: newWidth
     };
-    apiRef.current.publishEvent(GridEvents.columnResize, params, nativeEvent);
+    apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   const handleTouchStart = useEventCallback(event => {
     const cellSeparator = findParentElementFromClassName(event.target, gridClasses['columnSeparator--resizable']); // Let the event bubble if the target is not a col separator
@@ -240,12 +251,12 @@ export const useGridColumnResize = (apiRef, props) => {
     const field = getFieldFromHeaderElem(colElementRef.current);
     const colDef = apiRef.current.getColumn(field);
     logger.debug(`Start Resize on col ${colDef.field}`);
-    apiRef.current.publishEvent(GridEvents.columnResizeStart, {
+    apiRef.current.publishEvent('columnResizeStart', {
       field
     }, 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);
@@ -287,9 +298,9 @@ export const useGridColumnResize = (apiRef, props) => {
   useGridNativeEventListener(apiRef, () => apiRef.current.columnHeadersElementRef?.current, '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/modern/hooks/features/detailPanel/useGridDetailPanel.js

@@ -1,6 +1,6 @@
 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';
@@ -33,14 +33,22 @@ 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);
+  useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
   const addDetailHeight = React.useCallback((initialValue, row) => {
     if (expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
       return _extends({}, initialValue, {
@@ -60,7 +68,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,
     stateSelector: gridDetailPanelExpandedRowIdsSelector,
-    changeEvent: GridEvents.detailPanelsExpandedRowIdsChange
+    changeEvent: 'detailPanelsExpandedRowIdsChange'
   });
   const toggleDetailPanel = React.useCallback(id => {
     if (props.getDetailPanelContent == null) {

package/modern/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 const useGridDetailPanelCache = (apiRef, props) => {
     });
     apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
-  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, updateCaches);
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCaches);
   const isFirstRender = React.useRef(true);
 
   if (isFirstRender.current) {

package/modern/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/modern/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 const useGridInfiniteLoader = (apiRef, props) => {
         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]);
@@ -47,6 +46,6 @@ export const useGridInfiniteLoader = (apiRef, props) => {
       top
     });
   }, [handleRowsScrollEnd]);
-  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleGridScroll);
-  useGridApiOptionHandler(apiRef, GridEvents.rowsScrollEnd, props.onRowsScrollEnd);
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleGridScroll);
+  useGridApiOptionHandler(apiRef, 'rowsScrollEnd', props.onRowsScrollEnd);
 };

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

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

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

@@ -1,7 +1,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 { 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';
@@ -15,11 +15,9 @@ export const rowGroupingStateInitializer = (state, props) => _extends({}, state,
   }
 });
 /**
- * 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 const useGridRowGrouping = (apiRef, props) => {
@@ -28,7 +26,7 @@ export const useGridRowGrouping = (apiRef, props) => {
     propModel: props.rowGroupingModel,
     propOnChange: props.onRowGroupingModelChange,
     stateSelector: gridRowGroupingModelSelector,
-    changeEvent: GridEvents.rowGroupingModelChange
+    changeEvent: 'rowGroupingModelChange'
   });
   /**
    * API METHODS
@@ -169,21 +167,19 @@ 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
 
       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/modern/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 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 const useGridRowGroupingPreProcessors = (apiRef, props) => {
   const getGroupingColDefs = React.useCallback(columnsState => {
     if (props.disableRowGrouping) {

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';