@mui/x-data-grid 5.11.1 → 5.12.2

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -19,7 +19,7 @@ import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 import { getFirstNonSpannedColumnToRender } from '../columns/gridColumnsUtils'; // Uses binary search to avoid looping through all possible positions
 
 import { jsx as _jsx } from "react/jsx-runtime";
-export function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
+export function binarySearch(offset, positions, sliceStart = 0, sliceEnd = positions.length) {
   if (positions.length <= 0) {
     return -1;
   }
@@ -30,8 +30,20 @@ export function getIndexFromScroll(offset, positions, sliceStart = 0, sliceEnd =
 
   const pivot = sliceStart + Math.floor((sliceEnd - sliceStart) / 2);
   const itemOffset = positions[pivot];
-  return offset <= itemOffset ? getIndexFromScroll(offset, positions, sliceStart, pivot) : getIndexFromScroll(offset, positions, pivot + 1, sliceEnd);
+  return offset <= itemOffset ? binarySearch(offset, positions, sliceStart, pivot) : binarySearch(offset, positions, pivot + 1, sliceEnd);
 }
+
+function exponentialSearch(offset, positions, index) {
+  let interval = 1;
+
+  while (index < positions.length && positions[index] < offset) {
+    index += interval;
+    interval *= 2;
+  }
+
+  return binarySearch(offset, positions, Math.floor(index / 2), Math.min(index, positions.length));
+}
+
 export const getRenderableIndexes = ({
   firstIndex,
   lastIndex,
@@ -73,6 +85,22 @@ export const useGridVirtualScroller = props => {
   });
   const [containerWidth, setContainerWidth] = React.useState(null);
   const prevTotalWidth = React.useRef(columnsTotalWidth);
+  const getNearestIndexToRender = React.useCallback(offset => {
+    const lastMeasuredIndex = Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex());
+    const allRowsMeasured = lastMeasuredIndex === Infinity;
+
+    if (allRowsMeasured || rowsMeta.positions[lastMeasuredIndex] >= offset) {
+      // If all rows were measured (when no row has "auto" as height) or all rows before the offset
+      // were measured, then use a binary search because it's faster.
+      return binarySearch(offset, rowsMeta.positions);
+    } // Otherwise, use an exponential search.
+    // If rows have "auto" as height, their positions will be based on estimated heights.
+    // In this case, we can skip several steps until we find a position higher than the offset.
+    // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+
+
+    return exponentialSearch(offset, rowsMeta.positions, lastMeasuredIndex);
+  }, [apiRef, rowsMeta.positions]);
   const computeRenderContext = React.useCallback(() => {
     if (disableVirtualization) {
       return {
@@ -86,18 +114,39 @@ export const useGridVirtualScroller = props => {
     const {
       top,
       left
-    } = scrollPosition.current;
-    const firstRowIndex = getIndexFromScroll(top, rowsMeta.positions);
-    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getIndexFromScroll(top + rootRef.current.clientHeight, rowsMeta.positions);
-    const firstColumnIndex = getIndexFromScroll(left, columnPositions);
-    const lastColumnIndex = getIndexFromScroll(left + containerWidth, columnPositions);
+    } = scrollPosition.current; // Clamp the value because the search may return an index out of bounds.
+    // In the last index, this is not needed because Array.slice doesn't include it.
+
+    const firstRowIndex = Math.min(getNearestIndexToRender(top), rowsMeta.positions.length - 1);
+    const lastRowIndex = rootProps.autoHeight ? firstRowIndex + currentPage.rows.length : getNearestIndexToRender(top + rootRef.current.clientHeight);
+    let hasRowWithAutoHeight = false;
+    let firstColumnIndex = 0;
+    let lastColumnIndex = columnPositions.length;
+    const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
+      firstIndex: firstRowIndex,
+      lastIndex: lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    });
+
+    for (let i = firstRowToRender; i < lastRowToRender && !hasRowWithAutoHeight; i += 1) {
+      const row = currentPage.rows[i];
+      hasRowWithAutoHeight = apiRef.current.unstable_rowHasAutoHeight(row.id);
+    }
+
+    if (!hasRowWithAutoHeight) {
+      firstColumnIndex = binarySearch(left, columnPositions);
+      lastColumnIndex = binarySearch(left + containerWidth, columnPositions);
+    }
+
     return {
       firstRowIndex,
       lastRowIndex,
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [disableVirtualization, rowsMeta.positions, rootProps.autoHeight, currentPage.rows.length, columnPositions, containerWidth, visibleColumns.length]);
+  }, [disableVirtualization, getNearestIndexToRender, rowsMeta.positions.length, rootProps.autoHeight, rootProps.rowBuffer, currentPage.rows, columnPositions, visibleColumns.length, apiRef, containerWidth]);
   React.useEffect(() => {
     if (disableVirtualization) {
       renderZoneRef.current.style.transform = `translate3d(0px, 0px, 0px)`;
@@ -228,7 +277,8 @@ export const useGridVirtualScroller = props => {
       renderContext: nextRenderContext,
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
-      availableSpace = containerWidth
+      availableSpace = containerWidth,
+      ignoreAutoHeight
     } = params;
 
     if (!currentPage.range || !nextRenderContext || availableSpace == null) {
@@ -281,7 +331,7 @@ export const useGridVirtualScroller = props => {
         model
       } = renderedRows[i];
       const lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1;
-      const targetRowHeight = apiRef.current.unstable_getRowHeight(id);
+      const baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(id) || ignoreAutoHeight ? apiRef.current.unstable_getRowHeight(id) : 'auto';
       let isSelected;
 
       if (selectedRowsLookup[id] == null) {
@@ -295,7 +345,7 @@ export const useGridVirtualScroller = props => {
       rows.push( /*#__PURE__*/_jsx(rootProps.components.Row, _extends({
         row: model,
         rowId: id,
-        rowHeight: targetRowHeight,
+        rowHeight: baseRowHeight,
         cellFocus: cellFocus // TODO move to inside the row
         ,
         cellTabIndex: cellTabIndex // TODO move to inside the row
@@ -354,6 +404,10 @@ export const useGridVirtualScroller = props => {
     rootStyle.overflowX = 'hidden';
   }
 
+  if (rootProps.autoHeight) {
+    rootStyle.overflowY = 'hidden';
+  }
+
   const getRenderContext = React.useCallback(() => {
     return prevRenderContext.current;
   }, []);

package/index.js

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

package/internals/index.d.ts

@@ -52,3 +52,4 @@ export { clamp, isDeepEqual } from '../utils/utils';
 export { buildWarning } from '../utils/warning';
 export { exportAs } from '../utils/exportAs';
 export type { GridApiCommunity } from '../models/api/gridApiCommunity';
+export type { GridApiCaches } from '../models/gridApiCaches';

package/legacy/DataGrid/DataGrid.js

@@ -231,6 +231,15 @@ DataGridRaw.propTypes = {
    */
   getDetailPanelContent: PropTypes.func,
 
+  /**
+   * Function that returns the estimated height for a row.
+   * Only works if dynamic row height is used.
+   * Once the row height is measured this value is discarded.
+   * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
+   * @returns {number | null} The estimated row height value. If `null` or `undefined` then the default row height, based on the density, is applied.
+   */
+  getEstimatedRowHeight: PropTypes.func,
+
   /**
    * Function that applies CSS classes dynamically on rows.
    * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
@@ -241,7 +250,7 @@ DataGridRaw.propTypes = {
   /**
    * Function that sets the row height per row.
    * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
-   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied.
+   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied. If "auto" then the row height is calculated based on the content.
    */
   getRowHeight: PropTypes.func,
 
@@ -508,6 +517,22 @@ DataGridRaw.propTypes = {
    */
   onFilterModelChange: PropTypes.func,
 
+  /**
+   * Callback fired when the menu is closed.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuClose: PropTypes.func,
+
+  /**
+   * Callback fired when the menu is opened.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuOpen: PropTypes.func,
+
   /**
    * Callback fired when the current page has changed.
    * @param {number} page Index of the page displayed on the Grid.

package/legacy/colDef/gridCheckboxSelectionColDef.js

@@ -5,8 +5,9 @@ import { GridHeaderCheckbox } from '../components/columnSelection/GridHeaderChec
 import { selectedIdsLookupSelector } from '../hooks/features/selection/gridSelectionSelector';
 import { GRID_BOOLEAN_COL_DEF } from './gridBooleanColDef';
 import { jsx as _jsx } from "react/jsx-runtime";
+export var GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 export var GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {
-  field: '__check__',
+  field: GRID_CHECKBOX_SELECTION_FIELD,
   type: 'checkboxSelection',
   width: 50,
   resizable: false,

package/legacy/colDef/gridNumericColDef.js

@@ -13,7 +13,7 @@ export var GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   },
   valueFormatter: function valueFormatter(_ref) {
     var value = _ref.value;
-    return value && isNumber(value) && value.toLocaleString() || value;
+    return isNumber(value) ? value.toLocaleString() : value || '';
   },
   filterOperators: getGridNumericOperators(),
   getApplyQuickFilterFn: getGridNumericQuickFilterFn

package/legacy/components/GridRow.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "renderedColumns", "containerWidth", "firstColumnToRender", "lastColumnToRender", "cellFocus", "cellTabIndex", "editRowsState", "isLastVisible", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave"];
 
@@ -20,6 +21,8 @@ import { findParentElementFromClassName } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
+import { gridSortModelSelector } from '../hooks/features/sorting/gridSortingSelector';
+import { gridRowTreeDepthSelector } from '../hooks/features/rows/gridRowsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
@@ -28,24 +31,23 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
       editing = ownerState.editing,
       selected = ownerState.selected,
       isLastVisible = ownerState.isLastVisible,
+      rowHeight = ownerState.rowHeight,
       classes = ownerState.classes;
   var slots = {
-    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isLastVisible && 'row--lastVisible']
+    root: ['row', selected && 'selected', editable && 'row--editable', editing && 'row--editing', isLastVisible && 'row--lastVisible', rowHeight === 'auto' && 'row--dynamicHeight']
   };
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
 var EmptyCell = function EmptyCell(_ref) {
-  var width = _ref.width,
-      height = _ref.height;
+  var width = _ref.width;
 
-  if (!width || !height) {
+  if (!width) {
     return null;
   }
 
   var style = {
-    width: width,
-    height: height
+    width: width
   };
   return /*#__PURE__*/_jsx("div", {
     className: "MuiDataGrid-cell",
@@ -82,9 +84,12 @@ function GridRow(props) {
   var ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
 
   var apiRef = useGridApiContext();
+  var ref = React.useRef(null);
   var rootProps = useGridRootProps();
   var currentPage = useGridVisibleRows(apiRef, rootProps);
   var columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  var sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  var treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
 
   var _ref2 = (_apiRef$current$getRo = apiRef.current.getRootDimensions()) != null ? _apiRef$current$getRo : {
     hasScrollX: false,
@@ -98,9 +103,45 @@ function GridRow(props) {
     isLastVisible: isLastVisible,
     classes: rootProps.classes,
     editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
-    editable: rootProps.editMode === GridEditModes.Row
+    editable: rootProps.editMode === GridEditModes.Row,
+    rowHeight: rowHeight
   };
   var classes = useUtilityClasses(ownerState);
+  React.useLayoutEffect(function () {
+    if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
+      // Fallback for IE
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
+    }
+  });
+  React.useLayoutEffect(function () {
+    if (currentPage.range) {
+      // The index prop is relative to the rows from all pages. As example, the index prop of the
+      // first row is 5 if pageSize=5 and page=1. However, the index used by the virtualization
+      // doesn't care about pagination and considers the rows from the current page only, so the
+      // first row always has index=0. We need to subtract the index of the first row to make it
+      // compatible with the index used by the virtualization.
+      apiRef.current.unstable_setLastMeasuredRowIndex(index - currentPage.range.firstRowIndex);
+    }
+
+    var rootElement = ref.current;
+    var hasFixedHeight = rowHeight !== 'auto';
+
+    if (!rootElement || hasFixedHeight || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var _entries = _slicedToArray(entries, 1),
+          entry = _entries[0];
+
+      var height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
+    });
+    resizeObserver.observe(rootElement);
+    return function () {
+      return resizeObserver.disconnect();
+    };
+  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
   var publish = React.useCallback(function (eventName, propHandler) {
     return function (event) {
       // Ignore portal
@@ -160,7 +201,8 @@ function GridRow(props) {
   }, [apiRef, onClick, publish, rowId]);
 
   var style = _extends({}, styleProp, {
-    maxHeight: rowHeight,
+    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+    // max-height doesn't support "auto"
     minHeight: rowHeight
   });
 
@@ -201,6 +243,7 @@ function GridRow(props) {
     var showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     var cellParams = apiRef.current.getCellParams(rowId, column.field);
     var classNames = [];
+    var disableDragEvents = rootProps.disableColumnReorder && column.disableReorder || !rootProps.rowReordering && !!sortModel.length && treeDepth > 1 && Object.keys(editRowsState).length > 0;
 
     if (column.cellClassName) {
       classNames.push(clsx(typeof column.cellClassName === 'function' ? column.cellClassName(cellParams) : column.cellClassName));
@@ -270,7 +313,8 @@ function GridRow(props) {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         className: clsx(classNames),
-        colSpan: colSpan
+        colSpan: colSpan,
+        disableDragEvents: disableDragEvents
       }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.cell, {
         children: content
       }), column.field));
@@ -279,6 +323,7 @@ function GridRow(props) {
 
   var emptyCellWidth = containerWidth - columnsTotalWidth;
   return /*#__PURE__*/_jsxs("div", _extends({
+    ref: ref,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
@@ -292,8 +337,7 @@ function GridRow(props) {
     onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   }, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
-      width: emptyCellWidth,
-      height: rowHeight
+      width: emptyCellWidth
     })]
   }));
 }
@@ -318,7 +362,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
   lastColumnToRender: PropTypes.number.isRequired,
   renderedColumns: PropTypes.arrayOf(PropTypes.object).isRequired,
   row: PropTypes.any.isRequired,
-  rowHeight: PropTypes.number.isRequired,
+  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   rowId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
   selected: PropTypes.bool.isRequired,
   visibleColumns: PropTypes.arrayOf(PropTypes.object).isRequired

package/legacy/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
+var _excluded = ["align", "children", "colIndex", "colDef", "cellMode", "field", "formattedValue", "hasFocus", "height", "isEditable", "rowId", "tabIndex", "value", "width", "className", "showRightBorder", "extendRowFullWidth", "row", "colSpan", "disableDragEvents", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onKeyDown", "onDragEnter", "onDragOver"];
 
 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
 import * as React from 'react';
@@ -67,6 +67,7 @@ function GridCell(props) {
       extendRowFullWidth = props.extendRowFullWidth,
       row = props.row,
       colSpan = props.colSpan,
+      disableDragEvents = props.disableDragEvents,
       onClick = props.onClick,
       onDoubleClick = props.onDoubleClick,
       onMouseDown = props.onMouseDown,
@@ -122,7 +123,8 @@ function GridCell(props) {
     minWidth: width,
     maxWidth: width,
     minHeight: height,
-    maxHeight: height
+    maxHeight: height === 'auto' ? 'none' : height // max-height doesn't support "auto"
+
   };
   React.useLayoutEffect(function () {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
@@ -187,6 +189,10 @@ function GridCell(props) {
     return children;
   };
 
+  var draggableEventHandlers = disableDragEvents ? null : {
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
+  };
   return /*#__PURE__*/_jsx("div", _extends({
     ref: cellRef,
     className: clsx(className, classes.root),
@@ -201,10 +207,8 @@ function GridCell(props) {
     onDoubleClick: publish('cellDoubleClick', onDoubleClick),
     onMouseDown: publish('cellMouseDown', onMouseDown),
     onMouseUp: publishMouseUp('cellMouseUp'),
-    onKeyDown: publish('cellKeyDown', onKeyDown),
-    onDragEnter: publish('cellDragEnter', onDragEnter),
-    onDragOver: publish('cellDragOver', onDragOver)
-  }, other, {
+    onKeyDown: publish('cellKeyDown', onKeyDown)
+  }, draggableEventHandlers, other, {
     onFocus: handleFocus,
     children: renderChildren()
   }));
@@ -221,10 +225,11 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
   className: PropTypes.string,
   colIndex: PropTypes.number.isRequired,
   colSpan: PropTypes.number,
+  disableDragEvents: PropTypes.bool,
   field: PropTypes.string.isRequired,
   formattedValue: PropTypes.any,
   hasFocus: PropTypes.bool,
-  height: PropTypes.number.isRequired,
+  height: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]).isRequired,
   isEditable: PropTypes.bool,
   onClick: PropTypes.func,
   onDoubleClick: PropTypes.func,

package/legacy/components/columnHeaders/GridColumnHeaderItem.js

@@ -72,6 +72,9 @@ function GridColumnHeaderItem(props) {
       hasScrollX = _ref.hasScrollX,
       hasScrollY = _ref.hasScrollY;
 
+  var isDraggable = React.useMemo(function () {
+    return !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder;
+  }, [rootProps.disableColumnReorder, disableReorder, column.disableReorder]);
   var headerComponent = null;
 
   if (column.renderHeader) {
@@ -104,12 +107,12 @@ function GridColumnHeaderItem(props) {
     onFocus: publish('columnHeaderFocus'),
     onBlur: publish('columnHeaderBlur')
   };
-  var draggableEventHandlers = {
+  var draggableEventHandlers = isDraggable ? {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
     onDragEnd: publish('columnHeaderDragEnd')
-  };
+  } : null;
   var removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
   var showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
 
@@ -170,6 +173,7 @@ function GridColumnHeaderItem(props) {
     field: column.field,
     colDef: column
   }) : column.headerClassName;
+  var label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: headerCellRef,
     className: clsx(classes.root, headerClassName),
@@ -182,18 +186,19 @@ function GridColumnHeaderItem(props) {
     role: "columnheader",
     tabIndex: tabIndex,
     "aria-colindex": colIndex + 1,
-    "aria-sort": ariaSort
+    "aria-sort": ariaSort,
+    "aria-label": column.renderHeader && headerComponent == null ? label : undefined
   }, mouseEventsHandlers, {
     children: [/*#__PURE__*/_jsxs("div", _extends({
       className: classes.draggableContainer,
-      draggable: !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder
+      draggable: isDraggable
     }, draggableEventHandlers, {
       children: [/*#__PURE__*/_jsxs("div", {
         className: classes.titleContainer,
         children: [/*#__PURE__*/_jsx("div", {
           className: classes.titleContainerContent,
-          children: headerComponent || /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
-            label: (_column$headerName = column.headerName) != null ? _column$headerName : column.field,
+          children: column.renderHeader ? headerComponent : /*#__PURE__*/_jsx(GridColumnHeaderTitle, {
+            label: label,
             description: column.description,
             columnWidth: width
           })

package/legacy/components/columnSelection/GridCellCheckboxRenderer.js

@@ -89,7 +89,6 @@ var GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCell
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/legacy/components/columnSelection/GridHeaderCheckbox.js

@@ -121,7 +121,6 @@ var GridHeaderCheckbox = /*#__PURE__*/React.forwardRef(function GridHeaderCheckb
     checked: isChecked,
     onChange: handleChange,
     className: classes.root,
-    color: "primary",
     inputProps: {
       'aria-label': label
     },

package/legacy/components/containers/GridRootStyles.js

@@ -10,7 +10,7 @@ export var GridRootStyles = styled('div', {
     _defineProperty({}, "& .".concat(gridClasses['cell--withRenderer']), styles['cell--withRenderer']), _defineProperty({}, "& .".concat(gridClasses.cell), styles.cell), _defineProperty({}, "& .".concat(gridClasses.cellContent), styles.cellContent), _defineProperty({}, "& .".concat(gridClasses.cellCheckbox), styles.cellCheckbox), _defineProperty({}, "& .".concat(gridClasses.checkboxInput), styles.checkboxInput), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignCenter']), styles['columnHeader--alignCenter']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignLeft']), styles['columnHeader--alignLeft']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--alignRight']), styles['columnHeader--alignRight']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--dragging']), styles['columnHeader--dragging']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--moving']), styles['columnHeader--moving']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--numeric']), styles['columnHeader--numeric']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sortable']), styles['columnHeader--sortable']), _defineProperty({}, "& .".concat(gridClasses['columnHeader--sorted']), styles['columnHeader--sorted']), _defineProperty({}, "& .".concat(gridClasses.columnHeader), styles.columnHeader), _defineProperty({}, "& .".concat(gridClasses.columnHeaderCheckbox), styles.columnHeaderCheckbox), _defineProperty({}, "& .".concat(gridClasses.columnHeaderDraggableContainer), styles.columnHeaderDraggableContainer), _defineProperty({}, "& .".concat(gridClasses.columnHeaderTitleContainer), styles.columnHeaderTitleContainer), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizable']), styles['columnSeparator--resizable']), _defineProperty({}, "& .".concat(gridClasses['columnSeparator--resizing']), styles['columnSeparator--resizing']), _defineProperty({}, "& .".concat(gridClasses.columnSeparator), styles.columnSeparator), _defineProperty({}, "& .".concat(gridClasses.filterIcon), styles.filterIcon), _defineProperty({}, "& .".concat(gridClasses.iconSeparator), styles.iconSeparator), _defineProperty({}, "& .".concat(gridClasses.menuIcon), styles.menuIcon), _defineProperty({}, "& .".concat(gridClasses.menuIconButton), styles.menuIconButton), _defineProperty({}, "& .".concat(gridClasses.menuOpen), styles.menuOpen), _defineProperty({}, "& .".concat(gridClasses.menuList), styles.menuList), _defineProperty({}, "& .".concat(gridClasses['row--editable']), styles['row--editable']), _defineProperty({}, "& .".concat(gridClasses['row--editing']), styles['row--editing']), _defineProperty({}, "& .".concat(gridClasses['row--dragging']), styles['row--dragging']), _defineProperty({}, "& .".concat(gridClasses.row), styles.row), _defineProperty({}, "& .".concat(gridClasses.rowReorderCellPlaceholder), styles.rowReorderCellPlaceholder), _defineProperty({}, "& .".concat(gridClasses.rowReorderCell), styles.rowReorderCell), _defineProperty({}, "& .".concat(gridClasses['rowReorderCell--draggable']), styles['rowReorderCell--draggable']), _defineProperty({}, "& .".concat(gridClasses.sortIcon), styles.sortIcon), _defineProperty({}, "& .".concat(gridClasses.withBorder), styles.withBorder), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCell), styles.treeDataGroupingCell), _defineProperty({}, "& .".concat(gridClasses.treeDataGroupingCellToggle), styles.treeDataGroupingCellToggle), _defineProperty({}, "& .".concat(gridClasses.detailPanelToggleCell), styles.detailPanelToggleCell), _defineProperty({}, "& .".concat(gridClasses['detailPanelToggleCell--expanded']), styles['detailPanelToggleCell--expanded']), styles.root];
   }
 })(function (_ref46) {
-  var _$concat3, _extends2;
+  var _$concat2, _$concat3, _extends2;
 
   var theme = _ref46.theme;
   var borderColor = theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68);
@@ -68,7 +68,7 @@ export var GridRootStyles = styled('div', {
     minWidth: 0,
     flex: 1,
     whiteSpace: 'nowrap',
-    overflow: 'hidden'
+    overflowX: 'hidden'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.columnHeaderTitleContainerContent), {
     overflow: 'hidden',
     display: 'flex',
@@ -100,7 +100,7 @@ export var GridRootStyles = styled('div', {
     left: -12
   }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--sideRight']), {
     right: -12
-  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--resizable']), _defineProperty({
+  }), _defineProperty(_extends2, "& .".concat(gridClasses['columnSeparator--resizable']), (_$concat2 = {
     cursor: 'col-resize',
     touchAction: 'none',
     '&:hover': {
@@ -110,9 +110,11 @@ export var GridRootStyles = styled('div', {
         color: borderColor
       }
     }
-  }, "&.".concat(gridClasses['columnSeparator--resizing']), {
+  }, _defineProperty(_$concat2, "&.".concat(gridClasses['columnSeparator--resizing']), {
     color: theme.palette.text.primary
-  })), _defineProperty(_extends2, "& .".concat(gridClasses.iconSeparator), {
+  }), _defineProperty(_$concat2, '& svg', {
+    pointerEvents: 'none'
+  }), _$concat2)), _defineProperty(_extends2, "& .".concat(gridClasses.iconSeparator), {
     color: 'inherit'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.menuIcon), {
     width: 0,
@@ -155,9 +157,10 @@ export var GridRootStyles = styled('div', {
   }), _defineProperty(_extends2, "& .".concat(gridClasses.cell), {
     display: 'flex',
     alignItems: 'center',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
     borderBottom: "1px solid ".concat(borderColor)
+  }), _defineProperty(_extends2, "& .".concat(gridClasses.row, ":not(.").concat(gridClasses['row--dynamicHeight'], ") > .").concat(gridClasses.cell), {
+    overflow: 'hidden',
+    whiteSpace: 'nowrap'
   }), _defineProperty(_extends2, "& .".concat(gridClasses.cellContent), {
     overflow: 'hidden',
     textOverflow: 'ellipsis'

package/legacy/components/menu/GridMenu.js

@@ -14,6 +14,7 @@ import { styled } from '@mui/material/styles';
 import { HTMLElementType } from '@mui/utils';
 import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
+import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -55,6 +56,7 @@ var GridMenu = function GridMenu(props) {
       onExited = props.onExited,
       other = _objectWithoutProperties(props, _excluded);
 
+  var apiRef = useGridApiContext();
   var prevTarget = React.useRef(target);
   var prevOpen = React.useRef(open);
   var rootProps = useGridRootProps();
@@ -65,11 +67,16 @@ var GridMenu = function GridMenu(props) {
   React.useEffect(function () {
     if (prevOpen.current && prevTarget.current) {
       prevTarget.current.focus();
-    }
+    } // Emit menuOpen or menuClose events
+
 
+    var eventName = open ? 'menuOpen' : 'menuClose';
+    apiRef.current.publishEvent(eventName, {
+      target: target
+    });
     prevOpen.current = open;
     prevTarget.current = target;
-  }, [open, target]);
+  }, [apiRef, open, target]);
 
   var handleExited = function handleExited(popperOnExited) {
     return function (node) {

package/legacy/components/panel/GridColumnsPanel.js

@@ -86,8 +86,18 @@ export function GridColumnsPanel(props) {
   };
 
   var toggleAllColumns = React.useCallback(function (isVisible) {
-    // TODO v6: call `setColumnVisibilityModel` directly
-    apiRef.current.updateColumns(columns.map(function (col) {
+    if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
+      if (isVisible) {
+        return apiRef.current.setColumnVisibilityModel({});
+      }
+
+      return apiRef.current.setColumnVisibilityModel(Object.fromEntries(columns.map(function (col) {
+        return [col.field, false];
+      })));
+    } // TODO v6: Remove
+
+
+    return apiRef.current.updateColumns(columns.map(function (col) {
       if (col.hideable !== false) {
         return {
           field: col.field,
@@ -139,7 +149,6 @@ export function GridColumnsPanel(props) {
                 checked: columnVisibilityModel[column.field] !== false,
                 onClick: toggleColumn,
                 name: column.field,
-                color: "primary",
                 size: "small"
               }, (_rootProps$components2 = rootProps.componentsProps) == null ? void 0 : _rootProps$components2.baseSwitch)),
               label: column.headerName || column.field
@@ -158,15 +167,13 @@ export function GridColumnsPanel(props) {
       children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
         onClick: function onClick() {
           return toggleAllColumns(false);
-        },
-        color: "primary"
+        }
       }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
       })), /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
         onClick: function onClick() {
           return toggleAllColumns(true);
-        },
-        color: "primary"
+        }
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]