@mui/x-data-grid 8.19.0 → 8.21.0

package/CHANGELOG.md

@@ -5,6 +5,180 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.21.0
+
+_Dec 3, 2025_
+
+We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Add [tick spacing property](https://mui.com/x/react-charts/axis/#tick-spacing) to charts axis to control the distance between ticks.
+
+The following team members contributed to this release:
+@alexfauquette, @bernardobelchior, @ElliottMiller, @Janpot, @JCQuintas, @romgrk, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.21.0`
+
+- [DataGrid] Fix autosizing header width calculation (#20323) @siriwatknp
+- [DataGrid] Virtualizer refactor (#19465) @romgrk
+
+#### `@mui/x-data-grid-pro@8.21.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.21.0`.
+
+#### `@mui/x-data-grid-premium@8.21.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.21.0`, plus:
+
+- [DataGridPremium] Prevent pasting to non-editable cells (#20333) @ElliottMiller
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.21.0`
+
+Internal changes.
+
+#### `@mui/x-date-pickers-pro@8.21.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.21.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.21.0`
+
+- [charts] Fix string measuring types (#20454) @bernardobelchior
+- [charts] Fix typo in performance note for CustomLineMarks demo (#20529) @sai6855
+- [charts] Introduce the notion of series with positions (#20461) @alexfauquette
+- [charts] Migrate from sinon to Vitest mocking utilities for x-charts\* packages (#20444) @Copilot
+- [charts] Move series-level values to series computed data in bar plot (#20467) @bernardobelchior
+- [charts] Refactor bar chart components in preparation for range bar chart (#20521) @bernardobelchior
+- [charts] Remove unnecessary `any` types (#20527) @sai6855
+- [charts] Remove unused `drawingArea` from `findClosestPoints` (#20471) @bernardobelchior
+- [charts] Revert `useIsHydrated` to default=false (#20511) @JCQuintas
+- [charts] Support tooltip anchor position for radar (#20422) @alexfauquette
+- [charts] Add tick spacing property (#20282) @bernardobelchior
+- [charts] Fix Vitest lint error (#20550) @bernardobelchior
+- [charts] Fix infinite loop when highlighting pie slices or scatter points (#20549) @bernardobelchior
+
+#### `@mui/x-charts-pro@8.21.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.21.0`, plus:
+
+- [charts-pro] Add support for `anchor="node"` on Sankey tooltip (#20462) @alexfauquette
+
+#### `@mui/x-charts-premium@8.21.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.21.0`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.21.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-pro@8.21.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.21.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.21.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Migrate to `next/font` for fonts loading (#20407) @Copilot
+
+### Core
+
+- [code-infra] Enable vitest eslint plugin (#20530) @Janpot
+- [code-infra] Fix missing font loading for local fonts (#20480) @Janpot
+- [internal] Performance: use raw `useSyncExternalStore` (#20447) @romgrk
+- [code-infra] Enable `vitest/expect-expect` and `vitest/no-standalone-expect` rules for x-charts packages (#20535) @Copilot
+
+### Miscellaneous
+
+- Bump @types/d3-sankey to ^0.12.5 (#20489) @renovate[bot]
+- Bump @types/react to 19.2.7 (#20490) @renovate[bot]
+- Bump @types/yargs to ^17.0.35 (#20491) @renovate[bot]
+- Bump Vite & Vitest to ^4.0.14 (#20500) @renovate[bot]
+- Bump csstype to ^3.2.3 (#20493) @renovate[bot]
+- Bump es-toolkit to ^1.42.0 (#20494) @renovate[bot]
+- Bump eslint to ^8.48.0 (#20495) @renovate[bot]
+- Bump lerna to ^9.0.3 (#20496) @renovate[bot]
+- Bump lucide-react to ^0.555.0 (#20502) @renovate[bot]
+- Bump playwright monorepo (#20503) @renovate[bot]
+- Bump pnpm to 10.24.0 (#20504) @renovate[bot]
+- Bump react monorepo (#20340) @renovate[bot]
+- Bump react-hook-form to ^7.66.1 (#20497) @renovate[bot]
+- Bump rimraf to ^6.1.2 (#20498) @renovate[bot]
+- Bump webpack-bundle-analyzer to ^5.0.1 (#20508) @renovate[bot]
+- Bump next to ^15.5.6 [SECURITY] (#20555) @renovate[bot]
+
+## 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/components/virtualization/GridVirtualScroller.js

@@ -96,6 +96,7 @@ function GridVirtualScroller(props) {
     getContainerProps,
     getScrollerProps,
     getContentProps,
+    getPositionerProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
@@ -128,12 +129,13 @@ function GridVirtualScroller(props) {
         loadingOverlayVariant: loadingOverlayVariant,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Overlay, (0, _extends2.default)({}, rootProps.slotProps?.[overlayType]))
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, {
-          role: "rowgroup",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({
+          role: "rowgroup"
+        }, getPositionerProps(), {
           children: [rows, /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
-        })
+        }))
       })), hasBottomFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerFiller.GridVirtualScrollerFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.bottomContainer, {

package/components/virtualization/GridVirtualScrollerRenderZone.js

@@ -1,23 +1,20 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.GridVirtualScrollerRenderZone = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridClasses = require("../../constants/gridClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["className"];
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -37,21 +34,12 @@ const VirtualScrollerRenderZoneRoot = (0, _system.styled)('div', {
   flexDirection: 'column'
 });
 const GridVirtualScrollerRenderZone = exports.GridVirtualScrollerRenderZone = (0, _forwardRef.forwardRef)(function GridVirtualScrollerRenderZone(props, ref) {
-  const {
-      className
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
-  const offsetTop = apiRef.current.virtualizer.api.getters.getOffsetTop();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerRenderZoneRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(classes.root, className),
-    ownerState: rootProps,
-    style: {
-      transform: `translate3d(0, ${offsetTop}px, 0)`
-    }
-  }, other, {
+    ownerState: rootProps
+  }, props, {
+    className: (0, _clsx.default)(classes.root, props.className),
     ref: ref
   }));
 });

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";