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

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
@@ -175,13 +173,13 @@ export const 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/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/useGridRowReorder.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridLogger, GridEvents, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowTreeDepthSelector, useGridApiOptionHandler, gridEditRowsStateSelector } from '@mui/x-data-grid';
+import { useGridLogger, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowTreeDepthSelector, useGridApiOptionHandler, gridEditRowsStateSelector } from '@mui/x-data-grid';
 
 const useUtilityClasses = ownerState => {
   const {
@@ -98,14 +98,14 @@ export const useGridRowReorder = (apiRef, props) => {
         targetIndex: apiRef.current.getRowIndex(params.id),
         oldIndex: originRowIndex.current
       };
-      apiRef.current.publishEvent(GridEvents.rowOrderChange, rowOrderChangeParams);
+      apiRef.current.publishEvent('rowOrderChange', rowOrderChangeParams);
     }
 
     setDragRowId('');
   }, [isRowReorderDisabled, logger, apiRef, dragRowId]);
-  useGridApiEventHandler(apiRef, GridEvents.rowDragStart, handleDragStart);
-  useGridApiEventHandler(apiRef, GridEvents.rowDragOver, handleDragOver);
-  useGridApiEventHandler(apiRef, GridEvents.rowDragEnd, handleDragEnd);
-  useGridApiEventHandler(apiRef, GridEvents.cellDragOver, handleDragOver);
-  useGridApiOptionHandler(apiRef, GridEvents.rowOrderChange, props.onRowOrderChange);
+  useGridApiEventHandler(apiRef, 'rowDragStart', handleDragStart);
+  useGridApiEventHandler(apiRef, 'rowDragOver', handleDragOver);
+  useGridApiEventHandler(apiRef, 'rowDragEnd', handleDragEnd);
+  useGridApiEventHandler(apiRef, 'cellDragOver', handleDragOver);
+  useGridApiOptionHandler(apiRef, 'rowOrderChange', props.onRowOrderChange);
 };

package/modern/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 const useGridTreeData = apiRef => {
   /**
    * EVENTS
@@ -21,5 +17,5 @@ export const useGridTreeData = apiRef => {
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
 };

package/modern/index.js

@@ -1,9 +1,9 @@
-/** @license MUI v5.10.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/modern/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/modern/models/index.js

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

package/modern/typeOverloads/index.js

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

package/modern/utils/index.js

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

package/modern/utils/releaseInfo.js

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

package/modern/utils/tree/buildRowTree.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-
+export const getGroupRowIdFromPath = path => {
+  const pathStr = path.map(groupingCriteria => `${groupingCriteria.field}/${groupingCriteria.key}`).join('-');
+  return `auto-generated-row-${pathStr}`;
+};
 /**
  * Transform a list of rows into a tree structure where each row references its parent and children.
  * If a row have a parent which does not exist in the input rows, creates an auto generated row
@@ -29,6 +32,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
  }
  ```
  */
+
 export const buildRowTree = params => {
   // During the build, we store the children as a Record to avoid linear complexity when checking if a children is already defined.
   const tempTree = {};
@@ -37,6 +41,8 @@ export const buildRowTree = params => {
 
   const idRowsLookup = _extends({}, params.idRowsLookup);
 
+  const idToIdLookup = _extends({}, params.idToIdLookup);
+
   const groupingCriteriaToIdTree = {};
 
   const isGroupExpandedByDefault = node => {
@@ -88,7 +94,7 @@ export const buildRowTree = params => {
         if (depth === row.path.length - 1) {
           nodeId = row.id;
         } else {
-          nodeId = `auto-generated-row-${row.path.map(groupingCriteria => `${groupingCriteria.field}/${groupingCriteria.key}`).slice(0, depth + 1).join('-')}`;
+          nodeId = getGroupRowIdFromPath(row.path.slice(0, depth + 1));
         }
 
         keyConfig = {
@@ -162,6 +168,7 @@ export const buildRowTree = params => {
     treeDepth,
     ids,
     idRowsLookup,
+    idToIdLookup,
     groupingName: params.groupingName
   };
 };

package/modern/utils/tree/index.js

@@ -0,0 +1 @@
+export { getGroupRowIdFromPath } from './buildRowTree';

package/node/DataGridPro/DataGridPro.js

@@ -96,6 +96,11 @@ DataGridProRaw.propTypes = {
    */
   autoPageSize: _propTypes.default.bool,
 
+  /**
+   * Controls the modes of the cells.
+   */
+  cellModesModel: _propTypes.default.object,
+
   /**
    * If `true`, the grid get a first column with a checkbox that allows to select rows.
    * @default false
@@ -249,7 +254,7 @@ DataGridProRaw.propTypes = {
   disableMultipleColumnsSorting: _propTypes.default.bool,
 
   /**
-   * If `true`, multiple selection using the CTRL or CMD key is disabled.
+   * If `true`, multiple selection using the Ctrl or CMD key is disabled.
    * @default false
    */
   disableMultipleSelection: _propTypes.default.bool,
@@ -322,7 +327,9 @@ DataGridProRaw.propTypes = {
       operatorValue: _propTypes.default.string,
       value: _propTypes.default.any
     })).isRequired,
-    linkOperator: _propTypes.default.oneOf(['and', 'or'])
+    linkOperator: _propTypes.default.oneOf(['and', 'or']),
+    quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
+    quickFilterValues: _propTypes.default.array
   }),
 
   /**
@@ -454,6 +461,14 @@ DataGridProRaw.propTypes = {
    */
   isRowSelectable: _propTypes.default.func,
 
+  /**
+   * If `true`, the selection model will retain selected rows that do not exist.
+   * Useful when using server side pagination and row selections need to be retained
+   * when changing pages.
+   * @default false
+   */
+  keepNonExistentRowsSelected: _propTypes.default.bool,
+
   /**
    * If `true`, a  loading overlay is displayed.
    */
@@ -541,6 +556,13 @@ DataGridProRaw.propTypes = {
    */
   onCellKeyDown: _propTypes.default.func,
 
+  /**
+   * Callback fired when the `cellModesModel` prop changes.
+   * @param {GridCellModesModel} cellModesModel Object containig which cells are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onCellModesModelChange: _propTypes.default.func,
+
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -764,6 +786,13 @@ DataGridProRaw.propTypes = {
    */
   onRowGroupingModelChange: _propTypes.default.func,
 
+  /**
+   * Callback fired when the `rowModesModel` prop changes.
+   * @param {GridRowModesModel} rowModesModel Object containig which rows are in "edit" mode.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowModesModelChange: _propTypes.default.func,
+
   /**
    * Callback fired when a row is being reordered.
    * @param {GridRowOrderChangeParams} params With all properties from [[GridRowOrderChangeParams]].
@@ -878,6 +907,11 @@ DataGridProRaw.propTypes = {
    */
   rowHeight: _propTypes.default.number,
 
+  /**
+   * Controls the modes of the rows.
+   */
+  rowModesModel: _propTypes.default.object,
+
   /**
    * If `true`, the reordering of rows is enabled.
    * @default false

package/node/DataGridPro/useDataGridProComponent.js

@@ -17,10 +17,6 @@ var _useGridTreeData = require("../hooks/features/treeData/useGridTreeData");
 
 var _useGridTreeDataPreProcessors = require("../hooks/features/treeData/useGridTreeDataPreProcessors");
 
-var _useGridRowGrouping = require("../hooks/features/rowGrouping/useGridRowGrouping");
-
-var _useGridRowGroupingPreProcessors = require("../hooks/features/rowGrouping/useGridRowGroupingPreProcessors");
-
 var _useGridColumnPinning = require("../hooks/features/columnPinning/useGridColumnPinning");
 
 var _useGridColumnPinningPreProcessors = require("../hooks/features/columnPinning/useGridColumnPinningPreProcessors");
@@ -35,6 +31,10 @@ var _useGridRowReorder = require("../hooks/features/rowReorder/useGridRowReorder
 
 var _useGridRowReorderPreProcessors = require("../hooks/features/rowReorder/useGridRowReorderPreProcessors");
 
+var _useGridRowGrouping = require("../hooks/features/rowGrouping/useGridRowGrouping");
+
+var _useGridRowGroupingPreProcessors = require("../hooks/features/rowGrouping/useGridRowGroupingPreProcessors");
+
 // Pro-only features
 const useDataGridProComponent = (inputApiRef, props) => {
   var _props$experimentalFe, _props$experimentalFe2;

package/node/DataGridPro/useDataGridProProps.js

@@ -15,6 +15,8 @@ var _styles = require("@mui/material/styles");
 
 var _xDataGrid = require("@mui/x-data-grid");
 
+var _internals = require("@mui/x-data-grid/internals");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,14 +29,15 @@ const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = (0, _extends2.default)({}, _xDataGrid
   treeData: false,
   defaultGroupingExpansionDepth: 0,
   disableColumnPinning: false,
-  disableRowGrouping: false,
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
-  rowGroupingColumnMode: 'single',
   rowReordering: false,
-  getDetailPanelHeight: () => 500
+  getDetailPanelHeight: () => 500,
+  disableRowGrouping: false,
+  rowGroupingColumnMode: 'single'
 });
 exports.DATA_GRID_PRO_PROPS_DEFAULT_VALUES = DATA_GRID_PRO_PROPS_DEFAULT_VALUES;
+const rowGroupingWarning = (0, _internals.buildWarning)(['MUI: The row grouping has been moved to the new `@mui/x-data-grid-premium` package.', 'The feature is deprecated in `@mui/x-data-grid-pro`, and it will soon be removed from this package.'], 'error');
 
 const useDataGridProProps = inProps => {
   const themedProps = (0, _styles.useThemeProps)({
@@ -55,11 +58,23 @@ const useDataGridProProps = inProps => {
     });
     return mergedComponents;
   }, [themedProps.components]);
+
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      var _themedProps$experime;
+
+      if ((_themedProps$experime = themedProps.experimentalFeatures) != null && _themedProps$experime.rowGrouping) {
+        rowGroupingWarning();
+      }
+    }, [themedProps.experimentalFeatures]);
+  }
+
   return React.useMemo(() => {
-    var _themedProps$experime;
+    var _themedProps$experime2;
 
     return (0, _extends2.default)({}, DATA_GRID_PRO_PROPS_DEFAULT_VALUES, themedProps, {
-      disableRowGrouping: themedProps.disableRowGrouping || !((_themedProps$experime = themedProps.experimentalFeatures) != null && _themedProps$experime.rowGrouping),
+      disableRowGrouping: themedProps.disableRowGrouping || !((_themedProps$experime2 = themedProps.experimentalFeatures) != null && _themedProps$experime2.rowGrouping),
       localeText,
       components,
       signature: 'DataGridPro'

package/node/components/DataGridProColumnHeaders.js

@@ -110,7 +110,7 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
     const newScrollbarSize = apiRef.current.windowRef.current.offsetWidth - apiRef.current.windowRef.current.clientWidth;
     setScrollbarSize(newScrollbarSize);
   }, [apiRef]);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.virtualScrollerContentSizeChange, handleContentSizeChange);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
   const pinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _columnPinning.gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = (0, _DataGridProVirtualScroller.filterColumns)(pinnedColumns, visibleColumnFields);
   const {

package/node/components/DataGridProVirtualScroller.js

@@ -99,7 +99,9 @@ const VirtualScrollerDetailPanels = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanels',
   overridesResolver: (props, styles) => styles.detailPanels
-})({});
+})({
+  position: 'relative'
+});
 const VirtualScrollerDetailPanel = (0, _styles.styled)(_Box.default, {
   name: 'MuiDataGrid',
   slot: 'DetailPanel',
@@ -200,9 +202,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       updateRenderZonePosition(renderContext);
     }
   }, [renderContext, updateRenderZonePosition]);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnWidthChange, refreshRenderZonePosition);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnOrderChange, refreshRenderZonePosition);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.rowOrderChange, refreshRenderZonePosition);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnWidthChange', refreshRenderZonePosition);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnOrderChange', refreshRenderZonePosition);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'rowOrderChange', refreshRenderZonePosition);
   const leftRenderContext = renderContext && leftPinnedColumns.length > 0 ? (0, _extends2.default)({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length

package/node/components/GridGroupingCriteriaCell.js

@@ -63,7 +63,7 @@ const GridGroupingCriteriaCell = props => {
       event.stopPropagation();
     }
 
-    apiRef.current.publishEvent(_xDataGrid.GridEvents.cellKeyDown, props, event);
+    apiRef.current.publishEvent('cellKeyDown', props, event);
   };
 
   const handleClick = event => {

package/node/components/GridRowReorderCell.js

@@ -70,9 +70,9 @@ const GridRowReorderCell = params => {
     }
   }, [apiRef, params.row.id]);
   const draggableEventHandlers = {
-    onDragStart: publish(_xDataGrid.GridEvents.rowDragStart),
-    onDragOver: publish(_xDataGrid.GridEvents.rowDragOver),
-    onDragEnd: publish(_xDataGrid.GridEvents.rowDragEnd)
+    onDragStart: publish('rowDragStart'),
+    onDragOver: publish('rowDragOver'),
+    onDragEnd: publish('rowDragEnd')
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     className: classes.root,

package/node/components/GridTreeDataGroupingCell.js

@@ -68,7 +68,7 @@ const GridTreeDataGroupingCell = props => {
     }
 
     if ((0, _internals.isNavigationKey)(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent(_xDataGrid.GridEvents.cellNavigationKeyDown, props, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   };
 

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

@@ -107,8 +107,8 @@ const useGridColumnPinning = (apiRef, props) => {
   const handleMouseLeave = React.useCallback((params, event) => {
     updateHoveredClassOnSiblingRows(event);
   }, [updateHoveredClassOnSiblingRows]);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.rowMouseEnter, handleMouseEnter);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.rowMouseLeave, handleMouseLeave);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'rowMouseEnter', handleMouseEnter);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'rowMouseLeave', handleMouseLeave);
   /**
    * PRE-PROCESSING
    */
@@ -215,7 +215,7 @@ const useGridColumnPinning = (apiRef, props) => {
     propModel: props.pinnedColumns,
     propOnChange: props.onPinnedColumnsChange,
     stateSelector: _gridColumnPinningSelector.gridPinnedColumnsSelector,
-    changeEvent: _xDataGrid.GridEvents.pinnedColumnsChange
+    changeEvent: 'pinnedColumnsChange'
   });
   const checkIfEnabled = React.useCallback(methodName => {
     if (props.disableColumnPinning) {

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

@@ -46,7 +46,6 @@ const columnReorderStateInitializer = state => (0, _extends2.default)({}, state,
   }
 });
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (method)
  */
 
@@ -177,12 +176,12 @@ const useGridColumnReorder = (apiRef, props) => {
     }));
     apiRef.current.forceUpdate();
   }, [props.disableColumnReorder, logger, apiRef]);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnHeaderDragStart, handleDragStart);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnHeaderDragEnter, handleDragEnter);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnHeaderDragOver, handleDragOver);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnHeaderDragEnd, handleDragEnd);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.cellDragEnter, handleDragEnter);
-  (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.cellDragOver, handleDragOver);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleDragStart);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnter', handleDragEnter);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragOver', handleDragOver);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleDragEnd);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'cellDragEnter', handleDragEnter);
+  (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'cellDragOver', handleDragOver);
 };
 
 exports.useGridColumnReorder = useGridColumnReorder;