@mui/x-data-grid 5.12.1 → 5.12.2

package/CHANGELOG.md

@@ -3,6 +3,49 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.12.2
+
+_Jun 16, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Performance improvement for dynamic row height (#5135) @m4theushw
+- 🕒 Add demo of how to use the data grid with date pickers (#5053) @cherniavskii
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.12.2` / `@mui/x-data-grid-pro@v5.12.2` / `@mui/x-data-grid-premium@v5.12.2`
+
+#### Changes
+
+- [DataGrid] Fix for cosmetic bug on column filter badge (#5170) @simbahandiane
+- [DataGrid] Hide vertical scrollbar if `autoHeight` is enabled (#5164) @m4theushw
+- [DataGrid] Use exponential search to render non-measured rows (#5135) @m4theushw
+- [DataGridPro] Fix label of the detail panel toggle column (#5191) @m4theushw
+- [DataGridPro] Refresh detail panel caches when props change (#5110) @m4theushw
+
+### Docs
+
+- [docs] Add example with custom checkbox column (#5161) @flaviendelangle
+- [docs] Batch small changes (#5177) @oliviertassinari
+- [docs] Fix demo currency format (#5034) @oliviertassinari
+- [docs] Fix outdated license description to match the EULA (#5219) @joserodolfofreitas
+- [docs] Fix redundant headers (#5104) @oliviertassinari
+- [docs] Fix some capitalization to match the guidelines (#5105) @oliviertassinari
+- [docs] Improve the `getRowId` doc section (#5156) @flaviendelangle
+- [docs] Instruction to deal with invalid license message (#5074) @joserodolfofreitas
+- [docs] Use redirection in the code (#5114) @oliviertassinari
+- [docs] Add demo of how to use the data grid with date pickers (#5053) @cherniavskii
+
+### Core
+
+- [core] Improve inline code rendering within the details tag (#5166) @Harmouch101
+- [core] Remove unused props from plugin typing (#5185) @flaviendelangle
+- [core] Use the scrollbar size from `useGridDimensions` on `DataGridProColumnHeaders` (#5201) @flaviendelangle
+- [core] Fix `GridColTypeDef` type (#5167) @cherniavskii
+- [core] Fix `GridColTypeDef` usage in demo (#5197) @cherniavskii
+- [test] Add `waitFor` before asserting height (#5203) @m4theushw
+
 ## v5.12.1
 
 _Jun 9, 2022_
@@ -4084,9 +4127,9 @@ Big thanks to the 8 contributors who made this release possible. Here are some h
 
 ### Docs
 
-- [docs] Data Grid depends on side effects (#666) @oliviertassinari
+- [docs] Data grid depends on side effects (#666) @oliviertassinari
 - [docs] Clarify the purpose of x-grid-data-generator (#634) @Elius94
-- [docs] Data Grid is in the lab (#612) @oliviertassinari
+- [docs] Data grid is in the lab (#612) @oliviertassinari
 - [docs] Fix Demo app, downgrade webpack-cli, known issue in latest version (#647) @dtassone
 - [docs] Fix typo in columns.md @stojy
 - [docs] Reduce confusion on /export page (#646) @SerdarMustafa1

package/colDef/gridCheckboxSelectionColDef.d.ts

@@ -1,2 +1,3 @@
 import { GridColDef } from '../models/colDef/gridColDef';
+export declare const GRID_CHECKBOX_SELECTION_FIELD = "__check__";
 export declare const GRID_CHECKBOX_SELECTION_COL_DEF: GridColDef;

package/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 const GRID_CHECKBOX_SELECTION_FIELD = '__check__';
 export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF, {
-  field: '__check__',
+  field: GRID_CHECKBOX_SELECTION_FIELD,
   type: 'checkboxSelection',
   width: 50,
   resizable: false,

package/colDef/gridDateOperators.d.ts

@@ -1,2 +1,2 @@
 import { GridFilterOperator } from '../models/gridFilterOperator';
-export declare const getGridDateOperators: (showTime?: boolean | undefined) => GridFilterOperator<any, string | number | Date, any>[];
+export declare const getGridDateOperators: (showTime?: boolean | undefined) => GridFilterOperator<any, string | Date, any>[];

package/colDef/gridNumericColDef.js

@@ -11,7 +11,7 @@ export const GRID_NUMERIC_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   valueParser: value => value === '' ? null : Number(value),
   valueFormatter: ({
     value
-  }) => value && isNumber(value) && value.toLocaleString() || value,
+  }) => isNumber(value) ? value.toLocaleString() : value || '',
   filterOperators: getGridNumericOperators(),
   getApplyQuickFilterFn: getGridNumericQuickFilterFn
 });

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -167,6 +167,7 @@ function GridColumnHeaderItem(props) {
     field: column.field,
     colDef: column
   }) : column.headerClassName;
+  const label = (_column$headerName = column.headerName) != null ? _column$headerName : column.field;
   return /*#__PURE__*/_jsxs("div", _extends({
     ref: headerCellRef,
     className: clsx(classes.root, headerClassName),
@@ -179,7 +180,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__*/_jsxs("div", _extends({
       className: classes.draggableContainer,
@@ -189,8 +191,8 @@ function GridColumnHeaderItem(props) {
         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/components/columnSelection/GridCellCheckboxRenderer.js

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

package/components/columnSelection/GridHeaderCheckbox.js

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

package/components/containers/GridRootStyles.js

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

package/components/panel/GridColumnsPanel.js

@@ -135,7 +135,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
@@ -152,13 +151,11 @@ export function GridColumnsPanel(props) {
       })
     }), /*#__PURE__*/_jsxs(GridPanelFooter, {
       children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
-        onClick: () => toggleAllColumns(false),
-        color: "primary"
+        onClick: () => toggleAllColumns(false)
       }, (_rootProps$components3 = rootProps.componentsProps) == null ? void 0 : _rootProps$components3.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
       })), /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
-        onClick: () => toggleAllColumns(true),
-        color: "primary"
+        onClick: () => toggleAllColumns(true)
       }, (_rootProps$components4 = rootProps.componentsProps) == null ? void 0 : _rootProps$components4.baseButton, {
         children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
       }))]

package/components/panel/filterPanel/GridFilterPanel.js

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

package/components/toolbar/GridToolbarColumnsButton.js

@@ -41,7 +41,6 @@ export const GridToolbarColumnsButton = /*#__PURE__*/React.forwardRef(function G
   return /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
     ref: ref,
     size: "small",
-    color: "primary",
     "aria-label": apiRef.current.getLocaleText('toolbarColumnsLabel'),
     startIcon: /*#__PURE__*/_jsx(rootProps.components.ColumnSelectorIcon, {})
   }, other, {

package/components/toolbar/GridToolbarDensitySelector.js

@@ -95,7 +95,6 @@ export const GridToolbarDensitySelector = /*#__PURE__*/React.forwardRef(function
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: startIcon,
       "aria-label": apiRef.current.getLocaleText('toolbarDensityLabel'),

package/components/toolbar/GridToolbarExportContainer.js

@@ -52,7 +52,6 @@ export const GridToolbarExportContainer = /*#__PURE__*/React.forwardRef(function
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: handleRef,
-      color: "primary",
       size: "small",
       startIcon: /*#__PURE__*/_jsx(rootProps.components.ExportIcon, {}),
       "aria-expanded": open ? 'true' : undefined,

package/components/toolbar/GridToolbarFilterButton.js

@@ -108,7 +108,6 @@ const GridToolbarFilterButton = /*#__PURE__*/React.forwardRef(function GridToolb
     children: /*#__PURE__*/_jsx(rootProps.components.BaseButton, _extends({
       ref: ref,
       size: "small",
-      color: "primary",
       "aria-label": apiRef.current.getLocaleText('toolbarFiltersLabel'),
       startIcon: /*#__PURE__*/_jsx(Badge, {
         badgeContent: activeFilters.length,

package/constants/localeTextConstants.js

@@ -105,6 +105,7 @@ export 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/hooks/features/columns/useGridColumnSpanning.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 /**
  * @requires useGridColumns (method, event)

package/hooks/features/columns/useGridColumnSpanning.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 

package/hooks/features/columns/useGridColumns.d.ts

@@ -8,4 +8,4 @@ export declare const columnsStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridDimensions (method, event) - can be after
  * TODO: Impossible priority - useGridParamsApi also needs to be after useGridColumns
  */
-export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'classes' | 'components' | 'componentsProps'>): void;
+export declare function useGridColumns(apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'columns' | 'onColumnVisibilityChange' | 'columnVisibilityModel' | 'onColumnVisibilityModelChange' | 'columnTypes' | 'components' | 'componentsProps'>): void;

package/hooks/features/dimensions/gridDimensionsApi.d.ts

@@ -16,6 +16,11 @@ export interface GridDimensions {
      * Indicates if a scroll is currently needed to go from the beginning of the first row to the end of the last row.
      */
     hasScrollY: boolean;
+    /**
+     * Size of the scrollbar used to scroll the rows in pixel.
+     * It is defined even when the scrollbar is currently not needed.
+     */
+    scrollBarSize: number;
 }
 export interface GridDimensionsApi {
     /**

package/hooks/features/dimensions/useGridDimensions.js

@@ -37,7 +37,7 @@ const hasScroll = ({
 
 export function useGridDimensions(apiRef, props) {
   const logger = 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 = useGridSelector(apiRef, gridRowsMetaSelector);
@@ -94,7 +94,8 @@ export function useGridDimensions(apiRef, props) {
       viewportOuterSize,
       viewportInnerSize,
       hasScrollX,
-      hasScrollY
+      hasScrollY,
+      scrollBarSize
     };
     const prevDimensions = fullDimensionsRef.current;
     fullDimensionsRef.current = newFullDimensions;
@@ -144,14 +145,14 @@ export 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/hooks/features/filter/gridFilterState.d.ts

@@ -19,7 +19,7 @@ export interface GridFilterState {
     /**
      * Amount of descendants that are passing the filters.
      * For the Tree Data, it includes all the intermediate depth levels (= amount of children + amount of grand children + ...).
-     * For the Row Grouping by Column, it does not include the intermediate depth levels (= amount of descendant of maximum depth).
+     * For the Row grouping by column, it does not include the intermediate depth levels (= amount of descendant of maximum depth).
      * If a row is not registered in this lookup, it is supposed to have no descendant passing the filters.
      */
     filteredDescendantCountLookup: Record<GridRowId, number>;

package/hooks/features/filter/useGridFilter.d.ts

@@ -8,4 +8,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'filterModel' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'components' | 'componentsProps'>) => void;
+export declare const useGridFilter: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'filterModel' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'components' | 'componentsProps'>) => void;

package/hooks/features/rows/useGridRowsMeta.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { debounce } from '@mui/material/utils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridSelector } from '../../utils/useGridSelector';
@@ -36,86 +37,86 @@ export const useGridRowsMeta = (apiRef, props) => {
   const currentPage = useGridVisibleRows(apiRef, props);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
-    apiRef.current.setState(state => {
-      const densityFactor = 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 = 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(_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
-
-              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(_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
+
+            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(_extends({}, 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(_extends({}, 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 _extends({}, state, {
         rowsMeta: {
           currentPageTotalHeight,
@@ -148,6 +149,7 @@ export const useGridRowsMeta = (apiRef, props) => {
     rowsHeightLookup.current[id].needsFirstMeasurement = false;
     hydrateRowsMeta();
   }, [hydrateRowsMeta]);
+  const debouncedHydrateRowsMeta = React.useMemo(() => debounce(hydrateRowsMeta), [hydrateRowsMeta]);
   const storeMeasuredRowHeight = React.useCallback((id, height) => {
     if (!rowsHeightLookup.current[id] || !rowsHeightLookup.current[id].autoHeight) {
       return;
@@ -159,9 +161,9 @@ export const useGridRowsMeta = (apiRef, props) => {
     rowsHeightLookup.current[id].sizes.base = height;
 
     if (needsHydration) {
-      hydrateRowsMeta();
+      debouncedHydrateRowsMeta();
     }
-  }, [hydrateRowsMeta]);
+  }, [debouncedHydrateRowsMeta]);
   const rowHasAutoHeight = React.useCallback(id => {
     var _rowsHeightLookup$cur2;
 
@@ -171,7 +173,7 @@ export 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/hooks/features/selection/useGridSelectionPreProcessors.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { getDataGridUtilityClass } from '../../../constants';
-import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef';
+import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_CHECKBOX_SELECTION_FIELD } from '../../../colDef';
 
 const useUtilityClasses = ownerState => {
   const {
@@ -31,14 +31,16 @@ export const useGridSelectionPreProcessors = (apiRef, props) => {
     });
 
     const shouldHaveSelectionColumn = props.checkboxSelection;
-    const haveSelectionColumn = columnsState.lookup[selectionColumn.field] != null;
+    const haveSelectionColumn = columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD] != null;
 
     if (shouldHaveSelectionColumn && !haveSelectionColumn) {
-      columnsState.lookup[selectionColumn.field] = selectionColumn;
-      columnsState.all = [selectionColumn.field, ...columnsState.all];
+      columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD] = selectionColumn;
+      columnsState.all = [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[GRID_CHECKBOX_SELECTION_FIELD];
+      columnsState.all = columnsState.all.filter(field => field !== GRID_CHECKBOX_SELECTION_FIELD);
+    } else if (shouldHaveSelectionColumn && haveSelectionColumn) {
+      columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD] = _extends({}, selectionColumn, columnsState.lookup[GRID_CHECKBOX_SELECTION_FIELD]);
     }
 
     return columnsState;

package/hooks/features/sorting/useGridSorting.d.ts

@@ -7,4 +7,4 @@ export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export declare const useGridSorting: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'sortModel' | 'onSortModelChange' | 'sortingOrder' | 'sortingMode' | 'disableMultipleColumnsSorting'>) => void;
+export declare const useGridSorting: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'sortModel' | 'onSortModelChange' | 'sortingOrder' | 'sortingMode' | 'disableMultipleColumnsSorting'>) => void;

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridRenderContext } from '../../../models';
 import { GridRowId, GridRowModel } from '../../../models/gridRows';
-export declare function getIndexFromScroll(offset: number, positions: number[], sliceStart?: number, sliceEnd?: number): number;
+export declare function binarySearch(offset: number, positions: number[], sliceStart?: number, sliceEnd?: number): number;
 export declare const getRenderableIndexes: ({ firstIndex, lastIndex, buffer, minFirstIndex, maxLastIndex, }: {
     firstIndex: number;
     lastIndex: number;