@mui/x-data-grid-pro 8.10.1 → 8.11.0

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

@@ -2,15 +2,11 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useTimeout from '@mui/utils/useTimeout';
 import composeClasses from '@mui/utils/composeClasses';
-import { useGridLogger, useGridEvent, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowMaximumTreeDepthSelector, useGridEventPriority, gridRowNodeSelector, useGridApiMethod } from '@mui/x-data-grid';
-import { gridEditRowsStateSelector, gridSortedRowIndexLookupSelector } from '@mui/x-data-grid/internals';
+import { useGridLogger, useGridEvent, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, useGridEventPriority, gridRowNodeSelector, gridRowMaximumTreeDepthSelector, useGridApiMethod } from '@mui/x-data-grid';
+import { gridEditRowsStateSelector, useGridRegisterPipeProcessor, gridExpandedSortedRowIndexLookupSelector } from '@mui/x-data-grid/internals';
 import { GRID_REORDER_COL_DEF } from "./gridRowReorderColDef.js";
-var Direction = /*#__PURE__*/function (Direction) {
-  Direction[Direction["UP"] = 0] = "UP";
-  Direction[Direction["DOWN"] = 1] = "DOWN";
-  return Direction;
-}(Direction || {});
 const EMPTY_REORDER_STATE = {
   previousTargetId: null,
   dragDirection: null,
@@ -35,13 +31,12 @@ export const rowReorderStateInitializer = state => _extends({}, state, {
 });
 
 /**
- * Only available in DataGridPro
+ * Hook for row reordering (Pro package)
  * @requires useGridRows (method)
  */
 export const useGridRowReorder = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRowReorder');
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
-  const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const dragRowNode = React.useRef(null);
   const originRowIndex = React.useRef(null);
   const removeDnDStylesTimeout = React.useRef(undefined);
@@ -51,9 +46,11 @@ export const useGridRowReorder = (apiRef, props) => {
   };
   const classes = useUtilityClasses(ownerState);
   const [dragRowId, setDragRowId] = React.useState('');
-  const sortedRowIndexLookup = useGridSelector(apiRef, gridSortedRowIndexLookupSelector);
+  const sortedRowIndexLookup = useGridSelector(apiRef, gridExpandedSortedRowIndexLookupSelector);
+  const timeoutRowId = React.useRef('');
+  const timeout = useTimeout();
   const previousReorderState = React.useRef(EMPTY_REORDER_STATE);
-  const [dropTarget, setDropTarget] = React.useState({
+  const dropTarget = React.useRef({
     targetRowId: null,
     targetRowIndex: null,
     dropPosition: null
@@ -65,10 +62,10 @@ export const useGridRowReorder = (apiRef, props) => {
   }, []);
 
   // TODO: remove sortModel check once row reorder is sorting compatible
-  // remove treeDepth once row reorder is tree compatible
+  // remove treeData check once row reorder is treeData compatible
   const isRowReorderDisabled = React.useMemo(() => {
-    return !props.rowReordering || !!sortModel.length || treeDepth !== 1;
-  }, [props.rowReordering, sortModel, treeDepth]);
+    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) {
@@ -77,7 +74,7 @@ export const useGridRowReorder = (apiRef, props) => {
     }
 
     // Apply new drop indicator
-    if (targetRowId && position) {
+    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);
@@ -152,9 +149,14 @@ export const useGridRowReorder = (apiRef, props) => {
   const handleDragStart = React.useCallback((params, event) => {
     // Call the gridEditRowsStateSelector directly to avoid infnite loop
     const editRowsState = gridEditRowsStateSelector(apiRef);
+    event.dataTransfer.effectAllowed = 'copy';
     if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
       return;
     }
+    if (timeoutRowId.current) {
+      timeout.clear();
+      timeoutRowId.current = '';
+    }
     logger.debug(`Start dragging row ${params.id}`);
     // Prevent drag events propagation.
     // For more information check here https://github.com/mui/mui-x/issues/2680.
@@ -172,13 +174,14 @@ export const useGridRowReorder = (apiRef, props) => {
     });
     originRowIndex.current = sortedRowIndexLookup[params.id];
     apiRef.current.setCellFocus(params.id, GRID_REORDER_COL_DEF.field);
-  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, sortedRowIndexLookup, applyDraggedState]);
+  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, applyDraggedState, sortedRowIndexLookup, timeout]);
   const handleDragOver = React.useCallback((params, event) => {
     if (dragRowId === '') {
       return;
     }
-    const rowNode = gridRowNodeSelector(apiRef, params.id);
-    if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow' || !event.target) {
+    const targetNode = gridRowNodeSelector(apiRef, params.id);
+    const sourceNode = gridRowNodeSelector(apiRef, dragRowId);
+    if (!sourceNode || !targetNode || targetNode.type === 'footer' || targetNode.type === 'pinnedRow' || !event.target) {
       return;
     }
 
@@ -191,66 +194,80 @@ export const useGridRowReorder = (apiRef, props) => {
     // Prevent drag events propagation.
     // For more information check here https://github.com/mui/mui-x/issues/2680.
     event.stopPropagation();
-    if (params.id !== dragRowId) {
-      const targetRowIndex = sortedRowIndexLookup[params.id];
-      const sourceRowIndex = sortedRowIndexLookup[dragRowId];
+    if (timeoutRowId.current && timeoutRowId.current !== params.id) {
+      timeout.clear();
+      timeoutRowId.current = '';
+    }
+    if (targetNode.type === 'group' && targetNode.depth < sourceNode.depth && !targetNode.childrenExpanded && !timeoutRowId.current) {
+      timeout.start(500, () => {
+        const rowNode = 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;
+      return;
+    }
+    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';
+    // 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,
+      previousDropPosition: dropPosition
+    };
 
-      // 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)
+    // Update visual indicator when dragging over a different row or position
+    if (previousReorderState.current.previousTargetId !== params.id || previousReorderState.current.previousDropPosition !== dropPosition) {
+      const isSameNode = targetRowIndex === sourceRowIndex;
 
-      const currentReorderState = {
-        dragDirection: targetRowIndex < sourceRowIndex ? Direction.UP : Direction.DOWN,
-        previousTargetId: params.id,
-        previousDropPosition: dropPosition
-      };
+      // 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, {
+        sourceRowId: dragRowId,
+        targetRowId: params.id,
+        dropPosition,
+        dragDirection: currentReorderState.dragDirection
+      });
 
-      // 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;
+      // Show drop indicator for valid drops OR adjacent positions OR same node
+      if (validatedIndex !== -1 || isAdjacentPosition || isSameNode) {
+        dropTarget.current = {
+          targetRowId: params.id,
+          targetRowIndex,
+          dropPosition
+        };
+        applyDropIndicator(params.id, dropPosition);
+      } else {
+        // Clear indicators for invalid drops
+        dropTarget.current = {
+          targetRowId: null,
+          targetRowIndex: null,
+          dropPosition: null
+        };
+        applyDropIndicator(null, null);
       }
-    } else if (previousReorderState.current.previousTargetId !== null) {
-      setDropTarget({
-        targetRowId: null,
-        targetRowIndex: null,
-        dropPosition: null
-      });
-      applyDropIndicator(null, null);
-      previousReorderState.current = {
-        previousTargetId: null,
-        dragDirection: null,
-        previousDropPosition: null
-      };
+      previousReorderState.current = currentReorderState;
     }
-  }, [dragRowId, apiRef, logger, sortedRowIndexLookup, applyDropIndicator]);
+
+    // Render the native 'copy' cursor for additional visual feedback
+    if (dropTarget.current.targetRowId === null) {
+      event.dataTransfer.dropEffect = 'none';
+    } else {
+      event.dataTransfer.dropEffect = 'copy';
+    }
+  }, [dragRowId, apiRef, logger, timeout, sortedRowIndexLookup, applyDropIndicator]);
   const handleDragEnd = React.useCallback((_, event) => {
     // Call the gridEditRowsStateSelector directly to avoid infnite loop
     const editRowsState = gridEditRowsStateSelector(apiRef);
     if (dragRowId === '' || isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
       return;
     }
+    if (timeoutRowId.current) {
+      timeout.clear();
+      timeoutRowId.current = '';
+    }
     logger.debug('End dragging row');
     event.preventDefault();
     // Prevent drag events propagation.
@@ -269,55 +286,77 @@ export const useGridRowReorder = (apiRef, props) => {
     // Check if the row was dropped outside the grid.
     if (!event.dataTransfer || event.dataTransfer.dropEffect === 'none') {
       // Reset drop target state
-      setDropTarget({
+      dropTarget.current = {
         targetRowId: null,
         targetRowIndex: null,
         dropPosition: null
-      });
+      };
       originRowIndex.current = null;
-    } else {
-      if (dropTarget.targetRowIndex !== null && dropTarget.targetRowId !== null) {
-        const sourceRowIndex = originRowIndex.current;
-        const targetRowIndex = dropTarget.targetRowIndex;
-        const dropPosition = dropTarget.dropPosition;
+      setDragRowId('');
+      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, {
+        sourceRowId: dragRowId,
+        targetRowId: dropTarget.current.targetRowId,
+        dropPosition: dropTarget.current.dropPosition,
+        dragDirection: dragDirection
+      });
+      if (validatedIndex !== -1) {
+        applyRowAnimation(() => {
+          apiRef.current.setRowIndex(dragRowId, validatedIndex);
 
-        // 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
+          // 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);
+        });
+      }
+    }
 
-        if (!isReorderInvalid) {
-          applyRowAnimation(() => {
-            apiRef.current.setRowIndex(dragRowId, finalTargetIndex);
+    // Reset drop target state
+    dropTarget.current = {
+      targetRowId: null,
+      targetRowIndex: null,
+      dropPosition: null
+    };
+    setDragRowId('');
+  }, [apiRef, dragRowId, isRowReorderDisabled, logger, applyDropIndicator, applyDraggedState, timeout, applyRowAnimation]);
+  const getRowReorderTargetIndex = React.useCallback((initialValue, {
+    sourceRowId,
+    targetRowId,
+    dropPosition,
+    dragDirection
+  }) => {
+    if (gridRowMaximumTreeDepthSelector(apiRef) > 1) {
+      return initialValue;
+    }
+    const targetRowIndex = sortedRowIndexLookup[targetRowId];
+    const sourceRowIndex = sortedRowIndexLookup[sourceRowId];
 
-            // 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);
-          });
-        }
-      }
+    // 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)
 
-      // Reset drop target state
-      setDropTarget({
-        targetRowId: null,
-        targetRowIndex: null,
-        dropPosition: null
-      });
+    if (isAdjacentNode || sourceRowIndex === targetRowIndex) {
+      // Return -1 to prevent actual movement (indicators handled separately)
+      return -1;
     }
-    setDragRowId('');
-  }, [apiRef, dragRowId, isRowReorderDisabled, logger, dropTarget, applyDropIndicator, applyDraggedState, applyRowAnimation]);
+    let finalTargetIndex;
+    if (dragDirection === 'up') {
+      finalTargetIndex = dropPosition === 'above' ? targetRowIndex : targetRowIndex + 1;
+    } else {
+      finalTargetIndex = dropPosition === 'above' ? targetRowIndex - 1 : targetRowIndex;
+    }
+    return finalTargetIndex;
+  }, [apiRef, sortedRowIndexLookup]);
+  useGridRegisterPipeProcessor(apiRef, 'getRowReorderTargetIndex', getRowReorderTargetIndex);
   useGridEvent(apiRef, 'rowDragStart', handleDragStart);
   useGridEvent(apiRef, 'rowDragOver', handleDragOver);
   useGridEvent(apiRef, 'rowDragEnd', handleDragEnd);

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.10.1
+ * @mui/x-data-grid-pro v8.11.0
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -10,6 +10,7 @@ exports.useGridColumnReorder = exports.columnReorderStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _xDataGrid = require("@mui/x-data-grid");
 var _columnReorderSelector = require("./columnReorderSelector");
@@ -247,6 +248,24 @@ const useGridColumnReorder = (apiRef, props) => {
       cursorPosition.current = coordinates;
     }
   }, [apiRef, logger, isRtl]);
+  React.useEffect(() => {
+    if (!props.keepColumnPositionIfDraggedOutside) {
+      return () => {};
+    }
+    const doc = (0, _ownerDocument.default)(apiRef.current.rootElementRef.current);
+    const listener = event => {
+      if (event.dataTransfer) {
+        // keep the drop effect if we are keeping the column position if dragged outside
+        // https://github.com/mui/mui-x/issues/19183#issuecomment-3202307783
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+      }
+    };
+    doc.addEventListener('dragover', listener);
+    return () => {
+      doc.removeEventListener('dragover', listener);
+    };
+  }, [apiRef, props.keepColumnPositionIfDraggedOutside]);
   (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragStart', handleDragStart);
   (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragEnter', handleDragEnter);
   (0, _xDataGrid.useGridEvent)(apiRef, 'columnHeaderDragOver', handleDragOver);

package/hooks/features/dataSource/models.d.ts

@@ -7,9 +7,9 @@ export interface GridDataSourceState {
 export interface GridGetRowsResponsePro extends GridGetRowsResponse {}
 export interface GridGetRowsParamsPro extends GridGetRowsParams {
   /**
-   * Array of keys returned by `getGroupKey` of all the parent rows until the row for which the data is requested
-   * `getGroupKey` prop must be implemented to use this.
-   * Useful for `treeData` and `rowGrouping` only.
+   * Array of keys returned by `getGroupKey()` of all the parent rows until the row for which the data is requested
+   * `getGroupKey()` prop must be implemented to use this.
+   * Used with "tree data" and "row grouping" features only.
    */
   groupKeys?: string[];
 }
@@ -21,7 +21,9 @@ export interface GridDataSourcePro extends Omit<GridDataSource, 'getRows'> {
    */
   getRows(params: GridGetRowsParamsPro): Promise<GridGetRowsResponsePro>;
   /**
-   * Used to group rows by their parent group. Replaces `getTreeDataPath` used in client side tree-data.
+   * Used to group rows by their parent group.
+   * Replaces `getTreeDataPath()` used in client side tree-data
+   * Replaces `colDef.groupingValueGetter` used in client side row grouping
    * @param {GridRowModel} row The row to get the group key of.
    * @returns {string} The group key for the row.
    */

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

@@ -1,10 +1,10 @@
 import { RefObject } from '@mui/x-internals/types';
-import { GridStateInitializer } from '@mui/x-data-grid/internals';
+import { type GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
 import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";
 export declare const rowReorderStateInitializer: GridStateInitializer;
 /**
- * Only available in DataGridPro
+ * Hook for row reordering (Pro package)
  * @requires useGridRows (method)
  */
-export declare const useGridRowReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes">) => void;
+export declare const useGridRowReorder: (apiRef: RefObject<GridPrivateApiPro>, props: Pick<DataGridProProcessedProps, "rowReordering" | "onRowOrderChange" | "classes" | "treeData" | "dataSource">) => void;