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

package/CHANGELOG.md

@@ -5,6 +5,101 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.9.0
+
+_Jul 17, 2025_
+
+We'd like to extend a big thank you to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Improve the drag and drop interaction for Data Grid [row reordering](https://mui.com/x/react-data-grid/row-ordering/) feature. It uses a drop indicator to point to the position the row would be moving to.
+
+  https://github.com/user-attachments/assets/37284c4f-e8d4-4fc6-a6af-a780592905ef
+
+- 🚀 Improve Data Grid Pivoting and Aggregation performance
+
+- 📊 Add `minBarSize` to set a minimum height for bars
+
+Special thanks go out to the community members for their valuable contributions:
+@lauri865
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @JCQuintas, @LukasTy, @mapache-salvaje, @noraleonte, @MBilalShafi
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.9.0`
+
+Internal changes.
+
+#### `@mui/x-data-grid-pro@8.9.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.9.0`, plus:
+
+- [DataGridPro] Row reorder using drop indicator (#18627) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.9.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.9.0`, plus:
+
+- [DataGridPremium] Allow group column overrides with pivoting (#18765) @arminmeh
+- [DataGridPremium] Support sort-dependent aggregation and improve performance (#18348) @lauri865
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.9.0`
+
+- [pickers] Avoid useless date creation in `AdapterDayjs` (#18429) @flaviendelangle
+- [pickers] Fix `timeSteps` JSDoc (#18807) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.9.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-date-pickers@8.9.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.9.0`
+
+- [charts] Add `minBarSize` to prevent bars from having 0 height (#18798) @JCQuintas
+- [charts] Add click listener to radar charts (#18773) @alexfauquette
+- [charts] Improve scatter chart pointer move performance (#18775) @bernardobelchior
+- [charts] Simplify radar internal hooks (#18760) @alexfauquette
+- [charts] `minBarSize` now ignores `0` and `null` values (#18816) @JCQuintas
+- [charts] Fix y-axis tick label overlap when using log scale (#18744) @bernardobelchior
+- [charts] Expose <ChartType>Series type for all chart types (#18805) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.9.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.9.0` plus:
+
+[charts-pro] Fix issue where charts gestures weren't properly working when inside the shadow-dom (#18837) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.9.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.9.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-tree-view@8.9.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.9.0`
+
+Internal changes.
+
+### Docs
+
+- [data grid][docs] Revise the Pro filter docs (#17929) @mapache-salvaje
+- [charts][docs] Move mark outside clip-path (#18806) @alexfauquette
+
+### Miscellaneous
+
+- [code-infra] Fix ESLint `import` restriction rule for test files (#18669) @LukasTy
+- [code-infra] Remove charts benchmarks dependency on `@testing-library/jest-dom` (#18800) @bernardobelchior
+- [code-infra] Remove duplicate dependency from `eslint-plugin-mui-x` (#18797) @bernardobelchior
+
 ## 8.8.0
 
 _Jul 11, 2025_
@@ -216,6 +311,7 @@ We'd like to extend a big thank you to the 12 contributors who made this release
 - 📅 Add `usePickerAdapter` hook to access the date adapter.
 
   You can use the adapter in your custom components if you need them to work with multiple date libraries — [Learn more](https://mui.com/x/react-date-pickers/custom-components/#access-date-adapter).
+
 - 🌎 Improve Danish (da-DK) locale
 - 🌎 Improve German (de-DE) locale
 
@@ -234,13 +330,13 @@ The following are all team members who have contributed to this release:
 - [l10n] Improve Danish (da-DK) locale (#18428) @ShahrazH
 - [l10n] Improve German (de-DE) locale (#18388) @omalyutin
 
-#### `@mui/x-data-grid-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-data-grid-pro@8.6.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.6.0`, plus:
 
 - [DataGridPro] Fix lazy loading params calculated from rendering context (#18460) @arminmeh
 
-#### `@mui/x-data-grid-premium@8.6.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+#### `@mui/x-data-grid-premium@8.6.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.6.0`.
 
@@ -252,7 +348,7 @@ Same changes as in `@mui/x-data-grid-pro@8.6.0`.
 - [pickers] Fix to use latest `value` when updating `lastCommittedValue` in internal state (#18518) @LukasTy
 - [pickers] Use `usePickerAdapter` hook internally instead of `useUtils` (#18465) @LukasTy
 
-#### `@mui/x-date-pickers-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-date-pickers-pro@8.6.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-date-pickers@8.6.0`.
 
@@ -269,7 +365,7 @@ Same changes as in `@mui/x-date-pickers@8.6.0`.
 - [charts] Improve touch behavior for polar axis (#18531) @JCQuintas
 - [charts] Add `isElementInside` helper (#18530) @JCQuintas
 
-#### `@mui/x-charts-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-charts-pro@8.6.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.6.0`, plus:
 
@@ -283,7 +379,7 @@ Same changes as in `@mui/x-charts@8.6.0`, plus:
 
 Internal changes.
 
-#### `@mui/x-tree-view-pro@8.6.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-tree-view-pro@8.6.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-tree-view@8.6.0`, plus:
 
@@ -1498,7 +1594,6 @@ Same changes as in `@mui/x-date-pickers@8.0.0-beta.3`.
 
 - Removed `react-spring` as a dependency of `@mui/x-charts`.
   A consequence of this change is that the props of some slots have been changed because the `SpringValue` wrapper has been removed. The affected slots and props are:
-
   - the type of the `x`, `y`, `width` and `height` props of the `bar` slot are now `number`;
   - the type of `startAngle`, `endAngle`, `innerRadius`, `outerRadius`, `arcLabelRadius`, `cornerRadius` and `paddingAngle` props of `pieArc` and `pieArcLabel` slot are now `number`.
 
@@ -2066,7 +2161,6 @@ Following are all team members who have contributed to this release:
 - The `slots.baseFormControl` component was removed.
 
 - The "Reset" button in the column visibility panel now resets to the initial column visibility model. Previously it was reset to the model that was active at the time the panel was opened. The reset behavior follows these rules:
-
   1. If an initial `columnVisibilityModel` is provided, it resets to that model.
   2. If a controlled `columnVisibilityModel` is provided, it resets to the first model value.
   3. When the columns are updated (via the `columns` prop or `updateColumns()` API method), the reset reference point updates to the current `columnVisibilityModel`.
@@ -2089,7 +2183,6 @@ Following are all team members who have contributed to this release:
   The `exclude` selection type allows to select all rows except the ones in the `ids` set.
 
   This change impacts the following props:
-
   - `rowSelectionModel`
   - `onRowSelectionModelChange`
   - `initialState.rowSelectionModel`
@@ -2413,7 +2506,6 @@ Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.12`, plus:
 - The `aria-label` on the `<Clock />` component and Time Picker opening button has been fixed to rely on the set `ampm` property instead of defaulting to the user's locale.
 
 - The following unused formats have been removed from the adapters and can no longer be overridden via the `dateFormats` prop on the `<LocalizationProvider />` component:
-
   - `fullTime` - please use `fullTime12h` and `fullTime24h` instead:
     ```diff
       <LocalizationProvider
@@ -2628,7 +2720,6 @@ Following are all team members who have contributed to this release:
 
 - `viewportInnerSize.width` now includes pinned columns' widths (fixes recursive loops in updating dimensions <-> columns)
 - The Data Grid now has a default background color, and its customization has moved from `theme.mixins.MuiDataGrid` to `theme.palette.DataGrid` with the following properties:
-
   - `bg`: Sets the background color of the entire grid (new property)
   - `headerBg`: Sets the background color of the header (previously named `containerBackground`)
   - `pinnedBg`: Sets the background color of pinned rows and columns (previously named `pinnedBackground`)
@@ -2657,7 +2748,6 @@ Following are all team members who have contributed to this release:
   Only the initial value and the type are updated. Logic that initializes the API and its availability remained the same, which means that if you could access API in a particular line of your code before, you are able to access it as well after this change.
 
   Depending on the context in which the API is being used, you can decide what is the best way to deal with `null` value. Some options are:
-
   - Use optional chaining
   - Use non-null assertion operator if you are sure your code is always executed when the `apiRef` is not `null`
   - Return early if `apiRef` is `null`
@@ -3181,7 +3271,6 @@ Following are all team members who have contributed to this release:
 #### Breaking changes
 
 - Passing additional props (like `data-*`, `aria-*`) directly on the Data Grid component is no longer supported. To pass the props, use `slotProps`:
-
   - For `.root` element, use `slotProps.root`.
   - For `.main` element (the one with `role="grid"`), use `slotProps.main`.
 
@@ -3698,14 +3787,12 @@ Same changes as in `@mui/x-date-pickers@v8.0.0-alpha.1`, plus:
 #### Breaking change
 
 - The DX of the Tooltip customization has been refactored
-
   - The `tooltip` prop has been removed in favor of `slotProps.tooltip` for consistency.
   - The `popper`, `axisContent`, and `itemContent` slots have been removed in favor of the `tooltip` slot which overrides the entire tooltip.
     - To override the tooltip content, use the `useItemTooltip` or `useAxisTooltip` hook to get the data, and wrap your component in `ChartsTooltipContainer` to follow the pointer position.
     - To override the tooltip placement, use the `ChartsItemTooltipContent` or `ChartsItemTooltipContent` to get default data and place them in your custom tooltip.
 
 - The library now uses the SVG `filter` attribute instead of `d3-color` for color manipulation.
-
   - This modification impacts the `LinePlot`, `AreaPlot`, and `BarPlot` components.
     If you've customized the `fill` of those elements, you might need to override it by using the CSS `filter`.
   - The `theme.styleOverride` is removed for `MuiLineElement`, `MuiAreaElement`, and `MuiBarElement` to improve performance.
@@ -3815,14 +3902,12 @@ Same changes as in `@mui/x-data-grid-pro@8.0.0-alpha.0`, plus:
 #### Breaking changes
 
 - The default DOM structure of the field has changed [Learn more](https://mui.com/x/migration/migration-pickers-v7/#new-dom-structure-for-the-field).
-
   - Before version `v8.x`, the fields' DOM structure consisted of an `<input />`, which held the whole value for the component, but unfortunately presents a few limitations in terms of accessibility when managing multiple section values.
   - Starting with version `v8.x`, all the field and picker components come with a new DOM structure that allows the field component to set aria attributes on individual sections, providing a far better experience with screen readers.
 
 - Some translation keys no longer require `utils` and the date object as parameters, but only the formatted value as a string. The keys affected by this changes are: `clockLabelText`, `openDatePickerDialogue` and `openTimePickerDialogue` — [Learn more](https://mui.com/x/migration/migration-pickers-v7/#stop-passing-utils-and-the-date-object-to-some-translation-keys).
 
 - The following types are no longer exported by `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` — [Learn more](https://mui.com/x/migration/migration-pickers-v7/#removed-types).
-
   - `UseDateFieldComponentProps`
   - `UseTimeFieldComponentProps`
   - `UseDateTimeFieldComponentProps`
@@ -3870,7 +3955,6 @@ Same changes as in `@mui/x-date-pickers@8.0.0-alpha.0`.
 - The `slots.legend` does not receive the `drawingArea` prop. You can still access your custom legend with the `useDrawingArea()` hook if your custom legend needs it.
 
 - Removed or renamed multiple props from Series — [Learn more](https://mui.com/x/migration/migration-charts-v7/#series-properties-renaming).
-
   - The `highlighted` and `faded` properties of highlightScope have been deprecated in favor of `highlight` and `fade`.
     The deprecated ones are now removed.
   - The `xAxisKey`, `yAxisKey`, and `zAxisKey` properties have been deprecated in favor of `xAxisId`, `yAxisId`, and `zAxisId`.
@@ -6134,7 +6218,6 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
   <img width="287" src="https://github.com/user-attachments/assets/78bd83c5-7ce4-4ed7-acf9-be70b2dbce54" alt="Item reordering using drag and drop" />
 
 - 📦 Support CommonJS bundle out of the box on `@mui/x-charts` by adding vendored D3 dependencies.
-
   - This modifies how the package imports D3.js. It will impact you if you use `d3` packages installed by `@mui/x-charts` and don't have them in your `package.json`. You shouldn't be affected otherwise.
   - For more context, the initial issue is caused by D3 only exporting ESM.
 
@@ -7669,7 +7752,6 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 #### Breaking changes
 
 - The `density` is a [controlled prop](https://mui.com/x/react-data-grid/accessibility/#set-the-density-programmatically) now, if you were previously passing the `density` prop to the Data Grid, you will need to do one of the following:
-
   1. Move it to the `initialState.density` to initialize it.
 
   ```diff
@@ -8175,7 +8257,6 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.4`.
   ```
 
 - The following internal types were exported by mistake and have been removed from the public API:
-
   - `UseDateFieldDefaultizedProps`
   - `UseTimeFieldDefaultizedProps`
   - `UseDateTimeFieldDefaultizedProps`
@@ -8416,7 +8497,6 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 - 🎁 The Line Chart component now has animation by default (#11620) @alexfauquette
 - 🚀 All charts have click handlers (#11411) @alexfauquette
   Test their respective documentation demonstrations to know more about the data format:
-
   - [Scatter Chart](https://v7.mui.com/x/react-charts/scatter/#click-event)
   - [Line Chart](https://v7.mui.com/x/react-charts/lines/#click-event)
   - [Bar Chart](https://v7.mui.com/x/react-charts/bars/#click-event)
@@ -8696,7 +8776,6 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos
   ```
 
   The most notable changes that might affect your application or tests are:
-
   - The `role="grid"` attribute along with related ARIA attributes are now applied to the inner `div` element instead of the root `div` element:
 
     ```diff
@@ -9247,7 +9326,6 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 
 - The filter panel no longer uses the native version of the [`Select`](https://mui.com/material-ui/react-select/) component for all components.
 - The `getOptionValue` and `getOptionLabel` props were removed from the following components:
-
   - `GridEditSingleSelectCell`
   - `GridFilterInputSingleSelect`
   - `GridFilterInputMultipleSingleSelect`
@@ -9661,7 +9739,6 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-alpha.3`, plus:
 - Add new parameters to the `shortcuts` slot `onChange` callback
 
   The `onChange` callback fired when selecting a shortcut now requires two new parameters (previously they were optional):
-
   - The [`changeImportance`](/x/react-date-pickers/shortcuts/#behavior-when-selecting-a-shortcut) of the shortcut.
   - The `item` containing the entire shortcut object.
 

package/DataGridPro/DataGridPro.js

@@ -29,7 +29,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc1MjE4NDgwMDAwMA==";
+const releaseInfo = "MTc1Mjc4OTYwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo

package/DataGridPro/useDataGridProComponent.js

@@ -1,9 +1,12 @@
 "use strict";
+'use client';
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useDataGridProComponent = void 0;
+var React = _interopRequireWildcard(require("react"));
 var _internals = require("@mui/x-data-grid/internals");
 var _useGridInfiniteLoader = require("../hooks/features/infiniteLoader/useGridInfiniteLoader");
 var _useGridColumnReorder = require("../hooks/features/columnReorder/useGridColumnReorder");
@@ -114,5 +117,10 @@ const useDataGridProComponent = (apiRef, props) => {
   (0, _internals.useGridVirtualization)(apiRef, props);
   (0, _useGridDataSourcePro.useGridDataSourcePro)(apiRef, props);
   (0, _internals.useGridListView)(apiRef, props);
+
+  // Should be the last thing to run, because all pre-processors should have been registered by now.
+  React.useEffect(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
 };
 exports.useDataGridProComponent = useDataGridProComponent;

package/components/GridRowReorderCell.js

@@ -42,6 +42,8 @@ function GridRowReorderCell(params) {
   const editRowsState = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridEditRowsStateSelector);
   // eslint-disable-next-line no-underscore-dangle
   const cellValue = params.row.__reorder__ || params.id;
+  const cellRef = React.useRef(null);
+  const listenerNodeRef = React.useRef(null);
 
   // TODO: remove sortModel and treeDepth checks once row reorder is compatible
   const isDraggable = React.useMemo(() => !!rootProps.rowReordering && !sortModel.length && treeDepth === 1 && Object.keys(editRowsState).length === 0, [rootProps.rowReordering, sortModel, treeDepth, editRowsState]);
@@ -74,12 +76,24 @@ function GridRowReorderCell(params) {
   }, [apiRef]);
   const handleDragEnd = React.useCallback(event => {
     handleMouseUp();
-    publish('rowDragEnd')(event);
-  }, [publish, handleMouseUp]);
+    if (apiRef.current.getRow(params.id)) {
+      apiRef.current.publishEvent('rowDragEnd', apiRef.current.getRowParams(params.id), event);
+    }
+    listenerNodeRef.current.removeEventListener('dragend', handleDragEnd);
+    listenerNodeRef.current = null;
+  }, [apiRef, params.id, handleMouseUp]);
+  const handleDragStart = React.useCallback(event => {
+    if (!cellRef.current) {
+      return;
+    }
+    publish('rowDragStart')(event);
+    cellRef.current.addEventListener('dragend', handleDragEnd);
+    // cache the node to remove the listener when the drag ends
+    listenerNodeRef.current = cellRef.current;
+  }, [publish, handleDragEnd]);
   const draggableEventHandlers = isDraggable ? {
-    onDragStart: publish('rowDragStart'),
+    onDragStart: handleDragStart,
     onDragOver: publish('rowDragOver'),
-    onDragEnd: handleDragEnd,
     onMouseDown: handleMouseDown,
     onMouseUp: handleMouseUp
   } : null;
@@ -87,6 +101,7 @@ function GridRowReorderCell(params) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
+    ref: cellRef,
     className: classes.root,
     draggable: isDraggable
   }, draggableEventHandlers, {

package/esm/DataGridPro/DataGridPro.js

@@ -22,7 +22,7 @@ const configuration = {
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc1MjE4NDgwMDAwMA==";
+const releaseInfo = "MTc1Mjc4OTYwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo

package/esm/DataGridPro/useDataGridProComponent.js

@@ -1,3 +1,6 @@
+'use client';
+
+import * as React from 'react';
 import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
@@ -107,4 +110,9 @@ export const useDataGridProComponent = (apiRef, props) => {
   useGridVirtualization(apiRef, props);
   useGridDataSource(apiRef, props);
   useGridListView(apiRef, props);
+
+  // Should be the last thing to run, because all pre-processors should have been registered by now.
+  React.useEffect(() => {
+    apiRef.current.runAppliersForPendingProcessors();
+  });
 };

package/esm/components/GridRowReorderCell.js

@@ -33,6 +33,8 @@ function GridRowReorderCell(params) {
   const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector);
   // eslint-disable-next-line no-underscore-dangle
   const cellValue = params.row.__reorder__ || params.id;
+  const cellRef = React.useRef(null);
+  const listenerNodeRef = React.useRef(null);
 
   // TODO: remove sortModel and treeDepth checks once row reorder is compatible
   const isDraggable = React.useMemo(() => !!rootProps.rowReordering && !sortModel.length && treeDepth === 1 && Object.keys(editRowsState).length === 0, [rootProps.rowReordering, sortModel, treeDepth, editRowsState]);
@@ -65,12 +67,24 @@ function GridRowReorderCell(params) {
   }, [apiRef]);
   const handleDragEnd = React.useCallback(event => {
     handleMouseUp();
-    publish('rowDragEnd')(event);
-  }, [publish, handleMouseUp]);
+    if (apiRef.current.getRow(params.id)) {
+      apiRef.current.publishEvent('rowDragEnd', apiRef.current.getRowParams(params.id), event);
+    }
+    listenerNodeRef.current.removeEventListener('dragend', handleDragEnd);
+    listenerNodeRef.current = null;
+  }, [apiRef, params.id, handleMouseUp]);
+  const handleDragStart = React.useCallback(event => {
+    if (!cellRef.current) {
+      return;
+    }
+    publish('rowDragStart')(event);
+    cellRef.current.addEventListener('dragend', handleDragEnd);
+    // cache the node to remove the listener when the drag ends
+    listenerNodeRef.current = cellRef.current;
+  }, [publish, handleDragEnd]);
   const draggableEventHandlers = isDraggable ? {
-    onDragStart: publish('rowDragStart'),
+    onDragStart: handleDragStart,
     onDragOver: publish('rowDragOver'),
-    onDragEnd: handleDragEnd,
     onMouseDown: handleMouseDown,
     onMouseUp: handleMouseUp
   } : null;
@@ -78,6 +92,7 @@ function GridRowReorderCell(params) {
     return null;
   }
   return /*#__PURE__*/_jsxs("div", _extends({
+    ref: cellRef,
     className: classes.root,
     draggable: isDraggable
   }, draggableEventHandlers, {

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

@@ -10,17 +10,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 composeClasses(slots, getDataGridUtilityClass, classes);
 };
@@ -36,12 +39,19 @@ export 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 = useGridSelector(apiRef, 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);
@@ -53,6 +63,86 @@ export 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 = gridEditRowsStateSelector(apiRef);
@@ -64,47 +154,91 @@ export 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, 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 = 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 = gridEditRowsStateSelector(apiRef);
     if (dragRowId === '' || isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
@@ -117,24 +251,65 @@ export 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]);
   useGridEvent(apiRef, 'rowDragStart', handleDragStart);
   useGridEvent(apiRef, 'rowDragOver', handleDragOver);
   useGridEvent(apiRef, 'rowDragEnd', handleDragEnd);

package/esm/index.js

@@ -1,8 +1,8 @@
 /**
- * @mui/x-data-grid-pro v8.8.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.
  */
 import "./typeOverloads/index.js";

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/index.js

@@ -1,8 +1,8 @@
 /**
- * @mui/x-data-grid-pro v8.8.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "8.8.0",
+  "version": "8.9.0",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
   "main": "./index.js",
@@ -42,7 +42,7 @@
     "prop-types": "^15.8.1",
     "@mui/x-internals": "8.8.0",
     "@mui/x-data-grid": "8.8.0",
-    "@mui/x-license": "8.8.0"
+    "@mui/x-license": "8.9.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",