@mui/x-data-grid 5.11.1 → 5.12.0

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -21,37 +21,76 @@ export const rowsMetaStateInitializer = state => _extends({}, state, {
 
 export const useGridRowsMeta = (apiRef, props) => {
   const {
-    getRowHeight,
-    getRowSpacing
+    getRowHeight: getRowHeightProp,
+    getRowSpacing,
+    getEstimatedRowHeight
   } = props;
-  const rowsHeightLookup = React.useRef({});
-  const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
+  const rowsHeightLookup = React.useRef({}); // Inspired by https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/utils/CellSizeAndPositionManager.js
+
+  const lastMeasuredRowIndex = React.useRef(-1);
+  const hasRowWithAutoHeight = React.useRef(false);
+  const rowHeightFromDensity = useGridSelector(apiRef, gridDensityRowHeightSelector);
   const filterState = useGridSelector(apiRef, gridFilterStateSelector);
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
   const sortingState = useGridSelector(apiRef, gridSortingStateSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
   const hydrateRowsMeta = React.useCallback(() => {
+    hasRowWithAutoHeight.current = false;
     apiRef.current.setState(state => {
-      const positions = [];
       const densityFactor = gridDensityFactorSelector(state, apiRef.current.instanceId);
-      const currentRowHeight = gridDensityRowHeightSelector(state, apiRef.current.instanceId);
+      const positions = [];
       const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
         positions.push(acc);
-        let baseRowHeight;
-        const isResized = rowsHeightLookup.current[row.id] && rowsHeightLookup.current[row.id].isResized || false;
+
+        if (!rowsHeightLookup.current[row.id]) {
+          rowsHeightLookup.current[row.id] = {
+            sizes: {
+              base: rowHeightFromDensity
+            },
+            isResized: false,
+            autoHeight: false,
+            needsFirstMeasurement: true // Assume all rows will need to be measured by default
+
+          };
+        }
+
+        const {
+          isResized,
+          needsFirstMeasurement,
+          sizes
+        } = rowsHeightLookup.current[row.id];
+        let baseRowHeight = rowHeightFromDensity;
+        const existingBaseRowHeight = sizes.base;
 
         if (isResized) {
-          // do not recalculate resized row height and use the value from the lookup
-          baseRowHeight = rowsHeightLookup.current[row.id].value;
-        } else {
-          baseRowHeight = currentRowHeight;
+          // Do not recalculate resized row height and use the value from the lookup
+          baseRowHeight = existingBaseRowHeight;
+        } else if (getRowHeightProp) {
+          const rowHeightFromUser = getRowHeightProp(_extends({}, row, {
+            densityFactor
+          }));
+
+          if (rowHeightFromUser === 'auto') {
+            if (needsFirstMeasurement) {
+              const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight(_extends({}, row, {
+                densityFactor
+              })) : rowHeightFromDensity; // If the row was not measured yet use the estimated row height
 
-          if (getRowHeight) {
+              baseRowHeight = estimatedRowHeight ?? rowHeightFromDensity;
+            } else {
+              baseRowHeight = existingBaseRowHeight;
+            }
+
+            hasRowWithAutoHeight.current = true;
+            rowsHeightLookup.current[row.id].autoHeight = true;
+          } else {
             // Default back to base rowHeight if getRowHeight returns null or undefined.
-            baseRowHeight = getRowHeight(_extends({}, row, {
-              densityFactor
-            })) ?? currentRowHeight;
+            baseRowHeight = rowHeightFromUser ?? rowHeightFromDensity;
+            rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
+            rowsHeightLookup.current[row.id].autoHeight = false;
           }
+        } else {
+          rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
         } // We use an object to make simple to check if a height is already added or not
 
 
@@ -70,13 +109,9 @@ export const useGridRowsMeta = (apiRef, props) => {
           initialHeights.spacingBottom = spacing.bottom ?? 0;
         }
 
-        const sizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
-        const finalRowHeight = Object.values(sizes).reduce((acc2, value) => acc2 + value, 0);
-        rowsHeightLookup.current[row.id] = {
-          value: baseRowHeight,
-          sizes,
-          isResized
-        };
+        const processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
+        rowsHeightLookup.current[row.id].sizes = processedSizes;
+        const finalRowHeight = Object.values(processedSizes).reduce((acc2, value) => acc2 + value, 0);
         return acc + finalRowHeight;
       }, 0);
       return _extends({}, state, {
@@ -86,33 +121,66 @@ export const useGridRowsMeta = (apiRef, props) => {
         }
       });
     });
-    apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
 
-  const getTargetRowHeight = rowId => rowsHeightLookup.current[rowId]?.value || rowHeight;
+    if (!hasRowWithAutoHeight.current) {
+      // No row has height=auto, so all rows are already measured
+      lastMeasuredRowIndex.current = Infinity;
+    }
+
+    apiRef.current.forceUpdate();
+  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight]);
+  const getRowHeight = React.useCallback(rowId => {
+    const height = rowsHeightLookup.current[rowId];
+    return height ? height.sizes.base : rowHeightFromDensity;
+  }, [rowHeightFromDensity]);
 
   const getRowInternalSizes = rowId => rowsHeightLookup.current[rowId]?.sizes;
 
   const setRowHeight = React.useCallback((id, height) => {
-    rowsHeightLookup.current[id] = {
-      value: height,
-      isResized: true,
-      sizes: _extends({}, rowsHeightLookup.current[id].sizes, {
-        base: height
-      })
-    };
+    rowsHeightLookup.current[id].sizes.base = height;
+    rowsHeightLookup.current[id].isResized = true;
+    rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
-  }, [hydrateRowsMeta]); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
+  }, [hydrateRowsMeta]);
+  const storeMeasuredRowHeight = React.useCallback((id, height) => {
+    if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
+      return;
+    } // Only trigger hydration if the value is different, otherwise we trigger a loop
+
+
+    const needsHydration = rowsHeightLookup.current[id].sizes.base !== height;
+    rowsHeightLookup.current[id].needsFirstMeasurement = false;
+    rowsHeightLookup.current[id].sizes.base = height;
+
+    if (needsHydration) {
+      hydrateRowsMeta();
+    }
+  }, [hydrateRowsMeta]);
+  const rowHasAutoHeight = React.useCallback(id => {
+    return rowsHeightLookup.current[id]?.autoHeight || false;
+  }, []);
+  const getLastMeasuredRowIndex = React.useCallback(() => {
+    return lastMeasuredRowIndex.current;
+  }, []);
+  const setLastMeasuredRowIndex = React.useCallback(index => {
+    if (hasRowWithAutoHeight.current) {
+      lastMeasuredRowIndex.current = index;
+    }
+  }, []); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
   // Because of variable row height this is needed for the virtualization
 
   React.useEffect(() => {
     hydrateRowsMeta();
-  }, [rowHeight, filterState, paginationState, sortingState, hydrateRowsMeta]);
+  }, [rowHeightFromDensity, filterState, paginationState, sortingState, hydrateRowsMeta]);
   useGridRegisterPipeApplier(apiRef, 'rowHeight', hydrateRowsMeta);
   const rowsMetaApi = {
-    unstable_getRowHeight: getTargetRowHeight,
+    unstable_getLastMeasuredRowIndex: getLastMeasuredRowIndex,
+    unstable_setLastMeasuredRowIndex: setLastMeasuredRowIndex,
+    unstable_rowHasAutoHeight: rowHasAutoHeight,
+    unstable_getRowHeight: getRowHeight,
     unstable_getRowInternalSizes: getRowInternalSizes,
-    unstable_setRowHeight: setRowHeight
+    unstable_setRowHeight: setRowHeight,
+    unstable_storeRowHeightMeasurement: storeMeasuredRowHeight
   };
   useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');
 };

package/modern/hooks/features/virtualization/useGridVirtualScroller.js

@@ -87,17 +87,36 @@ export const useGridVirtualScroller = props => {
       top,
       left
     } = scrollPosition.current;
-    const firstRowIndex = getIndexFromScroll(top, rowsMeta.positions);
+    const firstRowIndex = Math.min(Math.max(0, apiRef.current.unstable_getLastMeasuredRowIndex()), 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);
+    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 = getIndexFromScroll(left, columnPositions);
+      lastColumnIndex = getIndexFromScroll(left + containerWidth, columnPositions);
+    }
+
     return {
       firstRowIndex,
       lastRowIndex,
       firstColumnIndex,
       lastColumnIndex
     };
-  }, [disableVirtualization, rowsMeta.positions, rootProps.autoHeight, currentPage.rows.length, columnPositions, containerWidth, visibleColumns.length]);
+  }, [disableVirtualization, rowsMeta.positions, 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 +247,8 @@ export const useGridVirtualScroller = props => {
       renderContext: nextRenderContext,
       minFirstColumn = renderZoneMinColumnIndex,
       maxLastColumn = renderZoneMaxColumnIndex,
-      availableSpace = containerWidth
+      availableSpace = containerWidth,
+      ignoreAutoHeight
     } = params;
 
     if (!currentPage.range || !nextRenderContext || availableSpace == null) {
@@ -279,7 +299,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) {
@@ -293,7 +313,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

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.11.1
+/** @license MUI v5.12.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/locales/heIL.js

@@ -21,15 +21,15 @@ const heILGrid = {
   toolbarFiltersTooltipShow: 'הצג מסננים',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} מסננים פעילים` : `מסנן אחד פעיל`,
   // Quick filter toolbar field
-  // toolbarQuickFilterPlaceholder: 'Search...',
-  // toolbarQuickFilterLabel: 'Search',
-  // toolbarQuickFilterDeleteIconLabel: 'Clear',
+  toolbarQuickFilterPlaceholder: 'חיפוש...',
+  toolbarQuickFilterLabel: 'חיפוש',
+  toolbarQuickFilterDeleteIconLabel: 'ניקוי',
   // Export selector toolbar button text
   toolbarExport: 'ייצוא',
   toolbarExportLabel: 'ייצוא',
-  toolbarExportCSV: 'הורדה כ- CSV',
+  toolbarExportCSV: 'ייצוא ל- CSV',
   toolbarExportPrint: 'הדפסה',
-  // toolbarExportExcel: 'Download as Excel',
+  toolbarExportExcel: 'ייצוא ל- Excel',
   // Columns panel text
   columnsPanelTextFieldLabel: 'חפש עמודה',
   columnsPanelTextFieldPlaceholder: 'כותרת עמודה',
@@ -39,7 +39,7 @@ const heILGrid = {
   // Filter panel text
   filterPanelAddFilter: 'הוסף מסנן',
   filterPanelDeleteIconLabel: 'מחק',
-  // filterPanelLinkOperator: 'Logic operator',
+  filterPanelLinkOperator: 'אופרטור לוגי',
   filterPanelOperators: 'אופרטור',
   // TODO v6: rename to filterPanelOperator
   filterPanelOperatorAnd: 'וגם',
@@ -108,8 +108,8 @@ const heILGrid = {
   unGroupColumn: name => `הפסק לקבץ לפי ${name}`,
   // Master/detail
   expandDetailPanel: 'הרחב',
-  collapseDetailPanel: 'כווץ' // Row reordering text
-  // rowReorderingHeaderName: 'Row reordering',
-
+  collapseDetailPanel: 'כווץ',
+  // Row reordering text
+  rowReorderingHeaderName: 'סידור שורות'
 };
 export const heIL = getGridLocalization(heILGrid, heILCore);

package/modern/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/modern/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/modern/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/modern/models/gridApiCaches.js

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

package/modern/models/params/gridMenuParams.js

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

package/modern/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/node/DataGrid/DataGrid.js

@@ -252,6 +252,15 @@ DataGridRaw.propTypes = {
    */
   getDetailPanelContent: _propTypes.default.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.default.func,
+
   /**
    * Function that applies CSS classes dynamically on rows.
    * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
@@ -262,7 +271,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.default.func,
 
@@ -529,6 +538,22 @@ DataGridRaw.propTypes = {
    */
   onFilterModelChange: _propTypes.default.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.default.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.default.func,
+
   /**
    * Callback fired when the current page has changed.
    * @param {number} page Index of the page displayed on the Grid.