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

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

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

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

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

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

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

package/modern/models/index.js

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

package/modern/typeOverloads/index.js

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

package/modern/utils/domUtils.js

@@ -6,14 +6,41 @@ export function getFieldFromHeaderElem(colCellEl) {
 export function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
-export function findGridCellElementsFromCol(col) {
-  const field = col.getAttribute('data-field');
+export function findGridCellElementsFromCol(col, api) {
   const root = findParentElementFromClassName(col, 'MuiDataGrid-root');
 
   if (!root) {
     throw new Error('MUI: The root element is not found.');
   }
 
-  const cells = root.querySelectorAll(`.${gridClasses.cell}[data-field="${field}"]`);
+  const ariaColIndex = col.getAttribute('aria-colindex');
+
+  if (!ariaColIndex) {
+    return [];
+  }
+
+  const colIndex = Number(ariaColIndex) - 1;
+  const cells = [];
+  const renderedRowElements = root.querySelectorAll(`.${gridClasses.row}`);
+  renderedRowElements.forEach(rowElement => {
+    const rowId = rowElement.getAttribute('data-id');
+
+    if (!rowId) {
+      return;
+    }
+
+    let columnIndex = colIndex;
+    const cellColSpanInfo = api.unstable_getCellColSpanInfo(rowId, colIndex);
+
+    if (cellColSpanInfo && cellColSpanInfo.spannedByColSpan) {
+      columnIndex = cellColSpanInfo.leftVisibleCellIndex;
+    }
+
+    const cell = rowElement.querySelector(`[data-colindex="${columnIndex}"]`);
+
+    if (cell) {
+      cells.push(cell);
+    }
+  });
   return cells;
 }

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 = "MTY0OTAyMzIwMDAwMA==";
+  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]].
@@ -642,7 +664,7 @@ DataGridProRaw.propTypes = {
    * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
    * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
    */
   onEditCellPropsChange: _propTypes.default.func,
 
@@ -764,6 +786,21 @@ 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]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowOrderChange: _propTypes.default.func,
+
   /**
    * Callback fired when scrolling to the bottom of the grid viewport.
    * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
@@ -870,6 +907,17 @@ 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
+   */
+  rowReordering: _propTypes.default.bool,
+
   /**
    * Set of rows of type [[GridRowsProp]].
    */

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");
@@ -31,6 +27,14 @@ var _useGridDetailPanelCache = require("../hooks/features/detailPanel/useGridDet
 
 var _useGridDetailPanelPreProcessors = require("../hooks/features/detailPanel/useGridDetailPanelPreProcessors");
 
+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;
@@ -41,6 +45,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
    */
 
   (0, _internals.useGridSelectionPreProcessors)(apiRef, props);
+  (0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
   (0, _useGridRowGroupingPreProcessors.useGridRowGroupingPreProcessors)(apiRef, props);
   (0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
   (0, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
@@ -78,18 +83,20 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridColumns)(apiRef, props);
   (0, _internals.useGridRows)(apiRef, props);
   (0, _internals.useGridParamsApi)(apiRef);
+  (0, _internals.useGridColumnSpanning)(apiRef);
   (0, _useGridDetailPanelCache.useGridDetailPanelCache)(apiRef, props);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _internals.useGridEditing_new : _internals.useGridEditing_old;
   useGridEditing(apiRef, props);
   (0, _internals.useGridFocus)(apiRef, props);
-  (0, _internals.useGridSorting)(apiRef, props);
   (0, _internals.useGridPreferencesPanel)(apiRef);
   (0, _internals.useGridFilter)(apiRef, props);
+  (0, _internals.useGridSorting)(apiRef, props);
   (0, _internals.useGridDensity)(apiRef, props);
   (0, _useGridColumnReorder.useGridColumnReorder)(apiRef, props);
   (0, _useGridColumnResize.useGridColumnResize)(apiRef, props);
   (0, _internals.useGridPagination)(apiRef, props);
   (0, _internals.useGridRowsMeta)(apiRef, props);
+  (0, _useGridRowReorder.useGridRowReorder)(apiRef, props);
   (0, _internals.useGridScroll)(apiRef, props);
   (0, _useGridInfiniteLoader.useGridInfiniteLoader)(apiRef, props);
   (0, _internals.useGridColumnMenu)(apiRef);

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,13 +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',
-  getDetailPanelHeight: () => 500
+  rowReordering: false,
+  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)({
@@ -54,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,13 +110,12 @@ 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 {
     isDragging,
     renderContext,
-    updateInnerPosition,
     getRootProps,
     getInnerProps,
     getColumns
@@ -130,11 +129,6 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  React.useEffect(() => {
-    if (renderContext) {
-      updateInnerPosition(renderContext);
-    }
-  }, [renderContext, updateInnerPosition]);
   const leftRenderContext = renderContext && leftPinnedColumns.length ? (0, _extends2.default)({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length

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,11 +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);
-  React.useEffect(() => {
-    refreshRenderZonePosition();
-  }, [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/GridDetailPanelToggleCell.js

@@ -95,10 +95,21 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
    */
   field: _propTypes.default.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.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focus: _propTypes.default.func.isRequired
+    })
+  })]),
+
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: _propTypes.default.any.isRequired,
+  formattedValue: _propTypes.default.any,
 
   /**
    * Get the cell value of a row and field.
@@ -142,5 +153,5 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: _propTypes.default.any.isRequired
+  value: _propTypes.default.any
 } : void 0;

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 => {