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

package/modern/utils/domUtils.js

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

package/modern/utils/releaseInfo.js

@@ -0,0 +1,15 @@
+import { ponyfillGlobal } from '@mui/utils';
+export const getReleaseInfo = () => {
+  const releaseInfo = "MTY0OTg4NzIwMDAwMA==";
+
+  if (process.env.NODE_ENV !== 'production') {
+    // A simple hack to set the value in the test environment (has no build step).
+    // eslint-disable-next-line no-useless-concat
+    if (releaseInfo === '__RELEASE' + '_INFO__') {
+      // eslint-disable-next-line no-underscore-dangle
+      return ponyfillGlobal.__MUI_RELEASE_INFO__;
+    }
+  }
+
+  return releaseInfo;
+};

package/node/DataGridPro/DataGridPro.js

@@ -19,34 +19,25 @@ var _xDataGrid = require("@mui/x-data-grid");
 
 var _useDataGridProComponent = require("./useDataGridProComponent");
 
-var _Watermark = require("../components/Watermark");
-
 var _useDataGridProProps = require("./useDataGridProProps");
 
 var _DataGridProVirtualScroller = require("../components/DataGridProVirtualScroller");
 
 var _DataGridProColumnHeaders = require("../components/DataGridProColumnHeaders");
 
+var _releaseInfo = require("../utils/releaseInfo");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-// This is the package release date. Each package version should update this const
-// automatically when a new version is published on npm.
-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 = _utils.ponyfillGlobal.__MUI_RELEASE_INFO__;
-}
-
-_xLicensePro.LicenseInfo.setReleaseInfo(RELEASE_INFO);
-
+const releaseInfo = (0, _releaseInfo.getReleaseInfo)();
 const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProps, ref) {
   const props = (0, _useDataGridProProps.useDataGridProProps)(inProps);
   const apiRef = (0, _useDataGridProComponent.useDataGridProComponent)(props.apiRef, props);
+  (0, _xLicensePro.useLicenseVerifier)('x-data-grid-pro', releaseInfo);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridContextProvider, {
     apiRef: apiRef,
     props: props,
@@ -59,7 +50,10 @@ const DataGridProRaw = /*#__PURE__*/React.forwardRef(function DataGridPro(inProp
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridHeaderPlaceholder, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridBody, {
           ColumnHeadersComponent: _DataGridProColumnHeaders.DataGridProColumnHeaders,
           VirtualScrollerComponent: _DataGridProVirtualScroller.DataGridProVirtualScroller,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Watermark.Watermark, {})
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicensePro.Watermark, {
+            packageName: "x-data-grid-pro",
+            releaseInfo: releaseInfo
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridFooterPlaceholder, {})]
       })
     })
@@ -299,6 +293,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.default.shape({
+    newEditingApi: _propTypes.default.bool,
     preventCommitWhileValidating: _propTypes.default.bool,
     rowGrouping: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
@@ -382,7 +377,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.default.func,
@@ -646,7 +642,7 @@ DataGridProRaw.propTypes = {
    * @param {GridEditCellPropsParams} params With all properties from [[GridEditCellPropsParams]].
    * @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/api/data-grid/grid-col-def/)
+   * @deprecated use `preProcessEditCellProps` from the [`GridColDef`](/x/api/data-grid/grid-col-def/)
    */
   onEditCellPropsChange: _propTypes.default.func,
 
@@ -693,6 +689,28 @@ DataGridProRaw.propTypes = {
    */
   onPinnedColumnsChange: _propTypes.default.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.default.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.default.func,
+
+  /**
+   * Callback called when `processRowUpdate` throws an error or rejects.
+   * @param {any} error The error thrown.
+   */
+  onProcessRowUpdateError: _propTypes.default.func,
+
   /**
    * Callback fired when the grid is resized.
    * @param {ElementSize} containerSize With all properties from [[ElementSize]].
@@ -812,6 +830,16 @@ DataGridProRaw.propTypes = {
     right: _propTypes.default.arrayOf(_propTypes.default.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.default.func,
+
   /**
    * Number of extra rows to be rendered before/after the visible slice.
    * @default 3
@@ -845,7 +873,7 @@ DataGridProRaw.propTypes = {
   /**
    * Set of rows of type [[GridRowsProp]].
    */
-  rows: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  rows: _propTypes.default.array.isRequired,
 
   /**
    * Sets the type of space between rows added by `getRowSpacing`.

package/node/DataGridPro/useDataGridProComponent.js

@@ -33,6 +33,8 @@ var _useGridDetailPanelPreProcessors = require("../hooks/features/detailPanel/us
 
 // Pro-only features
 const useDataGridProComponent = (inputApiRef, props) => {
+  var _props$experimentalFe, _props$experimentalFe2;
+
   const apiRef = (0, _internals.useGridInitialization)(inputApiRef, props);
   /**
    * Register all pre-processors called during state initialization here.
@@ -41,25 +43,22 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridSelectionPreProcessors)(apiRef, props);
   (0, _useGridRowGroupingPreProcessors.useGridRowGroupingPreProcessors)(apiRef, props);
   (0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
-  (0, _useGridDetailPanelPreProcessors.useGridDetailPanelPreProcessors)(apiRef, props);
-  (0, _useGridColumnPinningPreProcessors.useGridColumnPinningPreProcessors)(apiRef, props); // Must be the last because it changes the order of the columns.
+  (0, _useGridDetailPanelPreProcessors.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.
 
+  (0, _useGridColumnPinningPreProcessors.useGridColumnPinningPreProcessors)(apiRef, props);
+  (0, _internals.useGridRowsPreProcessors)(apiRef);
   /**
    * Register all state initializers here.
    */
 
+  (0, _internals.useGridInitializeState)(_useGridRowGrouping.rowGroupingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.selectionStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridDetailPanel.detailPanelStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridColumnPinning.columnPinningStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_useGridRowGrouping.rowGroupingStateInitializer, apiRef, props); // FIXME Call in the same relative position that useGridRowGrouping is called
-
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
-  (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
-
-  (0, _useGridTreeData.useGridTreeData)(apiRef, props); // FIXME Needs to be called before the rows state initialization because it registers a rows group builder
-
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
-  (0, _internals.useGridInitializeState)(_internals.editingStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? _internals.editingStateInitializer_new : _internals.editingStateInitializer_old, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.sortingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.preferencePanelStateInitializer, apiRef, props);
@@ -70,18 +69,23 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.paginationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnMenuStateInitializer, apiRef, props);
+  (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props);
+  (0, _useGridTreeData.useGridTreeData)(apiRef);
+  (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridSelection)(apiRef, props);
   (0, _useGridDetailPanel.useGridDetailPanel)(apiRef, props);
   (0, _useGridColumnPinning.useGridColumnPinning)(apiRef, props);
   (0, _internals.useGridColumns)(apiRef, props);
   (0, _internals.useGridRows)(apiRef, props);
   (0, _internals.useGridParamsApi)(apiRef);
+  (0, _internals.useGridColumnSpanning)(apiRef);
   (0, _useGridDetailPanelCache.useGridDetailPanelCache)(apiRef, props);
-  (0, _internals.useGridEditing)(apiRef, props);
+  const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _internals.useGridEditing_new : _internals.useGridEditing_old;
+  useGridEditing(apiRef, props);
   (0, _internals.useGridFocus)(apiRef, props);
-  (0, _internals.useGridSorting)(apiRef, props);
   (0, _internals.useGridPreferencesPanel)(apiRef);
   (0, _internals.useGridFilter)(apiRef, props);
+  (0, _internals.useGridSorting)(apiRef, props);
   (0, _internals.useGridDensity)(apiRef, props);
   (0, _useGridColumnReorder.useGridColumnReorder)(apiRef, props);
   (0, _useGridColumnResize.useGridColumnResize)(apiRef, props);
@@ -90,8 +94,6 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridScroll)(apiRef, props);
   (0, _useGridInfiniteLoader.useGridInfiniteLoader)(apiRef, props);
   (0, _internals.useGridColumnMenu)(apiRef);
-  (0, _internals.useGridKeyboard)(apiRef);
-  (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridCsvExport)(apiRef);
   (0, _internals.useGridPrintExport)(apiRef, props);
   (0, _internals.useGridClipboard)(apiRef);

package/node/components/DataGridProColumnHeaders.js

@@ -116,7 +116,6 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
   const {
     isDragging,
     renderContext,
-    updateInnerPosition,
     getRootProps,
     getInnerProps,
     getColumns
@@ -130,11 +129,6 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
     classes: rootProps.classes
   };
   const classes = useUtilityClasses(ownerState);
-  React.useEffect(() => {
-    if (renderContext) {
-      updateInnerPosition(renderContext);
-    }
-  }, [renderContext, updateInnerPosition]);
   const leftRenderContext = renderContext && leftPinnedColumns.length ? (0, _extends2.default)({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length
@@ -159,7 +153,15 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
       }, {
         disableReorder: true
       })
-    }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersPinnedColumnHeaders, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
+      isDragging: isDragging
+    }, getInnerProps(), {
+      children: getColumns({
+        renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })
+    })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersPinnedColumnHeaders, {
       ownerState: {
         side: _columnPinning.GridPinnedPosition.right
       },
@@ -175,15 +177,7 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
         disableReorder: true,
         separatorSide: _xDataGrid.GridColumnHeaderSeparatorSides.Left
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
-      isDragging: isDragging
-    }, getInnerProps(), {
-      children: getColumns({
-        renderContext,
-        minFirstColumn: leftPinnedColumns.length,
-        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
-      })
-    }))]
+    })]
   }));
 });
 exports.DataGridProColumnHeaders = DataGridProColumnHeaders;

package/node/components/DataGridProVirtualScroller.js

@@ -202,9 +202,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   }, [renderContext, updateRenderZonePosition]);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnWidthChange, refreshRenderZonePosition);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.columnOrderChange, refreshRenderZonePosition);
-  React.useEffect(() => {
-    refreshRenderZonePosition();
-  }, [refreshRenderZonePosition]);
   const leftRenderContext = renderContext && leftPinnedColumns.length > 0 ? (0, _extends2.default)({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length
@@ -270,7 +267,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
+        children: getRows({
+          renderContext
+        })
+      })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
           side: _columnPinning.GridPinnedPosition.right
@@ -283,11 +284,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0
         })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext
-        })
-      })), detailPanels.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerDetailPanels, {
+      }), detailPanels.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
         children: detailPanels
       })]

package/node/components/GridDetailPanelToggleCell.js

@@ -95,16 +95,27 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
    */
   field: _propTypes.default.string.isRequired,
 
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focus: _propTypes.default.func.isRequired
+    })
+  })]),
+
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: _propTypes.default.any.isRequired,
+  formattedValue: _propTypes.default.any,
 
   /**
    * Get the cell value of a row and field.
    * @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.default.func.isRequired,
@@ -127,7 +138,7 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.any.isRequired,
+  row: _propTypes.default.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.
@@ -142,5 +153,5 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: _propTypes.default.any.isRequired
+  value: _propTypes.default.any
 } : void 0;

package/node/components/GridGroupingCriteriaCell.js

@@ -9,8 +9,6 @@ exports.GridGroupingCriteriaCell = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _material = require("@mui/material");
 
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
@@ -98,73 +96,4 @@ const GridGroupingCriteriaCell = props => {
   });
 };
 
-exports.GridGroupingCriteriaCell = GridGroupingCriteriaCell;
-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.default.any.isRequired,
-
-  /**
-   * The mode of the cell.
-   */
-  cellMode: _propTypes.default.oneOf(['edit', 'view']).isRequired,
-
-  /**
-   * The column of the row that the current cell belongs to.
-   */
-  colDef: _propTypes.default.object.isRequired,
-
-  /**
-   * The column field of the cell that triggered the event.
-   */
-  field: _propTypes.default.string.isRequired,
-
-  /**
-   * The cell value formatted with the column valueFormatter.
-   */
-  formattedValue: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string, _propTypes.default.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.default.func.isRequired,
-
-  /**
-   * If true, the cell is the active element.
-   */
-  hasFocus: _propTypes.default.bool.isRequired,
-
-  /**
-   * The grid row id.
-   */
-  id: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired,
-
-  /**
-   * If true, the cell is editable.
-   */
-  isEditable: _propTypes.default.bool,
-
-  /**
-   * The row model of the row that the current cell belongs to.
-   */
-  row: _propTypes.default.object.isRequired,
-
-  /**
-   * the tabIndex value.
-   */
-  tabIndex: _propTypes.default.oneOf([-1, 0]).isRequired,
-
-  /**
-   * The cell value, but if the column has valueGetter, use getValue.
-   */
-  value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string, _propTypes.default.bool])
-} : void 0;
+exports.GridGroupingCriteriaCell = GridGroupingCriteriaCell;

package/node/components/GridTreeDataGroupingCell.js

@@ -129,16 +129,27 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
    */
   field: _propTypes.default.string.isRequired,
 
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      focus: _propTypes.default.func.isRequired
+    })
+  })]),
+
   /**
    * The cell value formatted with the column valueFormatter.
    */
-  formattedValue: _propTypes.default.any.isRequired,
+  formattedValue: _propTypes.default.any,
 
   /**
    * Get the cell value of a row and field.
    * @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.default.func.isRequired,
@@ -162,7 +173,7 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * The row model of the row that the current cell belongs to.
    */
-  row: _propTypes.default.any.isRequired,
+  row: _propTypes.default.object.isRequired,
 
   /**
    * The node of the row that the current cell belongs to.
@@ -177,5 +188,5 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */
-  value: _propTypes.default.any.isRequired
+  value: _propTypes.default.any
 } : void 0;

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

@@ -205,11 +205,11 @@ const useGridColumnPinning = (apiRef, props) => {
 
     return params;
   }, [apiRef]);
-  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'scrollToIndexes', calculateScrollLeft);
-  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'columnMenu', addColumnMenuButtons);
-  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'canBeReordered', checkIfCanBeReordered);
-  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'exportState', stateExportPreProcessing);
-  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'scrollToIndexes', calculateScrollLeft);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuButtons);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'canBeReordered', checkIfCanBeReordered);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
   apiRef.current.unstable_updateControlState({
     stateId: 'pinnedColumns',
     propModel: props.pinnedColumns,

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

@@ -60,7 +60,7 @@ const useGridColumnPinningPreProcessors = (apiRef, props) => {
       all: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
   }, [disableColumnPinning, pinnedColumns]);
-  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'hydrateColumns', reorderPinnedColumns);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', reorderPinnedColumns);
 };
 
 exports.useGridColumnPinningPreProcessors = useGridColumnPinningPreProcessors;

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

@@ -137,7 +137,7 @@ 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/node/hooks/features/columnResize/useGridColumnResize.js

@@ -122,17 +122,29 @@ 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;
     });
   };
 
@@ -196,7 +208,7 @@ const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current.querySelector(`[data-field="${colDef.field}"]`);
-    colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current);
+    colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current, apiRef.current);
     const doc = (0, _utils.ownerDocument)(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
     separatorSide.current = getSeparatorSide(event.currentTarget);
@@ -273,7 +285,7 @@ const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = (0, _domUtils.findHeaderElementFromField)((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
-    colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current);
+    colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current, apiRef.current);
     separatorSide.current = getSeparatorSide(event.target);
     initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
     const doc = (0, _utils.ownerDocument)(event.currentTarget);

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

@@ -57,11 +57,19 @@ 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 === _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD && event.key === ' ') {
+      apiRef.current.toggleDetailPanel(params.id);
+    }
   }, [apiRef, props.getDetailPanelContent]);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.cellClick, handleCellClick);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, _xDataGrid.GridEvents.cellKeyDown, handleCellKeyDown);
@@ -80,7 +88,7 @@ const useGridDetailPanel = (apiRef, props) => {
 
     });
   }, [apiRef, expandedRowIds]);
-  (0, _internals.useGridRegisterPreProcessor)(apiRef, 'rowHeight', addDetailHeight);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'rowHeight', addDetailHeight);
   apiRef.current.unstable_updateControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,