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

package/CHANGELOG.md

@@ -5,6 +5,68 @@
 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_

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 = "MTc2MzU5NjgwMDAwMA==";
+const releaseInfo = "MTc2NDExNTIwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -598,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.
@@ -1274,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

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/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 = "MTc2MzU5NjgwMDAwMA==";
+const releaseInfo = "MTc2NDExNTIwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -591,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.
@@ -1267,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

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/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;

package/esm/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -2,11 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridEvent, useGridApiMethod, gridColumnLookupSelector, gridRowMaximumTreeDepthSelector, gridRowTreeSelector, gridExpandedSortedRowIdsSelector } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor, GridStrategyGroup, gridExpandedSortedRowIndexLookupSelector, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
+import { useGridEvent, useGridApiMethod, gridColumnLookupSelector, gridRowMaximumTreeDepthSelector, gridRowTreeSelector, gridExpandedSortedRowIdsSelector, gridExpandedSortedRowIndexLookupSelector } from '@mui/x-data-grid-pro';
+import { useGridRegisterPipeProcessor, GridStrategyGroup, RowGroupingStrategy } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from "./gridRowGroupingSelector.js";
 import { getRowGroupingFieldFromGroupingCriteria, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability, getGroupingRules, areGroupingRulesEqual } from "./gridRowGroupingUtils.js";
-import { rowGroupingReorderValidator } from "../rowReorder/reorderValidator.js";
+import { rowGroupingReorderValidator } from "../rowReorder/rowGroupingReorderValidator.js";
 export const rowGroupingStateInitializer = (state, props, apiRef) => {
   apiRef.current.caches.rowGrouping = {
     rulesOnLastRowTreeCreation: []
@@ -169,7 +169,8 @@ export const useGridRowGrouping = (apiRef, props) => {
       }
     }
   }, [apiRef, props.disableRowGrouping]);
-  const getRowReorderTargetIndex = React.useCallback((initialValue, {
+  const isValidRowReorderProp = props.isValidRowReorder;
+  const isRowReorderValid = React.useCallback((initialValue, {
     sourceRowId,
     targetRowId,
     dropPosition,
@@ -181,7 +182,6 @@ export const useGridRowGrouping = (apiRef, props) => {
     const expandedSortedRowIndexLookup = gridExpandedSortedRowIndexLookupSelector(apiRef);
     const expandedSortedRowIds = gridExpandedSortedRowIdsSelector(apiRef);
     const rowTree = gridRowTreeSelector(apiRef);
-    const sourceRowIndex = expandedSortedRowIndexLookup[sourceRowId];
     const targetRowIndex = expandedSortedRowIndexLookup[targetRowId];
     const sourceNode = rowTree[sourceRowId];
     const targetNode = rowTree[targetRowId];
@@ -190,30 +190,34 @@ export const useGridRowGrouping = (apiRef, props) => {
 
     // Basic validity checks
     if (!sourceNode || !targetNode) {
-      return -1;
+      return false;
     }
 
     // Create context object
     const context = {
+      apiRef,
       sourceNode,
       targetNode,
       prevNode,
       nextNode,
-      rowTree,
       dropPosition,
-      dragDirection,
-      targetRowIndex,
-      sourceRowIndex,
-      expandedSortedRowIndexLookup
+      dragDirection
     };
 
-    // Check if the reorder is valid
-    if (rowGroupingReorderValidator.validate(context)) {
-      return dropPosition === 'below' ? targetRowIndex + 1 : targetRowIndex;
+    // First apply internal validation
+    let isValid = rowGroupingReorderValidator.validate(context);
+
+    // If internal validation passes AND user provided additional validation
+    if (isValid && isValidRowReorderProp) {
+      // Apply additional user restrictions
+      isValid = isValidRowReorderProp(context);
+    }
+    if (isValid) {
+      return true;
     }
-    return -1;
-  }, [apiRef, props.treeData]);
-  useGridRegisterPipeProcessor(apiRef, 'getRowReorderTargetIndex', getRowReorderTargetIndex);
+    return false;
+  }, [apiRef, props.treeData, isValidRowReorderProp]);
+  useGridRegisterPipeProcessor(apiRef, 'isRowReorderValid', isRowReorderValid);
   useGridEvent(apiRef, 'cellKeyDown', handleCellKeyDown);
   useGridEvent(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
   useGridEvent(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);

package/esm/hooks/features/rowReorder/operations.d.ts

@@ -1,34 +1,13 @@
-import type { ReorderOperation, ReorderExecutionContext } from "./types.js";
-/**
- * Base class for all reorder operations.
- * Provides abstract methods for operation detection and execution.
- */
-export declare abstract class BaseReorderOperation {
-  abstract readonly operationType: string;
-  /**
-   * Detects if this operation can handle the given context.
-   */
-  abstract detectOperation(ctx: ReorderExecutionContext): ReorderOperation | null;
-  /**
-   * Executes the detected operation.
-   */
-  abstract executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContext): Promise<void> | void;
-}
-/**
- * Handles reordering of items within the same parent group.
- */
-export declare class SameParentSwapOperation extends BaseReorderOperation {
-  readonly operationType = "same-parent-swap";
-  detectOperation(ctx: ReorderExecutionContext): ReorderOperation | null;
-  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContext): void;
-}
+import { BaseReorderOperation, type ReorderOperation, type ReorderExecutionContext } from '@mui/x-data-grid-pro/internals';
+import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
+type ReorderExecutionContextType = ReorderExecutionContext<GridPrivateApiPremium>;
 /**
  * Handles moving leaf nodes between different parent groups.
  */
 export declare class CrossParentLeafOperation extends BaseReorderOperation {
   readonly operationType = "cross-parent-leaf";
   detectOperation(ctx: ReorderExecutionContext): ReorderOperation | null;
-  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContext): Promise<void>;
+  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContextType): Promise<void>;
 }
 /**
  * Handles moving entire groups between different parents.
@@ -36,5 +15,6 @@ export declare class CrossParentLeafOperation extends BaseReorderOperation {
 export declare class CrossParentGroupOperation extends BaseReorderOperation {
   readonly operationType = "cross-parent-group";
   detectOperation(ctx: ReorderExecutionContext): ReorderOperation | null;
-  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContext): Promise<void>;
-}
+  executeOperation(operation: ReorderOperation, ctx: ReorderExecutionContextType): Promise<void>;
+}
+export {};