@mui/x-data-grid 5.12.1 → 5.12.2

package/modern/locales/jaJP.js

@@ -107,6 +107,7 @@ const jaJPGrid = {
   groupColumn: name => `${name}でグループ化`,
   unGroupColumn: name => `${name}のグループを解除`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: '展開',
   collapseDetailPanel: '折りたたみ',
   // Row reordering text

package/modern/locales/koKR.js

@@ -106,6 +106,7 @@ const koKRGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/modern/locales/nbNO.js

@@ -107,6 +107,7 @@ const nbNOGrid = {
   groupColumn: name => `Grupper på ${name}`,
   unGroupColumn: name => `Stopp å grupper på ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Utvid',
   collapseDetailPanel: 'Kollaps',
   // Row reordering text

package/modern/locales/nlNL.js

@@ -106,6 +106,7 @@ const nlNLGrid = {
   groupingColumnHeaderName: 'Groep',
   groupColumn: name => `Groepeer op ${name}`,
   unGroupColumn: name => `Stop groeperen op ${name}` // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/modern/locales/plPL.js

@@ -107,6 +107,7 @@ const plPLGrid = {
   groupColumn: name => `Grupuj według ${name}`,
   unGroupColumn: name => `Rozgrupuj ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Rozwiń',
   collapseDetailPanel: 'Zwiń' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/modern/locales/ptBR.js

@@ -107,6 +107,7 @@ const ptBRGrid = {
   groupColumn: name => `Agrupar por ${name}`,
   unGroupColumn: name => `Parar agrupamento por ${name}`,
   // Master/detail
+  detailPanelToggle: 'Painel de detalhes',
   expandDetailPanel: 'Expandir',
   collapseDetailPanel: 'Esconder' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/modern/locales/ruRU.js

@@ -140,6 +140,7 @@ const ruRUGrid = {
   groupColumn: name => `Сгруппировать по ${name}`,
   unGroupColumn: name => `Разгруппировать по ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Развернуть',
   collapseDetailPanel: 'Свернуть' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/modern/locales/skSK.js

@@ -141,6 +141,7 @@ const skSKGrid = {
   groupingColumnHeaderName: 'Skupina',
   groupColumn: name => `Zoskupiť podľa ${name}`,
   unGroupColumn: name => `Prestať zoskupovať podľa ${name}` // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/modern/locales/trTR.js

@@ -107,6 +107,7 @@ const trTRGrid = {
   groupColumn: name => `${name} için grupla`,
   unGroupColumn: name => `${name} için gruplamayı kaldır`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Genişlet',
   collapseDetailPanel: 'Gizle' // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',

package/modern/locales/ukUA.js

@@ -132,6 +132,7 @@ const ukUAGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/modern/locales/viVN.js

@@ -106,6 +106,7 @@ const viVNGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/modern/locales/zhCN.js

@@ -106,6 +106,7 @@ const zhCNGrid = {
   // groupColumn: name => `Group by ${name}`,
   // unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  // detailPanelToggle: 'Detail panel toggle',
   // expandDetailPanel: 'Expand',
   // collapseDetailPanel: 'Collapse',
   // Row reordering text

package/node/colDef/gridCheckboxSelectionColDef.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GRID_CHECKBOX_SELECTION_COL_DEF = void 0;
+exports.GRID_CHECKBOX_SELECTION_FIELD = exports.GRID_CHECKBOX_SELECTION_COL_DEF = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -25,8 +25,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
+exports.GRID_CHECKBOX_SELECTION_FIELD = GRID_CHECKBOX_SELECTION_FIELD;
 const GRID_CHECKBOX_SELECTION_COL_DEF = (0, _extends2.default)({}, _gridBooleanColDef.GRID_BOOLEAN_COL_DEF, {
-  field: '__check__',
+  field: GRID_CHECKBOX_SELECTION_FIELD,
   type: 'checkboxSelection',
   width: 50,
   resizable: false,

package/node/colDef/gridNumericColDef.js

@@ -25,7 +25,7 @@ const GRID_NUMERIC_COL_DEF = (0, _extends2.default)({}, _gridStringColDef.GRID_S
   valueParser: value => value === '' ? null : Number(value),
   valueFormatter: ({
     value
-  }) => value && (0, _utils.isNumber)(value) && value.toLocaleString() || value,
+  }) => (0, _utils.isNumber)(value) ? value.toLocaleString() : value || '',
   filterOperators: (0, _gridNumericOperators.getGridNumericOperators)(),
   getApplyQuickFilterFn: _gridNumericOperators.getGridNumericQuickFilterFn
 });

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -187,6 +187,7 @@ function GridColumnHeaderItem(props) {
     field: column.field,
     colDef: column
   }) : column.headerClassName;
+  const label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     ref: headerCellRef,
     className: (0, _clsx.default)(classes.root, headerClassName),
@@ -199,7 +200,8 @@ 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__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
       className: classes.draggableContainer,
@@ -209,8 +211,8 @@ function GridColumnHeaderItem(props) {
         className: classes.titleContainer,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: classes.titleContainerContent,
-          children: headerComponent || /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
-            label: (_column$headerName = column.headerName) != null ? _column$headerName : column.field,
+          children: column.renderHeader ? headerComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnHeaderTitle.GridColumnHeaderTitle, {
+            label: label,
             description: column.description,
             columnWidth: width
           })

package/node/components/columnSelection/GridCellCheckboxRenderer.js

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

package/node/components/columnSelection/GridHeaderCheckbox.js

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

package/node/components/containers/GridRootStyles.js

@@ -176,7 +176,7 @@ const GridRootStyles = (0, _styles.styled)('div', {
       minWidth: 0,
       flex: 1,
       whiteSpace: 'nowrap',
-      overflow: 'hidden'
+      overflowX: 'hidden'
     },
     [`& .${_gridClasses.gridClasses.columnHeaderTitleContainerContent}`]: {
       overflow: 'hidden',

package/node/components/panel/GridColumnsPanel.js

@@ -166,7 +166,6 @@ 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
@@ -183,13 +182,11 @@ function GridColumnsPanel(props) {
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridPanelFooter.GridPanelFooter, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
-        onClick: () => toggleAllColumns(false),
-        color: "primary"
+        onClick: () => toggleAllColumns(false)
       }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
-        onClick: () => toggleAllColumns(true),
-        color: "primary"
+        onClick: () => toggleAllColumns(true)
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]

package/node/components/panel/filterPanel/GridFilterPanel.js

@@ -140,8 +140,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
     }), !rootProps.disableMultipleColumnsFiltering && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPanelFooter.GridPanelFooter, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
         onClick: addNewFilter,
-        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridAddIcon, {}),
-        color: "primary"
+        startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.GridAddIcon, {})
       }, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
       }))

package/node/components/toolbar/GridToolbarColumnsButton.js

@@ -63,7 +63,6 @@ const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function GridTool
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
     ref: ref,
     size: "small",
-    color: "primary",
     "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
     startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ColumnSelectorIcon, {})
   }, other, {

package/node/components/toolbar/GridToolbarDensitySelector.js

@@ -123,7 +123,6 @@ const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function GridTo
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: startIcon,
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),

package/node/components/toolbar/GridToolbarExportContainer.js

@@ -75,7 +75,6 @@ const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function GridTo
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.ExportIcon, {}),
       "aria-expanded": open ? 'true' : undefined,

package/node/components/toolbar/GridToolbarFilterButton.js

@@ -136,7 +136,6 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseButton, (0, _extends2.default)({
       ref: ref,
       size: "small",
-      color: "primary",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
       startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
         badgeContent: activeFilters.length,

package/node/constants/localeTextConstants.js

@@ -111,6 +111,7 @@ const GRID_DEFAULT_LOCALE_TEXT = {
   groupColumn: name => `Group by ${name}`,
   unGroupColumn: name => `Stop grouping by ${name}`,
   // Master/detail
+  detailPanelToggle: 'Detail panel toggle',
   expandDetailPanel: 'Expand',
   collapseDetailPanel: 'Collapse',
   // Used core components translation keys

package/node/hooks/features/columns/useGridColumnSpanning.js

@@ -1,26 +1,27 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridColumnSpanning = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var React = _interopRequireWildcard(require("react"));
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
 
 var _useGridApiEventHandler = require("../../utils/useGridApiEventHandler");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * @requires useGridColumns (method, event)
  * @requires useGridParamsApi (method)
  */
 const useGridColumnSpanning = apiRef => {
-  const lookup = _react.default.useRef({});
-
-  const setCellColSpanInfo = _react.default.useCallback((rowId, columnIndex, cellColSpanInfo) => {
+  const lookup = React.useRef({});
+  const setCellColSpanInfo = React.useCallback((rowId, columnIndex, cellColSpanInfo) => {
     const sizes = lookup.current;
 
     if (!sizes[rowId]) {
@@ -29,15 +30,13 @@ const useGridColumnSpanning = apiRef => {
 
     sizes[rowId][columnIndex] = cellColSpanInfo;
   }, []);
-
-  const getCellColSpanInfo = _react.default.useCallback((rowId, columnIndex) => {
+  const getCellColSpanInfo = React.useCallback((rowId, columnIndex) => {
     var _lookup$current$rowId;
 
     return (_lookup$current$rowId = lookup.current[rowId]) == null ? void 0 : _lookup$current$rowId[columnIndex];
   }, []); // Calculate `colSpan` for the cell.
 
-
-  const calculateCellColSpan = _react.default.useCallback(params => {
+  const calculateCellColSpan = React.useCallback(params => {
     const {
       columnIndex,
       rowId,
@@ -91,8 +90,7 @@ const useGridColumnSpanning = apiRef => {
     };
   }, [apiRef, setCellColSpanInfo]); // Calculate `colSpan` for each cell in the row
 
-
-  const calculateColSpan = _react.default.useCallback(({
+  const calculateColSpan = React.useCallback(({
     rowId,
     minFirstColumn,
     maxLastColumn
@@ -110,18 +108,15 @@ const useGridColumnSpanning = apiRef => {
       }
     }
   }, [calculateCellColSpan]);
-
   const columnSpanningApi = {
     unstable_getCellColSpanInfo: getCellColSpanInfo,
     unstable_calculateColSpan: calculateColSpan
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, columnSpanningApi, 'GridColumnSpanningAPI');
-
-  const handleColumnReorderChange = _react.default.useCallback(() => {
+  const handleColumnReorderChange = React.useCallback(() => {
     // `colSpan` needs to be recalculated after column reordering
     lookup.current = {};
   }, []);
-
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnOrderChange', handleColumnReorderChange);
 };
 

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -58,7 +58,7 @@ const hasScroll = ({
 
 function useGridDimensions(apiRef, props) {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useResizeContainer');
-  const warningShown = React.useRef(false);
+  const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(null);
   const fullDimensionsRef = React.useRef(null);
   const rowsMeta = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
@@ -115,7 +115,8 @@ function useGridDimensions(apiRef, props) {
       viewportOuterSize,
       viewportInnerSize,
       hasScrollX,
-      hasScrollY
+      hasScrollY,
+      scrollBarSize
     };
     const prevDimensions = fullDimensionsRef.current;
     fullDimensionsRef.current = newFullDimensions;
@@ -165,14 +166,14 @@ function useGridDimensions(apiRef, props) {
 
     const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
-    if (size.height === 0 && !warningShown.current && !props.autoHeight && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty height.', 'You need to make sure the container has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
-      warningShown.current = true;
+    if (size.height === 0 && !errorShown.current && !props.autoHeight && !isJSDOM) {
+      logger.error(['The parent DOM element of the data grid has an empty height.', 'Please make sure that this element has an intrinsic height.', 'The grid displays with a height of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      errorShown.current = true;
     }
 
-    if (size.width === 0 && !warningShown.current && !isJSDOM) {
-      logger.warn(['The parent of the grid has an empty width.', 'You need to make sure the container has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'You can find a solution in the docs:', 'https://mui.com/x/react-data-grid/layout/'].join('\n'));
-      warningShown.current = true;
+    if (size.width === 0 && !errorShown.current && !isJSDOM) {
+      logger.error(['The parent DOM element of the data grid has an empty width.', 'Please make sure that this element has an intrinsic width.', 'The grid displays with a width of 0px.', '', 'More details: https://mui.com/r/x-data-grid-no-dimensions.'].join('\n'));
+      errorShown.current = true;
     }
 
     if (isTestEnvironment) {

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

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
+var _utils = require("@mui/material/utils");
+
 var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
 var _useGridApiMethod = require("../../utils/useGridApiMethod");
@@ -62,86 +64,86 @@ const useGridRowsMeta = (apiRef, props) => {
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
-    apiRef.current.setState(state => {
-      const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(state, apiRef.current.instanceId);
-      const positions = [];
-      const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
-        positions.push(acc);
-
-        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 densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef.current.state, apiRef.current.instanceId);
+    const positions = [];
+    const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
+      positions.push(acc);
+
+      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 = existingBaseRowHeight;
-        } else if (getRowHeightProp) {
-          const rowHeightFromUser = getRowHeightProp((0, _extends2.default)({}, row, {
-            densityFactor
-          }));
-
-          if (rowHeightFromUser === 'auto') {
-            if (needsFirstMeasurement) {
-              const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight((0, _extends2.default)({}, row, {
-                densityFactor
-              })) : rowHeightFromDensity; // If the row was not measured yet use the estimated row height
-
-              baseRowHeight = estimatedRowHeight != null ? estimatedRowHeight : rowHeightFromDensity;
-            } else {
-              baseRowHeight = existingBaseRowHeight;
-            }
-
-            hasRowWithAutoHeight.current = true;
-            rowsHeightLookup.current[row.id].autoHeight = true;
+        };
+      }
+
+      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 = existingBaseRowHeight;
+      } else if (getRowHeightProp) {
+        const rowHeightFromUser = getRowHeightProp((0, _extends2.default)({}, row, {
+          densityFactor
+        }));
+
+        if (rowHeightFromUser === 'auto') {
+          if (needsFirstMeasurement) {
+            const estimatedRowHeight = getEstimatedRowHeight ? getEstimatedRowHeight((0, _extends2.default)({}, row, {
+              densityFactor
+            })) : rowHeightFromDensity; // If the row was not measured yet use the estimated row height
+
+            baseRowHeight = estimatedRowHeight != null ? estimatedRowHeight : rowHeightFromDensity;
           } else {
-            // Default back to base rowHeight if getRowHeight returns null or undefined.
-            baseRowHeight = rowHeightFromUser != null ? rowHeightFromUser : rowHeightFromDensity;
-            rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
-            rowsHeightLookup.current[row.id].autoHeight = false;
+            baseRowHeight = existingBaseRowHeight;
           }
+
+          hasRowWithAutoHeight.current = true;
+          rowsHeightLookup.current[row.id].autoHeight = true;
         } else {
+          // Default back to base rowHeight if getRowHeight returns null or undefined.
+          baseRowHeight = rowHeightFromUser != null ? rowHeightFromUser : rowHeightFromDensity;
           rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
-        } // We use an object to make simple to check if a height is already added or not
-
-
-        const initialHeights = {
-          base: baseRowHeight
-        };
-
-        if (getRowSpacing) {
-          var _spacing$top, _spacing$bottom;
-
-          const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
-          const spacing = getRowSpacing((0, _extends2.default)({}, row, {
-            isFirstVisible: indexRelativeToCurrentPage === 0,
-            isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
-            indexRelativeToCurrentPage
-          }));
-          initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
-          initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
+          rowsHeightLookup.current[row.id].autoHeight = false;
         }
-
-        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);
+      } else {
+        rowsHeightLookup.current[row.id].needsFirstMeasurement = false;
+      } // We use an object to make simple to check if a height is already added or not
+
+
+      const initialHeights = {
+        base: baseRowHeight
+      };
+
+      if (getRowSpacing) {
+        var _spacing$top, _spacing$bottom;
+
+        const indexRelativeToCurrentPage = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+        const spacing = getRowSpacing((0, _extends2.default)({}, row, {
+          isFirstVisible: indexRelativeToCurrentPage === 0,
+          isLastVisible: indexRelativeToCurrentPage === currentPage.rows.length - 1,
+          indexRelativeToCurrentPage
+        }));
+        initialHeights.spacingTop = (_spacing$top = spacing.top) != null ? _spacing$top : 0;
+        initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _spacing$bottom : 0;
+      }
+
+      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);
+    apiRef.current.setState(state => {
       return (0, _extends2.default)({}, state, {
         rowsMeta: {
           currentPageTotalHeight,
@@ -174,6 +176,7 @@ const useGridRowsMeta = (apiRef, props) => {
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
+  const debouncedHydrateRowsMeta = React.useMemo(() => (0, _utils.debounce)(hydrateRowsMeta), [hydrateRowsMeta]);
   const storeMeasuredRowHeight = React.useCallback((id, height) => {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;
@@ -185,9 +188,9 @@ const useGridRowsMeta = (apiRef, props) => {
     rowsHeightLookup.current[id].sizes.base = height;
 
     if (needsHydration) {
-      hydrateRowsMeta();
+      debouncedHydrateRowsMeta();
     }
-  }, [hydrateRowsMeta]);
+  }, [debouncedHydrateRowsMeta]);
   const rowHasAutoHeight = React.useCallback(id => {
     var _rowsHeightLookup$cur2;
 
@@ -197,7 +200,7 @@ const useGridRowsMeta = (apiRef, props) => {
     return lastMeasuredRowIndex.current;
   }, []);
   const setLastMeasuredRowIndex = React.useCallback(index => {
-    if (hasRowWithAutoHeight.current) {
+    if (hasRowWithAutoHeight.current && index > lastMeasuredRowIndex.current) {
       lastMeasuredRowIndex.current = index;
     }
   }, []); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.

package/node/hooks/features/selection/useGridSelectionPreProcessors.js

@@ -48,14 +48,16 @@ const useGridSelectionPreProcessors = (apiRef, props) => {
       headerName: apiRef.current.getLocaleText('checkboxSelectionHeaderName')
     });
     const shouldHaveSelectionColumn = props.checkboxSelection;
-    const haveSelectionColumn = columnsState.lookup[selectionColumn.field] != null;
+    const haveSelectionColumn = columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD] != null;
 
     if (shouldHaveSelectionColumn && !haveSelectionColumn) {
-      columnsState.lookup[selectionColumn.field] = selectionColumn;
-      columnsState.all = [selectionColumn.field, ...columnsState.all];
+      columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD] = selectionColumn;
+      columnsState.all = [_colDef.GRID_CHECKBOX_SELECTION_FIELD, ...columnsState.all];
     } else if (!shouldHaveSelectionColumn && haveSelectionColumn) {
-      delete columnsState.lookup[selectionColumn.field];
-      columnsState.all = columnsState.all.filter(field => field !== selectionColumn.field);
+      delete columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD];
+      columnsState.all = columnsState.all.filter(field => field !== _colDef.GRID_CHECKBOX_SELECTION_FIELD);
+    } else if (shouldHaveSelectionColumn && haveSelectionColumn) {
+      columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD] = (0, _extends2.default)({}, selectionColumn, columnsState.lookup[_colDef.GRID_CHECKBOX_SELECTION_FIELD]);
     }
 
     return columnsState;