@mui/x-data-grid 5.6.0 → 5.6.1

package/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -2,24 +2,23 @@ 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) => {
+  var _props$initialState$p, _props$initialState;
+
+  return _extends({}, state, {
+    preferencePanel: (_props$initialState$p = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.preferencePanel) != null ? _props$initialState$p : {
+      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 => {
-    var _props$initialState$p, _props$initialState;
-
-    return _extends({}, state, {
-      preferencePanel: (_props$initialState$p = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.preferencePanel) != null ? _props$initialState$p : {
-        open: false
-      }
-    });
-  });
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
   /**

package/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/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,11 +93,19 @@ 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 => {
     var _gridRowsLookupSelect;
 
     return (_gridRowsLookupSelect = gridRowsLookupSelector(apiRef)[id]) != null ? _gridRowsLookupSelect : 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;
@@ -284,7 +291,8 @@ export const useGridRows = (apiRef, props) => {
     setRows,
     updateRows,
     setRowChildrenExpansion,
-    getRowNode
+    getRowNode,
+    getRowIndexRelativeToVisibleRows
   };
   useGridApiMethod(apiRef, rowApi, 'GridRowApi');
 };

package/hooks/features/rows/useGridRowsMeta.d.ts

@@ -1,8 +1,10 @@
 import * as React from 'react';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+export declare const rowsMetaStateInitializer: GridStateInitializer;
 /**
  * @requires useGridPageSize (method)
  * @requires useGridPage (method)
  */
-export declare const useGridRowsMeta: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'getRowHeight' | 'pagination' | 'paginationMode'>) => void;
+export declare const useGridRowsMeta: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'getRowHeight' | 'getRowSpacing' | 'pagination' | 'paginationMode'>) => void;

package/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;
@@ -62,15 +55,30 @@ export const useGridRowsMeta = (apiRef, props) => {
               densityFactor
             }))) != null ? _getRowHeight : 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) {
+          var _spacing$top, _spacing$bottom;
+
+          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 = spacing.top) != null ? _spacing$top : 0;
+          initialHeights.spacingBottom = (_spacing$bottom = spacing.bottom) != null ? _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;
@@ -83,7 +91,7 @@ export const useGridRowsMeta = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-  }, [apiRef, pagination, paginationMode, getRowHeight]);
+  }, [apiRef, currentPage.rows, getRowSpacing, getRowHeight]);
 
   const getTargetRowHeight = rowId => {
     var _rowsHeightLookup$cur;
@@ -91,10 +99,19 @@ export const useGridRowsMeta = (apiRef, props) => {
     return ((_rowsHeightLookup$cur = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur.value) || rowHeight;
   };
 
+  const getRowInternalSizes = rowId => {
+    var _rowsHeightLookup$cur2;
+
+    return (_rowsHeightLookup$cur2 = rowsHeightLookup.current[rowId]) == null ? void 0 : _rowsHeightLookup$cur2.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.
@@ -113,6 +130,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/hooks/features/selection/gridSelectionSelector.d.ts

@@ -5,4 +5,4 @@ export declare const selectedGridRowsCountSelector: import("../../../utils/creat
 export declare const selectedGridRowsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Map<GridRowId, {
     [key: string]: any;
 }>>;
-export declare const selectedIdsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {}>;
+export declare const selectedIdsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<GridRowId, GridRowId>>;

package/hooks/features/selection/useGridSelection.d.ts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
+import { GridStateInitializer } from '../../utils/useGridInitializeState';
+export declare const selectionStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'selectionModel'>>;
 /**
  * @requires useGridRows (state, method)
  * @requires useGridParamsApi (method)

package/hooks/features/selection/useGridSelection.js

@@ -10,10 +10,33 @@ 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) => {
+  var _getSelectionModelPro;
+
+  return _extends({}, state, {
+    selection: (_getSelectionModelPro = getSelectionModelPropValue(props.selectionModel)) != null ? _getSelectionModelPro : []
+  });
+};
 /**
  * @requires useGridRows (state, method)
  * @requires useGridParamsApi (method)
@@ -22,19 +45,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 != null ? propSelectionModel : []
-  }));
+    return getSelectionModelPropValue(props.selectionModel, gridSelectionStateSelector(apiRef.current.state));
+  }, [apiRef, props.selectionModel]);
   const lastRowToggled = React.useRef(null);
   apiRef.current.unstable_updateControlState({
     stateId: 'selection',
@@ -323,7 +335,7 @@ export const useGridSelection = (apiRef, props) => {
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
       const {
         rows: currentPageRows
-      } = getCurrentPageRows(apiRef, {
+      } = getVisibleRows(apiRef, {
         pagination,
         paginationMode
       });

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

@@ -40,6 +40,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             animationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
             animationName?: import("csstype").Property.AnimationName | undefined;
             animationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
+            animationTimeline?: import("csstype").Property.AnimationTimeline | undefined;
             animationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
             appearance?: import("csstype").Property.Appearance | undefined;
             aspectRatio?: import("csstype").Property.AspectRatio | undefined;
@@ -114,7 +115,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             clear?: import("csstype").Property.Clear | undefined;
             clipPath?: import("csstype").Property.ClipPath | undefined;
             color?: import("csstype").Property.Color | undefined;
-            colorAdjust?: import("csstype").Property.ColorAdjust | undefined;
+            colorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
             colorScheme?: import("csstype").Property.ColorScheme | undefined;
             columnCount?: import("csstype").Property.ColumnCount | undefined;
             columnFill?: import("csstype").Property.ColumnFill | undefined;
@@ -153,6 +154,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             fontStyle?: import("csstype").Property.FontStyle | undefined;
             fontSynthesis?: import("csstype").Property.FontSynthesis | undefined;
             fontVariant?: import("csstype").Property.FontVariant | undefined;
+            fontVariantAlternates?: import("csstype").Property.FontVariantAlternates | undefined;
             fontVariantCaps?: import("csstype").Property.FontVariantCaps | undefined;
             fontVariantEastAsian?: import("csstype").Property.FontVariantEastAsian | undefined;
             fontVariantLigatures?: import("csstype").Property.FontVariantLigatures | undefined;
@@ -173,12 +175,14 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             gridTemplateRows?: import("csstype").Property.GridTemplateRows<string | number> | undefined;
             hangingPunctuation?: import("csstype").Property.HangingPunctuation | undefined;
             height?: import("csstype").Property.Height<string | number> | undefined;
+            hyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
             hyphens?: import("csstype").Property.Hyphens | undefined;
             imageOrientation?: import("csstype").Property.ImageOrientation | undefined;
             imageRendering?: import("csstype").Property.ImageRendering | undefined;
             imageResolution?: import("csstype").Property.ImageResolution | undefined;
             initialLetter?: import("csstype").Property.InitialLetter | undefined;
             inlineSize?: import("csstype").Property.InlineSize<string | number> | undefined;
+            inputSecurity?: import("csstype").Property.InputSecurity | undefined;
             inset?: import("csstype").Property.Inset<string | number> | undefined;
             insetBlock?: import("csstype").Property.InsetBlock<string | number> | undefined;
             insetBlockEnd?: import("csstype").Property.InsetBlockEnd<string | number> | undefined;
@@ -283,6 +287,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             placeContent?: import("csstype").Property.PlaceContent | undefined;
             pointerEvents?: import("csstype").Property.PointerEvents | undefined;
             position?: import("csstype").Property.Position | undefined;
+            printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
             quotes?: import("csstype").Property.Quotes | undefined;
             resize?: import("csstype").Property.Resize | undefined;
             right?: import("csstype").Property.Right<string | number> | undefined;
@@ -591,6 +596,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             WebkitFontKerning?: import("csstype").Property.FontKerning | undefined;
             WebkitFontSmoothing?: import("csstype").Property.FontSmooth<string | number> | undefined;
             WebkitFontVariantLigatures?: import("csstype").Property.FontVariantLigatures | undefined;
+            WebkitHyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
             WebkitHyphens?: import("csstype").Property.Hyphens | undefined;
             WebkitInitialLetter?: import("csstype").Property.InitialLetter | undefined;
             WebkitJustifyContent?: import("csstype").Property.JustifyContent | undefined;
@@ -622,7 +628,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             WebkitPaddingStart?: import("csstype").Property.PaddingInlineStart<string | number> | undefined;
             WebkitPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
             WebkitPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
-            WebkitPrintColorAdjust?: import("csstype").Property.ColorAdjust | undefined;
+            WebkitPrintColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
             WebkitRubyPosition?: import("csstype").Property.RubyPosition | undefined;
             WebkitScrollSnapType?: import("csstype").Property.ScrollSnapType | undefined;
             WebkitShapeMargin?: import("csstype").Property.ShapeMargin<string | number> | undefined;
@@ -687,7 +693,6 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
             boxOrient?: import("csstype").Property.BoxOrient | undefined;
             boxPack?: import("csstype").Property.BoxPack | undefined;
             clip?: import("csstype").Property.Clip | undefined;
-            fontVariantAlternates?: import("csstype").Property.FontVariantAlternates | undefined;
             gridColumnGap?: import("csstype").Property.GridColumnGap<string | number> | undefined;
             gridGap?: import("csstype").Property.GridGap<string | number> | undefined;
             gridRowGap?: import("csstype").Property.GridRowGap<string | number> | undefined;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -10,7 +10,7 @@ import { gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gr
 import { gridDensityRowHeightSelector } from '../density/densitySelector';
 import { gridFocusCellSelector, gridTabIndexCellSelector } from '../focus/gridFocusStateSelector';
 import { gridEditRowsStateSelector } from '../editRows/gridEditRowsSelector';
-import { useCurrentPageRows } from '../../utils/useCurrentPageRows';
+import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GridEvents } from '../../../models/events';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { clamp } from '../../../utils/utils';
@@ -53,7 +53,7 @@ export const useGridVirtualScroller = props => {
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   const selectedRowsLookup = useGridSelector(apiRef, selectedIdsLookupSelector);
-  const currentPage = useCurrentPageRows(apiRef, rootProps);
+  const currentPage = useGridVisibleRows(apiRef, rootProps);
   const renderZoneRef = React.useRef(null);
   const rootRef = React.useRef(null);
   const handleRef = useForkRef(ref, rootRef);
@@ -126,7 +126,7 @@ export const useGridVirtualScroller = props => {
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
       minFirstIndex: 0,
-      maxLastIndex: (_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.lastRowIndex,
+      maxLastIndex: ((_currentPage$range = currentPage.range) == null ? void 0 : _currentPage$range.lastRowIndex) || 0,
       buffer: rootProps.rowBuffer
     });
     const [firstColumnToRender] = getRenderableIndexes({
@@ -271,7 +271,7 @@ export const useGridVirtualScroller = props => {
         firstColumnToRender: firstColumnToRender,
         lastColumnToRender: lastColumnToRender,
         selected: isSelected,
-        index: currentPage.range.firstRowIndex + nextRenderContext.firstRowIndex + i,
+        index: currentPage.range.firstRowIndex + firstRowToRender + i,
         containerWidth: availableSpace,
         isLastVisible: lastVisibleRowIndex
       }, typeof getRowProps === 'function' ? getRowProps(id, model) : {}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.row), id));

package/hooks/utils/useGridApi.js

@@ -1,4 +1,13 @@
+import { buildWarning } from '../../utils/warning';
+const deprecationWarning = buildWarning(['MUI: The hook useGridApi is deprecated and will be removed in the next major version.', 'Access the ref content with apiRef.current instead']);
 /**
  * @deprecated Use `apiRef.current` instead.
  */
-export const useGridApi = apiRef => apiRef.current;
+
+export const useGridApi = apiRef => {
+  if (process.env.NODE_ENV !== 'production') {
+    deprecationWarning();
+  }
+
+  return apiRef.current;
+};

package/hooks/utils/useGridInitializeState.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { GridApiCommon } from '../../models/api/gridApiCommon';
 import { GridApiCommunity } from '../../models/api/gridApiCommunity';
+import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 declare type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
-export declare type GridStateInitializer<P, Api extends GridApiCommon = GridApiCommunity> = (state: DeepPartial<Api['state']>, props: P, apiRef: React.MutableRefObject<Api>) => DeepPartial<Api['state']>;
+export declare type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, Api extends GridApiCommon = GridApiCommunity> = (state: DeepPartial<Api['state']>, props: P, apiRef: React.MutableRefObject<Api>) => DeepPartial<Api['state']>;
 export declare const useGridInitializeState: <P, Api extends GridApiCommon = GridApiCommunity>(initializer: GridStateInitializer<P, Api>, apiRef: React.MutableRefObject<Api>, props: P) => void;
 export {};

package/hooks/utils/useGridSelector.js

@@ -1,14 +1,14 @@
-let warnedOnceStateNotInitialized = false;
+import { buildWarning } from '../../utils/warning';
 
 function isOutputSelector(selector) {
   return selector.cache;
 }
 
+const stateNotInitializedWarning = buildWarning(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.']);
 export const useGridSelector = (apiRef, selector) => {
   if (process.env.NODE_ENV !== 'production') {
-    if (!warnedOnceStateNotInitialized && !apiRef.current.state) {
-      warnedOnceStateNotInitialized = true;
-      console.warn(['MUI: `useGridSelector` has been called before the initialization of the state.', 'This hook can only be used inside the context of the grid.'].join('\n'));
+    if (!apiRef.current.state) {
+      stateNotInitializedWarning();
     }
   }
 

package/hooks/utils/useGridState.js

@@ -1,4 +1,13 @@
+import { buildWarning } from '../../utils/warning';
+const deprecationWarning = buildWarning(['MUI: The hook useGridState is deprecated and will be removed in the next major version.', 'The two lines below are equivalent', '', 'const [state, setState, forceUpdate] = useGridState(apiRef);', 'const { state, setState, forceUpdate } = apiRef.current']);
 /**
  * @deprecated Use `apiRef.current.state`, `apiRef.current.setState` and `apiRef.current.forceUpdate` instead.
  */
-export const useGridState = apiRef => [apiRef.current.state, apiRef.current.setState, apiRef.current.forceUpdate];
+
+export const useGridState = apiRef => {
+  if (process.env.NODE_ENV !== 'production') {
+    deprecationWarning();
+  }
+
+  return [apiRef.current.state, apiRef.current.setState, apiRef.current.forceUpdate];
+};

package/hooks/utils/{useCurrentPageRows.d.ts → useGridVisibleRows.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import type { GridApiCommon, GridRowEntry } from '../../models';
-export declare const getCurrentPageRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
+export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
     rows: GridRowEntry[];
     range: {
         firstRowIndex: number;
@@ -9,12 +9,13 @@ export declare const getCurrentPageRows: <Api extends GridApiCommon>(apiRef: Rea
     } | null;
 };
 /**
- * Compute the list of the rows in the current page
- * - If the pagination is disabled or in server mode, it equals all the visible rows
- * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants
- * - If the row tree is flat, it only contains up to `state.pageSize` rows
+ * Computes the list of rows that are reachable by scroll.
+ * Depending on whether pagination is enabled, it will return the rows in the current page.
+ * - If the pagination is disabled or in server mode, it equals all the visible rows.
+ * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants.
+ * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
-export declare const useCurrentPageRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
+export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
     rows: GridRowEntry[];
     range: {
         firstRowIndex: number;

package/hooks/utils/{useCurrentPageRows.js → useGridVisibleRows.js}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { gridPaginationRowRangeSelector, gridPaginatedVisibleSortedGridRowEntriesSelector } from '../features/pagination/gridPaginationSelector';
 import { gridVisibleSortedRowEntriesSelector } from '../features/filter/gridFilterSelector';
-export const getCurrentPageRows = (apiRef, props) => {
+export const getVisibleRows = (apiRef, props) => {
   let rows;
   let range;
 
@@ -27,14 +27,15 @@ export const getCurrentPageRows = (apiRef, props) => {
   };
 };
 /**
- * Compute the list of the rows in the current page
- * - If the pagination is disabled or in server mode, it equals all the visible rows
- * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants
- * - If the row tree is flat, it only contains up to `state.pageSize` rows
+ * Computes the list of rows that are reachable by scroll.
+ * Depending on whether pagination is enabled, it will return the rows in the current page.
+ * - If the pagination is disabled or in server mode, it equals all the visible rows.
+ * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants.
+ * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
 
-export const useCurrentPageRows = (apiRef, props) => {
-  const response = getCurrentPageRows(apiRef, props);
+export const useGridVisibleRows = (apiRef, props) => {
+  const response = getVisibleRows(apiRef, props);
   return React.useMemo(() => ({
     rows: response.rows,
     range: response.range

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.6.0
+/** @license MUI v5.6.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.