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

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

@@ -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);

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/rowGrouping/useGridRowGrouping.js

@@ -169,10 +169,8 @@ export const useGridRowGrouping = (apiRef, props) => {
         rowGrouping: _extends({}, state.rowGrouping, {
           unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
         })
-      })); // Refresh the column pre-processing
-      // TODO: Add a clean way to re-run a pipe processing without faking a change
-
-      apiRef.current.updateColumns([]);
+      }));
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
       setStrategyAvailability(apiRef, props.disableRowGrouping); // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
 

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

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

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.0
+/** @license MUI v5.9.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

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

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY0OTAyMzIwMDAwMA==";
+  const releaseInfo = "MTY0OTg4NzIwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/node/DataGridPro/DataGridPro.js

@@ -642,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,
 

package/node/DataGridPro/useDataGridProComponent.js

@@ -78,13 +78,14 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridColumns)(apiRef, props);
   (0, _internals.useGridRows)(apiRef, props);
   (0, _internals.useGridParamsApi)(apiRef);
+  (0, _internals.useGridColumnSpanning)(apiRef);
   (0, _useGridDetailPanelCache.useGridDetailPanelCache)(apiRef, props);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _internals.useGridEditing_new : _internals.useGridEditing_old;
   useGridEditing(apiRef, props);
   (0, _internals.useGridFocus)(apiRef, props);
-  (0, _internals.useGridSorting)(apiRef, props);
   (0, _internals.useGridPreferencesPanel)(apiRef);
   (0, _internals.useGridFilter)(apiRef, props);
+  (0, _internals.useGridSorting)(apiRef, props);
   (0, _internals.useGridDensity)(apiRef, props);
   (0, _useGridColumnReorder.useGridColumnReorder)(apiRef, props);
   (0, _useGridColumnResize.useGridColumnResize)(apiRef, props);

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

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

package/node/components/GridDetailPanelToggleCell.js

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

package/node/components/GridTreeDataGroupingCell.js

@@ -129,10 +129,21 @@ 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.
@@ -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/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);

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

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

package/node/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -203,10 +203,8 @@ const useGridRowGrouping = (apiRef, props) => {
         rowGrouping: (0, _extends2.default)({}, state.rowGrouping, {
           unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
         })
-      })); // Refresh the column pre-processing
-      // TODO: Add a clean way to re-run a pipe processing without faking a change
-
-      apiRef.current.updateColumns([]);
+      }));
+      apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
       (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping); // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
 

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

@@ -26,8 +26,6 @@ const useGridTreeData = apiRef => {
     if (cellParams.colDef.type === 'treeDataGroup' && event.key === ' ' && !event.shiftKey) {
       var _gridFilteredDescenda;
 
-      event.stopPropagation();
-      event.preventDefault();
       const filteredDescendantCount = (_gridFilteredDescenda = (0, _xDataGrid.gridFilteredDescendantCountLookupSelector)(apiRef)[params.id]) != null ? _gridFilteredDescenda : 0;
 
       if (filteredDescendantCount === 0) {

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.8.0
+/** @license MUI v5.9.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/utils/domUtils.js

@@ -19,14 +19,41 @@ function findHeaderElementFromField(elem, field) {
   return elem.querySelector(`[data-field="${field}"]`);
 }
 
-function findGridCellElementsFromCol(col) {
-  const field = col.getAttribute('data-field');
+function findGridCellElementsFromCol(col, api) {
   const root = (0, _internals.findParentElementFromClassName)(col, 'MuiDataGrid-root');
 
   if (!root) {
     throw new Error('MUI: The root element is not found.');
   }
 
-  const cells = root.querySelectorAll(`.${_xDataGrid.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(`.${_xDataGrid.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/node/utils/releaseInfo.js

@@ -8,7 +8,7 @@ exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY0OTAyMzIwMDAwMA==";
+  const releaseInfo = "MTY0OTg4NzIwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "5.8.0",
+  "version": "5.9.0",
   "description": "The commercial edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
-  "license": "SEE LICENSE IN LICENSE.txt",
+  "license": "SEE LICENSE IN LICENSE",
   "bugs": {
     "url": "https://github.com/mui/mui-x/issues"
   },
-  "homepage": "https://mui.com/components/data-grid/",
+  "homepage": "https://mui.com/x/react-data-grid/",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -31,9 +31,9 @@
     "directory": "packages/grid/x-data-grid-pro"
   },
   "dependencies": {
-    "@mui/utils": "^5.4.4",
-    "@mui/x-data-grid": "5.8.0",
-    "@mui/x-license-pro": "5.7.0",
+    "@mui/utils": "^5.6.0",
+    "@mui/x-data-grid": "5.9.0",
+    "@mui/x-license-pro": "5.9.0",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.0.4",
     "prop-types": "^15.8.1",
@@ -42,7 +42,7 @@
   "peerDependencies": {
     "@mui/material": "^5.2.8",
     "@mui/system": "^5.2.8",
-    "react": "^17.0.2"
+    "react": "^17.0.2 || ^18.0.0"
   },
   "setupFiles": [
     "<rootDir>/src/setupTests.js"

package/utils/domUtils.d.ts

@@ -1,3 +1,4 @@
+import { GridApiPro } from '../models/gridApiPro';
 export declare function getFieldFromHeaderElem(colCellEl: Element): string;
 export declare function findHeaderElementFromField(elem: Element, field: string): Element | null;
-export declare function findGridCellElementsFromCol(col: HTMLElement): NodeListOf<Element> | null;
+export declare function findGridCellElementsFromCol(col: HTMLElement, api: GridApiPro): Element[];

package/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/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY0OTAyMzIwMDAwMA==";
+  const releaseInfo = "MTY0OTg4NzIwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).