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

package/DataGridPro/DataGridPro.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridValidRowModel } from '@mui/x-data-grid';
-import { DataGridProProps } from '../models';
+import { DataGridProProps } from '../models/dataGridProProps';
 interface DataGridProComponent {
     <R extends GridValidRowModel = any>(props: DataGridProProps<R> & React.RefAttributes<HTMLDivElement>): JSX.Element;
     propTypes?: any;

package/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]].
@@ -618,7 +640,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.func,
 
@@ -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/DataGridPro/useDataGridProComponent.js

@@ -1,17 +1,19 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
 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 const useDataGridProComponent = (inputApiRef, props) => {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -21,6 +23,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
    */
 
   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
@@ -58,18 +61,20 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  useGridColumnSpanning(apiRef);
   useGridDetailPanelCache(apiRef, props);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridSorting(apiRef, props);
   useGridPreferencesPanel(apiRef);
   useGridFilter(apiRef, props);
+  useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);
   useGridColumnReorder(apiRef, props);
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);
+  useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
   useGridColumnMenu(apiRef);

package/DataGridPro/useDataGridProProps.js

@@ -2,6 +2,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.
@@ -11,12 +12,14 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   treeData: false,
   defaultGroupingExpansionDepth: 0,
   disableColumnPinning: false,
-  disableRowGrouping: false,
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
-  rowGroupingColumnMode: 'single',
-  getDetailPanelHeight: () => 500
+  rowReordering: false,
+  getDetailPanelHeight: () => 500,
+  disableRowGrouping: false,
+  rowGroupingColumnMode: 'single'
 });
+const 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 const useDataGridProProps = inProps => {
   const themedProps = useThemeProps({
     props: inProps,
@@ -36,11 +39,23 @@ export 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 _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,
       components,
       signature: 'DataGridPro'

package/LICENSE

@@ -0,0 +1,12 @@
+Commercial License
+
+Copyright (c) 2020 Material-UI SAS
+
+MUI X Pro (https://mui.com/pricing/) is commercial software. You must purchase
+a license and agree to the End User License Agreement (EULA: https://mui.com/r/x-license-eula)
+to be able to use the software.
+
+Commercial licenses can be obtained at https://mui.com/r/x-get-license?scope=pro.
+You are free to install and try the software without a license key as long as it
+is not used for the development of a feature intended for production use. You can
+find more details under the "Evaluation (trial) licenses" section of the EULA.

package/README.md

@@ -1,6 +1,6 @@
 # @mui/x-data-grid-pro
 
-This package is the commercial edition of the data grid component.
+This package is the Pro Plan edition of the data grid component.
 It's part of MUI X, an open core extension of MUI, with advanced components.
 
 ## Installation
@@ -15,15 +15,17 @@ npm install @mui/x-data-grid-pro
 yarn add @mui/x-data-grid-pro
 ```
 
-This component has three peer dependencies that you will need to install as well.
+This component has the following peer dependencies that you will need to install as well.
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.0.0",
-  "react": "^17.0.0"
+  "@mui/material": "^5.2.8",
+  "@mui/system": "^5.2.8",
+  "react": "^17.0.2 || ^18.0.0",
+  "react-dom": "^17.0.2 || ^18.0.0"
 },
 ```
 
 ## Documentation
 
-[The documentation](https://mui.com/components/data-grid/)
+[The documentation](https://mui.com/x/react-data-grid/)

package/components/DataGridProColumnHeaders.js

@@ -4,7 +4,7 @@ const _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';
@@ -87,13 +87,12 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     const newScrollbarSize = apiRef.current.windowRef.current.offsetWidth - apiRef.current.windowRef.current.clientWidth;
     setScrollbarSize(newScrollbarSize);
   }, [apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.virtualScrollerContentSizeChange, handleContentSizeChange);
+  useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
   const {
     isDragging,
     renderContext,
-    updateInnerPosition,
     getRootProps,
     getInnerProps,
     getColumns
@@ -107,11 +106,6 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  React.useEffect(() => {
-    if (renderContext) {
-      updateInnerPosition(renderContext);
-    }
-  }, [renderContext, updateInnerPosition]);
   const leftRenderContext = renderContext && leftPinnedColumns.length ? _extends({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length

package/components/DataGridProVirtualScroller.js

@@ -5,7 +5,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';
@@ -71,7 +71,9 @@ const VirtualScrollerDetailPanels = styled('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanels',
   overridesResolver: (props, styles) => styles.detailPanels
-})({});
+})({
+  position: 'relative'
+});
 const VirtualScrollerDetailPanel = styled(Box, {
   name: 'MuiDataGrid',
   slot: 'DetailPanel',
@@ -173,11 +175,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       updateRenderZonePosition(renderContext);
     }
   }, [renderContext, updateRenderZonePosition]);
-  useGridApiEventHandler(apiRef, GridEvents.columnWidthChange, refreshRenderZonePosition);
-  useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, refreshRenderZonePosition);
-  React.useEffect(() => {
-    refreshRenderZonePosition();
-  }, [refreshRenderZonePosition]);
+  useGridApiEventHandler(apiRef, 'columnWidthChange', refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, 'rowOrderChange', refreshRenderZonePosition);
   const leftRenderContext = renderContext && leftPinnedColumns.length > 0 ? _extends({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length

package/components/GridDetailPanelToggleCell.js

@@ -73,10 +73,21 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.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.
@@ -120,6 +131,6 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired
+  value: PropTypes.any
 } : void 0;
 export { GridDetailPanelToggleCell };

package/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";
@@ -44,7 +44,7 @@ export const GridGroupingCriteriaCell = props => {
       event.stopPropagation();
     }
 
-    apiRef.current.publishEvent(GridEvents.cellKeyDown, props, event);
+    apiRef.current.publishEvent('cellKeyDown', props, event);
   };
 
   const handleClick = event => {

package/components/GridRowReorderCell.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { GridRenderCellParams } from '@mui/x-data-grid';
+declare const GridRowReorderCell: (params: GridRenderCellParams) => JSX.Element;
+export { GridRowReorderCell };
+export declare const renderRowReorderCell: (params: GridRenderCellParams) => JSX.Element;

package/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/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';
@@ -47,7 +47,7 @@ const GridTreeDataGroupingCell = props => {
     }
 
     if (isNavigationKey(event.key) && !event.shiftKey) {
-      apiRef.current.publishEvent(GridEvents.cellNavigationKeyDown, props, event);
+      apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   };
 
@@ -107,10 +107,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.
@@ -155,6 +166,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/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';
@@ -83,8 +83,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
    */
@@ -191,7 +191,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/hooks/features/columnReorder/useGridColumnReorder.d.ts

@@ -4,7 +4,6 @@ import { GridApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnReorderStateInitializer: GridStateInitializer;
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (method)
  */
 export declare const useGridColumnReorder: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnReorder' | 'classes'>) => void;

package/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/hooks/features/columnResize/useGridColumnResize.d.ts

@@ -4,7 +4,6 @@ import { GridApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnResizeStateInitializer: GridStateInitializer;
 /**
- * Only available in DataGridPro
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */