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

package/modern/DataGridPro/DataGridPro.js

@@ -1,28 +1,20 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { LicenseInfo } from '@mui/x-license-pro';
-import { chainPropTypes, ponyfillGlobal } from '@mui/utils';
+import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
+import { chainPropTypes } from '@mui/utils';
 import { GridBody, GridErrorHandler, GridFooterPlaceholder, GridHeaderPlaceholder, GridRoot, GridContextProvider } from '@mui/x-data-grid';
 import { useDataGridProComponent } from './useDataGridProComponent';
-import { Watermark } from '../components/Watermark';
 import { useDataGridProProps } from './useDataGridProProps';
 import { DataGridProVirtualScroller } from '../components/DataGridProVirtualScroller';
-import { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders'; // This is the package release date. Each package version should update this const
-// automatically when a new version is published on npm.
-
+import { DataGridProColumnHeaders } from '../components/DataGridProColumnHeaders';
+import { getReleaseInfo } from '../utils/releaseInfo';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-let RELEASE_INFO = "MTY0Njg2NjgwMDAwMA=="; // eslint-disable-next-line no-useless-concat
-
-if (process.env.NODE_ENV !== 'production' && RELEASE_INFO === '__RELEASE' + '_INFO__') {
-  // eslint-disable-next-line no-underscore-dangle
-  RELEASE_INFO = ponyfillGlobal.__MUI_RELEASE_INFO__;
-}
-
-LicenseInfo.setReleaseInfo(RELEASE_INFO);
+const releaseInfo = getReleaseInfo();
 const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps, ref) {
   const props = useDataGridProProps(inProps);
   const apiRef = useDataGridProComponent(props.apiRef, props);
+  useLicenseVerifier('x-data-grid-pro', releaseInfo);
   return /*#__PURE__*/_jsx(GridContextProvider, {
     apiRef: apiRef,
     props: props,
@@ -35,7 +27,10 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
         children: [/*#__PURE__*/_jsx(GridHeaderPlaceholder, {}), /*#__PURE__*/_jsx(GridBody, {
           ColumnHeadersComponent: DataGridProColumnHeaders,
           VirtualScrollerComponent: DataGridProVirtualScroller,
-          children: /*#__PURE__*/_jsx(Watermark, {})
+          children: /*#__PURE__*/_jsx(Watermark, {
+            packageName: "x-data-grid-pro",
+            releaseInfo: releaseInfo
+          })
         }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
       })
     })
@@ -274,6 +269,7 @@ DataGridProRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
@@ -357,7 +353,8 @@ DataGridProRaw.propTypes = {
    * Determines the path of a row in the tree data.
    * For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"].
    * Note that all paths must contain at least one element.
-   * @param {GridRowModel} row The row from which we want the path.
+   * @template R
+   * @param {R} row The row from which we want the path.
    * @returns {string[]} The path to the row.
    */
   getTreeDataPath: PropTypes.func,
@@ -621,7 +618,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,
 
@@ -668,6 +665,28 @@ DataGridProRaw.propTypes = {
    */
   onPinnedColumnsChange: PropTypes.func,
 
+  /**
+   * Callback fired when the preferences panel is closed.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelClose: PropTypes.func,
+
+  /**
+   * Callback fired when the preferences panel is opened.
+   * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onPreferencePanelOpen: PropTypes.func,
+
+  /**
+   * Callback called when `processRowUpdate` throws an error or rejects.
+   * @param {any} error The error thrown.
+   */
+  onProcessRowUpdateError: PropTypes.func,
+
   /**
    * Callback fired when the grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -787,6 +806,16 @@ DataGridProRaw.propTypes = {
     right: PropTypes.arrayOf(PropTypes.string)
   }),
 
+  /**
+   * Callback called before updating a row with new values in the row and cell editing.
+   * Only applied if `props.experimentalFeatures.newEditingApi: true`.
+   * @template R
+   * @param {R} newRow Row object with the new values.
+   * @param {R} oldRow Row object with the old values.
+   * @returns {Promise<R> | R} The final values to update the row.
+   */
+  processRowUpdate: PropTypes.func,
+
   /**
    * Number of extra rows to be rendered before/after the visible slice.
    * @default 3
@@ -820,7 +849,7 @@ DataGridProRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rows: PropTypes.array.isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/modern/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboard, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, useGridRows, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, editingStateInitializer, 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';
@@ -21,25 +21,22 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
-  useGridDetailPanelPreProcessors(apiRef, props);
-  useGridColumnPinningPreProcessors(apiRef, props); // Must be the last because it changes the order of the columns.
+  useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
+  // Because it changes the order of the columns.
 
+  useGridColumnPinningPreProcessors(apiRef, props);
+  useGridRowsPreProcessors(apiRef);
   /**
    * Register all state initializers here.
    */
 
+  useGridInitializeState(rowGroupingStateInitializer, apiRef, props);
   useGridInitializeState(selectionStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
-  useGridInitializeState(rowGroupingStateInitializer, apiRef, props); // FIXME Call in the same relative position that useGridRowGrouping is called
-
   useGridInitializeState(columnsStateInitializer, apiRef, props);
-  useGridRowGrouping(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
-
-  useGridTreeData(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
-
   useGridInitializeState(rowsStateInitializer, apiRef, props);
-  useGridInitializeState(editingStateInitializer, apiRef, props);
+  useGridInitializeState(props.experimentalFeatures?.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
   useGridInitializeState(sortingStateInitializer, apiRef, props);
   useGridInitializeState(preferencePanelStateInitializer, apiRef, props);
@@ -50,18 +47,23 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridRowGrouping(apiRef, props);
+  useGridTreeData(apiRef);
+  useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridDetailPanel(apiRef, props);
   useGridColumnPinning(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  useGridColumnSpanning(apiRef);
   useGridDetailPanelCache(apiRef, props);
+  const useGridEditing = props.experimentalFeatures?.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);
@@ -70,8 +72,6 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
   useGridColumnMenu(apiRef);
-  useGridKeyboard(apiRef);
-  useGridKeyboardNavigation(apiRef, props);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);
   useGridClipboard(apiRef);

package/modern/components/DataGridProColumnHeaders.js

@@ -91,7 +91,6 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
   const {
     isDragging,
     renderContext,
-    updateInnerPosition,
     getRootProps,
     getInnerProps,
     getColumns
@@ -105,11 +104,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
@@ -134,7 +128,15 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
       }, {
         disableReorder: true
       })
-    }), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
+    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: getColumns({
+        renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })
+    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
       ownerState: {
         side: GridPinnedPosition.right
       },
@@ -150,14 +152,6 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
       })
-    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
-      isDragging: isDragging
-    }, getInnerProps(), {
-      children: getColumns({
-        renderContext,
-        minFirstColumn: leftPinnedColumns.length,
-        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
-      })
-    }))]
+    })]
   }));
 });

package/modern/components/DataGridProVirtualScroller.js

@@ -173,9 +173,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   }, [renderContext, updateRenderZonePosition]);
   useGridApiEventHandler(apiRef, GridEvents.columnWidthChange, refreshRenderZonePosition);
   useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, refreshRenderZonePosition);
-  React.useEffect(() => {
-    refreshRenderZonePosition();
-  }, [refreshRenderZonePosition]);
   const leftRenderContext = renderContext && leftPinnedColumns.length > 0 ? _extends({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length
@@ -241,7 +238,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
+        children: getRows({
+          renderContext
+        })
+      })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
           side: GridPinnedPosition.right
@@ -254,11 +255,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext
-        })
-      })), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
+      }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
         children: detailPanels
       })]

package/modern/components/GridDetailPanelToggleCell.js

@@ -73,16 +73,27 @@ 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.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -105,7 +116,7 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.
@@ -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/modern/components/GridGroupingCriteriaCell.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-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';
@@ -20,7 +19,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const GridGroupingCriteriaCell = props => {
+export const GridGroupingCriteriaCell = props => {
   const {
     id,
     field,
@@ -74,75 +73,4 @@ const GridGroupingCriteriaCell = props => {
       children: [formattedValue === undefined ? rowNode.groupingKey : formattedValue, !hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : '']
     })]
   });
-};
-
-process.env.NODE_ENV !== "production" ? GridGroupingCriteriaCell.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // | To update them edit the TypeScript types and run "yarn proptypes"  |
-  // ----------------------------------------------------------------------
-
-  /**
-   * GridApi that let you manipulate the grid.
-   */
-  api: PropTypes.any.isRequired,
-
-  /**
-   * The mode of the cell.
-   */
-  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
-
-  /**
-   * The column of the row that the current cell belongs to.
-   */
-  colDef: PropTypes.object.isRequired,
-
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: PropTypes.string.isRequired,
-
-  /**
-   * The cell value formatted with the column valueFormatter.
-   */
-  formattedValue: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool]),
-
-  /**
-   * Get the cell value of a row and field.
-   * @param {GridRowId} id The row id.
-   * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
-   */
-  getValue: PropTypes.func.isRequired,
-
-  /**
-   * If true, the cell is the active element.
-   */
-  hasFocus: PropTypes.bool.isRequired,
-
-  /**
-   * The grid row id.
-   */
-  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-
-  /**
-   * If true, the cell is editable.
-   */
-  isEditable: PropTypes.bool,
-
-  /**
-   * The row model of the row that the current cell belongs to.
-   */
-  row: PropTypes.object.isRequired,
-
-  /**
-   * the tabIndex value.
-   */
-  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
-
-  /**
-   * The cell value, but if the column has valueGetter, use getValue.
-   */
-  value: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.number, PropTypes.object, PropTypes.string, PropTypes.bool])
-} : void 0;
-export { GridGroupingCriteriaCell };
+};

package/modern/components/GridTreeDataGroupingCell.js

@@ -105,16 +105,27 @@ 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.
    * @param {GridRowId} id The row id.
    * @param {string} field The field.
-   * @returns {GridCellValue} The cell value.
+   * @returns {any} The cell value.
    * @deprecated Use `params.row` to directly access the fields you want instead.
    */
   getValue: PropTypes.func.isRequired,
@@ -138,7 +149,7 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: PropTypes.any.isRequired,
+  row: PropTypes.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.
@@ -153,6 +164,6 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: PropTypes.any.isRequired
+  value: PropTypes.any
 } : void 0;
 export { GridTreeDataGroupingCell };

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

@@ -2,7 +2,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 { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems';
 import { GridPinnedPosition } from './gridColumnPinningInterface';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
@@ -175,11 +175,11 @@ export const useGridColumnPinning = (apiRef, props) => {
 
     return params;
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
-  useGridRegisterPreProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
-  useGridRegisterPreProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'scrollToIndexes', calculateScrollLeft);
+  useGridRegisterPipeProcessor(apiRef, 'columnMenu', addColumnMenuButtons);
+  useGridRegisterPipeProcessor(apiRef, 'canBeReordered', checkIfCanBeReordered);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
   apiRef.current.unstable_updateControlState({
     stateId: 'pinnedColumns',
     propModel: props.pinnedColumns,

package/modern/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { gridPinnedColumnsSelector } from './gridColumnPinningSelector';
 import { columnPinningStateInitializer } from './useGridColumnPinning';
 import { filterColumns } from '../../../components/DataGridProVirtualScroller';
@@ -41,5 +41,5 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
       all: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
   }, [disableColumnPinning, pinnedColumns]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
 };

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

@@ -116,7 +116,7 @@ export const useGridColumnReorder = (apiRef, props) => {
           canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
         }
 
-        const canBeReorderedProcessed = apiRef.current.unstable_applyPreProcessors('canBeReordered', canBeReordered, {
+        const canBeReorderedProcessed = apiRef.current.unstable_applyPipeProcessors('canBeReordered', canBeReordered, {
           targetIndex: targetColVisibleIndex
         });
 

package/modern/hooks/features/columnResize/useGridColumnResize.js

@@ -100,17 +100,29 @@ export const useGridColumnResize = (apiRef, props) => {
 
   const updateWidth = newWidth => {
     logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
+    const prevWidth = colElementRef.current.offsetWidth;
+    const widthDiff = newWidth - prevWidth;
     colDefRef.current.computedWidth = newWidth;
     colDefRef.current.width = newWidth;
-    colDefRef.current.flex = undefined;
+    colDefRef.current.flex = 0;
     colElementRef.current.style.width = `${newWidth}px`;
     colElementRef.current.style.minWidth = `${newWidth}px`;
     colElementRef.current.style.maxWidth = `${newWidth}px`;
     colCellElementsRef.current.forEach(element => {
       const div = element;
-      div.style.width = `${newWidth}px`;
-      div.style.minWidth = `${newWidth}px`;
-      div.style.maxWidth = `${newWidth}px`;
+      let finalWidth;
+
+      if (div.getAttribute('aria-colspan') === '1') {
+        finalWidth = `${newWidth}px`;
+      } else {
+        // Cell with colspan > 1 cannot be just updated width new width.
+        // Instead, we add width diff to the current width.
+        finalWidth = `${div.offsetWidth + widthDiff}px`;
+      }
+
+      div.style.width = finalWidth;
+      div.style.minWidth = finalWidth;
+      div.style.maxWidth = finalWidth;
     });
   };
 
@@ -170,7 +182,7 @@ export const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = apiRef.current.columnHeadersContainerElementRef?.current.querySelector(`[data-field="${colDef.field}"]`);
-    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
     separatorSide.current = getSeparatorSide(event.currentTarget);
@@ -245,7 +257,7 @@ export const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = findHeaderElementFromField(apiRef.current.columnHeadersElementRef?.current, colDef.field);
-    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current);
+    colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     separatorSide.current = getSeparatorSide(event.target);
     initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
     const doc = ownerDocument(event.currentTarget);

package/modern/hooks/features/detailPanel/useGridDetailPanel.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
 import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
 export const detailPanelStateInitializer = (state, props) => {
@@ -33,11 +33,19 @@ export const useGridDetailPanel = (apiRef, props) => {
     apiRef.current.toggleDetailPanel(params.id);
   }, [apiRef, contentCache, props.getDetailPanelContent]);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    if (!event.ctrlKey || event.key !== 'Enter' || props.getDetailPanelContent == null) {
+    if (props.getDetailPanelContent == null) {
       return;
     }
 
-    apiRef.current.toggleDetailPanel(params.id);
+    if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') {
+      // TODO v6: only support Space on the detail toggle
+      apiRef.current.toggleDetailPanel(params.id);
+      return;
+    }
+
+    if (params.field === GRID_DETAIL_PANEL_TOGGLE_FIELD && event.key === ' ') {
+      apiRef.current.toggleDetailPanel(params.id);
+    }
   }, [apiRef, props.getDetailPanelContent]);
   useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
   useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
@@ -54,7 +62,7 @@ export const useGridDetailPanel = (apiRef, props) => {
 
     });
   }, [apiRef, expandedRowIds]);
-  useGridRegisterPreProcessor(apiRef, 'rowHeight', addDetailHeight);
+  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
   apiRef.current.unstable_updateControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,

package/modern/hooks/features/detailPanel/useGridDetailPanelCache.js

@@ -39,7 +39,7 @@ export const useGridDetailPanelCache = (apiRef, props) => {
     });
     apiRef.current.forceUpdate();
   }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
-  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, updateCaches);
+  useGridApiEventHandler(apiRef, GridEvents.sortedRowsSet, updateCaches);
   const isFirstRender = React.useRef(true);
 
   if (isFirstRender.current) {

package/modern/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
 export const useGridDetailPanelPreProcessors = (apiRef, props) => {
   const addToggleColumn = React.useCallback(columnsState => {
@@ -24,5 +24,5 @@ export const useGridDetailPanelPreProcessors = (apiRef, props) => {
     columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
     return columnsState;
   }, [props.getDetailPanelContent]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addToggleColumn);
 };