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

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

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

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

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

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

@@ -0,0 +1,30 @@
+import type { ReorderValidationContext as Ctx } from "./models.js";
+/**
+ * Reusable validation conditions for row reordering validation
+ */
+export declare const commonReorderConditions: {
+  isGroupToGroup: (ctx: Ctx) => boolean;
+  isLeafToLeaf: (ctx: Ctx) => boolean;
+  isLeafToGroup: (ctx: Ctx) => boolean;
+  isGroupToLeaf: (ctx: Ctx) => boolean;
+  isDropAbove: (ctx: Ctx) => boolean;
+  isDropBelow: (ctx: Ctx) => boolean;
+  sameDepth: (ctx: Ctx) => boolean;
+  sourceDepthGreater: (ctx: Ctx) => boolean;
+  targetDepthIsSourceMinusOne: (ctx: Ctx) => boolean;
+  sameParent: (ctx: Ctx) => boolean;
+  targetGroupExpanded: (ctx: Ctx) => boolean;
+  targetGroupCollapsed: (ctx: Ctx) => boolean;
+  hasPrevNode: (ctx: Ctx) => boolean;
+  hasNextNode: (ctx: Ctx) => boolean;
+  prevIsLeaf: (ctx: Ctx) => boolean;
+  prevIsGroup: (ctx: Ctx) => boolean;
+  nextIsLeaf: (ctx: Ctx) => boolean;
+  nextIsGroup: (ctx: Ctx) => boolean;
+  prevDepthEquals: (ctx: Ctx, depth: number) => boolean;
+  prevDepthEqualsSource: (ctx: Ctx) => boolean;
+  prevBelongsToSource: (ctx: Ctx) => boolean;
+  isAdjacentPosition: (ctx: Ctx) => boolean;
+  targetFirstChildIsGroupWithSourceDepth: (ctx: Ctx) => boolean;
+  targetFirstChildDepthEqualsSource: (ctx: Ctx) => boolean;
+};

package/esm/hooks/features/rowReorder/commonReorderConditions.js

@@ -0,0 +1,78 @@
+import { gridExpandedSortedRowIndexLookupSelector, gridRowTreeSelector } from '@mui/x-data-grid';
+/**
+ * Reusable validation conditions for row reordering validation
+ */
+export const commonReorderConditions = {
+  // Node type checks
+  isGroupToGroup: ctx => ctx.sourceNode.type === 'group' && ctx.targetNode.type === 'group',
+  isLeafToLeaf: ctx => ctx.sourceNode.type === 'leaf' && ctx.targetNode.type === 'leaf',
+  isLeafToGroup: ctx => ctx.sourceNode.type === 'leaf' && ctx.targetNode.type === 'group',
+  isGroupToLeaf: ctx => ctx.sourceNode.type === 'group' && ctx.targetNode.type === 'leaf',
+  // Drop position checks
+  isDropAbove: ctx => ctx.dropPosition === 'above',
+  isDropBelow: ctx => ctx.dropPosition === 'below',
+  // Depth checks
+  sameDepth: ctx => ctx.sourceNode.depth === ctx.targetNode.depth,
+  sourceDepthGreater: ctx => ctx.sourceNode.depth > ctx.targetNode.depth,
+  targetDepthIsSourceMinusOne: ctx => ctx.targetNode.depth === ctx.sourceNode.depth - 1,
+  // Parent checks
+  sameParent: ctx => ctx.sourceNode.parent === ctx.targetNode.parent,
+  // Node state checks
+  targetGroupExpanded: ctx => (ctx.targetNode.type === 'group' && ctx.targetNode.childrenExpanded) ?? false,
+  targetGroupCollapsed: ctx => ctx.targetNode.type === 'group' && !ctx.targetNode.childrenExpanded,
+  // Previous/Next node checks
+  hasPrevNode: ctx => ctx.prevNode !== null,
+  hasNextNode: ctx => ctx.nextNode !== null,
+  prevIsLeaf: ctx => ctx.prevNode?.type === 'leaf',
+  prevIsGroup: ctx => ctx.prevNode?.type === 'group',
+  nextIsLeaf: ctx => ctx.nextNode?.type === 'leaf',
+  nextIsGroup: ctx => ctx.nextNode?.type === 'group',
+  prevDepthEquals: (ctx, depth) => ctx.prevNode?.depth === depth,
+  prevDepthEqualsSource: ctx => ctx.prevNode?.depth === ctx.sourceNode.depth,
+  // Complex checks
+  prevBelongsToSource: ctx => {
+    if (!ctx.prevNode) {
+      return false;
+    }
+    // Check if prevNode.parent OR any of its ancestors === sourceNode.id
+    let currentId = ctx.prevNode.parent;
+    while (currentId) {
+      if (currentId === ctx.sourceNode.id) {
+        return true;
+      }
+      const node = gridRowTreeSelector(ctx.apiRef)[currentId];
+      if (!node) {
+        break;
+      }
+      currentId = node.parent;
+    }
+    return false;
+  },
+  // Position checks
+  isAdjacentPosition: ctx => {
+    const expandedSortedRowIndexLookup = gridExpandedSortedRowIndexLookupSelector(ctx.apiRef);
+    const sourceRowIndex = expandedSortedRowIndexLookup[ctx.sourceNode.id];
+    const targetRowIndex = expandedSortedRowIndexLookup[ctx.targetNode.id];
+    const dropPosition = ctx.dropPosition;
+    return dropPosition === 'above' && targetRowIndex === sourceRowIndex + 1 || dropPosition === 'below' && targetRowIndex === sourceRowIndex - 1;
+  },
+  // First child check
+  targetFirstChildIsGroupWithSourceDepth: ctx => {
+    if (ctx.targetNode.type !== 'group') {
+      return false;
+    }
+    const rowTree = gridRowTreeSelector(ctx.apiRef);
+    const targetGroup = ctx.targetNode;
+    const firstChild = targetGroup.children?.[0] ? rowTree[targetGroup.children[0]] : null;
+    return firstChild?.type === 'group' && firstChild.depth === ctx.sourceNode.depth;
+  },
+  targetFirstChildDepthEqualsSource: ctx => {
+    if (ctx.targetNode.type !== 'group') {
+      return false;
+    }
+    const rowTree = gridRowTreeSelector(ctx.apiRef);
+    const targetGroup = ctx.targetNode;
+    const firstChild = targetGroup.children?.[0] ? rowTree[targetGroup.children[0]] : null;
+    return firstChild ? firstChild.depth === ctx.sourceNode.depth : false;
+  }
+};

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

@@ -1 +1,2 @@
-export * from "./gridRowReorderColDef.js";
+export * from "./gridRowReorderColDef.js";
+export type { ReorderValidationContext, IsRowReorderableParams } from "./models.js";

package/esm/hooks/features/rowReorder/index.js

@@ -1 +1,2 @@
-export * from "./gridRowReorderColDef.js";
+export * from "./gridRowReorderColDef.js";
+export {};

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

@@ -0,0 +1,17 @@
+import { GridTreeNode, GridValidRowModel } from '@mui/x-data-grid';
+import type { RefObject } from '@mui/x-internals/types';
+import type { RowReorderDropPosition, RowReorderDragDirection } from '@mui/x-data-grid/internals';
+import type { GridPrivateApiPro } from "../../../models/gridApiPro.js";
+export type IsRowReorderableParams<R extends GridValidRowModel = any> = {
+  row: R;
+  rowNode: GridTreeNode;
+};
+export type ReorderValidationContext = {
+  apiRef: RefObject<GridPrivateApiPro>;
+  sourceNode: GridTreeNode;
+  targetNode: GridTreeNode;
+  prevNode: GridTreeNode | null;
+  nextNode: GridTreeNode | null;
+  dropPosition: RowReorderDropPosition;
+  dragDirection: RowReorderDragDirection;
+};

package/esm/hooks/features/rowReorder/models.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,27 @@
+import type { ReorderExecutionContext, ReorderOperation } 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;
+}
+/**
+ * Executor class for handling row reorder operations in grouped data grids.
+ *
+ * This class coordinates the execution of different reorder operation types,
+ * trying each operation in order until one succeeds or all fail.
+ */
+export declare class RowReorderExecutor {
+  private operations;
+  constructor(operations: BaseReorderOperation[]);
+  execute(ctx: ReorderExecutionContext): Promise<void>;
+}

package/esm/hooks/features/rowReorder/reorderExecutor.js

@@ -0,0 +1,29 @@
+import { warnOnce } from '@mui/x-internals/warning';
+/**
+ * Base class for all reorder operations.
+ * Provides abstract methods for operation detection and execution.
+ */
+export class BaseReorderOperation {}
+
+/**
+ * Executor class for handling row reorder operations in grouped data grids.
+ *
+ * This class coordinates the execution of different reorder operation types,
+ * trying each operation in order until one succeeds or all fail.
+ */
+export class RowReorderExecutor {
+  constructor(operations) {
+    this.operations = operations;
+  }
+  async execute(ctx) {
+    for (const operation of this.operations) {
+      const detectedOperation = operation.detectOperation(ctx);
+      if (detectedOperation) {
+        // eslint-disable-next-line no-await-in-loop
+        await operation.executeOperation(detectedOperation, ctx);
+        return;
+      }
+    }
+    warnOnce(['MUI X: The parameters provided to the API method resulted in a no-op.', 'Consider looking at the documentation at https://mui.com/x/react-data-grid/row-ordering/'], 'warning');
+  }
+}

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

@@ -0,0 +1,12 @@
+import { ReorderValidationContext } from "./models.js";
+export interface ValidationRule {
+  name: string;
+  applies: (ctx: ReorderValidationContext) => boolean;
+  isInvalid: (ctx: ReorderValidationContext) => boolean;
+  message?: string;
+}
+export declare class RowReorderValidator {
+  private rules;
+  constructor(rules: ValidationRule[]);
+  validate(context: ReorderValidationContext): boolean;
+}

package/esm/hooks/features/rowReorder/reorderValidator.js

@@ -0,0 +1,14 @@
+export class RowReorderValidator {
+  constructor(rules) {
+    this.rules = rules;
+  }
+  validate(context) {
+    // Check all validation rules
+    for (const rule of this.rules) {
+      if (rule.applies(context) && rule.isInvalid(context)) {
+        return false;
+      }
+    }
+    return true;
+  }
+}

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

@@ -0,0 +1,25 @@
+import type { GridRowId, GridTreeNode, GridRowTreeConfig } from '@mui/x-data-grid';
+import type { RefObject } from '@mui/x-internals/types';
+import type { RowReorderDropPosition } from '@mui/x-data-grid/internals';
+import type { GridPrivateApiPro } from "../../../models/gridApiPro.js";
+import type { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
+export type ReorderOperationType = 'same-parent-swap' | 'cross-parent-leaf' | 'cross-parent-group' | 'drop-on-leaf' | 'drop-on-group';
+export interface ReorderExecutionContext<ApiRef extends GridPrivateApiPro = GridPrivateApiPro> {
+  sourceRowId: GridRowId;
+  dropPosition: RowReorderDropPosition;
+  placeholderIndex: number;
+  sortedFilteredRowIds: GridRowId[];
+  sortedFilteredRowIndexLookup: Record<GridRowId, number>;
+  rowTree: GridRowTreeConfig;
+  apiRef: RefObject<ApiRef>;
+  processRowUpdate?: DataGridProProcessedProps['processRowUpdate'];
+  onProcessRowUpdateError?: DataGridProProcessedProps['onProcessRowUpdateError'];
+  setTreeDataPath?: DataGridProProcessedProps['setTreeDataPath'];
+}
+export interface ReorderOperation {
+  sourceNode: GridTreeNode;
+  targetNode: GridTreeNode;
+  actualTargetIndex: number;
+  isLastChild: boolean;
+  operationType: ReorderOperationType;
+}

package/esm/hooks/features/rowReorder/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -7,4 +7,4 @@ export declare const rowReorderStateInitializer: GridStateInitializer;
  * Hook for row reordering (Pro package)
  * @requires useGridRows (method)
  */
-export declare const useGridRowReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes" | "treeData" | "dataSource">) => void;
+export declare const useGridRowReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes" | "treeData" | "dataSource" | "isValidRowReorder">) => void;