@mui/x-data-grid-premium 8.18.0 → 8.20.0

package/CHANGELOG.md

@@ -5,6 +5,181 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.20.0
+
+_Nov 26, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔃 Data Grid tree data now supports row reordering. See the [Drag-and-drop tree data reordering](https://mui.com/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) section for more details.
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @siriwatknp, @JCQuintas, @MBilalShafi, @prakhargupta1
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.20.0`
+
+- [DataGrid] Fix RTL virtualization to display columns when viewport width is larger than the grid (#20409) @siriwatknp
+- [DataGrid] Fix row range selection (#20442) @arminmeh
+- [DataGrid] Initialize data grid core packages (#20276) @cherniavskii
+- [DataGrid] Improve accessibility of the sort icon (#20430) @arminmeh
+- [DataGrid] Use `viewport` as a boundary for the `BasePopper` flip (#20311) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.20.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.20.0`, plus:
+
+- [DataGridPro] Avoid automatic scroll back to the focused header filter after it leaves the viewport (#20416) @arminmeh
+- [DataGridPro] Tree data row reordering (#19401) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.20.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.20.0`
+
+- [charts] Fix item tooltip position with node anchor (#20421) @alexfauquette
+- [charts] Fix radar item tooltip closing bug (#20429) @alexfauquette
+- [charts] Move series processing to selector (#20388) @JCQuintas
+- [charts] Prevent pointer out from removing controlled highlight (#20385) @alexfauquette
+
+#### `@mui/x-charts-pro@8.20.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.20.0`, plus:
+
+- [charts-pro] Fix Content-Security-Policy nonce not being correctly set on export (#20395) @bernardobelchior
+- [charts-pro] Improve vertical zoom slider thumb on mobile (#20439) @bernardobelchior
+- [charts-pro] Provide arguments to the `AreaPlotRoot` styled component (#20414) @arminmeh
+- [charts-pro] Remove grid outside the drawing area (#20412) @alexfauquette
+
+#### `@mui/x-charts-premium@8.20.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.20.0`, plus:
+
+- [charts-premium] Add explicit return type to `ChartsRenderer` for better compatibility with React 18 (#20413) @arminmeh
+
+### Docs
+
+- [docs] Add `llms.txt` link to the sidebar (#20312) @siriwatknp
+- [docs] Add a line chart demo for the Overview section (#20239) @prakhargupta1
+
+## 8.19.0
+
+_Nov 20, 2025_
+
+We'd like to extend a big thank you to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔎 Add pan on `wheel` to the charts zoom
+- ⌨️ Allow opt-in to [tab navigation](https://mui.com/x/react-data-grid/accessibility/#tab-navigation) inside the Data Grid.
+- ⚙️ New way of defining [action columns](https://mui.com/x/react-data-grid/column-definition/#ActionsWithModalGrid.tsx) in the Data Grid that makes it easier to keep `columns` prop stable.
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to these community members for their valuable contributions:
+@lauri865, @noobyogi0010, @sai6855
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mj12albert, @noraleonte, @rita-codes, @siriwatknp, @ZeeshanTamboli
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.19.0`
+
+- [DataGrid] Add `tabNavigation` prop to control tab navigation in the grid (#20286) @arminmeh
+- [DataGrid] Allow to focus disabled checkbox cells (#19959) @mj12albert
+- [DataGrid] Alternative actions column definition API (#15041) @cherniavskii
+- [DataGrid] Fix failing tests (#20332) @cherniavskii
+- [DataGrid] Prevent Safari 26 error in the event handler (#20369) @arminmeh
+- [DataGrid] Undeprecate the `autoHeight` prop (#20363) @cherniavskii
+- [DataGrid] Fix print export grid dimensions with dynamic row height and print styles (#19835) @cherniavskii
+
+#### `@mui/x-data-grid-pro@8.19.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@8.19.0`.
+
+#### `@mui/x-data-grid-premium@8.19.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@8.19.0`, plus:
+
+- [DataGridPremium] Fix aggregation with sorting (#19892) @lauri865
+- [DataGridPremium] Lock `ExcelJS` version (#20329) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.19.0`
+
+- [pickers] Do not loose `slotProps.field.slotProps` (#20322) @flaviendelangle
+
+#### `@mui/x-date-pickers-pro@8.19.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@8.19.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.19.0`
+
+- [charts] Expose `niceDomain` utility (#20250) @bernardobelchior
+- [charts] Fix benchmark regression by downgrading to JSDOM v26 (#20405) @bernardobelchior
+- [charts] Fix Pie Chart keyboard focus highlight (#20358) @JCQuintas
+- [charts] Memoize series selectors (#20326) @JCQuintas
+- [charts] Relax dataset type (#20294) @bernardobelchior
+- [charts] Remove `touch-action: pan-y` when zoom is disabled (#20204) @bernardobelchior
+- [charts] Use `getBBox()` for correct SVG sizes in firefox (#20309) @JCQuintas
+- [charts] Use directly selector from `@mui/x-internals` (#20365) @alexfauquette
+- [charts] Fix unnecessary errors in dev mode (#20380) @JCQuintas
+
+#### `@mui/x-charts-pro@8.19.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-charts@8.19.0`, plus:
+
+- [charts-pro] Add pan on `wheel` to zoom (#19998) @JCQuintas
+- [charts-pro] Fix zoom slider preview having an opaque background in dark mode (#20367) @bernardobelchior
+
+#### `@mui/x-charts-premium@8.19.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-charts-pro@8.19.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.19.0`
+
+- [tree view] Enable lazy load when children count is not know in tree view (#18680) @noobyogi0010
+- [tree view] Fix unwanted behaviors on the item re-ordering (#20368) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.19.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-tree-view@8.19.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.19.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add minimum Typescript version to migration guide (#20320) @siriwatknp
+- [docs] Fix Autosizing documentation (#20348) @siriwatknp
+- [docs] Fix separator opacity in demo (#20293) @sai6855
+- [docs] Replace deprecated `LoadingButton` with `Button` component (#20208) @Janpot
+
+### Core
+
+- [code-infra] Add new broken links checker (#20120) @Janpot
+- [code-infra] Disable Codspeed pipeline (#20370) @JCQuintas
+- [code-infra] Optimize `checkMaterialVersion` (#20307) @Janpot
+- [code-infra] Use utils from code-infra for changelog and PR creation (#20406) @brijeshb42
+- [docs-infra] Revert `@docsearch/react` (#20313) @Janpot
+
+### Miscellaneous
+
+- [test] Fix browser tests skipping some projects (#20318) @cherniavskii
+- [test] Update `use-react-version` pnpm script (#20319) @cherniavskii
+
 ## 8.18.0
 
 <!-- generated comparing v8.17.0..master -->

package/DataGridPremium/DataGridPremium.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridValidRowModel } from '@mui/x-data-grid-pro';
+import { type GridValidRowModel } from '@mui/x-data-grid-pro';
 import { DataGridPremiumProps } from "../models/dataGridPremiumProps.js";
 export type { GridPremiumSlotsComponent as GridSlots } from "../models/index.js";
 interface DataGridPremiumComponent {

package/DataGridPremium/DataGridPremium.js

@@ -50,7 +50,7 @@ const configuration = {
     useGridParamsOverridableMethods: _useGridParamsOverridableMethods.useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2Mjk5MjAwMDAwMA==";
+const releaseInfo = "MTc2NDExNTIwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -168,13 +168,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   'aria-labelledby': _propTypes.default.string,
   /**
-   * 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: _propTypes.default.bool,
   /**
@@ -600,12 +598,29 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @returns {boolean} A boolean indicating if the group is expanded.
    */
   isGroupExpandedByDefault: _propTypes.default.func,
+  /**
+   * Indicates whether a row is reorderable.
+   * @param {object} params With all properties from the row.
+   * @param {R} params.row The row model of the row that the current cell belongs to.
+   * @param {GridTreeNode} params.rowNode The node of the row that the current cell belongs to.
+   * @returns {boolean} A boolean indicating if the row is reorderable.
+   */
+  isRowReorderable: _propTypes.default.func,
   /**
    * Determines if a row can be selected.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
    * @returns {boolean} A boolean indicating if the row is selectable.
    */
   isRowSelectable: _propTypes.default.func,
+  /**
+   * Indicates if a row reorder attempt is valid.
+   * Can be used to disable certain row reorder operations based on the context.
+   * The internal validation is still applied, preventing unsupported use-cases.
+   * Use `isValidRowReorder()` to add additional validation rules to the default ones.
+   * @param {ReorderValidationContext} context The context object containing all information about the reorder operation.
+   * @returns {boolean} A boolean indicating if the reorder operation should go through.
+   */
+  isValidRowReorder: _propTypes.default.func,
   /**
    * If `true`, moving the mouse pointer outside the grid before releasing the mouse button
    * in a column re-order action will not cause the column to jump back to its original position.
@@ -1276,6 +1291,15 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default 80
    */
   scrollEndThreshold: _propTypes.default.number,
+  /**
+   * Updates the tree path in a row model.
+   * Used when reordering rows across different parents in tree data.
+   * @template R
+   * @param {string[]} path The new path for the row.
+   * @param {R} row The row model to update.
+   * @returns {R} The updated row model with the new path.
+   */
+  setTreeDataPath: _propTypes.default.func,
   /**
    * If `true`, vertical borders will be displayed between cells.
    * @default false
@@ -1331,6 +1355,15 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  /**
+   * 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: _propTypes.default.oneOf(['all', 'content', 'header', 'none']),
   /**
    * If positive, the Data Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
    * It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.

package/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -2,4 +2,4 @@ import { RefObject } from '@mui/x-internals/types';
 import { type GridConfiguration } from '@mui/x-data-grid-pro/internals';
 import { GridPrivateApiPremium } from "../models/gridApiPremium.js";
 import { DataGridPremiumProcessedProps } from "../models/dataGridPremiumProps.js";
-export declare const useDataGridPremiumComponent: (apiRef: RefObject<GridPrivateApiPremium>, inProps: DataGridPremiumProcessedProps, configuration: GridConfiguration<GridPrivateApiPremium, DataGridPremiumProcessedProps>) => DataGridPremiumProcessedProps;
+export declare const useDataGridPremiumComponent: (apiRef: RefObject<GridPrivateApiPremium>, inProps: DataGridPremiumProcessedProps, configuration: GridConfiguration) => DataGridPremiumProcessedProps;

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -100,7 +100,6 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridAiAssistant.aiAssistantStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridChartsIntegration.chartsIntegrationStateInitializer, apiRef, props);
-  (0, _internals.useGridVirtualizer)(apiRef, props);
   (0, _useGridSidebar.useGridSidebar)(apiRef, props);
   (0, _useGridPivoting.useGridPivoting)(apiRef, props, inProps.columns, inProps.rows);
   (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props);
@@ -129,7 +128,6 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _internals.useGridColumnReorder)(apiRef, props);
   (0, _internals.useGridColumnResize)(apiRef, props);
   (0, _internals.useGridPagination)(apiRef, props);
-  (0, _internals.useGridRowsMeta)(apiRef, props);
   (0, _internals.useGridRowReorder)(apiRef, props);
   (0, _internals.useGridScroll)(apiRef, props);
   (0, _internals.useGridInfiniteLoader)(apiRef, props);
@@ -152,6 +150,9 @@ const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   (0, _useGridPivoting.useGridPivotingExportState)(apiRef);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.
+  (0, _internals.useFirstRender)(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
   React.useEffect(() => {
     apiRef.current.runAppliersForPendingProcessors();
   });

package/components/GridFooterCell.js

@@ -13,7 +13,7 @@ var _styles = require("@mui/material/styles");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "focusElementRef", "hasFocus", "tabIndex", "isEditable"];
+const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "hasFocus", "tabIndex", "isEditable"];
 const GridFooterCellRoot = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'FooterCell'

package/esm/DataGridPremium/DataGridPremium.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridValidRowModel } from '@mui/x-data-grid-pro';
+import { type GridValidRowModel } from '@mui/x-data-grid-pro';
 import { DataGridPremiumProps } from "../models/dataGridPremiumProps.js";
 export type { GridPremiumSlotsComponent as GridSlots } from "../models/index.js";
 interface DataGridPremiumComponent {

package/esm/DataGridPremium/DataGridPremium.js

@@ -43,7 +43,7 @@ const configuration = {
     useGridParamsOverridableMethods
   }
 };
-const releaseInfo = "MTc2Mjk5MjAwMDAwMA==";
+const releaseInfo = "MTc2NDExNTIwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -161,13 +161,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   'aria-labelledby': PropTypes.string,
   /**
-   * 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: PropTypes.bool,
   /**
@@ -593,12 +591,29 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @returns {boolean} A boolean indicating if the group is expanded.
    */
   isGroupExpandedByDefault: PropTypes.func,
+  /**
+   * Indicates whether a row is reorderable.
+   * @param {object} params With all properties from the row.
+   * @param {R} params.row The row model of the row that the current cell belongs to.
+   * @param {GridTreeNode} params.rowNode The node of the row that the current cell belongs to.
+   * @returns {boolean} A boolean indicating if the row is reorderable.
+   */
+  isRowReorderable: PropTypes.func,
   /**
    * Determines if a row can be selected.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
    * @returns {boolean} A boolean indicating if the row is selectable.
    */
   isRowSelectable: PropTypes.func,
+  /**
+   * Indicates if a row reorder attempt is valid.
+   * Can be used to disable certain row reorder operations based on the context.
+   * The internal validation is still applied, preventing unsupported use-cases.
+   * Use `isValidRowReorder()` to add additional validation rules to the default ones.
+   * @param {ReorderValidationContext} context The context object containing all information about the reorder operation.
+   * @returns {boolean} A boolean indicating if the reorder operation should go through.
+   */
+  isValidRowReorder: PropTypes.func,
   /**
    * If `true`, moving the mouse pointer outside the grid before releasing the mouse button
    * in a column re-order action will not cause the column to jump back to its original position.
@@ -1269,6 +1284,15 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default 80
    */
   scrollEndThreshold: PropTypes.number,
+  /**
+   * Updates the tree path in a row model.
+   * Used when reordering rows across different parents in tree data.
+   * @template R
+   * @param {string[]} path The new path for the row.
+   * @param {R} row The row model to update.
+   * @returns {R} The updated row model with the new path.
+   */
+  setTreeDataPath: PropTypes.func,
   /**
    * If `true`, vertical borders will be displayed between cells.
    * @default false
@@ -1324,6 +1348,15 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * 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: PropTypes.oneOf(['all', 'content', 'header', 'none']),
   /**
    * If positive, the Data Grid will throttle updates coming from `apiRef.current.updateRows` and `apiRef.current.setRows`.
    * It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each  individual update.

package/esm/DataGridPremium/useDataGridPremiumComponent.d.ts

@@ -2,4 +2,4 @@ import { RefObject } from '@mui/x-internals/types';
 import { type GridConfiguration } from '@mui/x-data-grid-pro/internals';
 import { GridPrivateApiPremium } from "../models/gridApiPremium.js";
 import { DataGridPremiumProcessedProps } from "../models/dataGridPremiumProps.js";
-export declare const useDataGridPremiumComponent: (apiRef: RefObject<GridPrivateApiPremium>, inProps: DataGridPremiumProcessedProps, configuration: GridConfiguration<GridPrivateApiPremium, DataGridPremiumProcessedProps>) => DataGridPremiumProcessedProps;
+export declare const useDataGridPremiumComponent: (apiRef: RefObject<GridPrivateApiPremium>, inProps: DataGridPremiumProcessedProps, configuration: GridConfiguration) => DataGridPremiumProcessedProps;

package/esm/DataGridPremium/useDataGridPremiumComponent.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridInitialization, useGridInitializeState, useGridVirtualizer, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, useGridInfiniteLoadingIntersection, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer, rowReorderStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, useGridInfiniteLoadingIntersection, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer, rowReorderStateInitializer, useFirstRender } from '@mui/x-data-grid-pro/internals';
 import { useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridDataSourcePremium as useGridDataSource } from "../hooks/features/dataSource/useGridDataSourcePremium.js";
 // Premium-only features
@@ -92,7 +92,6 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridInitializeState(aiAssistantStateInitializer, apiRef, props);
   useGridInitializeState(chartsIntegrationStateInitializer, apiRef, props);
-  useGridVirtualizer(apiRef, props);
   useGridSidebar(apiRef, props);
   useGridPivoting(apiRef, props, inProps.columns, inProps.rows);
   useGridRowGrouping(apiRef, props);
@@ -121,7 +120,6 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridColumnReorder(apiRef, props);
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
-  useGridRowsMeta(apiRef, props);
   useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
@@ -144,6 +142,9 @@ export const useDataGridPremiumComponent = (apiRef, inProps, configuration) => {
   useGridPivotingExportState(apiRef);
 
   // Should be the last thing to run, because all pre-processors should have been registered by now.
+  useFirstRender(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
   React.useEffect(() => {
     apiRef.current.runAppliersForPendingProcessors();
   });

package/esm/components/GridFooterCell.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "focusElementRef", "hasFocus", "tabIndex", "isEditable"];
+const _excluded = ["formattedValue", "colDef", "cellMode", "row", "api", "id", "value", "rowNode", "field", "hasFocus", "tabIndex", "isEditable"];
 import { getDataGridUtilityClass } from '@mui/x-data-grid';
 import { vars } from '@mui/x-data-grid/internals';
 import { styled } from '@mui/material/styles';

package/esm/hooks/features/aggregation/useGridAggregation.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { isObjectEmpty } from '@mui/x-internals/isObjectEmpty';
-import { gridColumnLookupSelector, useGridEvent, useGridApiMethod, useRunOncePerLoop, gridRenderContextSelector, gridVisibleColumnFieldsSelector, gridSortModelSelector } from '@mui/x-data-grid-pro';
+import { gridColumnLookupSelector, useGridEvent, useGridApiMethod, useRunOncePerLoop, gridRenderContextSelector, gridVisibleColumnFieldsSelector, gridSortModelSelector, gridRowMaximumTreeDepthSelector } from '@mui/x-data-grid-pro';
 import { useGridRegisterPipeProcessor, gridPivotActiveSelector } from '@mui/x-data-grid-pro/internals';
 import { gridAggregationLookupSelector, gridAggregationModelSelector } from "./gridAggregationSelectors.js";
 import { getAggregationRules, mergeStateWithAggregationModel, areAggregationRulesEqual } from "./gridAggregationUtils.js";
@@ -38,8 +38,8 @@ export const useGridAggregation = (apiRef, props) => {
     }
   }, [apiRef]);
   const abortControllerRef = React.useRef(null);
-  const applyAggregation = React.useCallback(reason => {
-    // Abort previous if any
+  const applyAggregation = React.useCallback(() => {
+    // Abort previous if we're proceeding
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
@@ -48,19 +48,17 @@ export const useGridAggregation = (apiRef, props) => {
     const aggregationRules = getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
     const aggregatedFields = Object.keys(aggregationRules);
     const currentAggregationLookup = gridAggregationLookupSelector(apiRef);
-    const needsSorting = shouldApplySorting(aggregationRules, aggregatedFields);
-    if (reason === 'sort' && !needsSorting) {
-      // no need to re-apply aggregation on `sortedRowsSet` if sorting is not needed
-      return;
-    }
     const renderContext = gridRenderContextSelector(apiRef);
     const visibleColumns = gridVisibleColumnFieldsSelector(apiRef);
     const chunks = [];
+    const sortedAggregatedFields = gridSortModelSelector(apiRef).map(s => s.field).filter(field => aggregatedFields.includes(field));
     const visibleAggregatedFields = visibleColumns.slice(renderContext.firstColumnIndex, renderContext.lastColumnIndex + 1).filter(field => aggregatedFields.includes(field));
+    const visibleAggregatedFieldsWithSort = [...visibleAggregatedFields, ...sortedAggregatedFields.filter(field => !visibleAggregatedFields.includes(field))];
+    const hasAggregatedSortedField = gridRowMaximumTreeDepthSelector(apiRef) > 1 && sortedAggregatedFields.length > 0;
     if (visibleAggregatedFields.length > 0) {
-      chunks.push(visibleAggregatedFields);
+      chunks.push(visibleAggregatedFieldsWithSort);
     }
-    const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFields.includes(field));
+    const otherAggregatedFields = aggregatedFields.filter(field => !visibleAggregatedFieldsWithSort.includes(field));
     const chunkSize = 20; // columns per chunk
     for (let i = 0; i < otherAggregatedFields.length; i += chunkSize) {
       chunks.push(otherAggregatedFields.slice(i, i + chunkSize));
@@ -75,11 +73,7 @@ export const useGridAggregation = (apiRef, props) => {
       }
       const currentChunk = chunks[chunkIndex];
       if (!currentChunk) {
-        const sortModel = gridSortModelSelector(apiRef).map(s => s.field);
-        const hasAggregatedSorting = sortModel.some(field => aggregationRules[field]);
-        if (hasAggregatedSorting) {
-          apiRef.current.applySorting();
-        }
+        apiRef.current.publishEvent('aggregationLookupSet');
         abortControllerRef.current = null;
         return;
       }
@@ -106,6 +100,9 @@ export const useGridAggregation = (apiRef, props) => {
           lookup: _extends({}, aggregationLookup)
         })
       }));
+      if (chunkIndex === 0 && hasAggregatedSortedField) {
+        apiRef.current.applySorting();
+      }
       chunkIndex += 1;
       if (performance.now() - chunkStartTime < timeLimit) {
         processChunk();
@@ -136,7 +133,9 @@ export const useGridAggregation = (apiRef, props) => {
       }
     };
   }, []);
-  const deferredApplyAggregation = useRunOncePerLoop(applyAggregation);
+  const {
+    schedule: deferredApplyAggregation
+  } = useRunOncePerLoop(applyAggregation);
   const aggregationApi = {
     setAggregationModel
   };
@@ -177,7 +176,24 @@ export const useGridAggregation = (apiRef, props) => {
   useGridEvent(apiRef, 'aggregationModelChange', checkAggregationRulesDiff);
   useGridEvent(apiRef, 'columnsChange', checkAggregationRulesDiff);
   useGridEvent(apiRef, 'filteredRowsSet', deferredApplyAggregation);
-  useGridEvent(apiRef, 'sortedRowsSet', () => deferredApplyAggregation('sort'));
+  const lastSortModel = React.useRef(gridSortModelSelector(apiRef));
+  useGridEvent(apiRef, 'sortedRowsSet', () => {
+    const sortModel = gridSortModelSelector(apiRef);
+    if (lastSortModel.current === sortModel) {
+      return;
+    }
+    lastSortModel.current = sortModel;
+    const aggregationRules = getAggregationRules(gridColumnLookupSelector(apiRef), gridAggregationModelSelector(apiRef), props.aggregationFunctions, !!props.dataSource);
+    const aggregatedFields = Object.keys(aggregationRules);
+    if (!aggregatedFields.length) {
+      return;
+    }
+    const needsSorting = shouldApplySorting(aggregationRules, aggregatedFields);
+    if (!needsSorting) {
+      return;
+    }
+    deferredApplyAggregation();
+  });
 
   /**
    * EFFECTS
@@ -187,4 +203,9 @@ export const useGridAggregation = (apiRef, props) => {
       apiRef.current.setAggregationModel(props.aggregationModel);
     }
   }, [apiRef, props.aggregationModel]);
+  React.useEffect(() => {
+    if (props.getAggregationPosition !== undefined) {
+      deferredApplyAggregation();
+    }
+  }, [deferredApplyAggregation, props.getAggregationPosition]);
 };

package/esm/hooks/features/chartsIntegration/useGridChartsIntegration.js

@@ -498,6 +498,7 @@ export const useGridChartsIntegration = (apiRef, props) => {
   useGridEvent(apiRef, 'pivotModeChange', runIf(isChartsIntegrationAvailable, () => debouncedHandleColumnDataUpdate(syncedChartIds)));
   useGridEvent(apiRef, 'filteredRowsSet', runIf(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   useGridEvent(apiRef, 'sortedRowsSet', runIf(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
+  useGridEvent(apiRef, 'aggregationLookupSet', runIf(isChartsIntegrationAvailable, () => debouncedHandleRowDataUpdate(syncedChartIds)));
   const stateExportPreProcessing = React.useCallback((prevState, exportContext) => {
     if (!props.chartsIntegration || !props.experimentalFeatures?.charts) {
       return prevState;

package/esm/hooks/features/rowGrouping/useGridRowGrouping.d.ts

@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
  */
-export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource" | "treeData">) => void;
+export declare const useGridRowGrouping: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "isGroupExpandedByDefault" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "dataSource" | "treeData" | "isValidRowReorder">) => void;