@mui/x-data-grid 5.6.0 → 5.6.1

package/modern/hooks/features/columns/gridColumnsSelector.js

@@ -1,11 +1,12 @@
 import { createSelector } from '../../../utils/createSelector';
-
+import { wrapWithWarningOnCall } from '../../../utils/warning';
 /**
  * @category Columns
  * @deprecated Use the selector returning exactly the value you are looking for.
  * @ignore - do not document.
  * TODO v6: Rename `gridColumnsStateSelector`
  */
+
 export const gridColumnsSelector = state => state.columns;
 /**
  * Get the field of each column.
@@ -98,50 +99,50 @@ export const gridFilterableColumnLookupSelector = createSelector(gridColumnDefin
  * @ignore - do not document.
  */
 
-export const allGridColumnsFieldsSelector = gridColumnFieldsSelector;
+export const allGridColumnsFieldsSelector = wrapWithWarningOnCall(gridColumnFieldsSelector, ['MUI: The method allGridColumnsFieldsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnFieldsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export const allGridColumnsSelector = gridColumnDefinitionsSelector;
+export const allGridColumnsSelector = wrapWithWarningOnCall(gridColumnDefinitionsSelector, ['MUI: The method allGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridColumnDefinitionsSelector instead']);
 /**
  * @category Visible Columns
  * @deprecated Use `gridVisibleColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export const visibleGridColumnsSelector = gridVisibleColumnDefinitionsSelector;
+export const visibleGridColumnsSelector = wrapWithWarningOnCall(gridVisibleColumnDefinitionsSelector, ['MUI: The method visibleGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridVisibleColumnDefinitionsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export const filterableGridColumnsSelector = gridFilterableColumnDefinitionsSelector;
+export const filterableGridColumnsSelector = wrapWithWarningOnCall(gridFilterableColumnDefinitionsSelector, ['MUI: The method filterableGridColumnsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead']);
 /**
  * @category Columns
  * @deprecated Use `gridFilterableColumnLookupSelector` instead (not the same return format).
  * @ignore - do not document.
  */
 
-export const filterableGridColumnsIdsSelector = createSelector(gridFilterableColumnDefinitionsSelector, columns => columns.map(col => col.field));
+export const filterableGridColumnsIdsSelector = wrapWithWarningOnCall(createSelector(gridFilterableColumnDefinitionsSelector, columns => columns.map(col => col.field)), ['MUI: The method filterableGridColumnsIdsSelector is deprecated and will be removed in the next major version.', 'Use gridFilterableColumnDefinitionsSelector instead.', 'The return format is now a lookup, if you want to get the same output as before, use the following code:', '', 'const lookup = gridFilterableColumnLookupSelector(apiRef);', 'const fields = gridColumnFieldsSelector(apiRef).filter(field => lookup[field]);']);
 /**
  * Get the amount of visible columns.
  * @category Visible Columns
- * @deprecated Use the length of `gridVisibleColumnDefinitionsSelector` instead.
+ * @deprecated Use the length of the array returned by `gridVisibleColumnDefinitionsSelector` instead.
  * @ignore - do not document.
  */
 
-export const visibleGridColumnsLengthSelector = createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.length);
+export const visibleGridColumnsLengthSelector = wrapWithWarningOnCall(createSelector(gridVisibleColumnDefinitionsSelector, visibleColumns => visibleColumns.length), ['MUI: The method visibleGridColumnsLengthSelector is deprecated and will be removed in the next major version.', 'Use the length of the array returned by gridVisibleColumnDefinitionsSelector instead.']);
 /**
  * @category Visible Columns
  * @deprecated Use `gridColumnsTotalWidthSelector` or `gridColumnPositionsSelector` instead.
  * @ignore - do not document.
  */
 
-export const gridColumnsMetaSelector = createSelector(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, (positions, totalWidth) => ({
+export const gridColumnsMetaSelector = wrapWithWarningOnCall(createSelector(gridColumnPositionsSelector, gridColumnsTotalWidthSelector, (positions, totalWidth) => ({
   totalWidth,
   positions
-}));
+})), ['MUI: The method gridColumnsMetaSelector is deprecated and will be removed in the next major version.', 'Use gridColumnsTotalWidthSelector or gridColumnPositionsSelector instead']);

package/modern/hooks/features/columns/gridColumnsUtils.js

@@ -3,12 +3,14 @@ import { DEFAULT_GRID_COL_TYPE_KEY, getGridDefaultColumnTypes } from '../../../m
 import { gridColumnsSelector, gridColumnVisibilityModelSelector } from './gridColumnsSelector';
 import { clamp } from '../../../utils/utils';
 export const computeColumnTypes = (customColumnTypes = {}) => {
-  const allColumnTypes = _extends({}, getGridDefaultColumnTypes(), customColumnTypes);
+  const mergedColumnTypes = _extends({}, getGridDefaultColumnTypes());
 
-  const mergedColumnTypes = {};
-  Object.entries(allColumnTypes).forEach(([colType, colTypeDef]) => {
-    colTypeDef = _extends({}, allColumnTypes[colTypeDef.extendType || DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
-    mergedColumnTypes[colType] = colTypeDef;
+  Object.entries(customColumnTypes).forEach(([colType, colTypeDef]) => {
+    if (mergedColumnTypes[colType]) {
+      mergedColumnTypes[colType] = _extends({}, mergedColumnTypes[colType], colTypeDef);
+    } else {
+      mergedColumnTypes[colType] = _extends({}, mergedColumnTypes[colTypeDef.extendType || DEFAULT_GRID_COL_TYPE_KEY], colTypeDef);
+    }
   });
   return mergedColumnTypes;
 };

package/modern/hooks/features/density/useGridDensity.js

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { GridDensityTypes } from '../../../models/gridDensity';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
-import { useGridStateInit } from '../../utils/useGridStateInit';
 import { gridDensitySelector } from './densitySelector';
 import { isDeepEqual } from '../../../utils/utils';
 export const COMPACT_DENSITY_FACTOR = 0.7;
@@ -37,11 +36,11 @@ const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight) => {
   }
 };
 
+export const densityStateInitializer = (state, props) => _extends({}, state, {
+  density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight)
+});
 export const useGridDensity = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useDensity');
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight)
-  }));
   const setDensity = React.useCallback((newDensity, newHeaderHeight = props.headerHeight, newRowHeight = props.rowHeight) => {
     logger.debug(`Set grid density to ${newDensity}`);
     apiRef.current.setState(state => {

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

@@ -7,7 +7,7 @@ import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector } from '../columns';
 import { gridDensityHeaderHeightSelector, gridDensityRowHeightSelector } from '../density';
 import { useGridSelector } from '../../utils';
-import { getCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
 const isTestEnvironment = process.env.NODE_ENV === 'test';
 
@@ -114,7 +114,7 @@ export function useGridDimensions(apiRef, props) {
       return 0;
     }
 
-    const currentPage = getCurrentPageRows(apiRef, {
+    const currentPage = getVisibleRows(apiRef, {
       pagination: props.pagination,
       paginationMode: props.paginationMode
     }); // TODO: Use a combination of scrollTop, dimensions.viewportInnerSize.height and rowsMeta.possitions

package/modern/hooks/features/editRows/useGridEditing.js

@@ -5,10 +5,12 @@ import { GridCellModes } from '../../../models/gridEditRowModel';
 import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { useGridStateInit } from '../../utils/useGridStateInit';
 import { gridEditRowsStateSelector } from './gridEditRowsSelector';
 import { useCellEditing } from './useGridCellEditing';
 import { useGridRowEditing } from './useGridRowEditing';
+export const editingStateInitializer = state => _extends({}, state, {
+  editRows: {}
+});
 /**
  * @requires useGridFocus - can be after, async only
  * @requires useGridParamsApi (method)
@@ -19,9 +21,6 @@ export function useGridEditing(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useGridEditRows');
   useCellEditing(apiRef, props);
   useGridRowEditing(apiRef, props);
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    editRows: {}
-  }));
   const debounceMap = React.useRef({});
   apiRef.current.unstable_updateControlState({
     stateId: 'editRows',

package/modern/hooks/features/export/serializers/csvSerializer.js

@@ -1,4 +1,5 @@
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../../colDef';
+import { buildWarning } from '../../../../utils/warning';
 
 const serialiseCellValue = (value, delimiterCharacter) => {
   if (typeof value === 'string') {
@@ -14,15 +15,14 @@ const serialiseCellValue = (value, delimiterCharacter) => {
   return value;
 };
 
-let warnedOnce = false;
+const objectFormattedValueWarning = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
 
 const serialiseRow = (id, columns, getCellParams, delimiterCharacter) => columns.map(column => {
   const cellParams = getCellParams(id, column.field);
 
   if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnce && String(cellParams.formattedValue) === '[object Object]') {
-      console.warn(['MUI: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.'].join('\n'));
-      warnedOnce = true;
+    if (String(cellParams.formattedValue) === '[object Object]') {
+      objectFormattedValueWarning();
     }
   }
 

package/modern/hooks/features/filter/gridFilterSelector.js

@@ -63,6 +63,7 @@ export const gridFilteredSortedRowIdsSelector = createSelector(gridFilteredSorte
  * @category Filtering
  * @deprecated Use `gridVisibleSortedRowIdsSelector` instead
  * @ignore - do not document.
+ * TODO: Add deprecation warning once we have the new selectors without the "visible" keyword.
  */
 
 export const gridVisibleRowsSelector = gridVisibleSortedRowIdsSelector;

package/modern/hooks/features/focus/useGridFocus.js

@@ -6,8 +6,17 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
-import { useGridStateInit } from '../../utils/useGridStateInit';
 import { gridFocusCellSelector } from './gridFocusStateSelector';
+export const focusStateInitializer = state => _extends({}, state, {
+  focus: {
+    cell: null,
+    columnHeader: null
+  },
+  tabIndex: {
+    cell: null,
+    columnHeader: null
+  }
+});
 /**
  * @requires useGridParamsApi (method)
  * @requires useGridRows (method)
@@ -16,16 +25,6 @@ import { gridFocusCellSelector } from './gridFocusStateSelector';
 
 export const useGridFocus = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridFocus');
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    focus: {
-      cell: null,
-      columnHeader: null
-    },
-    tabIndex: {
-      cell: null,
-      columnHeader: null
-    }
-  }));
   const lastClickedCell = React.useRef(null);
   const setCellFocus = React.useCallback((id, field) => {
     // The row might have been deleted

package/modern/hooks/features/keyboard/useGridKeyboardNavigation.js

@@ -4,7 +4,7 @@ import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSele
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { gridVisibleSortedRowEntriesSelector } from '../filter/gridFilterSelector';
-import { useCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef';
 import { gridClasses } from '../../../constants/gridClasses';
 /**
@@ -21,7 +21,7 @@ import { gridClasses } from '../../../constants/gridClasses';
 
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
-  const currentPage = useCurrentPageRows(apiRef, props);
+  const currentPage = useGridVisibleRows(apiRef, props);
   const goToCell = React.useCallback((colIndex, rowIndex) => {
     logger.debug(`Navigating to cell row ${rowIndex}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({

package/modern/hooks/features/pagination/useGridPage.js

@@ -6,8 +6,7 @@ import { gridVisibleTopLevelRowCountSelector } from '../filter';
 import { gridPageSelector } from './gridPaginationSelector';
 import { useGridRegisterPreProcessor } from '../../core/preProcessing';
 import { buildWarning } from '../../../utils/warning';
-
-const getPageCount = (rowCount, pageSize) => {
+export const getPageCount = (rowCount, pageSize) => {
   if (pageSize > 0 && rowCount > 0) {
     return Math.ceil(rowCount / pageSize);
   }
@@ -32,13 +31,6 @@ const mergeStateWithPage = page => state => _extends({}, state, {
 });
 
 const noRowCountInServerMode = buildWarning(["MUI: the 'rowCount' prop is undefined while using paginationMode='server'", 'For more detail, see http://mui.com/components/data-grid/pagination/#basic-implementation'], 'error');
-export const pageStateInitializer = (state, props) => _extends({}, state, {
-  pagination: _extends({}, state.pagination, {
-    page: props.page ?? props.initialState?.pagination?.page ?? 0,
-    pageCount: getPageCount(props.rowCount ?? 0, state.pagination.pageSize),
-    rowCount: props.rowCount ?? 0
-  })
-});
 /**
  * @requires useGridPageSize (event)
  */

package/modern/hooks/features/pagination/useGridPageSize.js

@@ -5,26 +5,7 @@ import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelecto
 import { gridPageSizeSelector } from './gridPaginationSelector';
 import { gridDensityRowHeightSelector } from '../density';
 import { useGridRegisterPreProcessor } from '../../core/preProcessing';
-
-const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
-
-export const pageSizeStateInitializer = (state, props) => {
-  let pageSize;
-
-  if (props.pageSize != null) {
-    pageSize = props.pageSize;
-  } else if (props.initialState?.pagination?.pageSize != null) {
-    pageSize = props.initialState.pagination.pageSize;
-  } else {
-    pageSize = defaultPageSize(props.autoPageSize);
-  }
-
-  return _extends({}, state, {
-    pagination: {
-      pageSize
-    }
-  });
-};
+export const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
 
 const mergeStateWithPageSize = pageSize => state => _extends({}, state, {
   pagination: _extends({}, state.pagination, {

package/modern/hooks/features/pagination/useGridPagination.js

@@ -1,5 +1,26 @@
-import { useGridPageSize } from './useGridPageSize';
-import { useGridPage } from './useGridPage';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useGridPageSize, defaultPageSize } from './useGridPageSize';
+import { useGridPage, getPageCount } from './useGridPage';
+export const paginationStateInitializer = (state, props) => {
+  let pageSize;
+
+  if (props.pageSize != null) {
+    pageSize = props.pageSize;
+  } else if (props.initialState?.pagination?.pageSize != null) {
+    pageSize = props.initialState.pagination.pageSize;
+  } else {
+    pageSize = defaultPageSize(props.autoPageSize);
+  }
+
+  return _extends({}, state, {
+    pagination: {
+      pageSize,
+      page: props.page ?? props.initialState?.pagination?.page ?? 0,
+      pageCount: getPageCount(props.rowCount ?? 0, pageSize),
+      rowCount: props.rowCount ?? 0
+    }
+  });
+};
 /**
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after

package/modern/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -2,20 +2,19 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { useGridStateInit } from '../../utils/useGridStateInit';
 import { useGridRegisterPreProcessor } from '../../core/preProcessing';
 import { gridPreferencePanelStateSelector } from './gridPreferencePanelSelector';
+export const preferencePanelStateInitializer = (state, props) => _extends({}, state, {
+  preferencePanel: props.initialState?.preferencePanel ?? {
+    open: false
+  }
+});
 /**
  * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
  */
 
-export const useGridPreferencesPanel = (apiRef, props) => {
+export const useGridPreferencesPanel = apiRef => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    preferencePanel: props.initialState?.preferencePanel ?? {
-      open: false
-    }
-  }));
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
   /**

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { getGridCellElement, getGridColumnHeaderElement, getGridRowElement } from '../../../utils/domUtils';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
+import { buildWarning } from '../../../utils/warning';
 let warnedOnceMissingColumn = false;
 
 function warnMissingColumn(field) {
@@ -9,12 +10,7 @@ function warnMissingColumn(field) {
   warnedOnceMissingColumn = true;
 }
 
-let warnedOnceGetValue = false;
-
-function warnGetValue() {
-  console.warn([`MUI: You are calling getValue. This method is deprecated and will be removed in the next major version.`, `Instead, you can access the data from \`params.row}\`.`].join('\n'));
-  warnedOnceGetValue = true;
-}
+const getCellValueWarning = buildWarning([`MUI: You are calling getValue. This method is deprecated and will be removed in the next major version.`, 'Instead, you can access the data from `params.row`.']);
 /**
  * @requires useGridColumns (method)
  * @requires useGridRows (method)
@@ -24,7 +20,6 @@ function warnGetValue() {
  * TODO: Impossible priority - useGridFocus also needs to be after useGridParamsApi
  */
 
-
 export function useGridParamsApi(apiRef) {
   const getColumnHeaderParams = React.useCallback(field => ({
     field,
@@ -36,9 +31,7 @@ export function useGridParamsApi(apiRef) {
 
   const getCellValueWithDeprecationWarning = React.useCallback((...args) => {
     if (process.env.NODE_ENV !== 'production') {
-      if (!warnedOnceGetValue) {
-        warnGetValue();
-      }
+      getCellValueWarning();
     }
 
     return apiRef.current.getCellValue(...args);

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

@@ -6,6 +6,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowIdsSelector } from './gridRowsSelector';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 
 function getGridRowId(rowModel, getRowId, detailErrorMessage) {
   const id = getRowId ? getRowId(rowModel) : rowModel.id;
@@ -50,12 +51,10 @@ const getRowsStateFromCache = (rowsCache, previousTree, apiRef, rowCountProp) =>
   const groupingResponse = apiRef.current.unstable_groupRows(_extends({}, value, {
     previousTree
   }));
-  const dataTopLevelRowCount = Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
-  const totalRowCount = rowCount > groupingResponse.ids.length ? rowCount : groupingResponse.ids.length;
-  const totalTopLevelRowCount = rowCount > dataTopLevelRowCount ? rowCount : dataTopLevelRowCount;
+  const dataTopLevelRowCount = groupingResponse.treeDepth === 1 ? groupingResponse.ids.length : Object.values(groupingResponse.tree).filter(node => node.parent == null).length;
   return _extends({}, groupingResponse, {
-    totalRowCount,
-    totalTopLevelRowCount
+    totalRowCount: Math.max(rowCount, groupingResponse.ids.length),
+    totalTopLevelRowCount: Math.max(rowCount, dataTopLevelRowCount)
   });
 };
 
@@ -94,7 +93,15 @@ export const useGridRows = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRows');
   const rowsCache = React.useRef(apiRef.current.state.rowsCache); // To avoid listing rowsCache as useEffect dep
 
+  const currentPage = useGridVisibleRows(apiRef, props);
   const getRow = React.useCallback(id => gridRowsLookupSelector(apiRef)[id] ?? null, [apiRef]);
+  const lookup = React.useMemo(() => currentPage.rows.reduce((acc, {
+    id
+  }, index) => {
+    acc[id] = index;
+    return acc;
+  }, {}), [currentPage.rows]);
+  const getRowIndexRelativeToVisibleRows = React.useCallback(id => lookup[id], [lookup]);
   const throttledRowsChange = React.useCallback((newState, throttle) => {
     const run = () => {
       rowsCache.current.timeout = null;
@@ -276,7 +283,8 @@ export const useGridRows = (apiRef, props) => {
     setRows,
     updateRows,
     setRowChildrenExpansion,
-    getRowNode
+    getRowNode,
+    getRowIndexRelativeToVisibleRows
   };
   useGridApiMethod(apiRef, rowApi, 'GridRowApi');
 };

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

@@ -1,15 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { getCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridDensityRowHeightSelector, gridDensityFactorSelector } from '../density/densitySelector';
 import { gridFilterStateSelector } from '../filter/gridFilterSelector';
 import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
 import { gridSortingStateSelector } from '../sorting/gridSortingSelector';
-import { useGridStateInit } from '../../utils/useGridStateInit';
 import { GridEvents } from '../../../models/events/gridEvents';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
+export const rowsMetaStateInitializer = state => _extends({}, state, {
+  rowsMeta: {
+    currentPageTotalHeight: 0,
+    positions: []
+  }
+});
 /**
  * @requires useGridPageSize (method)
  * @requires useGridPage (method)
@@ -18,32 +23,20 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 export const useGridRowsMeta = (apiRef, props) => {
   const {
     getRowHeight,
-    pagination,
-    paginationMode
+    getRowSpacing
   } = props;
   const rowsHeightLookup = React.useRef({});
   const rowHeight = useGridSelector(apiRef, gridDensityRowHeightSelector);
   const filterState = useGridSelector(apiRef, gridFilterStateSelector);
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
   const sortingState = useGridSelector(apiRef, gridSortingStateSelector);
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    rowsMeta: {
-      currentPageTotalHeight: 0,
-      positions: []
-    }
-  }));
+  const currentPage = useGridVisibleRows(apiRef, props);
   const hydrateRowsMeta = React.useCallback(() => {
-    const {
-      rows
-    } = getCurrentPageRows(apiRef, {
-      pagination,
-      paginationMode
-    });
     apiRef.current.setState(state => {
       const positions = [];
       const densityFactor = gridDensityFactorSelector(state, apiRef.current.instanceId);
       const currentRowHeight = gridDensityRowHeightSelector(state, apiRef.current.instanceId);
-      const currentPageTotalHeight = rows.reduce((acc, row) => {
+      const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
         positions.push(acc);
         let baseRowHeight;
         const isResized = rowsHeightLookup.current[row.id] && rowsHeightLookup.current[row.id].isResized || false;
@@ -60,15 +53,28 @@ export const useGridRowsMeta = (apiRef, props) => {
               densityFactor
             })) ?? currentRowHeight;
           }
-        }
+        } // We use an object to make simple to check if a height is already added or not
 
-        const heights = apiRef.current.unstable_applyPreProcessors('rowHeight', {
+
+        const initialHeights = {
           base: baseRowHeight
-        }, // We use an object to make simple to check if a size was already added or not
-        row);
-        const finalRowHeight = Object.values(heights).reduce((acc2, value) => acc2 + value, 0);
+        };
+
+        if (getRowSpacing) {
+          const index = apiRef.current.getRowIndexRelativeToVisibleRows(row.id);
+          const spacing = getRowSpacing(_extends({}, row, {
+            isFirstVisible: index === 0,
+            isLastVisible: index === currentPage.rows.length - 1
+          }));
+          initialHeights.spacingTop = spacing.top ?? 0;
+          initialHeights.spacingBottom = spacing.bottom ?? 0;
+        }
+
+        const sizes = apiRef.current.unstable_applyPreProcessors('rowHeight', initialHeights, row);
+        const finalRowHeight = Object.values(sizes).reduce((acc2, value) => acc2 + value, 0);
         rowsHeightLookup.current[row.id] = {
           value: baseRowHeight,
+          sizes,
           isResized
         };
         return acc + finalRowHeight;
@@ -81,14 +87,19 @@ export const useGridRowsMeta = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, pagination, paginationMode, getRowHeight]);
+  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
 
   const getTargetRowHeight = rowId => rowsHeightLookup.current[rowId]?.value || rowHeight;
 
+  const getRowInternalSizes = rowId => rowsHeightLookup.current[rowId]?.sizes;
+
   const setRowHeight = React.useCallback((id, height) => {
     rowsHeightLookup.current[id] = {
       value: height,
-      isResized: true
+      isResized: true,
+      sizes: _extends({}, rowsHeightLookup.current[id].sizes, {
+        base: height
+      })
     };
     hydrateRowsMeta();
   }, [hydrateRowsMeta]); // The effect is used to build the rows meta data - currentPageTotalHeight and positions.
@@ -107,6 +118,7 @@ export const useGridRowsMeta = (apiRef, props) => {
   useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
   const rowsMetaApi = {
     unstable_getRowHeight: getTargetRowHeight,
+    unstable_getRowInternalSizes: getRowInternalSizes,
     unstable_setRowHeight: setRowHeight
   };
   useGridApiMethod(apiRef, rowsMetaApi, 'GridRowsMetaApi');

package/modern/hooks/features/selection/useGridSelection.js

@@ -10,10 +10,29 @@ import { gridSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookup
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
 import { gridVisibleSortedRowIdsSelector } from '../filter/gridFilterSelector';
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GRID_ACTIONS_COLUMN_TYPE } from '../../../colDef';
-import { useGridStateInit } from '../../utils/useGridStateInit';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isKeyboardEvent } from '../../../utils/keyboardUtils';
-import { getCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { getVisibleRows } from '../../utils/useGridVisibleRows';
+
+const getSelectionModelPropValue = (selectionModelProp, prevSelectionModel) => {
+  if (selectionModelProp == null) {
+    return selectionModelProp;
+  }
+
+  if (Array.isArray(selectionModelProp)) {
+    return selectionModelProp;
+  }
+
+  if (prevSelectionModel && prevSelectionModel[0] === selectionModelProp) {
+    return prevSelectionModel;
+  }
+
+  return [selectionModelProp];
+};
+
+export const selectionStateInitializer = (state, props) => _extends({}, state, {
+  selection: getSelectionModelPropValue(props.selectionModel) ?? []
+});
 /**
  * @requires useGridRows (state, method)
  * @requires useGridParamsApi (method)
@@ -22,19 +41,8 @@ import { getCurrentPageRows } from '../../utils/useCurrentPageRows';
 export const useGridSelection = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSelection');
   const propSelectionModel = React.useMemo(() => {
-    if (props.selectionModel == null) {
-      return props.selectionModel;
-    }
-
-    if (Array.isArray(props.selectionModel)) {
-      return props.selectionModel;
-    }
-
-    return [props.selectionModel];
-  }, [props.selectionModel]);
-  useGridStateInit(apiRef, state => _extends({}, state, {
-    selection: propSelectionModel ?? []
-  }));
+    return getSelectionModelPropValue(props.selectionModel, gridSelectionStateSelector(apiRef.current.state));
+  }, [apiRef, props.selectionModel]);
   const lastRowToggled = React.useRef(null);
   apiRef.current.unstable_updateControlState({
     stateId: 'selection',
@@ -319,7 +327,7 @@ export const useGridSelection = (apiRef, props) => {
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
       const {
         rows: currentPageRows
-      } = getCurrentPageRows(apiRef, {
+      } = getVisibleRows(apiRef, {
         pagination,
         paginationMode
       });