@mui/x-data-grid 8.18.0 → 8.20.0

package/esm/internals/index.d.ts

@@ -41,7 +41,7 @@ export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
 export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
-export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
+export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
 export type { GridAggregatedFilterItemApplier, GridAggregatedFilterItemApplierResult } from "../hooks/features/filter/gridFilterState.js";
 export { useGridFocus, focusStateInitializer } from "../hooks/features/focus/useGridFocus.js";
@@ -54,7 +54,7 @@ export { useGridRows, rowsStateInitializer } from "../hooks/features/rows/useGri
 export { useGridRowSpanning, rowSpanningStateInitializer } from "../hooks/features/rows/useGridRowSpanning.js";
 export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
-export { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
+export { useGridRowsOverridableMethods as useGridRowsOverridableMethodsCommunity } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
 export { useGridParamsOverridableMethods } from "../hooks/features/rows/useGridParamsOverridableMethods.js";
 export { useIsCellEditable } from "../hooks/features/editing/useGridCellEditable.js";
 export { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreProcessors.js";
@@ -66,7 +66,7 @@ export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hoo
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
-export { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
+export { gridIsRowDragActiveSelector, gridRowDropPositionSelector, gridRowDropTargetRowIdSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
 export type { GridRowReorderState } from "../hooks/features/rowReorder/gridRowReorderInterfaces.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
@@ -121,4 +121,5 @@ export type { GridConfiguration } from "../models/configuration/gridConfiguratio
 export type { CellEditableConditionFn } from "../models/configuration/gridCellEditableConfiguration.js";
 export * from "../hooks/features/pivoting/index.js";
 export { createSvgIcon } from "../material/icons/createSvgIcon.js";
-export { useGridPanelContext } from "../components/panel/GridPanelContext.js";
+export { useGridPanelContext } from "../components/panel/GridPanelContext.js";
+export type { RowReorderDropPosition, RowReorderDragDirection } from "../models/api/gridRowApi.js";

package/esm/internals/index.js

@@ -31,7 +31,7 @@ export { useGridPrintExport } from "../hooks/features/export/useGridPrintExport.
 export { useGridFilter, filterStateInitializer } from "../hooks/features/filter/useGridFilter.js";
 export { defaultGridFilterLookup } from "../hooks/features/filter/gridFilterState.js";
 export { passFilterLogic } from "../hooks/features/filter/gridFilterUtils.js";
-export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridExpandedSortedRowIndexLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
+export { gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector, gridFilteredSortedDepthRowEntriesSelector } from "../hooks/features/filter/gridFilterSelector.js";
 export { isSingleSelectColDef } from "../components/panel/filterPanel/filterPanelUtils.js";
 export { useGridFocus, focusStateInitializer } from "../hooks/features/focus/useGridFocus.js";
 export { useGridKeyboardNavigation } from "../hooks/features/keyboardNavigation/useGridKeyboardNavigation.js";
@@ -43,7 +43,7 @@ export { useGridRows, rowsStateInitializer } from "../hooks/features/rows/useGri
 export { useGridRowSpanning, rowSpanningStateInitializer } from "../hooks/features/rows/useGridRowSpanning.js";
 export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
 export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
-export { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
+export { useGridRowsOverridableMethods as useGridRowsOverridableMethodsCommunity } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
 export { useGridParamsOverridableMethods } from "../hooks/features/rows/useGridParamsOverridableMethods.js";
 export { useIsCellEditable } from "../hooks/features/editing/useGridCellEditable.js";
 export { useGridRowsPreProcessors } from "../hooks/features/rows/useGridRowsPreProcessors.js";
@@ -54,7 +54,7 @@ export { getRowIdFromRowModel, GRID_ID_AUTOGENERATED, getRowValue } from "../hoo
 export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, gridRowSelector } from "../hooks/features/rows/gridRowsSelector.js";
 export { headerFilteringStateInitializer, useGridHeaderFiltering } from "../hooks/features/headerFiltering/useGridHeaderFiltering.js";
 export { useGridRowSelection, rowSelectionStateInitializer } from "../hooks/features/rowSelection/useGridRowSelection.js";
-export { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
+export { gridIsRowDragActiveSelector, gridRowDropPositionSelector, gridRowDropTargetRowIdSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
 export { useGridRowSelectionPreProcessors } from "../hooks/features/rowSelection/useGridRowSelectionPreProcessors.js";
 export { useGridSorting, sortingStateInitializer } from "../hooks/features/sorting/useGridSorting.js";
 export { gridSortedRowIndexLookupSelector } from "../hooks/features/sorting/gridSortingSelector.js";

package/esm/material/index.js

@@ -589,10 +589,7 @@ function BasePopper(props) {
     if (flip) {
       result.push({
         name: 'flip',
-        enabled: true,
-        options: {
-          rootBoundary: 'document'
-        }
+        enabled: true
       });
     }
     if (onDidShow || onDidHide) {

package/esm/models/api/gridRowApi.d.ts

@@ -1,4 +1,6 @@
 import { GridRowModel, GridRowId, GridRowModelUpdate, GridValidRowModel, GridTreeNode } from "../gridRows.js";
+export type RowReorderDropPosition = 'above' | 'below' | 'inside';
+export type RowReorderDragDirection = 'up' | 'down';
 export interface GridRowGroupChildrenGetterParams {
   /**
    * The row id of the group
@@ -96,10 +98,21 @@ export interface GridRowApi {
 export interface GridRowProApi {
   /**
    * Moves a row from its original position to the position given by `targetIndex`.
+   * Doesn't support tree data ordering. Use `setRowPosition()` instead.
    * @param {GridRowId} rowId The row id
    * @param {number} targetIndex The new position (0-based).
+   * @returns {void | Promise<void>} Returns a Promise when async operations are involved (e.g., processRowUpdate)
+   * @deprecated Use `setRowPosition()` instead. This method will be removed in the next major version.
    */
-  setRowIndex: (rowId: GridRowId, targetIndex: number) => void;
+  setRowIndex: (rowId: GridRowId, targetIndex: number) => void | Promise<void>;
+  /**
+   * Moves a row to a new position relative to another row.
+   * @param {GridRowId} sourceRowId The ID of the row to move
+   * @param {GridRowId} targetRowId The ID of the row to position relative to
+   * @param {DropPosition} position Where to place the source row: 'above', 'below', or 'over' (for tree data)
+   * @returns {void | Promise<void>} Returns a Promise when async operations are involved (e.g., processRowUpdate)
+   */
+  setRowPosition: (sourceRowId: GridRowId, targetRowId: GridRowId, position: RowReorderDropPosition) => void | Promise<void>;
   /**
    * Gets the rows of a grouping criteria.
    * Only contains the rows provided to the grid, not the rows automatically generated by it.

package/esm/models/api/index.d.ts

@@ -3,7 +3,7 @@ export type { GridParamsApi } from "./gridParamsApi.js";
 export type { GridCoreApi } from "./gridCoreApi.js";
 export * from "./gridColumnApi.js";
 export * from "./gridDensityApi.js";
-export * from "./gridRowApi.js";
+export type { GridRowGroupChildrenGetterParams, GridRowApi, GridRowProApi, GridRowProPrivateApi } from "./gridRowApi.js";
 export type { GridRowsMetaApi } from "./gridRowsMetaApi.js";
 export * from "./gridRowSelectionApi.js";
 export * from "./gridSortApi.js";

package/esm/models/api/index.js

@@ -1,6 +1,5 @@
 export * from "./gridColumnApi.js";
 export * from "./gridDensityApi.js";
-export * from "./gridRowApi.js";
 export * from "./gridRowSelectionApi.js";
 export * from "./gridSortApi.js";
 export * from "./gridCsvExportApi.js";

package/esm/models/colDef/gridColDef.d.ts

@@ -257,6 +257,20 @@ export interface GridActionsColDef<R extends GridValidRowModel = any, V = any, F
    * Function that returns the actions to be shown.
    * @param {GridRowParams} params The params for each row.
    * @returns {readonly React.ReactElement<GridActionsCellItemProps>[]} An array of [[GridActionsCell]] elements.
+   * @deprecated Use `renderCell` instead
+   * @example
+   * // Before
+   * getActions: (params) => [
+   *   <GridActionsCellItem icon={...} onClick={...} label="Delete" />,
+   *   <GridActionsCellItem icon={...} onClick={...} label="Print" showInMenu />,
+   * ],
+   * // After
+   * renderCell: (params) => (
+   *   <GridActionsCell {...params}>
+   *     <GridActionsCellItem icon={...} onClick={...} label="Delete" />
+   *     <GridActionsCellItem icon={...} onClick={...} label="Print" showInMenu />
+   *   </GridActionsCell>
+   * ),
    */
   getActions: (params: GridRowParams<R>) => readonly React.ReactElement<GridActionsCellItemProps>[];
 }

package/esm/models/configuration/gridConfiguration.d.ts

@@ -3,14 +3,14 @@ import type { GridRowAriaAttributesInternalHook, GridRowsOverridableMethodsInter
 import type { GridAggregationInternalHooks } from "./gridAggregationConfiguration.js";
 import type { GridCellEditableInternalHook } from "./gridCellEditableConfiguration.js";
 import type { GridCSSVariablesInterface } from "../../constants/cssVariables.js";
-import { DataGridProcessedProps } from "../props/DataGridProps.js";
 import type { GridPrivateApiCommon } from "../api/gridApiCommon.js";
 import type { GridPrivateApiCommunity } from "../api/gridApiCommunity.js";
+import type { DataGridProcessedProps } from "../props/DataGridProps.js";
 import type { GridParamsOverridableMethodsInternalHook } from "./gridParamsConfiguration.js";
 export interface GridAriaAttributesInternalHook {
   useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
 }
-export interface GridInternalHook<Api, Props> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridCellEditableInternalHook<Api, Props>, GridAggregationInternalHooks<Api, Props>, GridRowsOverridableMethodsInternalHook<Api>, GridParamsOverridableMethodsInternalHook<Api> {
+export interface GridInternalHook<Api, Props> extends GridAriaAttributesInternalHook, GridRowAriaAttributesInternalHook, GridCellEditableInternalHook<Api, Props>, GridAggregationInternalHooks<Api, Props>, GridRowsOverridableMethodsInternalHook<Api, Props>, GridParamsOverridableMethodsInternalHook<Api> {
   useCSSVariables: () => {
     id: string;
     variables: GridCSSVariablesInterface;

package/esm/models/configuration/gridRowConfiguration.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { RefObject } from '@mui/x-internals/types';
-import { GridTreeNode, GridRowId } from "../gridRows.js";
-import { DataGridProcessedProps } from "../props/DataGridProps.js";
+import { GridTreeNode } from "../gridRows.js";
+import { GridRowProApi } from "../api/index.js";
 /**
  * Get the ARIA attributes for a row
  * @param {GridTreeNode} rowNode The row node
@@ -15,8 +15,9 @@ export interface GridRowAriaAttributesInternalHook {
 /**
  * Overridable row methods interface, these methods could be overriden in a higher plan package.
  */
-export interface GridRowsOverridableMethodsInternalHook<Api> {
-  useGridRowsOverridableMethods: (apiRef: RefObject<Api>, props: Pick<DataGridProcessedProps, 'processRowUpdate' | 'onProcessRowUpdateError' | 'dataSource'>) => {
-    setRowIndex: (rowId: GridRowId, targetIndex: number) => void;
+export interface GridRowsOverridableMethodsInternalHook<Api, Props> {
+  useGridRowsOverridableMethods: (apiRef: RefObject<Api>, props: Props) => {
+    setRowIndex: GridRowProApi['setRowIndex'];
+    setRowPosition: GridRowProApi['setRowPosition'];
   };
 }

package/esm/models/events/gridEventLookup.d.ts

@@ -516,6 +516,11 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
    * @ignore - do not document
    */
   sortedRowsSet: {};
+  /**
+   * Fired when the aggregations are done
+   * @ignore - do not document
+   */
+  aggregationLookupSet: {};
   /**
    * Fired when the expansion of a row is changed. Called with a [[GridGroupNode]] object.
    */

package/esm/models/gridStateCommunity.d.ts

@@ -13,7 +13,7 @@ import type { GridRowReorderState } from "../hooks/features/rowReorder/gridRowRe
  * Some props are passed on the state to enable grid selectors to select
  * and react to them.
  */
-export type GridStateProps = Pick<DataGridProcessedProps, 'getRowId' | 'listView' | 'isCellEditable'>;
+export type GridStateProps = Pick<DataGridProcessedProps, 'getRowId' | 'listView' | 'isCellEditable' | 'isRowSelectable'>;
 /**
  * The state of Data Grid.
  */

package/esm/models/params/gridCellParams.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { GridCellMode } from "../gridCell.js";
 import { GridRowId, GridRowModel, GridTreeNode, GridTreeNodeWithRender, GridValidRowModel } from "../gridRows.js";
 import type { GridStateColDef } from "../colDef/gridColDef.js";
@@ -58,9 +57,6 @@ export interface GridCellParams<R extends GridValidRowModel = any, V = unknown,
    */
   api: GridApiCommunity;
 }
-export interface FocusElement {
-  focus(): void;
-}
 /**
  * GridCellParams containing api.
  */
@@ -69,12 +65,6 @@ export interface GridRenderCellParams<R extends GridValidRowModel = any, V = any
    * GridApi that let you manipulate the grid.
    */
   api: GridApiCommunity;
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef?: React.Ref<FocusElement>;
 }
 /**
  * GridEditCellProps containing api.

package/esm/models/props/DataGridProps.d.ts

@@ -79,13 +79,11 @@ export interface DataGridPropsWithComplexDefaultValueBeforeProcessing {
  */
 export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = any> {
   /**
-   * If `true`, the Data Grid height is dynamic and follows the number of rows in the Data Grid.
+   * If `true`, the Data Grid height is dynamic and takes as much space as it needs to display all rows.
+   * Use it instead of a flex parent container approach, if:
+   * - you don't need to set a minimum or maximum height for the Data Grid
+   * - you want to avoid the scrollbar flickering when the content changes
    * @default false
-   * @deprecated Use flex parent container instead: https://mui.com/x/react-data-grid/layout/#flex-parent-container
-   * @example
-   * <div style={{ display: 'flex', flexDirection: 'column' }}>
-   *   <DataGrid />
-   * </div>
    */
   autoHeight: boolean;
   /**
@@ -381,6 +379,15 @@ export interface DataGridPropsWithDefaultValues<R extends GridValidRowModel = an
    * @default false
    */
   virtualizeColumnsWithAutoRowHeight: boolean;
+  /**
+   * Sets the tab navigation behavior for the Data Grid.
+   * - "none": No Data Grid specific tab navigation. Pressing the tab key will move the focus to the next element in the tab sequence.
+   * - "content": Pressing the tab key will move the focus to the next cell in the same row or the first cell in the next row. Shift+Tab will move the focus to the previous cell in the same row or the last cell in the previous row. Tab navigation is not enabled for the header.
+   * - "header": Pressing the tab key will move the focus to the next column group, column header or header filter. Shift+Tab will move the focus to the previous column group, column header or header filter. Tab navigation is not enabled for the content.
+   * - "all": Combines the "content" and "header" behavior.
+   * @default "none"
+   */
+  tabNavigation: 'none' | 'content' | 'header' | 'all';
 }
 /**
  * The Data Grid props with no default value.

package/esm/utils/keyboardUtils.d.ts

@@ -1,14 +1,7 @@
 import * as React from 'react';
 export declare function isPrintableKey(event: React.KeyboardEvent<HTMLElement>): boolean;
-export declare const GRID_MULTIPLE_SELECTION_KEYS: string[];
-export declare const GRID_CELL_EXIT_EDIT_MODE_KEYS: string[];
-export declare const GRID_CELL_EDIT_COMMIT_KEYS: string[];
-export declare const isMultipleKey: (key: string) => boolean;
-export declare const isCellEnterEditModeKeys: (event: React.KeyboardEvent<HTMLElement>) => boolean;
-export declare const isCellExitEditModeKeys: (key: string) => boolean;
-export declare const isCellEditCommitKeys: (key: string) => boolean;
 export declare const isNavigationKey: (key: string) => boolean;
 export declare const isKeyboardEvent: (event: any) => event is React.KeyboardEvent<HTMLElement>;
-export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => key is "Escape" | "Tab";
+export declare const isHideMenuKey: (key: React.KeyboardEvent["key"]) => key is "Tab" | "Escape";
 export declare function isPasteShortcut(event: React.KeyboardEvent): boolean;
 export declare function isCopyShortcut(event: KeyboardEvent): boolean;

package/esm/utils/keyboardUtils.js

@@ -8,13 +8,6 @@
 export function isPrintableKey(event) {
   return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
 }
-export const GRID_MULTIPLE_SELECTION_KEYS = ['Meta', 'Control', 'Shift'];
-export const GRID_CELL_EXIT_EDIT_MODE_KEYS = ['Enter', 'Escape', 'Tab'];
-export const GRID_CELL_EDIT_COMMIT_KEYS = ['Enter', 'Tab'];
-export const isMultipleKey = key => GRID_MULTIPLE_SELECTION_KEYS.indexOf(key) > -1;
-export const isCellEnterEditModeKeys = event => isPrintableKey(event) || event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete';
-export const isCellExitEditModeKeys = key => GRID_CELL_EXIT_EDIT_MODE_KEYS.indexOf(key) > -1;
-export const isCellEditCommitKeys = key => GRID_CELL_EDIT_COMMIT_KEYS.indexOf(key) > -1;
 export const isNavigationKey = key => key.indexOf('Arrow') === 0 || key.indexOf('Page') === 0 || key === ' ' || key === 'Home' || key === 'End';
 export const isKeyboardEvent = event => !!event.key;
 export const isHideMenuKey = key => key === 'Tab' || key === 'Escape';

package/hooks/core/gridPropsSelectors.d.ts

@@ -6,4 +6,5 @@ import type { GridRowId } from "../../models/gridRows.js";
  * @param {GridRowModel} row - The row to get the id for
  * @returns {GridRowId} The row id
  */
-export declare const gridRowIdSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridValidRowModel, GridRowId>;
+export declare const gridRowIdSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, import("@mui/x-data-grid").GridValidRowModel, GridRowId>;
+export declare const gridRowSelectableSelector: import("@mui/x-data-grid").OutputSelector<GridStateCommunity, unknown, ((params: import("@mui/x-data-grid").GridRowParams<any>) => boolean) | undefined>;

package/hooks/core/gridPropsSelectors.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridRowIdSelector = void 0;
+exports.gridRowSelectableSelector = exports.gridRowIdSelector = void 0;
 var _gridRowsUtils = require("../features/rows/gridRowsUtils");
 var _createSelector = require("../../utils/createSelector");
 /**
@@ -17,4 +17,7 @@ const gridRowIdSelector = exports.gridRowIdSelector = (0, _createSelector.create
     return row[_gridRowsUtils.GRID_ID_AUTOGENERATED];
   }
   return state.props.getRowId ? state.props.getRowId(row) : row.id;
+});
+const gridRowSelectableSelector = exports.gridRowSelectableSelector = (0, _createSelector.createRootSelector)(state => {
+  return state.props.isRowSelectable;
 });

package/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -8,6 +8,7 @@ import { GridHydrateRowsValue } from "../../features/rows/gridRowsInterfaces.js"
 import { GridPreferencePanelsValue } from "../../features/preferencesPanel/index.js";
 import { GridGetRowsParams, GridGetRowsResponse } from "../../../models/gridDataSource.js";
 import { HeightEntry } from "../../features/rows/gridRowsMetaInterfaces.js";
+import type { RowReorderDropPosition } from "../../../models/api/gridRowApi.js";
 export type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
 export interface GridPipeProcessingLookup {
   columnMenu: {
@@ -97,12 +98,12 @@ export interface GridPipeProcessingLookup {
    *   - For example before first row is `0` and after the last row is `rows.length`.
    * If the reorder is invalid, it returns `-1`.
    */
-  getRowReorderTargetIndex: {
-    value: number;
+  isRowReorderValid: {
+    value: boolean;
     context: {
       sourceRowId: GridRowId;
       targetRowId: GridRowId;
-      dropPosition: 'above' | 'below';
+      dropPosition: RowReorderDropPosition;
       dragDirection: 'up' | 'down';
     };
   };

package/hooks/core/useGridProps.js

@@ -20,14 +20,20 @@ const propsStateInitializer = (state, props) => {
 };
 exports.propsStateInitializer = propsStateInitializer;
 const useGridProps = (apiRef, props) => {
+  const isFirstRender = React.useRef(true);
   React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
     apiRef.current.setState(state => (0, _extends2.default)({}, state, {
       props: {
         listView: props.listView,
         getRowId: props.getRowId,
-        isCellEditable: props.isCellEditable
+        isCellEditable: props.isCellEditable,
+        isRowSelectable: props.isRowSelectable
       }
     }));
-  }, [apiRef, props.listView, props.getRowId, props.isCellEditable]);
+  }, [apiRef, props.listView, props.getRowId, props.isCellEditable, props.isRowSelectable]);
 };
 exports.useGridProps = useGridProps;

package/hooks/core/useGridVirtualizer.d.ts

@@ -1,9 +1,83 @@
-import { RefObject } from '@mui/x-internals/types';
-import { GridPrivateApiCommunity } from "../../models/api/gridApiCommunity.js";
-import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
-type RootProps = DataGridProcessedProps;
+import * as React from 'react';
+import { Dimensions, Virtualization } from '@mui/x-virtualizer';
 /**
  * Virtualizer setup
  */
-export declare function useGridVirtualizer(apiRef: RefObject<GridPrivateApiCommunity>, rootProps: RootProps): void;
-export {};
+export declare function useGridVirtualizer(): {
+  store: import("@mui/x-internals/store").Store<Dimensions.State & Virtualization.State & import("@mui/x-virtualizer").Colspan.State & import("@mui/x-virtualizer").Rowspan.State>;
+  api: {
+    updateDimensions: (firstUpdate?: boolean) => void;
+    debouncedUpdateDimensions: (((firstUpdate?: boolean) => void) & import("@mui/x-internals/throttle").Cancelable) | undefined;
+    rowsMeta: {
+      getRowHeight: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      setLastMeasuredRowIndex: (index: number) => void;
+      storeRowHeightMeasurement: (id: import("@mui/x-virtualizer/models").RowId, height: number) => void;
+      hydrateRowsMeta: () => void;
+      observeRowHeight: (element: Element, rowId: import("@mui/x-virtualizer/models").RowId) => () => void | undefined;
+      rowHasAutoHeight: (id: import("@mui/x-virtualizer/models").RowId) => any;
+      getRowHeightEntry: (rowId: import("@mui/x-virtualizer/models").RowId) => any;
+      getLastMeasuredRowIndex: () => number;
+      resetRowHeights: () => void;
+    };
+  } & {
+    getters: {
+      setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+      getOffsetTop: () => number;
+      getRows: (rowParams?: {
+        rows?: import("@mui/x-virtualizer/models").RowEntry[];
+        position?: import("@mui/x-virtualizer/models").PinnedRowPosition;
+        renderContext?: import("@mui/x-virtualizer/models").RenderContext;
+      }, unstable_rowTree?: Record<import("@mui/x-virtualizer/models").RowId, any>) => React.ReactNode[];
+      rows: import("@mui/x-virtualizer/models").RowEntry[];
+      getContainerProps: () => {
+        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
+      };
+      getScrollerProps: () => {
+        ref: (node: HTMLDivElement | null) => (() => void | undefined) | undefined;
+        style: React.CSSProperties;
+        role: string;
+        tabIndex: number | undefined;
+      };
+      getContentProps: () => {
+        ref: (node: HTMLDivElement | null) => void;
+        style: React.CSSProperties;
+        role: string;
+      };
+      getScrollbarVerticalProps: () => {
+        ref: (node: HTMLDivElement | null) => void;
+        scrollPosition: React.RefObject<{
+          top: number;
+          left: number;
+        }>;
+      };
+      getScrollbarHorizontalProps: () => {
+        ref: (node: HTMLDivElement | null) => void;
+        scrollPosition: React.RefObject<{
+          top: number;
+          left: number;
+        }>;
+      };
+      getScrollAreaProps: () => {
+        scrollPosition: React.RefObject<{
+          top: number;
+          left: number;
+        }>;
+      };
+    };
+    useVirtualization: () => import("@mui/x-virtualizer").BaseState;
+    setPanels: React.Dispatch<React.SetStateAction<Readonly<Map<any, React.ReactNode>>>>;
+    forceUpdateRenderContext: () => void;
+    scheduleUpdateRenderContext: () => void;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
+    getHiddenCellsOrigin: () => Record<import("@mui/x-virtualizer/models").RowId, Record<number, number>>;
+  } & {
+    resetColSpan: () => void;
+    getCellColSpanInfo: (rowId: import("@mui/x-virtualizer/models").RowId, columnIndex: import("@mui/x-internals/types").integer) => import("@mui/x-virtualizer/models").CellColSpanInfo | undefined;
+    calculateColSpan: (rowId: import("@mui/x-virtualizer/models").RowId, minFirstColumn: import("@mui/x-internals/types").integer, maxLastColumn: import("@mui/x-internals/types").integer, columns: import("@mui/x-virtualizer/models").ColumnWithWidth[]) => void;
+  } & {
+    getHiddenCellsOrigin: () => Record<number, Record<number, number>>;
+  } & {
+    getViewportPageSize: () => number;
+  };
+};

package/hooks/core/useGridVirtualizer.js

@@ -30,10 +30,11 @@ var _dataGridPropsDefaultValues = require("../../constants/dataGridPropsDefaultV
 var _gridRowsUtils = require("../features/rows/gridRowsUtils");
 var _gridColumnsUtils = require("../features/columns/gridColumnsUtils");
 var _useGridOverlays = require("../features/overlays/useGridOverlays");
+var _useGridRootProps = require("../utils/useGridRootProps");
+var _useGridPrivateApiContext = require("../utils/useGridPrivateApiContext");
+var _useGridRowsMeta = require("../features/rows/useGridRowsMeta");
+var _utils = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
-function identity(x) {
-  return x;
-}
 const columnsTotalWidthSelector = (0, _createSelector.createSelector)(_gridColumnsSelector.gridVisibleColumnDefinitionsSelector, _gridColumnsSelector.gridColumnPositionsSelector, (visibleColumns, positions) => {
   const colCount = visibleColumns.length;
   if (colCount === 0) {
@@ -57,8 +58,10 @@ const addGridDimensionsCreator = () => (0, _lruMemoize.lruMemoize)((dimensions,
 /**
  * Virtualizer setup
  */
-function useGridVirtualizer(apiRef, rootProps) {
+function useGridVirtualizer() {
   const isRtl = (0, _RtlProvider.useRtl)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const {
     listView
   } = rootProps;
@@ -113,9 +116,11 @@ function useGridVirtualizer(apiRef, rootProps) {
   } = rootProps;
   // </ROWS_META>
 
-  const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
   const RowSlot = rootProps.slots.row;
   const rowSlotProps = rootProps.slotProps?.row;
+  const focusedVirtualCell = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector);
+  // We need it to trigger a new render, but rowsMeta needs access to the latest value, hence we cannot pass it to the focusedVirtualCell callback in the virtualizer params
+  (0, _utils.eslintUseValue)(focusedVirtualCell);
   const virtualizer = (0, _xVirtualizer.useVirtualizer)({
     refs: {
       container: apiRef.current.mainElementRef,
@@ -179,7 +184,7 @@ function useGridVirtualizer(apiRef, rootProps) {
     } : undefined, [apiRef, getRowSpacing, currentPage.rows, currentPage.rowIdToIndexMap]),
     applyRowHeight: (0, _useEventCallback.default)((entry, row) => apiRef.current.unstable_applyPipeProcessors('rowHeight', entry, row)),
     virtualizeColumnsWithAutoRowHeight: rootProps.virtualizeColumnsWithAutoRowHeight,
-    focusedVirtualCell: (0, _useEventCallback.default)(() => focusedVirtualCell),
+    focusedVirtualCell: (0, _useEventCallback.default)(() => (0, _gridFocusedVirtualCellSelector.gridFocusedVirtualCellSelector)(apiRef)),
     resizeThrottleMs: rootProps.resizeThrottleMs,
     onResize: (0, _useEventCallback.default)(size => apiRef.current.publishEvent('resize', size)),
     onWheel: (0, _useEventCallback.default)(event => {
@@ -235,23 +240,33 @@ function useGridVirtualizer(apiRef, rootProps) {
     apiRef.current.store.state.virtualization = virtualizer.store.state.virtualization;
   });
   (0, _store.useStoreEffect)(virtualizer.store, _xVirtualizer.Dimensions.selectors.dimensions, (_, dimensions) => {
+    if (!dimensions.isReady) {
+      return;
+    }
     apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
       dimensions: addGridDimensions(dimensions, headerHeight, groupHeaderHeight, headerFilterHeight, headersTotalHeight)
     }));
   });
-  (0, _store.useStoreEffect)(virtualizer.store, identity, (_, state) => {
-    if (state.rowsMeta !== apiRef.current.state.rowsMeta) {
+  (0, _store.useStoreEffect)(virtualizer.store, _xVirtualizer.Dimensions.selectors.rowsMeta, (_, rowsMeta) => {
+    if (rowsMeta !== apiRef.current.state.rowsMeta) {
       apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
-        rowsMeta: state.rowsMeta
+        rowsMeta
       }));
     }
-    if (state.virtualization !== apiRef.current.state.virtualization) {
+  });
+  (0, _store.useStoreEffect)(virtualizer.store, _xVirtualizer.Virtualization.selectors.store, (_, virtualization) => {
+    if (virtualization.renderContext === _xVirtualizer.EMPTY_RENDER_CONTEXT) {
+      return;
+    }
+    if (virtualization !== apiRef.current.state.virtualization) {
       apiRef.current.setState(gridState => (0, _extends2.default)({}, gridState, {
-        virtualization: state.virtualization
+        virtualization
       }));
     }
   });
   apiRef.current.register('private', {
     virtualizer
   });
+  (0, _useGridRowsMeta.useGridRowsMeta)(apiRef, rootProps);
+  return virtualizer;
 }

package/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -19,7 +19,9 @@ const columnGroupsStateInitializer = (state, props, apiRef) => {
     lastColumnGroupingModel: props.columnGroupingModel
   };
   if (!props.columnGroupingModel) {
-    return state;
+    return (0, _extends2.default)({}, state, {
+      columnGrouping: undefined
+    });
   }
   const columnFields = (0, _columns.gridColumnFieldsSelector)(apiRef);
   const visibleColumnFields = (0, _columns.gridVisibleColumnFieldsSelector)(apiRef);
@@ -73,6 +75,9 @@ const useGridColumnGrouping = (apiRef, props) => {
     });
   }, [apiRef, props.columnGroupingModel]);
   const updateColumnGroupingState = React.useCallback(columnGroupingModel => {
+    if (!columnGroupingModel && !apiRef.current.caches.columnGrouping.lastColumnGroupingModel) {
+      return;
+    }
     apiRef.current.caches.columnGrouping.lastColumnGroupingModel = columnGroupingModel;
     // @ts-expect-error Move this logic to `Pro` package
     const pinnedColumns = apiRef.current.getPinnedColumns?.() ?? {};