@mui/x-data-grid 8.19.0 → 8.20.0

package/CHANGELOG.md

@@ -5,6 +5,68 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.20.0
+
+_Nov 26, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🔃 Data Grid tree data now supports row reordering. See the [Drag-and-drop tree data reordering](https://mui.com/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) section for more details.
+- 🐞 Bugfixes
+
+The following team members contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @cherniavskii, @siriwatknp, @JCQuintas, @MBilalShafi, @prakhargupta1
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.20.0`
+
+- [DataGrid] Fix RTL virtualization to display columns when viewport width is larger than the grid (#20409) @siriwatknp
+- [DataGrid] Fix row range selection (#20442) @arminmeh
+- [DataGrid] Initialize data grid core packages (#20276) @cherniavskii
+- [DataGrid] Improve accessibility of the sort icon (#20430) @arminmeh
+- [DataGrid] Use `viewport` as a boundary for the `BasePopper` flip (#20311) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.20.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.20.0`, plus:
+
+- [DataGridPro] Avoid automatic scroll back to the focused header filter after it leaves the viewport (#20416) @arminmeh
+- [DataGridPro] Tree data row reordering (#19401) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.20.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.20.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.20.0`
+
+- [charts] Fix item tooltip position with node anchor (#20421) @alexfauquette
+- [charts] Fix radar item tooltip closing bug (#20429) @alexfauquette
+- [charts] Move series processing to selector (#20388) @JCQuintas
+- [charts] Prevent pointer out from removing controlled highlight (#20385) @alexfauquette
+
+#### `@mui/x-charts-pro@8.20.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.20.0`, plus:
+
+- [charts-pro] Fix Content-Security-Policy nonce not being correctly set on export (#20395) @bernardobelchior
+- [charts-pro] Improve vertical zoom slider thumb on mobile (#20439) @bernardobelchior
+- [charts-pro] Provide arguments to the `AreaPlotRoot` styled component (#20414) @arminmeh
+- [charts-pro] Remove grid outside the drawing area (#20412) @alexfauquette
+
+#### `@mui/x-charts-premium@8.20.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-charts-pro@8.20.0`, plus:
+
+- [charts-premium] Add explicit return type to `ChartsRenderer` for better compatibility with React 18 (#20413) @arminmeh
+
+### Docs
+
+- [docs] Add `llms.txt` link to the sidebar (#20312) @siriwatknp
+- [docs] Add a line chart demo for the Overview section (#20239) @prakhargupta1
+
 ## 8.19.0
 
 _Nov 20, 2025_

package/components/GridRow.js

@@ -32,6 +32,7 @@ var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelecto
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
 var _gridRowReorderSelector = require("../hooks/features/rowReorder/gridRowReorderSelector");
+var _GridRowDragAndDropOverlay = require("./GridRowDragAndDropOverlay");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
@@ -315,7 +316,9 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     }), cells, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       role: "presentation",
       className: (0, _clsx.default)(_gridClasses.gridClasses.cell, _gridClasses.gridClasses.cellEmpty)
-    }), rightCells]
+    }), rightCells, /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRowDragAndDropOverlay.GridRowDragAndDropOverlay, {
+      rowId: rowId
+    })]
   }));
 });
 if (process.env.NODE_ENV !== "production") GridRow.displayName = "GridRow";

package/components/GridRowDragAndDropOverlay.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { GridRowId } from "../models/gridRows.js";
+export interface GridRowDragAndDropOverlayProps {
+  rowId: GridRowId;
+  className?: string;
+}
+export declare const GridRowDragAndDropOverlay: React.NamedExoticComponent<GridRowDragAndDropOverlayProps>;

package/components/GridRowDragAndDropOverlay.js

@@ -0,0 +1,73 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridRowDragAndDropOverlay = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
+var _createStyled = require("@mui/system/createStyled");
+var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
+var _useGridSelector = require("../hooks/utils/useGridSelector");
+var _gridRowReorderSelector = require("../hooks/features/rowReorder/gridRowReorderSelector");
+var _jsxRuntime = require("react/jsx-runtime");
+const GridRowDragAndDropOverlayRoot = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'RowDragOverlay',
+  shouldForwardProp: prop => (0, _createStyled.shouldForwardProp)(prop) && prop !== 'action'
+})(({
+  theme,
+  action
+}) => (0, _extends2.default)({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  pointerEvents: 'none',
+  zIndex: 1
+}, action === 'above' && {
+  '&::before': {
+    pointerEvents: 'none',
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '2px',
+    backgroundColor: (theme.vars || theme).palette.primary.main
+  }
+}, action === 'below' && {
+  '&::after': {
+    pointerEvents: 'none',
+    content: '""',
+    position: 'absolute',
+    bottom: '-2px',
+    left: 0,
+    right: 0,
+    height: '2px',
+    backgroundColor: (theme.vars || theme).palette.primary.main
+  }
+}, action === 'inside' && {
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)` : (0, _styles.alpha)(theme.palette.primary.main, 0.1)
+}));
+const GridRowDragAndDropOverlay = exports.GridRowDragAndDropOverlay = /*#__PURE__*/React.memo(function GridRowDragAndDropOverlay(props) {
+  const {
+    rowId,
+    className
+  } = props;
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
+  const dropPosition = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowReorderSelector.gridRowDropPositionSelector, rowId);
+  if (!dropPosition) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRowDragAndDropOverlayRoot, {
+    action: dropPosition,
+    className: className
+  });
+});
+if (process.env.NODE_ENV !== "production") GridRowDragAndDropOverlay.displayName = "GridRowDragAndDropOverlay";

package/components/containers/GridRootStyles.js

@@ -239,10 +239,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
   }, {
     [`& .${_gridClasses.gridClasses.withBorderColor}`]: styles.withBorderColor
-  }, {
-    [`& .${_gridClasses.gridClasses['row--dropAbove']}`]: styles['row--dropAbove']
-  }, {
-    [`& .${_gridClasses.gridClasses['row--dropBelow']}`]: styles['row--dropBelow']
   }, {
     [`& .${_gridClasses.gridClasses['row--beingDragged']}`]: styles['row--beingDragged']
   }]
@@ -420,6 +416,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       alignItems: 'center',
       backgroundColor: headerBackground
     },
+    [`& .${_gridClasses.gridClasses.columnHeader} .${_gridClasses.gridClasses.sortButton}`]: {
+      backgroundColor: _cssVariables.vars.header.background.base
+    },
     [`& .${_gridClasses.gridClasses['columnHeader--filter']}`]: {
       paddingTop: 8,
       paddingBottom: 8,
@@ -519,7 +518,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}):hover .${_gridClasses.gridClasses.sortButton},
         & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}):hover .${_gridClasses.gridClasses.sortButton},
         & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}) .${_gridClasses.gridClasses.sortButton}:focus-visible`]: {
-        opacity: 0.5
+        opacity: 1
+      },
+      // Add opacity only to the button content to avoid affecting the background color
+      [`& .${_gridClasses.gridClasses.columnHeader}:not(.${_gridClasses.gridClasses['columnHeader--sorted']}):hover .${_gridClasses.gridClasses.sortButton} > *,
+        & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}):hover .${_gridClasses.gridClasses.sortButton} > *,
+        & .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}) .${_gridClasses.gridClasses.sortButton}:focus-visible > *`]: {
+        opacity: 0.78
+      },
+      [`& .${_gridClasses.gridClasses.pivotPanelFieldActionContainer} button:hover`]: {
+        backgroundColor: _cssVariables.vars.colors.background.base
       }
     },
     '@media (hover: none)': {
@@ -534,7 +542,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         }
       },
       [`& .${_gridClasses.gridClasses.pivotPanelField}:not(.${_gridClasses.gridClasses['pivotPanelField--sorted']}) .${_gridClasses.gridClasses.sortButton}`]: {
-        opacity: 0.5
+        opacity: 0.78
       }
     },
     // Hide the column separator when the column has border and it is not resizable
@@ -628,7 +636,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       [`&.${_gridClasses.gridClasses.rowSkeleton}:hover`]: {
         backgroundColor: 'transparent'
       },
-      '&.Mui-selected': selectedStyles
+      '&.Mui-selected': selectedStyles,
+      position: 'relative'
     },
     /* Cell styles */
     [`& .${_gridClasses.gridClasses.cell}`]: {
@@ -873,38 +882,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         display: 'none'
       }
     },
-    [`& .${_gridClasses.gridClasses['row--dropAbove']}`]: {
-      position: 'relative',
-      '&::before': {
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: _cssVariables.vars.colors.interactive.selected
-      }
-    },
-    [`& .${_gridClasses.gridClasses['row--dropBelow']}`]: {
-      position: 'relative',
-      '&::after': {
-        zIndex: 100,
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        bottom: '-2px',
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: _cssVariables.vars.colors.interactive.selected
-      },
-      [`&.${_gridClasses.gridClasses['row--lastVisible']}`]: {
-        '&::after': {
-          bottom: 'calc(var(--DataGrid-hasScrollY) * 0px + (1 - var(--DataGrid-hasScrollY)) * -2px)'
-        }
-      }
-    },
     [`& .${_gridClasses.gridClasses['row--beingDragged']}`]: {
       color: _cssVariables.vars.colors.foreground.disabled,
       '&:hover': {

package/constants/gridClasses.d.ts

@@ -572,14 +572,6 @@ export interface GridClasses {
    * Styles applied to the floating special row reorder cell element when it is dragged.
    */
   'row--dragging': string;
-  /**
-   * Styles applied to the row element when it is a drop target above.
-   */
-  'row--dropAbove': string;
-  /**
-   * Styles applied to the row element when it is a drop target below.
-   */
-  'row--dropBelow': string;
   /**
    * Styles applied to the row element when it is being dragged (entire row).
    */

package/constants/gridClasses.js

@@ -13,4 +13,4 @@ function getDataGridUtilityClass(slot) {
 }
 const gridClasses = exports.gridClasses = (0, _generateUtilityClasses.default)('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible',
 // TODO v9: Rename to `cell--dragging`
-'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+'row--dragging', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/esm/components/GridRow.js

@@ -26,6 +26,7 @@ import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSele
 import { gridRowNodeSelector } from "../hooks/features/rows/gridRowsSelector.js";
 import { gridEditRowsStateSelector, gridRowIsEditingSelector } from "../hooks/features/editing/gridEditingSelectors.js";
 import { gridIsRowDragActiveSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
+import { GridRowDragAndDropOverlay } from "./GridRowDragAndDropOverlay.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
@@ -308,7 +309,9 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     }), cells, /*#__PURE__*/_jsx("div", {
       role: "presentation",
       className: clsx(gridClasses.cell, gridClasses.cellEmpty)
-    }), rightCells]
+    }), rightCells, /*#__PURE__*/_jsx(GridRowDragAndDropOverlay, {
+      rowId: rowId
+    })]
   }));
 });
 if (process.env.NODE_ENV !== "production") GridRow.displayName = "GridRow";

package/esm/components/GridRowDragAndDropOverlay.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { GridRowId } from "../models/gridRows.js";
+export interface GridRowDragAndDropOverlayProps {
+  rowId: GridRowId;
+  className?: string;
+}
+export declare const GridRowDragAndDropOverlay: React.NamedExoticComponent<GridRowDragAndDropOverlayProps>;

package/esm/components/GridRowDragAndDropOverlay.js

@@ -0,0 +1,66 @@
+'use client';
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { styled, alpha } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system/createStyled';
+import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
+import { useGridSelector } from "../hooks/utils/useGridSelector.js";
+import { gridRowDropPositionSelector } from "../hooks/features/rowReorder/gridRowReorderSelector.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridRowDragAndDropOverlayRoot = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'RowDragOverlay',
+  shouldForwardProp: prop => shouldForwardProp(prop) && prop !== 'action'
+})(({
+  theme,
+  action
+}) => _extends({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  pointerEvents: 'none',
+  zIndex: 1
+}, action === 'above' && {
+  '&::before': {
+    pointerEvents: 'none',
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '2px',
+    backgroundColor: (theme.vars || theme).palette.primary.main
+  }
+}, action === 'below' && {
+  '&::after': {
+    pointerEvents: 'none',
+    content: '""',
+    position: 'absolute',
+    bottom: '-2px',
+    left: 0,
+    right: 0,
+    height: '2px',
+    backgroundColor: (theme.vars || theme).palette.primary.main
+  }
+}, action === 'inside' && {
+  backgroundColor: theme.vars ? `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)` : alpha(theme.palette.primary.main, 0.1)
+}));
+export const GridRowDragAndDropOverlay = /*#__PURE__*/React.memo(function GridRowDragAndDropOverlay(props) {
+  const {
+    rowId,
+    className
+  } = props;
+  const apiRef = useGridPrivateApiContext();
+  const dropPosition = useGridSelector(apiRef, gridRowDropPositionSelector, rowId);
+  if (!dropPosition) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(GridRowDragAndDropOverlayRoot, {
+    action: dropPosition,
+    className: className
+  });
+});
+if (process.env.NODE_ENV !== "production") GridRowDragAndDropOverlay.displayName = "GridRowDragAndDropOverlay";

package/esm/components/containers/GridRootStyles.js

@@ -233,10 +233,6 @@ export const GridRootStyles = styled('div', {
     [`& .${c.treeDataGroupingCellToggle}`]: styles.treeDataGroupingCellToggle
   }, {
     [`& .${c.withBorderColor}`]: styles.withBorderColor
-  }, {
-    [`& .${c['row--dropAbove']}`]: styles['row--dropAbove']
-  }, {
-    [`& .${c['row--dropBelow']}`]: styles['row--dropBelow']
   }, {
     [`& .${c['row--beingDragged']}`]: styles['row--beingDragged']
   }]
@@ -414,6 +410,9 @@ export const GridRootStyles = styled('div', {
       alignItems: 'center',
       backgroundColor: headerBackground
     },
+    [`& .${c.columnHeader} .${c.sortButton}`]: {
+      backgroundColor: vars.header.background.base
+    },
     [`& .${c['columnHeader--filter']}`]: {
       paddingTop: 8,
       paddingBottom: 8,
@@ -513,7 +512,16 @@ export const GridRootStyles = styled('div', {
       [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortButton},
         & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}):hover .${c.sortButton},
         & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}:focus-visible`]: {
-        opacity: 0.5
+        opacity: 1
+      },
+      // Add opacity only to the button content to avoid affecting the background color
+      [`& .${c.columnHeader}:not(.${c['columnHeader--sorted']}):hover .${c.sortButton} > *,
+        & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}):hover .${c.sortButton} > *,
+        & .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}:focus-visible > *`]: {
+        opacity: 0.78
+      },
+      [`& .${c.pivotPanelFieldActionContainer} button:hover`]: {
+        backgroundColor: vars.colors.background.base
       }
     },
     '@media (hover: none)': {
@@ -528,7 +536,7 @@ export const GridRootStyles = styled('div', {
         }
       },
       [`& .${c.pivotPanelField}:not(.${c['pivotPanelField--sorted']}) .${c.sortButton}`]: {
-        opacity: 0.5
+        opacity: 0.78
       }
     },
     // Hide the column separator when the column has border and it is not resizable
@@ -622,7 +630,8 @@ export const GridRootStyles = styled('div', {
       [`&.${c.rowSkeleton}:hover`]: {
         backgroundColor: 'transparent'
       },
-      '&.Mui-selected': selectedStyles
+      '&.Mui-selected': selectedStyles,
+      position: 'relative'
     },
     /* Cell styles */
     [`& .${c.cell}`]: {
@@ -867,38 +876,6 @@ export const GridRootStyles = styled('div', {
         display: 'none'
       }
     },
-    [`& .${c['row--dropAbove']}`]: {
-      position: 'relative',
-      '&::before': {
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: vars.colors.interactive.selected
-      }
-    },
-    [`& .${c['row--dropBelow']}`]: {
-      position: 'relative',
-      '&::after': {
-        zIndex: 100,
-        pointerEvents: 'none',
-        content: '""',
-        position: 'absolute',
-        bottom: '-2px',
-        left: 0,
-        width: '100%',
-        height: '2px',
-        backgroundColor: vars.colors.interactive.selected
-      },
-      [`&.${c['row--lastVisible']}`]: {
-        '&::after': {
-          bottom: 'calc(var(--DataGrid-hasScrollY) * 0px + (1 - var(--DataGrid-hasScrollY)) * -2px)'
-        }
-      }
-    },
     [`& .${c['row--beingDragged']}`]: {
       color: vars.colors.foreground.disabled,
       '&:hover': {

package/esm/constants/gridClasses.d.ts

@@ -572,14 +572,6 @@ export interface GridClasses {
    * Styles applied to the floating special row reorder cell element when it is dragged.
    */
   'row--dragging': string;
-  /**
-   * Styles applied to the row element when it is a drop target above.
-   */
-  'row--dropAbove': string;
-  /**
-   * Styles applied to the row element when it is a drop target below.
-   */
-  'row--dropBelow': string;
   /**
    * Styles applied to the row element when it is being dragged (entire row).
    */

package/esm/constants/gridClasses.js

@@ -5,4 +5,4 @@ export function getDataGridUtilityClass(slot) {
 }
 export const gridClasses = generateUtilityClasses('MuiDataGrid', ['aiAssistantPanel', 'aiAssistantPanelHeader', 'aiAssistantPanelTitleContainer', 'aiAssistantPanelTitle', 'aiAssistantPanelBody', 'aiAssistantPanelEmptyText', 'aiAssistantPanelFooter', 'aiAssistantPanelConversation', 'aiAssistantPanelConversationList', 'aiAssistantPanelConversationTitle', 'aiAssistantPanelSuggestions', 'aiAssistantPanelSuggestionsList', 'aiAssistantPanelSuggestionsItem', 'aiAssistantPanelSuggestionsLabel', 'actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'aggregationRowOverlayWrapper', 'autoHeight', 'autosizing', 'mainContent', 'withSidePanel', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'collapsible', 'collapsibleTrigger', 'collapsibleIcon', 'collapsiblePanel', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeader--siblingFocused', 'columnHeader--filter', 'columnHeaderFilterInput', 'columnHeaderFilterOperatorLabel', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementSearchInput', 'columnsManagementFooter', 'columnsManagementScrollArea', 'columnsManagementEmptyText', 'container--top', 'container--bottom', 'detailPanel', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderBottom', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'main--hiddenContent', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'root--noToolbar', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible',
 // TODO v9: Rename to `cell--dragging`
-'row--dragging', 'row--dropAbove', 'row--dropBelow', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);
+'row--dragging', 'row--beingDragged', 'row--dynamicHeight', 'row--detailPanelExpanded', 'row--borderBottom', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'rowReorderIcon', 'rowSkeleton', 'scrollArea--left', 'scrollArea--right', 'scrollArea--up', 'scrollArea--down', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--pinnedRight', 'scrollShadow', 'scrollShadow--vertical', 'scrollShadow--horizontal', 'selectedRowCount', 'sortButton', 'sortIcon', 'shadowScrollArea', 'sidebar', 'sidebarHeader', 'toolbarContainer', 'toolbar', 'toolbarLabel', 'toolbarDivider', 'toolbarFilterList', 'toolbarQuickFilter', 'toolbarQuickFilterTrigger', 'toolbarQuickFilterControl', 'virtualScroller', 'virtualScroller--hasScrollX', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'treeDataGroupingCellLoadingContainer', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'groupingCriteriaCellLoadingContainer', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pivotPanelAvailableFields', 'pivotPanelField', 'pivotPanelField--sorted', 'pivotPanelFieldActionContainer', 'pivotPanelFieldCheckbox', 'pivotPanelFieldDragIcon', 'pivotPanelFieldList', 'pivotPanelFieldName', 'pivotPanelHeader', 'pivotPanelPlaceholder', 'pivotPanelScrollArea', 'pivotPanelSearchContainer', 'pivotPanelSection', 'pivotPanelSectionTitle', 'pivotPanelSections', 'pivotPanelSwitch', 'pivotPanelSwitchLabel', 'prompt', 'promptContent', 'promptText', 'promptFeedback', 'promptChangeList', 'promptChangesToggle', 'promptChangesToggleIcon', 'promptIcon', 'promptIconContainer', 'promptError', 'promptAction']);

package/esm/hooks/core/pipeProcessing/gridPipeProcessingApi.d.ts

@@ -8,6 +8,7 @@ import { GridHydrateRowsValue } from "../../features/rows/gridRowsInterfaces.js"
 import { GridPreferencePanelsValue } from "../../features/preferencesPanel/index.js";
 import { GridGetRowsParams, GridGetRowsResponse } from "../../../models/gridDataSource.js";
 import { HeightEntry } from "../../features/rows/gridRowsMetaInterfaces.js";
+import type { RowReorderDropPosition } from "../../../models/api/gridRowApi.js";
 export type GridPipeProcessorGroup = keyof GridPipeProcessingLookup;
 export interface GridPipeProcessingLookup {
   columnMenu: {
@@ -97,12 +98,12 @@ export interface GridPipeProcessingLookup {
    *   - For example before first row is `0` and after the last row is `rows.length`.
    * If the reorder is invalid, it returns `-1`.
    */
-  getRowReorderTargetIndex: {
-    value: number;
+  isRowReorderValid: {
+    value: boolean;
     context: {
       sourceRowId: GridRowId;
       targetRowId: GridRowId;
-      dropPosition: 'above' | 'below';
+      dropPosition: RowReorderDropPosition;
       dragDirection: 'up' | 'down';
     };
   };

package/esm/hooks/features/dataSource/useGridDataSourceBase.js

@@ -115,7 +115,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
             params: fetchParams,
             cause: originalError
           }));
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           warnOnce(['MUI X: A call to `dataSource.getRows()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
         }
       }
@@ -170,7 +170,7 @@ export const useGridDataSourceBase = (apiRef, props, options = {}) => {
           params,
           cause: errorThrown
         }));
-      } else if (process.env.NODE_ENV !== 'production') {
+      } else {
         warnOnce(['MUI X: A call to `dataSource.updateRow()` threw an error which was not handled because `onDataSourceError()` is missing.', 'To handle the error pass a callback to the `onDataSourceError` prop, for example `<DataGrid onDataSourceError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/server-side-data/#error-handling.'], 'error');
       }
       throw errorThrown; // Let the caller handle the error further

package/esm/hooks/features/editing/useGridCellEditing.js

@@ -364,7 +364,7 @@ export const useGridCellEditing = (apiRef, props) => {
         });
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           warnOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };

package/esm/hooks/features/editing/useGridRowEditing.js

@@ -448,7 +448,7 @@ export const useGridRowEditing = (apiRef, props) => {
         }
         if (onProcessRowUpdateError) {
           onProcessRowUpdateError(errorThrown);
-        } else if (process.env.NODE_ENV !== 'production') {
+        } else {
           warnOnce(['MUI X: A call to `processRowUpdate()` threw an error which was not handled because `onProcessRowUpdateError()` is missing.', 'To handle the error pass a callback to the `onProcessRowUpdateError()` prop, for example `<DataGrid onProcessRowUpdateError={(error) => ...} />`.', 'For more detail, see https://mui.com/x/react-data-grid/editing/persistence/.'], 'error');
         }
       };

package/esm/hooks/features/export/serializers/csvSerializer.js

@@ -76,10 +76,8 @@ const serializeRow = ({
   });
   columns.forEach(column => {
     const cellParams = getCellParams(id, column.field);
-    if (process.env.NODE_ENV !== 'production') {
-      if (String(cellParams.formattedValue) === '[object Object]') {
-        warnOnce(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
-      }
+    if (String(cellParams.formattedValue) === '[object Object]') {
+      warnOnce(['MUI X: When the value of a field is an object or a `renderCell` is provided, the CSV export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
     }
     row.addValue(serializeCellValue(cellParams, {
       ignoreValueFormatter,