@mui/x-data-grid 5.6.0 → 5.8.0

package/hooks/features/selection/useGridSelection.js

@@ -5,36 +5,50 @@ import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
-import { isGridCellRoot } from '../../../utils/domUtils';
 import { gridSelectionStateSelector, selectedGridRowsSelector, selectedIdsLookupSelector } from './gridSelectionSelector';
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
+import { gridFocusCellSelector } from '../focus/gridFocusStateSelector';
 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 { isKeyboardEvent, isNavigationKey } from '../../../utils/keyboardUtils';
+import { getVisibleRows, useGridVisibleRows } 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)
+ * @requires useGridRows (state, method) - can be after
+ * @requires useGridParamsApi (method) - can be after
+ * @requires useGridFocus (state) - can be after
+ * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
 
 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',
@@ -52,7 +66,8 @@ export const useGridSelection = (apiRef, props) => {
     paginationMode
   } = props;
   const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
-  const expandRowRangeSelection = React.useCallback(id => {
+  const visibleRows = useGridVisibleRows(apiRef, props);
+  const expandMouseRowRangeSelection = React.useCallback(id => {
     var _lastRowToggled$curre;
 
     let endId = id;
@@ -64,6 +79,10 @@ export const useGridSelection = (apiRef, props) => {
       const startIndex = visibleRowIds.findIndex(rowId => rowId === startId);
       const endIndex = visibleRowIds.findIndex(rowId => rowId === endId);
 
+      if (startIndex === endIndex) {
+        return;
+      }
+
       if (startIndex > endIndex) {
         endId = visibleRowIds[endIndex + 1];
       } else {
@@ -155,12 +174,13 @@ export const useGridSelection = (apiRef, props) => {
       return;
     }
 
-    logger.debug(`Expanding selection from row ${startId} to row ${endId}`);
-    const visibleRowIds = gridVisibleSortedRowIdsSelector(apiRef);
-    const startIndex = visibleRowIds.indexOf(startId);
-    const endIndex = visibleRowIds.indexOf(endId);
+    logger.debug(`Expanding selection from row ${startId} to row ${endId}`); // Using rows from all pages allow to select a range across several pages
+
+    const allPagesRowIds = gridVisibleSortedRowIdsSelector(apiRef);
+    const startIndex = allPagesRowIds.indexOf(startId);
+    const endIndex = allPagesRowIds.indexOf(endId);
     const [start, end] = startIndex > endIndex ? [endIndex, startIndex] : [startIndex, endIndex];
-    const rowsBetweenStartAndEnd = visibleRowIds.slice(start, end + 1);
+    const rowsBetweenStartAndEnd = allPagesRowIds.slice(start, end + 1);
     apiRef.current.selectRows(rowsBetweenStartAndEnd, isSelected, resetSelection);
   }, [apiRef, logger]);
   const selectionApi = {
@@ -234,11 +254,11 @@ export const useGridSelection = (apiRef, props) => {
     }
 
     if (event.shiftKey && (canHaveMultipleSelection || checkboxSelection)) {
-      expandRowRangeSelection(params.id);
+      expandMouseRowRangeSelection(params.id);
     } else {
       handleSingleRowSelection(params.id, event);
     }
-  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandRowRangeSelection, handleSingleRowSelection]);
+  }, [disableSelectionOnClick, canHaveMultipleSelection, checkboxSelection, apiRef, expandMouseRowRangeSelection, handleSingleRowSelection]);
   const preventSelectionOnShift = React.useCallback((params, event) => {
     if (canHaveMultipleSelection && event.shiftKey) {
       var _window$getSelection;
@@ -248,35 +268,78 @@ export const useGridSelection = (apiRef, props) => {
   }, [canHaveMultipleSelection]);
   const handleRowSelectionCheckboxChange = React.useCallback((params, event) => {
     if (event.nativeEvent.shiftKey) {
-      expandRowRangeSelection(params.id);
+      expandMouseRowRangeSelection(params.id);
     } else {
       apiRef.current.selectRow(params.id, params.value);
     }
-  }, [apiRef, expandRowRangeSelection]);
+  }, [apiRef, expandMouseRowRangeSelection]);
   const handleHeaderSelectionCheckboxChange = React.useCallback(params => {
     const shouldLimitSelectionToCurrentPage = props.checkboxSelectionVisibleOnly && props.pagination;
     const rowsToBeSelected = shouldLimitSelectionToCurrentPage ? gridPaginatedVisibleSortedGridRowIdsSelector(apiRef) : gridVisibleSortedRowIdsSelector(apiRef);
     apiRef.current.selectRows(rowsToBeSelected, params.value);
   }, [apiRef, props.checkboxSelectionVisibleOnly, props.pagination]);
   const handleCellKeyDown = React.useCallback((params, event) => {
-    // Ignore portal
+    // Get the most recent cell mode because it may have been changed by another listener
+    if (apiRef.current.getCellMode(params.id, params.field) === GridCellModes.Edit) {
+      return;
+    } // Ignore portal
     // Do not apply shortcuts if the focus is not on the cell root component
-    // TODO replace with !event.currentTarget.contains(event.target as Element)
-    if (!isGridCellRoot(event.target)) {
+
+
+    if (!event.currentTarget.contains(event.target)) {
       return;
-    } // Get the most recent params because the cell mode may have changed by another listener
+    }
 
+    if (isNavigationKey(event.key) && event.shiftKey) {
+      // The cell that has focus after the keyboard navigation
+      const focusCell = gridFocusCellSelector(apiRef);
 
-    const cellParams = apiRef.current.getCellParams(params.id, params.field);
-    const isEditMode = cellParams.cellMode === GridCellModes.Edit;
+      if (focusCell && focusCell.id !== params.id) {
+        event.preventDefault();
+        const isNextRowSelected = apiRef.current.isRowSelected(focusCell.id);
 
-    if (isEditMode) {
-      return;
+        if (!canHaveMultipleSelection) {
+          apiRef.current.selectRow(focusCell.id, !isNextRowSelected, true);
+          return;
+        }
+
+        const newRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(focusCell.id);
+        const previousRowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(params.id);
+        let start;
+        let end;
+
+        if (newRowIndex > previousRowIndex) {
+          if (isNextRowSelected) {
+            // We are navigating to the bottom of the page and adding selected rows
+            start = previousRowIndex;
+            end = newRowIndex - 1;
+          } else {
+            // We are navigating to the bottom of the page and removing selected rows
+            start = previousRowIndex;
+            end = newRowIndex;
+          }
+        } else {
+          // eslint-disable-next-line no-lonely-if
+          if (isNextRowSelected) {
+            // We are navigating to the top of the page and removing selected rows
+            start = newRowIndex + 1;
+            end = previousRowIndex;
+          } else {
+            // We are navigating to the top of the page and adding selected rows
+            start = newRowIndex;
+            end = previousRowIndex;
+          }
+        }
+
+        const rowsBetweenStartAndEnd = visibleRows.rows.slice(start, end + 1).map(row => row.id);
+        apiRef.current.selectRows(rowsBetweenStartAndEnd, !isNextRowSelected);
+        return;
+      }
     }
 
     if (event.key === ' ' && event.shiftKey) {
       event.preventDefault();
-      handleSingleRowSelection(cellParams.id, event);
+      handleSingleRowSelection(params.id, event);
       return;
     }
 
@@ -284,7 +347,7 @@ export const useGridSelection = (apiRef, props) => {
       event.preventDefault();
       selectRows(apiRef.current.getAllRowIds(), true);
     }
-  }, [apiRef, handleSingleRowSelection, selectRows]);
+  }, [apiRef, handleSingleRowSelection, selectRows, visibleRows.rows, canHaveMultipleSelection]);
   useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, removeOutdatedSelection);
   useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
   useGridApiEventHandler(apiRef, GridEvents.rowSelectionCheckboxChange, handleRowSelectionCheckboxChange);
@@ -323,7 +386,7 @@ export const useGridSelection = (apiRef, props) => {
     if (!canHaveMultipleSelection && currentSelection.length > 1) {
       const {
         rows: currentPageRows
-      } = getCurrentPageRows(apiRef, {
+      } = getVisibleRows(apiRef, {
         pagination,
         paginationMode
       });

package/hooks/features/selection/useGridSelectionPreProcessors.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { getDataGridUtilityClass } from '../../../constants';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef';
 
@@ -43,5 +43,5 @@ export const useGridSelectionPreProcessors = (apiRef, props) => {
 
     return columnsState;
   }, [apiRef, classes, props.checkboxSelection]);
-  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateSelectionColumn);
 };

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

@@ -16,9 +16,7 @@ export declare const gridSortedRowIdsSelector: import("../../../utils/createSele
  */
 export declare const gridSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: {
-        [key: string]: any;
-    };
+    model: any;
 }[]>;
 /**
  * Get the current sorting model.

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

@@ -8,10 +8,7 @@ export interface GridSortingInitialState {
     sortModel?: GridSortModel;
 }
 export declare type GridSortingModelApplier = (rowList: GridRowTreeNodeConfig[]) => GridRowId[];
-export interface GridSortingParams {
+export interface GridSortingMethodParams {
     sortRowList: GridSortingModelApplier | null;
 }
-export declare type GridSortingMethod = (params: GridSortingParams) => GridRowId[];
-export declare type GridSortingMethodCollection = {
-    [methodName: string]: GridSortingMethod;
-};
+export declare type GridSortingMethodValue = GridRowId[];

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

@@ -1,5 +1,4 @@
 import { GridSortingModelApplier } from './gridSortingState';
-import type { GridCellValue } from '../../../models';
 import { GridApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridComparatorFn, GridSortDirection, GridSortModel } from '../../../models/gridSortModel';
@@ -15,4 +14,4 @@ export declare const buildAggregatedSortingApplier: (sortModel: GridSortModel, a
 export declare const getNextGridSortDirection: (sortingOrder: GridSortDirection[], current?: GridSortDirection) => GridSortDirection;
 export declare const gridStringOrNumberComparator: GridComparatorFn;
 export declare const gridNumberComparator: GridComparatorFn;
-export declare const gridDateComparator: (value1: GridCellValue, value2: GridCellValue) => number;
+export declare const gridDateComparator: GridComparatorFn;

package/hooks/features/sorting/useGridSorting.js

@@ -8,11 +8,11 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
 import { gridSortedRowEntriesSelector, gridSortedRowIdsSelector, gridSortModelSelector } from './gridSortingSelector';
-import { gridRowIdsSelector, gridRowGroupingNameSelector, gridRowTreeSelector } from '../rows';
+import { gridRowIdsSelector, gridRowTreeSelector } from '../rows';
 import { useFirstRender } from '../../utils/useFirstRender';
+import { useGridRegisterStrategyProcessor, GRID_DEFAULT_STRATEGY } from '../../core/strategyProcessing';
 import { buildAggregatedSortingApplier, mergeStateWithSortModel, getNextGridSortDirection, sanitizeSortModel } from './gridSortingUtils';
-import { useGridRegisterPreProcessor } from '../../core/preProcessing';
-import { useGridRegisterSortingMethod } from './useGridRegisterSortingMethod';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 export const sortingStateInitializer = (state, props) => {
   var _ref, _props$sortModel, _props$initialState, _props$initialState$s;
 
@@ -31,8 +31,6 @@ export const sortingStateInitializer = (state, props) => {
 
 export const useGridSorting = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridSorting');
-  const sortingMethodCollectionRef = React.useRef({});
-  const lastSortingMethodApplied = React.useRef(null);
   apiRef.current.unstable_updateControlState({
     stateId: 'sortModel',
     propModel: props.sortModel,
@@ -93,16 +91,9 @@ export const useGridSorting = (apiRef, props) => {
     }
 
     apiRef.current.setState(state => {
-      const rowGroupingName = gridRowGroupingNameSelector(state, apiRef.current.instanceId);
-      const sortingMethod = sortingMethodCollectionRef.current[rowGroupingName];
-
-      if (!sortingMethod) {
-        throw new Error('MUI: Invalid sorting method.');
-      }
-
       const sortModel = gridSortModelSelector(state, apiRef.current.instanceId);
       const sortRowList = buildAggregatedSortingApplier(sortModel, apiRef);
-      const sortedRows = sortingMethod({
+      const sortedRows = apiRef.current.unstable_applyStrategyProcessor('sorting', {
         sortRowList
       });
       return _extends({}, state, {
@@ -197,9 +188,9 @@ export const useGridSorting = (apiRef, props) => {
     const rowTree = gridRowTreeSelector(apiRef);
     return params.sortRowList(Object.values(rowTree));
   }, [apiRef]);
-  useGridRegisterPreProcessor(apiRef, 'exportState', stateExportPreProcessing);
-  useGridRegisterPreProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
-  useGridRegisterSortingMethod(apiRef, 'none', flatSortingMethod);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+  useGridRegisterStrategyProcessor(apiRef, GRID_DEFAULT_STRATEGY, 'sorting', flatSortingMethod);
   /**
    * EVENTS
    */
@@ -231,15 +222,8 @@ export const useGridSorting = (apiRef, props) => {
       }
     }
   }, [apiRef]);
-  const handlePreProcessorRegister = React.useCallback(name => {
-    if (name !== 'sortingMethod') {
-      return;
-    }
-
-    sortingMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('sortingMethod', {});
-    const rowGroupingName = gridRowGroupingNameSelector(apiRef);
-
-    if (lastSortingMethodApplied.current !== sortingMethodCollectionRef.current[rowGroupingName]) {
+  const handleStrategyProcessorChange = React.useCallback(methodName => {
+    if (methodName === 'sorting') {
       apiRef.current.applySorting();
     }
   }, [apiRef]);
@@ -247,15 +231,12 @@ export const useGridSorting = (apiRef, props) => {
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderKeyDown, handleColumnHeaderKeyDown);
   useGridApiEventHandler(apiRef, GridEvents.rowsSet, apiRef.current.applySorting);
   useGridApiEventHandler(apiRef, GridEvents.columnsChange, handleColumnsChange);
-  useGridApiEventHandler(apiRef, GridEvents.preProcessorRegister, handlePreProcessorRegister);
+  useGridApiEventHandler(apiRef, GridEvents.activeStrategyProcessorChange, handleStrategyProcessorChange);
   /**
    * 1ST RENDER
    */
 
   useFirstRender(() => {
-    // This line of pre-processor initialization should always come after the registration of `flatSortingMethod`
-    // Otherwise on the 1st render there would be no sorting method registered
-    sortingMethodCollectionRef.current = apiRef.current.unstable_applyPreProcessors('sortingMethod', {});
     apiRef.current.applySorting();
   });
   /**

package/hooks/features/statePersistence/useGridStatePersistence.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { useGridApiMethod } from '../../utils';
 export const useGridStatePersistence = apiRef => {
   const exportState = React.useCallback(() => {
-    const stateToExport = apiRef.current.unstable_applyPreProcessors('exportState', {});
+    const stateToExport = apiRef.current.unstable_applyPipeProcessors('exportState', {});
     return stateToExport;
   }, [apiRef]);
   const restoreState = React.useCallback(stateToRestore => {
-    const response = apiRef.current.unstable_applyPreProcessors('restoreState', {
+    const response = apiRef.current.unstable_applyPipeProcessors('restoreState', {
       callbacks: []
     }, {
       stateToRestore

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({
@@ -187,9 +187,11 @@ export const useGridVirtualScroller = props => {
 
 
     const nextRenderContext = disableVirtualization ? prevRenderContext.current : computeRenderContext();
-    const rowsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstRowIndex - prevRenderContext.current.firstRowIndex);
-    const columnsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstColumnIndex - prevRenderContext.current.firstColumnIndex);
-    const shouldSetState = rowsScrolledSincePreviousRender >= rootProps.rowThreshold || columnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth; // TODO v6: rename event to a wider name, it's not only fired for row scrolling
+    const topRowsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstRowIndex - prevRenderContext.current.firstRowIndex);
+    const bottomRowsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastRowIndex - prevRenderContext.current.lastRowIndex);
+    const topColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.firstColumnIndex - prevRenderContext.current.firstColumnIndex);
+    const bottomColumnsScrolledSincePreviousRender = Math.abs(nextRenderContext.lastColumnIndex - prevRenderContext.current.lastColumnIndex);
+    const shouldSetState = topRowsScrolledSincePreviousRender >= rootProps.rowThreshold || bottomRowsScrolledSincePreviousRender >= rootProps.rowThreshold || topColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || bottomColumnsScrolledSincePreviousRender >= rootProps.columnThreshold || prevTotalWidth.current !== columnsTotalWidth; // TODO v6: rename event to a wider name, it's not only fired for row scrolling
 
     apiRef.current.publishEvent(GridEvents.rowsScroll, {
       top: scrollTop,
@@ -271,7 +273,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/useGridRootProps.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
-export declare const useGridRootProps: () => DataGridProcessedProps;
+export declare const useGridRootProps: () => DataGridProcessedProps<any>;

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,21 +1,22 @@
 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'>) => {
-    rows: GridRowEntry[];
+export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
+    rows: GridRowEntry<any>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;
     } | 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'>) => {
-    rows: GridRowEntry[];
+export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
+    rows: GridRowEntry<any>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;