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

package/hooks/features/rowReorder/useGridRowReorder.js

@@ -14,19 +14,22 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 var _gridRowReorderColDef = require("./gridRowReorderColDef");
+var _utils = require("./utils");
 const EMPTY_REORDER_STATE = {
   previousTargetId: null,
   dragDirection: null,
   previousDropPosition: null
 };
+const TIMEOUT_CLEAR_BUFFER_PX = 5;
+const EMPTY_TIMEOUT_INFO = {
+  rowId: null
+};
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
   const slots = {
     rowDragging: ['row--dragging'],
-    rowDropAbove: ['row--dropAbove'],
-    rowDropBelow: ['row--dropBelow'],
     rowBeingDragged: ['row--beingDragged']
   };
   return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
@@ -48,14 +51,12 @@ const useGridRowReorder = (apiRef, props) => {
   const dragRowNode = React.useRef(null);
   const originRowIndex = React.useRef(null);
   const removeDnDStylesTimeout = React.useRef(undefined);
-  const previousDropIndicatorRef = React.useRef(null);
   const ownerState = {
     classes: props.classes
   };
   const classes = useUtilityClasses(ownerState);
   const [dragRowId, setDragRowId] = React.useState('');
-  const sortedRowIndexLookup = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridExpandedSortedRowIndexLookupSelector);
-  const timeoutRowId = React.useRef('');
+  const timeoutInfoRef = React.useRef(EMPTY_TIMEOUT_INFO);
   const timeout = (0, _useTimeout.default)();
   const previousReorderState = React.useRef(EMPTY_REORDER_STATE);
   const dropTarget = React.useRef({
@@ -70,26 +71,30 @@ const useGridRowReorder = (apiRef, props) => {
   }, []);
 
   // TODO: remove sortModel check once row reorder is sorting compatible
-  // remove treeData check once row reorder is treeData compatible
   const isRowReorderDisabled = React.useMemo(() => {
-    return !props.rowReordering || !!sortModel.length || props.treeData;
-  }, [props.rowReordering, sortModel, props.treeData]);
-  const applyDropIndicator = React.useCallback((targetRowId, position) => {
-    // Remove existing drop indicator from previous target
-    if (previousDropIndicatorRef.current) {
-      previousDropIndicatorRef.current.classList.remove(classes.rowDropAbove, classes.rowDropBelow);
-      previousDropIndicatorRef.current = null;
-    }
-
-    // Apply new drop indicator
-    if (targetRowId !== undefined && position !== null) {
-      const targetRow = apiRef.current.rootElementRef?.current?.querySelector(`[data-id="${targetRowId}"]`);
-      if (targetRow) {
-        targetRow.classList.add(position === 'above' ? classes.rowDropAbove : classes.rowDropBelow);
-        previousDropIndicatorRef.current = targetRow;
+    return !props.rowReordering || !!sortModel.length;
+  }, [props.rowReordering, sortModel]);
+  const calculateDropPosition = React.useCallback(event => {
+    // For tree data, we need to find the cell element to avoid flickerings on top 20% selection
+    const targetElement = props.treeData ? (0, _utils.findCellElement)(event.target) : event.target;
+    const targetRect = targetElement.getBoundingClientRect();
+    const relativeY = Math.floor(event.clientY - targetRect.top);
+    if (props.treeData) {
+      // For tree data: top 20% = above, middle 60% = over, bottom 20% = below
+      const topThreshold = targetRect.height * 0.2;
+      const bottomThreshold = targetRect.height * 0.8;
+      if (relativeY < topThreshold) {
+        return 'above';
       }
+      if (relativeY > bottomThreshold) {
+        return 'below';
+      }
+      return 'inside';
     }
-  }, [apiRef, classes]);
+    // For flat data and row grouping: split at midpoint
+    const midPoint = targetRect.height / 2;
+    return relativeY < midPoint ? 'above' : 'below';
+  }, [props.treeData]);
   const applyDraggedState = React.useCallback((rowId, isDragged) => {
     if (rowId) {
       const draggedRow = apiRef.current.rootElementRef?.current?.querySelector(`[data-id="${rowId}"]`);
@@ -102,7 +107,7 @@ const useGridRowReorder = (apiRef, props) => {
       }
     }
   }, [apiRef, classes.rowBeingDragged]);
-  const applyRowAnimation = React.useCallback(callback => {
+  const applyRowAnimation = React.useCallback(async callback => {
     const rootElement = apiRef.current.rootElementRef?.current;
     if (!rootElement) {
       return;
@@ -119,7 +124,7 @@ const useGridRowReorder = (apiRef, props) => {
         initialPositions.set(rowId, row.getBoundingClientRect());
       }
     });
-    callback();
+    await callback();
 
     // Use `requestAnimationFrame` to ensure DOM has updated
     requestAnimationFrame(() => {
@@ -161,15 +166,20 @@ const useGridRowReorder = (apiRef, props) => {
     if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
       return;
     }
-    if (timeoutRowId.current) {
+    if (timeoutInfoRef.current) {
       timeout.clear();
-      timeoutRowId.current = '';
+      timeoutInfoRef.current = EMPTY_TIMEOUT_INFO;
     }
     logger.debug(`Start dragging row ${params.id}`);
     // Prevent drag events propagation.
     // For more information check here https://github.com/mui/mui-x/issues/2680.
     event.stopPropagation();
-    apiRef.current.setRowDragActive(true);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      rowReorder: (0, _extends2.default)({}, state.rowReorder, {
+        isActive: true,
+        draggedRowId: params.id
+      })
+    }));
     dragRowNode.current = event.currentTarget;
     // Apply cell-level dragging class to the drag handle
     dragRowNode.current.classList.add(classes.rowDragging);
@@ -180,9 +190,10 @@ const useGridRowReorder = (apiRef, props) => {
     removeDnDStylesTimeout.current = setTimeout(() => {
       dragRowNode.current.classList.remove(classes.rowDragging);
     });
+    const sortedRowIndexLookup = (0, _xDataGrid.gridExpandedSortedRowIndexLookupSelector)(apiRef);
     originRowIndex.current = sortedRowIndexLookup[params.id];
     apiRef.current.setCellFocus(params.id, _gridRowReorderColDef.GRID_REORDER_COL_DEF.field);
-  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, applyDraggedState, sortedRowIndexLookup, timeout]);
+  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, applyDraggedState, timeout]);
   const handleDragOver = React.useCallback((params, event) => {
     if (dragRowId === '') {
       return;
@@ -192,34 +203,36 @@ const useGridRowReorder = (apiRef, props) => {
     if (!sourceNode || !targetNode || targetNode.type === 'footer' || targetNode.type === 'pinnedRow' || !event.target) {
       return;
     }
-
-    // Find the relative 'y' mouse position based on the event.target
-    const targetRect = event.target.getBoundingClientRect();
-    const relativeY = Math.floor(event.clientY - targetRect.top);
-    const midPoint = Math.floor(targetRect.height / 2);
     logger.debug(`Dragging over row ${params.id}`);
     event.preventDefault();
     // Prevent drag events propagation.
     // For more information check here https://github.com/mui/mui-x/issues/2680.
     event.stopPropagation();
-    if (timeoutRowId.current && timeoutRowId.current !== params.id) {
+    if (timeoutInfoRef.current && (timeoutInfoRef.current.rowId !== params.id ||
+    // Avoid accidental opening of node when the user is moving over a row
+    event.clientY > timeoutInfoRef.current.clientY + TIMEOUT_CLEAR_BUFFER_PX || event.clientY < timeoutInfoRef.current.clientY - TIMEOUT_CLEAR_BUFFER_PX || event.clientX > timeoutInfoRef.current.clientX + TIMEOUT_CLEAR_BUFFER_PX || event.clientX < timeoutInfoRef.current.clientX - TIMEOUT_CLEAR_BUFFER_PX)) {
       timeout.clear();
-      timeoutRowId.current = '';
+      timeoutInfoRef.current = EMPTY_TIMEOUT_INFO;
     }
-    if (targetNode.type === 'group' && targetNode.depth < sourceNode.depth && !targetNode.childrenExpanded && !timeoutRowId.current) {
+
+    // Calculate drop position using new logic
+    const dropPosition = calculateDropPosition(event);
+    if (targetNode.type === 'group' && !targetNode.childrenExpanded && !timeoutInfoRef.current.rowId && targetNode.id !== sourceNode.id && (dropPosition === 'inside' || targetNode.depth < sourceNode.depth)) {
       timeout.start(500, () => {
         const rowNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, params.id);
         // TODO: Handle `dataSource` case with https://github.com/mui/mui-x/issues/18947
         apiRef.current.setRowChildrenExpansion(params.id, !rowNode.childrenExpanded);
       });
-      timeoutRowId.current = params.id;
+      timeoutInfoRef.current = {
+        rowId: params.id,
+        clientY: event.clientY,
+        clientX: event.clientX
+      };
       return;
     }
+    const sortedRowIndexLookup = (0, _xDataGrid.gridExpandedSortedRowIndexLookupSelector)(apiRef);
     const targetRowIndex = sortedRowIndexLookup[params.id];
     const sourceRowIndex = sortedRowIndexLookup[dragRowId];
-
-    // Determine drop position based on relativeY position within the row
-    const dropPosition = relativeY < midPoint ? 'above' : 'below';
     const currentReorderState = {
       dragDirection: targetRowIndex < sourceRowIndex ? 'up' : 'down',
       previousTargetId: params.id,
@@ -232,7 +245,7 @@ const useGridRowReorder = (apiRef, props) => {
 
       // Check if this is an adjacent position
       const isAdjacentPosition = dropPosition === 'above' && targetRowIndex === sourceRowIndex + 1 || dropPosition === 'below' && targetRowIndex === sourceRowIndex - 1;
-      const validatedIndex = apiRef.current.unstable_applyPipeProcessors('getRowReorderTargetIndex', -1, {
+      const isRowReorderValid = apiRef.current.unstable_applyPipeProcessors('isRowReorderValid', false, {
         sourceRowId: dragRowId,
         targetRowId: params.id,
         dropPosition,
@@ -240,13 +253,21 @@ const useGridRowReorder = (apiRef, props) => {
       });
 
       // Show drop indicator for valid drops OR adjacent positions OR same node
-      if (validatedIndex !== -1 || isAdjacentPosition || isSameNode) {
+      if (isRowReorderValid || isAdjacentPosition || isSameNode) {
         dropTarget.current = {
           targetRowId: params.id,
           targetRowIndex,
           dropPosition
         };
-        applyDropIndicator(params.id, dropPosition);
+        // Update state with drop target
+        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+          rowReorder: (0, _extends2.default)({}, state.rowReorder, {
+            dropTarget: {
+              rowId: params.id,
+              position: dropPosition
+            }
+          })
+        }));
       } else {
         // Clear indicators for invalid drops
         dropTarget.current = {
@@ -254,7 +275,12 @@ const useGridRowReorder = (apiRef, props) => {
           targetRowIndex: null,
           dropPosition: null
         };
-        applyDropIndicator(null, null);
+        // Clear state drop target
+        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+          rowReorder: (0, _extends2.default)({}, state.rowReorder, {
+            dropTarget: undefined
+          })
+        }));
       }
       previousReorderState.current = currentReorderState;
     }
@@ -265,16 +291,16 @@ const useGridRowReorder = (apiRef, props) => {
     } else {
       event.dataTransfer.dropEffect = 'copy';
     }
-  }, [dragRowId, apiRef, logger, timeout, sortedRowIndexLookup, applyDropIndicator]);
-  const handleDragEnd = React.useCallback((_, event) => {
+  }, [dragRowId, apiRef, logger, timeout, calculateDropPosition]);
+  const handleDragEnd = React.useCallback(async (_, event) => {
     // Call the gridEditRowsStateSelector directly to avoid infnite loop
     const editRowsState = (0, _internals.gridEditRowsStateSelector)(apiRef);
     if (dragRowId === '' || isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
       return;
     }
-    if (timeoutRowId.current) {
+    if (timeoutInfoRef.current) {
       timeout.clear();
-      timeoutRowId.current = '';
+      timeoutInfoRef.current = EMPTY_TIMEOUT_INFO;
     }
     logger.debug('End dragging row');
     event.preventDefault();
@@ -286,11 +312,6 @@ const useGridRowReorder = (apiRef, props) => {
     const dragDirection = previousReorderState.current.dragDirection;
     previousReorderState.current = EMPTY_REORDER_STATE;
 
-    // Clear visual indicators and dragged state
-    applyDropIndicator(null, null);
-    applyDraggedState(dragRowId, false);
-    apiRef.current.setRowDragActive(false);
-
     // Check if the row was dropped outside the grid.
     if (!event.dataTransfer || event.dataTransfer.dropEffect === 'none') {
       // Reset drop target state
@@ -301,29 +322,80 @@ const useGridRowReorder = (apiRef, props) => {
       };
       originRowIndex.current = null;
       setDragRowId('');
+      // Clear visual indicators and dragged state
+      applyDraggedState(dragRowId, false);
+      apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+        rowReorder: {
+          isActive: false,
+          draggedRowId: null
+        }
+      }));
       return;
     }
     if (dropTarget.current.targetRowIndex !== null && dropTarget.current.targetRowId !== null) {
-      const sourceRowIndex = originRowIndex.current;
-      const targetRowIndex = dropTarget.current.targetRowIndex;
-      const validatedIndex = apiRef.current.unstable_applyPipeProcessors('getRowReorderTargetIndex', targetRowIndex, {
+      const isRowReorderValid = apiRef.current.unstable_applyPipeProcessors('isRowReorderValid', false, {
         sourceRowId: dragRowId,
         targetRowId: dropTarget.current.targetRowId,
         dropPosition: dropTarget.current.dropPosition,
         dragDirection: dragDirection
       });
-      if (validatedIndex !== -1) {
-        applyRowAnimation(() => {
-          apiRef.current.setRowIndex(dragRowId, validatedIndex);
+      if (isRowReorderValid) {
+        try {
+          const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+          const sourceNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, dragRowId);
+          if (!sourceNode) {
+            throw new Error(`MUI X: No row node found for id #${dragRowId}`);
+          }
 
-          // Emit the rowOrderChange event only once when the reordering stops.
-          const rowOrderChangeParams = {
-            row: apiRef.current.getRow(dragRowId),
-            targetIndex: validatedIndex,
-            oldIndex: sourceRowIndex
-          };
-          apiRef.current.publishEvent('rowOrderChange', rowOrderChangeParams);
-        });
+          // Calculate oldParent and oldIndex
+          const oldParent = sourceNode.parent;
+          const oldParentNode = rowTree[oldParent];
+          const oldIndexInParent = oldParentNode.children.indexOf(dragRowId) ?? originRowIndex.current;
+          await applyRowAnimation(async () => {
+            await apiRef.current.setRowPosition(dragRowId, dropTarget.current.targetRowId, dropTarget.current.dropPosition);
+            const updatedTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+            const updatedNode = updatedTree[dragRowId];
+            if (!updatedNode) {
+              throw new Error(`MUI X: Row node for id #${dragRowId} not found after move`);
+            }
+            const newParent = updatedNode.parent;
+            const newParentNode = updatedTree[newParent];
+            const newIndexInParent = newParentNode.children.indexOf(dragRowId);
+
+            // Only emit event and clear state after successful reorder
+            const rowOrderChangeParams = {
+              row: apiRef.current.getRow(dragRowId),
+              oldIndex: oldIndexInParent,
+              targetIndex: newIndexInParent,
+              oldParent: oldParent === _xDataGrid.GRID_ROOT_GROUP_ID ? null : oldParent,
+              newParent: newParent === _xDataGrid.GRID_ROOT_GROUP_ID ? null : newParent
+            };
+            applyDraggedState(dragRowId, false);
+            apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+              rowReorder: {
+                isActive: false,
+                draggedRowId: null
+              }
+            }));
+            apiRef.current.publishEvent('rowOrderChange', rowOrderChangeParams);
+          });
+        } catch (error) {
+          // Handle error: reset visual state but don't publish success event
+          applyDraggedState(dragRowId, false);
+          apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+            rowReorder: {
+              isActive: false,
+              draggedRowId: null
+            }
+          }));
+        }
+      } else {
+        applyDraggedState(dragRowId, false);
+        apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+          rowReorder: (0, _extends2.default)({}, state.rowReorder, {
+            dropTarget: undefined
+          })
+        }));
       }
     }
 
@@ -334,8 +406,9 @@ const useGridRowReorder = (apiRef, props) => {
       dropPosition: null
     };
     setDragRowId('');
-  }, [apiRef, dragRowId, isRowReorderDisabled, logger, applyDropIndicator, applyDraggedState, timeout, applyRowAnimation]);
-  const getRowReorderTargetIndex = React.useCallback((initialValue, {
+  }, [apiRef, dragRowId, isRowReorderDisabled, logger, applyDraggedState, timeout, applyRowAnimation]);
+  const isValidRowReorderProp = props.isValidRowReorder;
+  const isRowReorderValid = React.useCallback((initialValue, {
     sourceRowId,
     targetRowId,
     dropPosition,
@@ -344,27 +417,43 @@ const useGridRowReorder = (apiRef, props) => {
     if ((0, _xDataGrid.gridRowMaximumTreeDepthSelector)(apiRef) > 1) {
       return initialValue;
     }
+    const sortedRowIndexLookup = (0, _xDataGrid.gridExpandedSortedRowIndexLookupSelector)(apiRef);
     const targetRowIndex = sortedRowIndexLookup[targetRowId];
     const sourceRowIndex = sortedRowIndexLookup[sourceRowId];
 
-    // Check if this drop would result in no actual movement
+    // Apply internal validation: check if this drop would result in no actual movement
     const isAdjacentNode = dropPosition === 'above' && targetRowIndex === sourceRowIndex + 1 ||
     // dragging to immediately below (above next row)
     dropPosition === 'below' && targetRowIndex === sourceRowIndex - 1; // dragging to immediately above (below previous row)
 
     if (isAdjacentNode || sourceRowIndex === targetRowIndex) {
-      // Return -1 to prevent actual movement (indicators handled separately)
-      return -1;
+      return false;
     }
-    let finalTargetIndex;
-    if (dragDirection === 'up') {
-      finalTargetIndex = dropPosition === 'above' ? targetRowIndex : targetRowIndex + 1;
-    } else {
-      finalTargetIndex = dropPosition === 'above' ? targetRowIndex - 1 : targetRowIndex;
+
+    // Internal validation passed, now apply additional user validation if provided
+    if (isValidRowReorderProp) {
+      const expandedSortedRowIds = (0, _xDataGrid.gridExpandedSortedRowIdsSelector)(apiRef);
+      const rowTree = (0, _xDataGrid.gridRowTreeSelector)(apiRef);
+      const sourceNode = rowTree[sourceRowId];
+      const targetNode = rowTree[targetRowId];
+      const prevNode = targetRowIndex > 0 ? rowTree[expandedSortedRowIds[targetRowIndex - 1]] : null;
+      const nextNode = targetRowIndex < expandedSortedRowIds.length - 1 ? rowTree[expandedSortedRowIds[targetRowIndex + 1]] : null;
+      const context = {
+        apiRef,
+        sourceNode,
+        targetNode,
+        prevNode,
+        nextNode,
+        dropPosition,
+        dragDirection
+      };
+      if (!isValidRowReorderProp(context)) {
+        return false;
+      }
     }
-    return finalTargetIndex;
-  }, [apiRef, sortedRowIndexLookup]);
-  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowReorderTargetIndex', getRowReorderTargetIndex);
+    return true;
+  }, [apiRef, isValidRowReorderProp]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'isRowReorderValid', isRowReorderValid);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragStart', handleDragStart);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragOver', handleDragOver);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragEnd', handleDragEnd);

package/hooks/features/rowReorder/utils.d.ts

@@ -0,0 +1,82 @@
+import type { RefObject } from '@mui/x-internals/types';
+import { type GridRowId, type GridTreeNode, type GridGroupNode, type GridRowTreeConfig, type GridKeyValue, type GridValidRowModel } from '@mui/x-data-grid';
+import { type ReorderOperationType } from "./types.js";
+import type { GridPrivateApiPro } from "../../../models/gridApiPro.js";
+import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
+export { getNodePathInTree } from "../../../utils/tree/utils.js";
+/**
+ * Finds the closest cell element from the given event target.
+ * If the target itself is a cell, returns it.
+ * Otherwise, searches for the closest parent with 'cell' in its className.
+ * @param target - The event target to start searching from
+ * @returns The cell element or the original target if no cell is found
+ */
+export declare function findCellElement(target: EventTarget | null): Element;
+export declare function determineOperationType(sourceNode: GridTreeNode, targetNode: GridTreeNode): ReorderOperationType;
+export declare function calculateTargetIndex(sourceNode: GridTreeNode, targetNode: GridTreeNode, isLastChild: boolean, rowTree: Record<GridRowId, GridTreeNode>): number;
+export declare const collectAllLeafDescendants: (groupNode: GridGroupNode, tree: GridRowTreeConfig) => GridRowId[];
+export declare const collectAllDescendants: (groupNode: GridGroupNode, tree: GridRowTreeConfig) => GridTreeNode[];
+export declare const isDescendantOf: (possibleDescendant: GridTreeNode, ancestor: GridTreeNode, tree: GridRowTreeConfig) => boolean;
+export declare const updateDescendantDepths: (group: GridGroupNode, tree: GridRowTreeConfig, depthDiff: number) => void;
+/**
+ * Finds an existing group node with the same groupingKey and groupingField under a parent.
+ *
+ * @param parentNode - The parent group node to search in
+ * @param groupingKey - The grouping key to match
+ * @param groupingField - The grouping field to match
+ * @param tree - The row tree configuration
+ * @returns The existing group node if found, null otherwise
+ */
+export declare function findExistingGroupWithSameKey(parentNode: GridGroupNode, groupingKey: GridKeyValue, groupingField: string, tree: GridRowTreeConfig): GridGroupNode | null;
+/**
+ * Removes empty ancestor groups from the tree after a row move operation.
+ * Walks up the tree from the given group, removing any empty groups encountered.
+ *
+ * @param groupId - The ID of the group to start checking from
+ * @param tree - The row tree configuration
+ * @param removedGroups - Set to track which groups have been removed
+ * @returns The number of root-level groups that were removed
+ */
+export declare function removeEmptyAncestors(groupId: GridRowId, tree: GridRowTreeConfig, removedGroups: Set<GridRowId>): number;
+export declare function handleProcessRowUpdateError(error: any, onProcessRowUpdateError?: DataGridProProcessedProps['onProcessRowUpdateError']): void;
+/**
+ * Handles batch row updates with partial failure tracking.
+ *
+ * This class is designed for operations that need to update multiple rows
+ * atomically (like moving entire groups), while gracefully handling cases
+ * where some updates succeed and others fail.
+ *
+ * @example
+ * ```tsx
+ * const updater = new BatchRowUpdater(apiRef, processRowUpdate, onError);
+ *
+ * // Queue multiple updates
+ * updater.queueUpdate('row1', originalRow1, newRow1);
+ * updater.queueUpdate('row2', originalRow2, newRow2);
+ *
+ * // Execute all updates
+ * const { successful, failed, updates } = await updater.executeAll();
+ *
+ * // Handle results
+ * if (successful.length > 0) {
+ *   apiRef.current.updateRows(updates);
+ * }
+ * ```
+ */
+export declare class BatchRowUpdater {
+  private apiRef;
+  private processRowUpdate;
+  private onProcessRowUpdateError;
+  private rowsToUpdate;
+  private originalRows;
+  private successfulRowIds;
+  private failedRowIds;
+  private pendingRowUpdates;
+  constructor(apiRef: RefObject<GridPrivateApiPro>, processRowUpdate: DataGridProProcessedProps['processRowUpdate'] | undefined, onProcessRowUpdateError: DataGridProProcessedProps['onProcessRowUpdateError'] | undefined);
+  queueUpdate(rowId: GridRowId, originalRow: GridValidRowModel, updatedRow: GridValidRowModel): void;
+  executeAll(): Promise<{
+    successful: GridRowId[];
+    failed: GridRowId[];
+    updates: GridValidRowModel[];
+  }>;
+}