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

package/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/hooks/features/rowReorder/useGridRowReorderPreProcessors.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridApiCommunity } from '@mui/x-data-grid/internals';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+export declare const useGridRowReorderPreProcessors: (apiRef: React.MutableRefObject<GridApiCommunity>, props: DataGridProProcessedProps) => void;

package/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/hooks/features/treeData/useGridTreeData.d.ts

@@ -1,6 +1,3 @@
 import * as React from 'react';
 import { GridApiPro } from '../../../models/gridApiPro';
-/**
- * Only available in DataGridPro
- */
 export declare const useGridTreeData: (apiRef: React.MutableRefObject<GridApiPro>) => void;

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

package/index.d.ts

@@ -1,4 +1,4 @@
-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';
@@ -8,9 +8,14 @@ export * from '@mui/x-data-grid/models';
 export * from '@mui/x-data-grid/context';
 export * from '@mui/x-data-grid/utils';
 export * from '@mui/x-data-grid/colDef';
+export type { GridExportFormat, GridExportExtension, GridToolbarExportProps, } from '@mui/x-data-grid';
 export * from './DataGridPro';
 export * from './hooks';
 export * from './models';
 export * from './components';
+export * from './utils';
+export type { DataGridProProps, GridExperimentalProFeatures } from './models/dataGridProProps';
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
 export type { GridApiRef, GridApi, GridInitialState, GridState } from './typeOverloads/reexports';
+export * from './hooks/features/rowGrouping';
+export * from './models/gridGroupingValueGetterParams';

package/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/internals/index.d.ts

@@ -0,0 +1,19 @@
+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 type { GridExperimentalProFeatures, DataGridProPropsWithoutDefaultValue, DataGridProPropsWithDefaultValue, } from '../models/dataGridProProps';
+export { buildRowTree } from '../utils/tree/buildRowTree';
+export type { BuildRowTreeGroupingCriteria } from '../utils/tree/buildRowTree';
+export { sortRowTree } from '../utils/tree/sortRowTree';

package/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/internals/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/internals/index.js",
+  "types": "./index.d.ts"
+}

package/legacy/DataGridPro/DataGridPro.js

@@ -72,6 +72,11 @@ DataGridProRaw.propTypes = {
    */
   autoPageSize: PropTypes.bool,
 
+  /**
+   * Controls the modes of the cells.
+   */
+  cellModesModel: PropTypes.object,
+
   /**
    * If `true`, the grid get a first column with a checkbox that allows to select rows.
    * @default false
@@ -225,7 +230,7 @@ DataGridProRaw.propTypes = {
   disableMultipleColumnsSorting: PropTypes.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.bool,
@@ -298,7 +303,9 @@ DataGridProRaw.propTypes = {
       operatorValue: PropTypes.string,
       value: PropTypes.any
     })).isRequired,
-    linkOperator: PropTypes.oneOf(['and', 'or'])
+    linkOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
+    quickFilterValues: PropTypes.array
   }),
 
   /**
@@ -430,6 +437,14 @@ DataGridProRaw.propTypes = {
    */
   isRowSelectable: PropTypes.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.bool,
+
   /**
    * If `true`, a  loading overlay is displayed.
    */
@@ -517,6 +532,13 @@ DataGridProRaw.propTypes = {
    */
   onCellKeyDown: PropTypes.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.func,
+
   /**
    * Callback fired when a click event comes from a column header element.
    * @param {GridColumnHeaderParams} params With all properties from [[GridColumnHeaderParams]].
@@ -740,6 +762,21 @@ DataGridProRaw.propTypes = {
    */
   onRowGroupingModelChange: PropTypes.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.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.func,
+
   /**
    * Callback fired when scrolling to the bottom of the grid viewport.
    * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
@@ -846,6 +883,17 @@ DataGridProRaw.propTypes = {
    */
   rowHeight: PropTypes.number,
 
+  /**
+   * Controls the modes of the rows.
+   */
+  rowModesModel: PropTypes.object,
+
+  /**
+   * If `true`, the reordering of rows is enabled.
+   * @default false
+   */
+  rowReordering: PropTypes.bool,
+
   /**
    * Set of rows of type [[GridRowsProp]].
    */

package/legacy/DataGridPro/useDataGridProComponent.js

@@ -5,13 +5,15 @@ import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/fe
 import { useGridColumnResize, columnResizeStateInitializer } from '../hooks/features/columnResize/useGridColumnResize';
 import { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
 import { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
-import { useGridRowGrouping, rowGroupingStateInitializer } from '../hooks/features/rowGrouping/useGridRowGrouping';
-import { useGridRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridRowGroupingPreProcessors';
 import { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
 import { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
 import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
 import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
+import { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
+import { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
+import { useGridRowGrouping, rowGroupingStateInitializer } from '../hooks/features/rowGrouping/useGridRowGrouping';
+import { useGridRowGroupingPreProcessors } from '../hooks/features/rowGrouping/useGridRowGroupingPreProcessors';
 export var useDataGridProComponent = function useDataGridProComponent(inputApiRef, props) {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -21,6 +23,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
    */
 
   useGridSelectionPreProcessors(apiRef, props);
+  useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
   useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
@@ -71,6 +74,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);
+  useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
   useGridColumnMenu(apiRef);

package/legacy/DataGridPro/useDataGridProProps.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
 import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
+import { buildWarning } from '@mui/x-data-grid/internals';
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -12,14 +13,16 @@ export var DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_DEF
   treeData: false,
   defaultGroupingExpansionDepth: 0,
   disableColumnPinning: false,
-  disableRowGrouping: false,
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
-  rowGroupingColumnMode: 'single',
+  rowReordering: false,
   getDetailPanelHeight: function getDetailPanelHeight() {
     return 500;
-  }
+  },
+  disableRowGrouping: false,
+  rowGroupingColumnMode: 'single'
 });
+var rowGroupingWarning = 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');
 export var useDataGridProProps = function useDataGridProProps(inProps) {
   var themedProps = useThemeProps({
     props: inProps,
@@ -45,11 +48,23 @@ export var useDataGridProProps = function useDataGridProProps(inProps) {
     });
     return mergedComponents;
   }, [themedProps.components]);
+
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(function () {
+      var _themedProps$experime;
+
+      if ((_themedProps$experime = themedProps.experimentalFeatures) != null && _themedProps$experime.rowGrouping) {
+        rowGroupingWarning();
+      }
+    }, [themedProps.experimentalFeatures]);
+  }
+
   return React.useMemo(function () {
-    var _themedProps$experime;
+    var _themedProps$experime2;
 
     return _extends({}, 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: localeText,
       components: components,
       signature: 'DataGridPro'

package/legacy/components/DataGridProColumnHeaders.js

@@ -6,7 +6,7 @@ var _excluded = ["style", "className", "innerRef"];
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { styled, alpha } from '@mui/material/styles';
-import { getDataGridUtilityClass, gridClasses, useGridSelector, useGridApiEventHandler, gridVisibleColumnFieldsSelector, GridEvents, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
+import { getDataGridUtilityClass, gridClasses, useGridSelector, useGridApiEventHandler, gridVisibleColumnFieldsSelector, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
 import { GridColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
@@ -90,7 +90,7 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
     var newScrollbarSize = apiRef.current.windowRef.current.offsetWidth - apiRef.current.windowRef.current.clientWidth;
     setScrollbarSize(newScrollbarSize);
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerContentSizeChange, handleContentSizeChange);
+  useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
   var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
 
   var _filterColumns = filterColumns(pinnedColumns, visibleColumnFields),

package/legacy/components/DataGridProVirtualScroller.js

@@ -8,7 +8,7 @@ import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler, GridEvents } from '@mui/x-data-grid';
+import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler } from '@mui/x-data-grid';
 import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -78,7 +78,9 @@ var VirtualScrollerDetailPanels = styled('div', {
   overridesResolver: function overridesResolver(props, styles) {
     return styles.detailPanels;
   }
-})({});
+})({
+  position: 'relative'
+});
 var VirtualScrollerDetailPanel = styled(Box, {
   name: 'MuiDataGrid',
   slot: 'DetailPanel',
@@ -190,8 +192,9 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       updateRenderZonePosition(renderContext);
     }
   }, [renderContext, updateRenderZonePosition]);
-  useGridApiEventHandler(apiRef, GridEvents.columnWidthChange, refreshRenderZonePosition);
-  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, 'columnWidthChange', refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, 'rowOrderChange', refreshRenderZonePosition);
   var leftRenderContext = renderContext && leftPinnedColumns.length > 0 ? _extends({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length

package/legacy/components/GridGroupingCriteriaCell.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 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 { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -40,7 +40,7 @@ export var GridGroupingCriteriaCell = function GridGroupingCriteriaCell(props) {
       event.stopPropagation();
     }
 
-    apiRef.current.publishEvent(GridEvents.cellKeyDown, props, event);
+    apiRef.current.publishEvent('cellKeyDown', props, event);
   };
 
   var handleClick = function handleClick(event) {

package/legacy/components/GridRowReorderCell.js

@@ -0,0 +1,74 @@
+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";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var isDraggable = ownerState.isDraggable,
+      classes = ownerState.classes;
+  var slots = {
+    root: ['rowReorderCell', isDraggable && 'rowReorderCell--draggable'],
+    placeholder: ['rowReorderCellPlaceholder']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+var GridRowReorderCell = function GridRowReorderCell(params) {
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  var treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  var editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector); // eslint-disable-next-line no-underscore-dangle
+
+  var cellValue = params.row.__reorder__ || params.id; // TODO: remove sortModel and treeDepth checks once row reorder is compatible
+
+  var isDraggable = !!rootProps.rowReordering && !sortModel.length && treeDepth === 1 && Object.keys(editRowsState).length === 0;
+  var ownerState = {
+    isDraggable: isDraggable,
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var publish = React.useCallback(function (eventName, propHandler) {
+    return function (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]);
+  var 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 var renderRowReorderCell = function renderRowReorderCell(params) {
+  return /*#__PURE__*/_jsx(GridRowReorderCell, _extends({}, params));
+};

package/legacy/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';
@@ -43,7 +43,7 @@ var GridTreeDataGroupingCell = function GridTreeDataGroupingCell(props) {
     }
 
     if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, props, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   };