@mui/x-data-grid-pro 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/DataGridPro/DataGridPro.js

@@ -15,6 +15,7 @@ var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 var _material = require("@mui/x-data-grid/material");
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _useGridRowsOverridableMethods = require("../hooks/features/rows/useGridRowsOverridableMethods");
 var _useDataGridProComponent = require("./useDataGridProComponent");
 var _useDataGridProProps = require("./useDataGridProProps");
 var _propValidation = require("../internals/propValidation");
@@ -26,14 +27,14 @@ const configuration = {
     useCSSVariables: _material.useMaterialCSSVariables,
     useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributesPro,
     useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributesPro,
-    useGridRowsOverridableMethods: _internals.useGridRowsOverridableMethods,
+    useGridRowsOverridableMethods: _useGridRowsOverridableMethods.useGridRowsOverridableMethods,
     useGridParamsOverridableMethods: _internals.useGridParamsOverridableMethods,
     useIsCellEditable: _internals.useIsCellEditable,
     useCellAggregationResult: () => null,
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc2Mjk5MjAwMDAwMA==";
+const releaseInfo = "MTc2NDExNTIwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -90,13 +91,11 @@ DataGridProRaw.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,
   /**
@@ -470,12 +469,29 @@ DataGridProRaw.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.
@@ -992,6 +1008,15 @@ DataGridProRaw.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
@@ -1039,6 +1064,15 @@ DataGridProRaw.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/DataGridPro/useDataGridProComponent.js

@@ -79,7 +79,6 @@ const useDataGridProComponent = (apiRef, props, configuration) => {
   (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
-  (0, _internals.useGridVirtualizer)(apiRef, props);
   (0, _internals.useGridHeaderFiltering)(apiRef, props);
   (0, _useGridTreeData.useGridTreeData)(apiRef, props);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
@@ -102,7 +101,6 @@ const useDataGridProComponent = (apiRef, props, configuration) => {
   (0, _useGridColumnReorder.useGridColumnReorder)(apiRef, props);
   (0, _internals.useGridColumnResize)(apiRef, props);
   (0, _internals.useGridPagination)(apiRef, props);
-  (0, _internals.useGridRowsMeta)(apiRef, props);
   (0, _useGridRowReorder.useGridRowReorder)(apiRef, props);
   (0, _internals.useGridScroll)(apiRef, props);
   (0, _useGridInfiniteLoader.useGridInfiniteLoader)(apiRef, props);
@@ -121,6 +119,9 @@ const useDataGridProComponent = (apiRef, props, configuration) => {
   (0, _internals.useGridListView)(apiRef, props);
 
   // 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/GridDetailPanelToggleCell.js

@@ -83,16 +83,6 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: _propTypes.default.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/components/GridRowReorderCell.js

@@ -44,9 +44,21 @@ function GridRowReorderCell(params) {
   params.row.__reorder__ || (params.rowNode.type === 'group' ? params.rowNode.groupingKey ?? params.id : params.id);
   const cellRef = React.useRef(null);
   const listenerNodeRef = React.useRef(null);
-
-  // TODO: remove sortModel and treeData checks once row reorder is compatible
-  const isDraggable = React.useMemo(() => !!rootProps.rowReordering && !sortModel.length && !rootProps.treeData && Object.keys(editRowsState).length === 0, [rootProps.rowReordering, sortModel, rootProps.treeData, editRowsState]);
+  const isRowReorderable = rootProps.isRowReorderable;
+  // TODO: remove sortModel check once row reorder is compatible
+  const isDraggable = React.useMemo(() => {
+    const baseCondition = !!rootProps.rowReordering && !sortModel.length && Object.keys(editRowsState).length === 0;
+    if (!baseCondition) {
+      return false;
+    }
+    if (isRowReorderable) {
+      return isRowReorderable({
+        row: params.row,
+        rowNode: params.rowNode
+      });
+    }
+    return true;
+  }, [rootProps.rowReordering, isRowReorderable, sortModel, editRowsState, params.row, params.rowNode]);
   const ownerState = {
     isDraggable,
     classes: rootProps.classes
@@ -137,16 +149,6 @@ process.env.NODE_ENV !== "production" ? GridRowReorderCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: _propTypes.default.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/components/GridTreeDataGroupingCell.js

@@ -88,16 +88,6 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: _propTypes.default.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
-    current: _propTypes.default.shape({
-      focus: _propTypes.default.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/components/headerFiltering/GridHeaderFilterCell.js

@@ -150,10 +150,9 @@ const GridHeaderFilterCell = (0, _forwardRef.forwardRef)((props, ref) => {
         focusableElement = inputRef.current;
       }
       const elementToFocus = focusableElement || cellRef.current;
+      const scrollPosition = apiRef.current.getScrollPosition();
       elementToFocus?.focus();
-      if (apiRef.current.columnHeadersContainerRef.current) {
-        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-      }
+      apiRef.current.scroll(scrollPosition);
     }
   }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
   const onKeyDown = React.useCallback(event => {

package/esm/DataGridPro/DataGridPro.js

@@ -5,9 +5,10 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license';
 import { GridRoot, GridContextProvider } from '@mui/x-data-grid';
-import { validateProps, useGridApiInitialization, useGridRowsOverridableMethods, useGridParamsOverridableMethods, useIsCellEditable } from '@mui/x-data-grid/internals';
+import { validateProps, useGridApiInitialization, useGridParamsOverridableMethods, useIsCellEditable } from '@mui/x-data-grid/internals';
 import { useMaterialCSSVariables } from '@mui/x-data-grid/material';
 import { forwardRef } from '@mui/x-internals/forwardRef';
+import { useGridRowsOverridableMethods } from "../hooks/features/rows/useGridRowsOverridableMethods.js";
 import { useDataGridProComponent } from "./useDataGridProComponent.js";
 import { useDataGridProProps } from "./useDataGridProProps.js";
 import { propValidatorsDataGridPro } from "../internals/propValidation.js";
@@ -26,7 +27,7 @@ const configuration = {
     useFilterValueGetter: apiRef => apiRef.current.getRowValue
   }
 };
-const releaseInfo = "MTc2Mjk5MjAwMDAwMA==";
+const releaseInfo = "MTc2NDExNTIwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -83,13 +84,11 @@ DataGridProRaw.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,
   /**
@@ -463,12 +462,29 @@ DataGridProRaw.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.
@@ -985,6 +1001,15 @@ DataGridProRaw.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
@@ -1032,6 +1057,15 @@ DataGridProRaw.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/DataGridPro/useDataGridProComponent.js

@@ -1,7 +1,7 @@
 'use client';
 
 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, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer } from '@mui/x-data-grid/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, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer, useFirstRender } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
 import { useGridColumnReorder, columnReorderStateInitializer } from "../hooks/features/columnReorder/useGridColumnReorder.js";
@@ -72,7 +72,6 @@ export const useDataGridProComponent = (apiRef, props, configuration) => {
   useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
-  useGridVirtualizer(apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
@@ -95,7 +94,6 @@ export const useDataGridProComponent = (apiRef, props, configuration) => {
   useGridColumnReorder(apiRef, props);
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
-  useGridRowsMeta(apiRef, props);
   useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
@@ -114,6 +112,9 @@ export const useDataGridProComponent = (apiRef, props, configuration) => {
   useGridListView(apiRef, props);
 
   // 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/GridDetailPanelToggleCell.js

@@ -75,16 +75,6 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/components/GridRowReorderCell.js

@@ -35,9 +35,21 @@ function GridRowReorderCell(params) {
   params.row.__reorder__ || (params.rowNode.type === 'group' ? params.rowNode.groupingKey ?? params.id : params.id);
   const cellRef = React.useRef(null);
   const listenerNodeRef = React.useRef(null);
-
-  // TODO: remove sortModel and treeData checks once row reorder is compatible
-  const isDraggable = React.useMemo(() => !!rootProps.rowReordering && !sortModel.length && !rootProps.treeData && Object.keys(editRowsState).length === 0, [rootProps.rowReordering, sortModel, rootProps.treeData, editRowsState]);
+  const isRowReorderable = rootProps.isRowReorderable;
+  // TODO: remove sortModel check once row reorder is compatible
+  const isDraggable = React.useMemo(() => {
+    const baseCondition = !!rootProps.rowReordering && !sortModel.length && Object.keys(editRowsState).length === 0;
+    if (!baseCondition) {
+      return false;
+    }
+    if (isRowReorderable) {
+      return isRowReorderable({
+        row: params.row,
+        rowNode: params.rowNode
+      });
+    }
+    return true;
+  }, [rootProps.rowReordering, isRowReorderable, sortModel, editRowsState, params.row, params.rowNode]);
   const ownerState = {
     isDraggable,
     classes: rootProps.classes
@@ -128,16 +140,6 @@ process.env.NODE_ENV !== "production" ? GridRowReorderCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/components/GridTreeDataGroupingCell.js

@@ -80,16 +80,6 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
    * The column field of the cell that triggered the event.
    */
   field: PropTypes.string.isRequired,
-  /**
-   * A ref allowing to set imperative focus.
-   * It can be passed to the element that should receive focus.
-   * @ignore - do not document.
-   */
-  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.shape({
-      focus: PropTypes.func.isRequired
-    })
-  })]),
   /**
    * The cell value formatted with the column valueFormatter.
    */

package/esm/components/headerFiltering/GridHeaderFilterCell.js

@@ -143,10 +143,9 @@ const GridHeaderFilterCell = forwardRef((props, ref) => {
         focusableElement = inputRef.current;
       }
       const elementToFocus = focusableElement || cellRef.current;
+      const scrollPosition = apiRef.current.getScrollPosition();
       elementToFocus?.focus();
-      if (apiRef.current.columnHeadersContainerRef.current) {
-        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-      }
+      apiRef.current.scroll(scrollPosition);
     }
   }, [InputComponent, apiRef, hasFocus, isEditing, isMenuOpen]);
   const onKeyDown = React.useCallback(event => {

package/esm/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -88,6 +88,10 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
       });
       apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
     } else {
+      if (allPinnedColumns.length === 0) {
+        prevAllPinnedColumns.current = allPinnedColumns;
+        return columnsState;
+      }
       newOrderedFields = [...columnsState.orderedFields];
       apiRef.current.caches.columnPinning.orderedFieldsBeforePinningColumns = [...columnsState.orderedFields];
     }

package/esm/hooks/features/dataSource/useGridDataSourceBasePro.js

@@ -134,7 +134,7 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
           params: fetchParams,
           cause: childrenFetchError
         }));
-      } else if (process.env.NODE_ENV !== 'production') {
+      } else {
         warnOnce(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
       }
     } finally {