@mui/x-data-grid-pro 8.7.0 → 8.9.0

package/hooks/features/rowReorder/useGridRowReorder.js

@@ -17,17 +17,20 @@ var Direction = /*#__PURE__*/function (Direction) {
   Direction[Direction["DOWN"] = 1] = "DOWN";
   return Direction;
 }(Direction || {});
-let previousMousePosition = null;
-let previousReorderState = {
+const EMPTY_REORDER_STATE = {
   previousTargetId: null,
-  dragDirection: null
+  dragDirection: null,
+  previousDropPosition: null
 };
 const useUtilityClasses = ownerState => {
   const {
     classes
   } = ownerState;
   const slots = {
-    rowDragging: ['row--dragging']
+    rowDragging: ['row--dragging'],
+    rowDropAbove: ['row--dropAbove'],
+    rowDropBelow: ['row--dropBelow'],
+    rowBeingDragged: ['row--beingDragged']
   };
   return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
 };
@@ -43,12 +46,19 @@ 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.gridSortedRowIndexLookupSelector);
+  const previousReorderState = React.useRef(EMPTY_REORDER_STATE);
+  const [dropTarget, setDropTarget] = React.useState({
+    targetRowId: null,
+    targetRowIndex: null,
+    dropPosition: null
+  });
   React.useEffect(() => {
     return () => {
       clearTimeout(removeDnDStylesTimeout.current);
@@ -60,6 +70,86 @@ const useGridRowReorder = (apiRef, props) => {
   const isRowReorderDisabled = React.useMemo(() => {
     return !props.rowReordering || !!sortModel.length || treeDepth !== 1;
   }, [props.rowReordering, sortModel, treeDepth]);
+  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 && position) {
+      const targetRow = apiRef.current.rootElementRef?.current?.querySelector(`[data-id="${targetRowId}"]`);
+      if (targetRow) {
+        targetRow.classList.add(position === 'above' ? classes.rowDropAbove : classes.rowDropBelow);
+        previousDropIndicatorRef.current = targetRow;
+      }
+    }
+  }, [apiRef, classes]);
+  const applyDraggedState = React.useCallback((rowId, isDragged) => {
+    if (rowId) {
+      const draggedRow = apiRef.current.rootElementRef?.current?.querySelector(`[data-id="${rowId}"]`);
+      if (draggedRow) {
+        if (isDragged) {
+          draggedRow.classList.add(classes.rowBeingDragged);
+        } else {
+          draggedRow.classList.remove(classes.rowBeingDragged);
+        }
+      }
+    }
+  }, [apiRef, classes.rowBeingDragged]);
+  const applyRowAnimation = React.useCallback(callback => {
+    const rootElement = apiRef.current.rootElementRef?.current;
+    if (!rootElement) {
+      return;
+    }
+    const visibleRows = rootElement.querySelectorAll('[data-id]');
+    if (!visibleRows.length) {
+      return;
+    }
+    const rowsArray = Array.from(visibleRows);
+    const initialPositions = new Map();
+    rowsArray.forEach(row => {
+      const rowId = row.getAttribute('data-id');
+      if (rowId) {
+        initialPositions.set(rowId, row.getBoundingClientRect());
+      }
+    });
+    callback();
+
+    // Use `requestAnimationFrame` to ensure DOM has updated
+    requestAnimationFrame(() => {
+      const newRows = rootElement.querySelectorAll('[data-id]');
+      const animations = [];
+      newRows.forEach(row => {
+        const rowId = row.getAttribute('data-id');
+        if (!rowId) {
+          return;
+        }
+        const prevRect = initialPositions.get(rowId);
+        if (!prevRect) {
+          return;
+        }
+        const currentRect = row.getBoundingClientRect();
+        const deltaY = prevRect.top - currentRect.top;
+        if (Math.abs(deltaY) > 1) {
+          const animation = row.animate([{
+            transform: `translateY(${deltaY}px)`
+          }, {
+            transform: 'translateY(0)'
+          }], {
+            duration: 200,
+            easing: 'ease-in-out',
+            fill: 'forwards'
+          });
+          animations.push(animation);
+        }
+      });
+      if (animations.length > 0) {
+        Promise.allSettled(animations.map(a => a.finished)).then(() => {});
+      }
+    });
+  }, [apiRef]);
   const handleDragStart = React.useCallback((params, event) => {
     // Call the gridEditRowsStateSelector directly to avoid infnite loop
     const editRowsState = (0, _internals.gridEditRowsStateSelector)(apiRef);
@@ -71,47 +161,91 @@ const useGridRowReorder = (apiRef, props) => {
     // For more information check here https://github.com/mui/mui-x/issues/2680.
     event.stopPropagation();
     dragRowNode.current = event.currentTarget;
+    // Apply cell-level dragging class to the drag handle
     dragRowNode.current.classList.add(classes.rowDragging);
     setDragRowId(params.id);
+
+    // Apply the dragged state to the entire row
+    applyDraggedState(params.id, true);
     removeDnDStylesTimeout.current = setTimeout(() => {
       dragRowNode.current.classList.remove(classes.rowDragging);
     });
     originRowIndex.current = sortedRowIndexLookup[params.id];
     apiRef.current.setCellFocus(params.id, _gridRowReorderColDef.GRID_REORDER_COL_DEF.field);
-  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, sortedRowIndexLookup]);
+  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, sortedRowIndexLookup, applyDraggedState]);
   const handleDragOver = React.useCallback((params, event) => {
     if (dragRowId === '') {
       return;
     }
     const rowNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, params.id);
-    if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
+    if (!rowNode || rowNode.type === 'footer' || rowNode.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();
-    const mouseMovementDiff = previousMousePosition ? previousMousePosition.y - event.clientY : event.clientY;
     if (params.id !== dragRowId) {
       const targetRowIndex = sortedRowIndexLookup[params.id];
-      const dragDirection = mouseMovementDiff > 0 ? Direction.DOWN : Direction.UP;
+      const sourceRowIndex = sortedRowIndexLookup[dragRowId];
+
+      // Determine drop position based on relativeY position within the row
+      const dropPosition = relativeY < midPoint ? 'above' : 'below';
+
+      // Check if this drop would result in no actual movement
+      const wouldResultInNoMovement = dropPosition === 'above' && targetRowIndex === sourceRowIndex + 1 ||
+      // dragging to immediately below (above next row)
+      dropPosition === 'below' && targetRowIndex === sourceRowIndex - 1; // dragging to immediately above (below previous row)
+
       const currentReorderState = {
-        dragDirection,
-        previousTargetId: params.id
+        dragDirection: targetRowIndex < sourceRowIndex ? Direction.UP : Direction.DOWN,
+        previousTargetId: params.id,
+        previousDropPosition: dropPosition
       };
-      const isStateChanged = currentReorderState.dragDirection !== previousReorderState.dragDirection || currentReorderState.previousTargetId !== previousReorderState.previousTargetId;
-      if (previousReorderState.dragDirection === null || Math.abs(mouseMovementDiff) >= 1 && isStateChanged) {
-        apiRef.current.setRowIndex(dragRowId, targetRowIndex);
-        previousReorderState = currentReorderState;
+
+      // Only update visual indicator:
+      // 1. When dragging over a different row
+      // 2. When it would result in actual movement
+      if (previousReorderState.current.previousTargetId !== params.id || previousReorderState.current.previousDropPosition !== dropPosition) {
+        if (wouldResultInNoMovement) {
+          // Clear any existing indicators since this wouldn't result in movement
+          setDropTarget({
+            targetRowId: null,
+            targetRowIndex: null,
+            dropPosition: null
+          });
+          applyDropIndicator(null, null);
+        } else {
+          setDropTarget({
+            targetRowId: params.id,
+            targetRowIndex,
+            dropPosition
+          });
+          applyDropIndicator(params.id, dropPosition);
+        }
+        previousReorderState.current = currentReorderState;
       }
+    } else if (previousReorderState.current.previousTargetId !== null) {
+      setDropTarget({
+        targetRowId: null,
+        targetRowIndex: null,
+        dropPosition: null
+      });
+      applyDropIndicator(null, null);
+      previousReorderState.current = {
+        previousTargetId: null,
+        dragDirection: null,
+        previousDropPosition: null
+      };
     }
-    previousMousePosition = {
-      x: event.clientX,
-      y: event.clientY
-    };
-  }, [dragRowId, apiRef, logger, sortedRowIndexLookup]);
-  const handleDragEnd = React.useCallback((params, event) => {
+  }, [dragRowId, apiRef, logger, sortedRowIndexLookup, applyDropIndicator]);
+  const handleDragEnd = React.useCallback((_, event) => {
     // Call the gridEditRowsStateSelector directly to avoid infnite loop
     const editRowsState = (0, _internals.gridEditRowsStateSelector)(apiRef);
     if (dragRowId === '' || isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
@@ -124,24 +258,65 @@ const useGridRowReorder = (apiRef, props) => {
     event.stopPropagation();
     clearTimeout(removeDnDStylesTimeout.current);
     dragRowNode.current = null;
-    previousReorderState.dragDirection = null;
+    const dragDirection = previousReorderState.current.dragDirection;
+    previousReorderState.current = EMPTY_REORDER_STATE;
+
+    // Clear visual indicators and dragged state
+    applyDropIndicator(null, null);
+    applyDraggedState(dragRowId, false);
 
     // Check if the row was dropped outside the grid.
-    if (event.dataTransfer.dropEffect === 'none') {
-      // Accessing params.field may contain the wrong field as header elements are reused
-      apiRef.current.setRowIndex(dragRowId, originRowIndex.current);
+    if (!event.dataTransfer || event.dataTransfer.dropEffect === 'none') {
+      // Reset drop target state
+      setDropTarget({
+        targetRowId: null,
+        targetRowIndex: null,
+        dropPosition: null
+      });
       originRowIndex.current = null;
     } else {
-      // Emit the rowOrderChange event only once when the reordering stops.
-      const rowOrderChangeParams = {
-        row: apiRef.current.getRow(dragRowId),
-        targetIndex: sortedRowIndexLookup[params.id],
-        oldIndex: originRowIndex.current
-      };
-      apiRef.current.publishEvent('rowOrderChange', rowOrderChangeParams);
+      if (dropTarget.targetRowIndex !== null && dropTarget.targetRowId !== null) {
+        const sourceRowIndex = originRowIndex.current;
+        const targetRowIndex = dropTarget.targetRowIndex;
+        const dropPosition = dropTarget.dropPosition;
+
+        // Calculate the correct target index based on drop position
+        let finalTargetIndex;
+        if (dragDirection === Direction.UP) {
+          finalTargetIndex = dropPosition === 'above' ? targetRowIndex : targetRowIndex + 1;
+        } else {
+          finalTargetIndex = dropPosition === 'above' ? targetRowIndex - 1 : targetRowIndex;
+        }
+        const isReorderInvalid = dropPosition === 'above' && targetRowIndex === sourceRowIndex + 1 ||
+        // dragging to immediately below (above next row)
+        dropPosition === 'below' && targetRowIndex === sourceRowIndex - 1 ||
+        // dragging to immediately above (below previous row)
+        dropTarget.targetRowId === dragRowId; // dragging to the same row
+
+        if (!isReorderInvalid) {
+          applyRowAnimation(() => {
+            apiRef.current.setRowIndex(dragRowId, finalTargetIndex);
+
+            // Emit the rowOrderChange event only once when the reordering stops.
+            const rowOrderChangeParams = {
+              row: apiRef.current.getRow(dragRowId),
+              targetIndex: finalTargetIndex,
+              oldIndex: sourceRowIndex
+            };
+            apiRef.current.publishEvent('rowOrderChange', rowOrderChangeParams);
+          });
+        }
+      }
+
+      // Reset drop target state
+      setDropTarget({
+        targetRowId: null,
+        targetRowIndex: null,
+        dropPosition: null
+      });
     }
     setDragRowId('');
-  }, [apiRef, dragRowId, isRowReorderDisabled, logger, sortedRowIndexLookup]);
+  }, [apiRef, dragRowId, isRowReorderDisabled, logger, dropTarget, applyDropIndicator, applyDraggedState, applyRowAnimation]);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragStart', handleDragStart);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragOver', handleDragOver);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragEnd', handleDragEnd);

package/hooks/features/serverSideTreeData/useGridDataSourceTreeDataPreProcessors.js

@@ -82,8 +82,8 @@ const useGridDataSourceTreeDataPreProcessors = (privateApiRef, props) => {
     if (!getChildrenCount) {
       throw new Error('MUI X: No `getChildrenCount` method provided with the dataSource.');
     }
-    const parentPath = params.updates.groupKeys ?? [];
     const getRowTreeBuilderNode = rowId => {
+      const parentPath = params.updates.groupKeys ?? (0, _utils.getParentPath)(rowId, params);
       const count = getChildrenCount(params.dataRowIdToModelLookup[rowId]);
       return {
         id: rowId,

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

@@ -1,7 +1,13 @@
 import { GridRowId, GridRowTreeConfig } from '@mui/x-data-grid';
+import { GridRowTreeCreationParams } from '@mui/x-data-grid/internals';
 export declare function skipFiltering(rowTree: GridRowTreeConfig): {
   filteredRowsLookup: {};
   filteredChildrenCountLookup: Record<GridRowId, number>;
   filteredDescendantCountLookup: {};
 };
-export declare function skipSorting(rowTree: GridRowTreeConfig): GridRowId[];
+export declare function skipSorting(rowTree: GridRowTreeConfig): GridRowId[];
+/**
+ * Retrieves the parent path for a row from the previous tree state.
+ * Used during full tree updates to maintain correct hierarchy.
+ */
+export declare function getParentPath(rowId: GridRowId, treeCreationParams: GridRowTreeCreationParams): string[];

package/hooks/features/serverSideTreeData/utils.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getParentPath = getParentPath;
 exports.skipFiltering = skipFiltering;
 exports.skipSorting = skipSorting;
 var _xDataGrid = require("@mui/x-data-grid");
@@ -22,4 +23,15 @@ function skipFiltering(rowTree) {
 }
 function skipSorting(rowTree) {
   return (0, _internals.getTreeNodeDescendants)(rowTree, _xDataGrid.GRID_ROOT_GROUP_ID, false);
+}
+
+/**
+ * Retrieves the parent path for a row from the previous tree state.
+ * Used during full tree updates to maintain correct hierarchy.
+ */
+function getParentPath(rowId, treeCreationParams) {
+  if (treeCreationParams.updates.type !== 'full' || !treeCreationParams.previousTree?.[rowId] || treeCreationParams.previousTree[rowId].depth < 1 || !('path' in treeCreationParams.previousTree[rowId])) {
+    return [];
+  }
+  return treeCreationParams.previousTree[rowId].path || [];
 }

package/index.js

@@ -1,8 +1,8 @@
 /**
- * @mui/x-data-grid-pro v8.7.0
+ * @mui/x-data-grid-pro v8.9.0
  *
- * @license MUI X Commercial
- * This source code is licensed under the commercial license found in the
+ * @license SEE LICENSE IN LICENSE
+ * This source code is licensed under the SEE LICENSE IN LICENSE license found in the
  * LICENSE file in the root directory of this source tree.
  */
 "use strict";

package/internals/index.d.ts

@@ -34,5 +34,5 @@ export { updateRowTree } from "../utils/tree/updateRowTree.js";
 export { sortRowTree } from "../utils/tree/sortRowTree.js";
 export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from "../utils/tree/utils.js";
 export type { RowTreeBuilderGroupingCriterion } from "../utils/tree/models.js";
-export { skipSorting, skipFiltering } from "../hooks/features/serverSideTreeData/utils.js";
+export { skipSorting, skipFiltering, getParentPath } from "../hooks/features/serverSideTreeData/utils.js";
 export * from "./propValidation.js";

package/internals/index.js

@@ -43,7 +43,8 @@ var _exportNames = {
   removeNodeFromTree: true,
   getVisibleRowsLookup: true,
   skipSorting: true,
-  skipFiltering: true
+  skipFiltering: true,
+  getParentPath: true
 };
 Object.defineProperty(exports, "DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS", {
   enumerable: true,
@@ -99,6 +100,12 @@ Object.defineProperty(exports, "getGroupKeys", {
     return _utils.getGroupKeys;
   }
 });
+Object.defineProperty(exports, "getParentPath", {
+  enumerable: true,
+  get: function () {
+    return _utils3.getParentPath;
+  }
+});
 Object.defineProperty(exports, "getVisibleRowsLookup", {
   enumerable: true,
   get: function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "8.7.0",
+  "version": "8.9.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
   "main": "./index.js",
@@ -36,13 +36,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.6",
-    "@mui/utils": "^7.1.1",
+    "@mui/utils": "^7.2.0",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-data-grid": "8.7.0",
-    "@mui/x-license": "8.7.0",
-    "@mui/x-internals": "8.7.0"
+    "@mui/x-internals": "8.8.0",
+    "@mui/x-data-grid": "8.8.0",
+    "@mui/x-license": "8.9.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",