@mui/x-data-grid 5.11.1 → 5.12.0

package/locales/nbNO.js

@@ -0,0 +1,115 @@
+import { nbNO as nbNOCore } from '@mui/material/locale';
+import { getGridLocalization } from '../utils/getGridLocalization';
+const nbNOGrid = {
+  // Root
+  noRowsLabel: 'Ingen rader',
+  noResultsOverlayLabel: 'Fant ingen resultat.',
+  errorOverlayDefaultLabel: 'Det skjedde en feil.',
+  // Density selector toolbar button text
+  toolbarDensity: 'Tetthet',
+  toolbarDensityLabel: 'Tetthet',
+  toolbarDensityCompact: 'Kompakt',
+  toolbarDensityStandard: 'Standard',
+  toolbarDensityComfortable: 'Komfortabelt',
+  // Columns selector toolbar button text
+  toolbarColumns: 'Kolonner',
+  toolbarColumnsLabel: 'Velg kolonner',
+  // Filters toolbar button text
+  toolbarFilters: 'Filter',
+  toolbarFiltersLabel: 'Vis filter',
+  toolbarFiltersTooltipHide: 'Skjul fitler',
+  toolbarFiltersTooltipShow: 'Vis filter',
+  toolbarFiltersTooltipActive: count => count !== 1 ? `${count} aktive filter` : `${count} aktivt filter`,
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: 'Søk...',
+  toolbarQuickFilterLabel: 'Søk',
+  toolbarQuickFilterDeleteIconLabel: 'Slett',
+  // Export selector toolbar button text
+  toolbarExport: 'Eksporter',
+  toolbarExportLabel: 'Eksporter',
+  toolbarExportCSV: 'Last ned som CSV',
+  toolbarExportPrint: 'Skriv ut',
+  toolbarExportExcel: 'Last ned som Excel',
+  // Columns panel text
+  columnsPanelTextFieldLabel: 'Finn kolonne',
+  columnsPanelTextFieldPlaceholder: 'Kolonne tittel',
+  columnsPanelDragIconLabel: 'Reorganiser kolonne',
+  columnsPanelShowAllButton: 'Vis alle',
+  columnsPanelHideAllButton: 'Skjul alle',
+  // Filter panel text
+  filterPanelAddFilter: 'Legg til filter',
+  filterPanelDeleteIconLabel: 'Slett',
+  filterPanelLinkOperator: 'Logisk operator',
+  filterPanelOperators: 'Operatører',
+  // TODO v6: rename to filterPanelOperator
+  filterPanelOperatorAnd: 'Og',
+  filterPanelOperatorOr: 'Eller',
+  filterPanelColumns: 'Kolonner',
+  filterPanelInputLabel: 'Verdi',
+  filterPanelInputPlaceholder: 'Filter verdi',
+  // Filter operators text
+  filterOperatorContains: 'inneholder',
+  filterOperatorEquals: 'er lik',
+  filterOperatorStartsWith: 'starter med',
+  filterOperatorEndsWith: 'slutter med',
+  filterOperatorIs: 'er',
+  filterOperatorNot: 'er ikke',
+  filterOperatorAfter: 'er etter',
+  filterOperatorOnOrAfter: 'er på eller etter',
+  filterOperatorBefore: 'er før',
+  filterOperatorOnOrBefore: 'er på eller før',
+  filterOperatorIsEmpty: 'er tom',
+  filterOperatorIsNotEmpty: 'er ikke tom',
+  filterOperatorIsAnyOf: 'er en av',
+  // Filter values text
+  filterValueAny: 'noen',
+  filterValueTrue: 'sant',
+  filterValueFalse: 'usant',
+  // Column menu text
+  columnMenuLabel: 'Meny',
+  columnMenuShowColumns: 'Vis kolonner',
+  columnMenuFilter: 'Filter',
+  columnMenuHideColumn: 'Skjul',
+  columnMenuUnsort: 'Usorter',
+  columnMenuSortAsc: 'Sorter ØKENDE',
+  columnMenuSortDesc: 'Sorter SYNKENDE',
+  // Column header text
+  columnHeaderFiltersTooltipActive: count => count !== 1 ? `${count} aktive filter` : `${count} aktivt filter`,
+  columnHeaderFiltersLabel: 'Vis filter',
+  columnHeaderSortIconLabel: 'Sorter',
+  // Rows selected footer text
+  footerRowSelected: count => count !== 1 ? `${count.toLocaleString()} rader valgt` : `${count.toLocaleString()} rad valgt`,
+  // Total row amount footer text
+  footerTotalRows: 'Totalt antall rader:',
+  // Total visible row amount footer text
+  footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} av ${totalCount.toLocaleString()}`,
+  // Checkbox selection text
+  checkboxSelectionHeaderName: 'Avmerkingsboks valgt',
+  checkboxSelectionSelectAllRows: 'Velg alle rader',
+  checkboxSelectionUnselectAllRows: 'Velg bort alle rader',
+  checkboxSelectionSelectRow: 'Velg rad',
+  checkboxSelectionUnselectRow: 'Velg bort rad',
+  // Boolean cell text
+  booleanCellTrueLabel: 'sant',
+  booleanCellFalseLabel: 'usant',
+  // Actions cell more text
+  actionsCellMore: 'mer',
+  // Column pinning text
+  pinToLeft: 'Fest til venstre',
+  pinToRight: 'Fest til høyre',
+  unpin: 'Løsne',
+  // Tree Data
+  treeDataGroupingHeaderName: 'Grupper',
+  treeDataExpand: 'se barn',
+  treeDataCollapse: 'skjul barn',
+  // Grouping columns
+  groupingColumnHeaderName: 'Grupper',
+  groupColumn: name => `Grupper på ${name}`,
+  unGroupColumn: name => `Stopp å grupper på ${name}`,
+  // Master/detail
+  expandDetailPanel: 'Utvid',
+  collapseDetailPanel: 'Kollaps',
+  // Row reordering text
+  rowReorderingHeaderName: 'Rad reorganisering'
+};
+export const nbNO = getGridLocalization(nbNOGrid, nbNOCore);

package/locales/trTR.js

@@ -21,15 +21,15 @@ const trTRGrid = {
   toolbarFiltersTooltipShow: 'Filtreleri göster',
   toolbarFiltersTooltipActive: count => `${count} aktif filtre`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search...',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'Ara...',
+  toolbarQuickFilterLabel: 'Ara',
+  toolbarQuickFilterDeleteIconLabel: 'Temizle',
   // Export selector toolbar button text
   toolbarExport: 'Dışa aktar',
   toolbarExportLabel: 'Dışa aktar',
   toolbarExportCSV: 'CSV olarak aktar',
   toolbarExportPrint: 'Yazdır',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'Excel olarak aktar',
   // Columns panel text
   columnsPanelTextFieldLabel: 'Sütun ara',
   columnsPanelTextFieldPlaceholder: 'Sütun adı',
@@ -62,9 +62,9 @@ const trTRGrid = {
   filterOperatorIsNotEmpty: 'dolu',
   filterOperatorIsAnyOf: 'herhangi biri',
   // Filter values text
-  // filterValueAny: 'any',
-  // filterValueTrue: 'true',
-  // filterValueFalse: 'false',
+  filterValueAny: 'herhangi',
+  filterValueTrue: 'doğru',
+  filterValueFalse: 'yanlış',
   // Column menu text
   columnMenuLabel: 'Menü',
   columnMenuShowColumns: 'Sütunları göster',

package/models/api/gridCoreApi.d.ts

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import { GridEventPublisher, GridEventListener, GridEventsStr } from '../events';
 import { EventManager, EventListenerOptions } from '../../utils/EventManager';
-import { GridRowsInternalCache } from '../../hooks/features/rows/gridRowsState';
-interface Caches {
-    rows: GridRowsInternalCache;
-}
+import { GridApiCaches } from '../gridApiCaches';
 /**
  * The core API interface that is available in the grid `apiRef`.
  */
@@ -53,7 +50,7 @@ export interface GridCoreApi {
      * The caches used by hooks and state initializers.
      * @ignore - do not document.
      */
-    unstable_caches: Caches;
+    unstable_caches: GridApiCaches;
     /**
      * Registers a handler for an event.
      * @param {string} event The name of the event.
@@ -80,4 +77,3 @@ export interface GridCoreApi {
      */
     instanceId: number;
 }
-export {};

package/models/api/gridRowsMetaApi.d.ts

@@ -24,4 +24,28 @@ export interface GridRowsMetaApi {
      * @ignore - do not document.
      */
     unstable_setRowHeight: (id: GridRowId, height: number) => void;
+    /**
+     * Stores the row height measurement and triggers an hydration, if needed.
+     * @param {GridRowId} id The id of the row.
+     * @param {number} height The new height.
+     * @ignore - do not document.
+     */
+    unstable_storeRowHeightMeasurement: (id: GridRowId, height: number) => void;
+    /**
+     * Determines if the height of a row is "auto".
+     * @ignore - do not document.
+     */
+    unstable_rowHasAutoHeight: (id: GridRowId) => boolean;
+    /**
+     * Returns the index of the last row measured.
+     * The value considers only the rows reachable by scroll, e.g. first row has index=0 in all pages.
+     * @ignore - do not document.
+     */
+    unstable_getLastMeasuredRowIndex: () => number;
+    /**
+     * Updates the index of the last row measured.
+     * @param {number} index The row index.
+     * @ignore - do not document.
+     */
+    unstable_setLastMeasuredRowIndex: (index: number) => void;
 }

package/models/colDef/gridColDef.d.ts

@@ -233,7 +233,7 @@ export interface GridColDef<R extends GridValidRowModel = any, V = any, F = V> {
      */
     colSpan?: number | ((params: GridCellParams<V, R, F>) => number | undefined);
 }
-export interface GridActionsColDef extends GridColDef {
+export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F = V> extends GridColDef<R, V, F> {
     /**
      * Type allows to merge this object with a default definition [[GridColDef]].
      * @default 'actions'
@@ -244,9 +244,9 @@ export interface GridActionsColDef extends GridColDef {
      * @param {GridRowParams} params The params for each row.
      * @returns {React.ReactElement<GridActionsCellItemProps>[]} An array of [[GridActionsCell]] elements.
      */
-    getActions: (params: GridRowParams) => React.ReactElement<GridActionsCellItemProps>[];
+    getActions: (params: GridRowParams<R>) => React.ReactElement<GridActionsCellItemProps>[];
 }
-export declare type GridEnrichedColDef<R extends GridValidRowModel = any, V = any, F = V> = GridColDef<R, V, F> | GridActionsColDef;
+export declare type GridEnrichedColDef<R extends GridValidRowModel = any, V = any, F = V> = GridColDef<R, V, F> | GridActionsColDef<R, V, F>;
 export declare type GridColumns<R extends GridValidRowModel = any> = GridEnrichedColDef<R>[];
 export declare type GridColTypeDef<V = any, F = V> = Omit<GridColDef<V, any, F>, 'field'> & {
     extendType?: GridNativeColTypes;

package/models/events/gridEventLookup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridColumnVisibilityChangeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridPreferencePanelParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
+import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridColumnVisibilityChangeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
 import { GridCellEditStartParams, GridCellEditStopParams } from '../params/gridEditCellParams';
 import { GridCellParams } from '../params/gridCellParams';
 import type { GridFilterModel } from '../gridFilterModel';
@@ -552,4 +552,16 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
     preferencePanelOpen: {
         params: GridPreferencePanelParams;
     };
+    /**
+     * Fired when the menu is opened.
+     */
+    menuOpen: {
+        params: GridMenuParams;
+    };
+    /**
+     * Fired when the grid menu is closed.
+     */
+    menuClose: {
+        params: GridMenuParams;
+    };
 }

package/models/events/gridEvents.d.ts

@@ -80,7 +80,9 @@ declare enum GridEvents {
     virtualScrollerWheel = "virtualScrollerWheel",
     virtualScrollerTouchMove = "virtualScrollerTouchMove",
     preferencePanelClose = "preferencePanelClose",
-    preferencePanelOpen = "preferencePanelOpen"
+    preferencePanelOpen = "preferencePanelOpen",
+    menuOpen = "menuOpen",
+    menuClose = "menuClose"
 }
 export declare type GridEventsStr = keyof GridEventLookup;
 export { GridEvents };

package/models/events/gridEvents.js

@@ -82,6 +82,8 @@ var GridEvents;
   GridEvents["virtualScrollerTouchMove"] = "virtualScrollerTouchMove";
   GridEvents["preferencePanelClose"] = "preferencePanelClose";
   GridEvents["preferencePanelOpen"] = "preferencePanelOpen";
+  GridEvents["menuOpen"] = "menuOpen";
+  GridEvents["menuClose"] = "menuClose";
 })(GridEvents || (GridEvents = {}));
 
 export { GridEvents };

package/models/gridApiCaches.d.ts

@@ -0,0 +1,6 @@
+import { GridRowsInternalCache } from '../hooks/features/rows/gridRowsState';
+import { GridColumnsInternalCache } from '../hooks/features/columns/gridColumnsInterfaces';
+export interface GridApiCaches {
+    rows: GridRowsInternalCache;
+    columns: GridColumnsInternalCache;
+}

package/models/gridApiCaches.js

@@ -0,0 +1 @@
+export {};

package/models/params/gridMenuParams.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface GridMenuParams {
+    /**
+     * The element that opens the menu.
+     */
+    target: React.ReactNode;
+}

package/models/params/gridMenuParams.js

@@ -0,0 +1 @@
+export {};

package/models/params/gridRowParams.d.ts

@@ -57,7 +57,7 @@ export interface GridRowHeightParams extends GridRowEntry {
 /**
  * The getRowHeight return value.
  */
-export declare type GridRowHeightReturnValue = number | null | undefined;
+export declare type GridRowHeightReturnValue = number | null | undefined | 'auto';
 declare enum GridRowEditStartReasons {
     enterKeyDown = "enterKeyDown",
     cellDoubleClick = "cellDoubleClick",

package/models/params/index.d.ts

@@ -11,3 +11,4 @@ export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridSortModelParams';
 export * from './gridPreferencePanelParams';
+export * from './gridMenuParams';

package/models/params/index.js

@@ -10,4 +10,5 @@ export * from './gridHeaderSelectionCheckboxParams';
 export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridSortModelParams';
-export * from './gridPreferencePanelParams';
+export * from './gridPreferencePanelParams';
+export * from './gridMenuParams';

package/models/props/DataGridProps.d.ts

@@ -346,9 +346,17 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     /**
      * 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?: (params: GridRowHeightParams) => GridRowHeightReturnValue;
+    /**
+     * 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?: (params: GridRowHeightParams) => number | null;
     /**
      * Function that allows to specify the spacing between rows.
      * @param {GridRowSpacingParams} params With all properties from [[GridRowSpacingParams]].
@@ -578,6 +586,20 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {GridCallbackDetails} details Additional details for this callback.
      */
     onPreferencePanelOpen?: GridEventListener<'preferencePanelOpen'>;
+    /**
+     * 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?: GridEventListener<'menuOpen'>;
+    /**
+     * 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?: GridEventListener<'menuClose'>;
     /**
      * Set the edit rows model of the grid.
      */

package/modern/DataGrid/DataGrid.js

@@ -229,6 +229,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]].
@@ -239,7 +248,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,
 
@@ -506,6 +515,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/modern/components/GridRow.js

@@ -20,6 +20,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";
 
@@ -29,25 +31,24 @@ const useUtilityClasses = ownerState => {
     editing,
     selected,
     isLastVisible,
+    rowHeight,
     classes
   } = ownerState;
   const 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);
 };
 
 const EmptyCell = ({
-  width,
-  height
+  width
 }) => {
-  if (!width || !height) {
+  if (!width) {
     return null;
   }
 
   const style = {
-    width,
-    height
+    width
   };
   return /*#__PURE__*/_jsx("div", {
     className: "MuiDataGrid-cell",
@@ -82,9 +83,12 @@ function GridRow(props) {
   const ariaRowIndex = index + 2; // 1 for the header row and 1 as it's 1-based
 
   const apiRef = useGridApiContext();
+  const ref = React.useRef(null);
   const rootProps = useGridRootProps();
   const currentPage = useGridVisibleRows(apiRef, rootProps);
   const columnsTotalWidth = useGridSelector(apiRef, gridColumnsTotalWidthSelector);
+  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
   const {
     hasScrollX,
     hasScrollY
@@ -97,9 +101,41 @@ function GridRow(props) {
     isLastVisible,
     classes: rootProps.classes,
     editing: apiRef.current.getRowMode(rowId) === GridRowModes.Edit,
-    editable: rootProps.editMode === GridEditModes.Row
+    editable: rootProps.editMode === GridEditModes.Row,
+    rowHeight
   };
   const classes = useUtilityClasses(ownerState);
+  React.useLayoutEffect(() => {
+    if (rowHeight === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
+      // Fallback for IE
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, ref.current.clientHeight);
+    }
+  });
+  React.useLayoutEffect(() => {
+    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);
+    }
+
+    const rootElement = ref.current;
+    const hasFixedHeight = rowHeight !== 'auto';
+
+    if (!rootElement || hasFixedHeight || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const resizeObserver = new ResizeObserver(entries => {
+      const [entry] = entries;
+      const height = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
+      apiRef.current.unstable_storeRowHeightMeasurement(rowId, height);
+    });
+    resizeObserver.observe(rootElement);
+    return () => resizeObserver.disconnect();
+  }, [apiRef, currentPage.range, index, rowHeight, rowId]);
   const publish = React.useCallback((eventName, propHandler) => event => {
     // Ignore portal
     // The target is not an element when triggered by a Select inside the cell
@@ -157,7 +193,8 @@ function GridRow(props) {
   }, [apiRef, onClick, publish, rowId]);
 
   const style = _extends({}, styleProp, {
-    maxHeight: rowHeight,
+    maxHeight: rowHeight === 'auto' ? 'none' : rowHeight,
+    // max-height doesn't support "auto"
     minHeight: rowHeight
   });
 
@@ -197,6 +234,7 @@ function GridRow(props) {
     const showRightBorder = !isLastColumn ? rootProps.showCellRightBorder : !removeLastBorderRight && rootProps.disableExtendRowFullWidth;
     const cellParams = apiRef.current.getCellParams(rowId, column.field);
     const classNames = [];
+    const 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));
@@ -261,7 +299,8 @@ function GridRow(props) {
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         className: clsx(classNames),
-        colSpan: colSpan
+        colSpan: colSpan,
+        disableDragEvents: disableDragEvents
       }, rootProps.componentsProps?.cell, {
         children: content
       }), column.field));
@@ -270,6 +309,7 @@ function GridRow(props) {
 
   const emptyCellWidth = containerWidth - columnsTotalWidth;
   return /*#__PURE__*/_jsxs("div", _extends({
+    ref: ref,
     "data-id": rowId,
     "data-rowindex": index,
     role: "row",
@@ -283,8 +323,7 @@ function GridRow(props) {
     onMouseLeave: publish('rowMouseLeave', onMouseLeave)
   }, other, {
     children: [cells, emptyCellWidth > 0 && /*#__PURE__*/_jsx(EmptyCell, {
-      width: emptyCellWidth,
-      height: rowHeight
+      width: emptyCellWidth
     })]
   }));
 }
@@ -309,7 +348,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/modern/components/cell/GridCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _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"];
+const _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';
@@ -65,6 +65,7 @@ function GridCell(props) {
     className,
     showRightBorder,
     colSpan,
+    disableDragEvents,
     onClick,
     onDoubleClick,
     onMouseDown,
@@ -117,7 +118,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(() => {
     if (!hasFocus || cellMode === GridCellModes.Edit) {
@@ -182,6 +184,10 @@ function GridCell(props) {
     return children;
   };
 
+  const draggableEventHandlers = disableDragEvents ? null : {
+    onDragEnter: publish('cellDragEnter', onDragEnter),
+    onDragOver: publish('cellDragOver', onDragOver)
+  };
   return /*#__PURE__*/_jsx("div", _extends({
     ref: cellRef,
     className: clsx(className, classes.root),
@@ -196,10 +202,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()
   }));
@@ -216,10 +220,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/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -68,6 +68,7 @@ function GridColumnHeaderItem(props) {
     hasScrollX: false,
     hasScrollY: false
   };
+  const isDraggable = React.useMemo(() => !rootProps.disableColumnReorder && !disableReorder && !column.disableReorder, [rootProps.disableColumnReorder, disableReorder, column.disableReorder]);
   let headerComponent = null;
 
   if (column.renderHeader) {
@@ -98,12 +99,12 @@ function GridColumnHeaderItem(props) {
     onFocus: publish('columnHeaderFocus'),
     onBlur: publish('columnHeaderBlur')
   };
-  const draggableEventHandlers = {
+  const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('columnHeaderDragStart'),
     onDragEnter: publish('columnHeaderDragEnter'),
     onDragOver: publish('columnHeaderDragOver'),
     onDragEnd: publish('columnHeaderDragEnd')
-  };
+  } : null;
   const removeLastBorderRight = isLastColumn && hasScrollX && !hasScrollY;
   const showRightBorder = !isLastColumn ? rootProps.showColumnRightBorder : !removeLastBorderRight && !extendRowFullWidth;
 
@@ -180,7 +181,7 @@ function GridColumnHeaderItem(props) {
   }, 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,