@mui/x-data-grid-pro 8.10.2 → 8.11.1

package/hooks/features/rowReorder/useGridRowReorder.js

@@ -9,15 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridRowReorder = exports.rowReorderStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 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 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,
@@ -42,14 +38,13 @@ const rowReorderStateInitializer = state => (0, _extends2.default)({}, state, {
 });
 
 /**
- * Only available in DataGridPro
+ * Hook for row reordering (Pro package)
  * @requires useGridRows (method)
  */
 exports.rowReorderStateInitializer = rowReorderStateInitializer;
 const useGridRowReorder = (apiRef, props) => {
   const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridRowReorder');
   const sortModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridSortModelSelector);
-  const treeDepth = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridRowMaximumTreeDepthSelector);
   const dragRowNode = React.useRef(null);
   const originRowIndex = React.useRef(null);
   const removeDnDStylesTimeout = React.useRef(undefined);
@@ -59,9 +54,11 @@ const useGridRowReorder = (apiRef, props) => {
   };
   const classes = useUtilityClasses(ownerState);
   const [dragRowId, setDragRowId] = React.useState('');
-  const sortedRowIndexLookup = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridSortedRowIndexLookupSelector);
+  const sortedRowIndexLookup = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridExpandedSortedRowIndexLookupSelector);
+  const timeoutRowId = React.useRef('');
+  const timeout = (0, _useTimeout.default)();
   const previousReorderState = React.useRef(EMPTY_REORDER_STATE);
-  const [dropTarget, setDropTarget] = React.useState({
+  const dropTarget = React.useRef({
     targetRowId: null,
     targetRowIndex: null,
     dropPosition: null
@@ -73,10 +70,10 @@ 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) {
@@ -85,7 +82,7 @@ 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);
@@ -160,9 +157,14 @@ const useGridRowReorder = (apiRef, props) => {
   const handleDragStart = React.useCallback((params, event) => {
     // Call the gridEditRowsStateSelector directly to avoid infnite loop
     const editRowsState = (0, _internals.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.
@@ -180,13 +182,14 @@ const useGridRowReorder = (apiRef, props) => {
     });
     originRowIndex.current = sortedRowIndexLookup[params.id];
     apiRef.current.setCellFocus(params.id, _gridRowReorderColDef.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 = (0, _xDataGrid.gridRowNodeSelector)(apiRef, params.id);
-    if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow' || !event.target) {
+    const targetNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, params.id);
+    const sourceNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, dragRowId);
+    if (!sourceNode || !targetNode || targetNode.type === 'footer' || targetNode.type === 'pinnedRow' || !event.target) {
       return;
     }
 
@@ -199,66 +202,80 @@ 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 = (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;
+      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 = (0, _internals.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.
@@ -277,55 +294,77 @@ 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 ((0, _xDataGrid.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]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowReorderTargetIndex', getRowReorderTargetIndex);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragStart', handleDragStart);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragOver', handleDragOver);
   (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragEnd', handleDragEnd);

package/index.js

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

package/package.json

@@ -1,9 +1,8 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "8.10.2",
+  "version": "8.11.1",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
-  "main": "./index.js",
   "license": "SEE LICENSE IN LICENSE",
   "bugs": {
     "url": "https://github.com/mui/mui-x/issues"
@@ -39,9 +38,9 @@
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-internals": "8.10.2",
-    "@mui/x-license": "8.10.2",
-    "@mui/x-data-grid": "8.10.2"
+    "@mui/x-data-grid": "8.11.1",
+    "@mui/x-license": "8.11.1",
+    "@mui/x-internals": "8.11.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",
@@ -63,27 +62,28 @@
     "node": ">=14.0.0"
   },
   "type": "commonjs",
+  "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "import": {
-        "types": "./esm/index.d.ts",
-        "default": "./esm/index.js"
-      },
       "require": {
         "types": "./index.d.ts",
         "default": "./index.js"
+      },
+      "default": {
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
       }
     },
     "./*": {
-      "import": {
-        "types": "./esm/*/index.d.ts",
-        "default": "./esm/*/index.js"
-      },
       "require": {
         "types": "./*/index.d.ts",
         "default": "./*/index.js"
+      },
+      "default": {
+        "types": "./esm/*/index.d.ts",
+        "default": "./esm/*/index.js"
       }
     },
     "./esm": null