@mui/x-data-grid 8.10.2 → 8.11.0

package/CHANGELOG.md

@@ -5,6 +5,127 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.11.0
+
+_Aug 29, 2025_
+
+We'd like to extend a big thank you to the 19 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 Add new `SankeyChart`
+
+  <img height="300" alt="Screenshot 2025-07-24 at 12 54 33" src="https://github.com/user-attachments/assets/d77bcec1-044b-48c6-b37d-d7b74793b91c" />
+
+- 🚀 Data Grid row grouping now supports row reordering
+
+  See the [Drag-and-drop group reordering](https://mui.com/x/react-data-grid/row-grouping/#drag-and-drop-group-reordering) section for more details.
+
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@dwrth, @lauri865, @Webini
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mapache-salvaje, @MBilalShafi, @michelengelen, @noraleonte, @oliviertassinari, @rita-codes, @romgrk, @sai6855, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.11.0`
+
+- [DataGrid] Fix focused column header scroll jump (#19323) @lauri865
+- [DataGrid] Bring `columnUnsortedIcon` slot back (#19268) @arminmeh
+- [DataGrid] Do not add `menu` role to the empty actions menu (#19338) @arminmeh
+- [DataGrid] Fix `columnsManagementRow` style override slot not working (#19097) @dwrth
+- [DataGrid] Fix pagination state synchronization issue (#19290) @MBilalShafi
+- [DataGrid] Fix scroll issue in R17 (#19265) @romgrk
+- [DataGrid] Hide column separator of non-resizable pinned column (#19277) @arminmeh
+
+#### `@mui/x-data-grid-pro@8.11.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.11.0`, plus:
+
+- [DataGridPro] Fix column menu sort when `multipleColumnsSortingMode="always"` (#19099) @MBilalShafi
+- [DataGridPro] Keep the drop effect if `keepColumnPositionIfDraggedOutside` is enabled (#19372) @arminmeh
+
+#### `@mui/x-data-grid-premium@8.11.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.11.0`, plus:
+
+- [DataGridPremium] Fix `valueFormatter` issues when `rowGroupingColumnMode="single"` (#18967) @cherniavskii
+- [DataGridPremium] Reordering support for row grouping (#18251) @MBilalShafi
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.11.0`
+
+- [pickers] Fix Firefox bug causing crash when `startContainer` is a restricted object (#18772) @Webini
+- [pickers] RTL not applied correctly for Calendar Systems examples (works in v7.x but broken in latest version) (#19287) @rita-codes
+- [pickers] Use the locale week day on the Luxon adapter (#19230) @flaviendelangle
+- [pickers] Fix display of placeholder when label is shrunk (#19318) @sai6855
+
+#### `@mui/x-date-pickers-pro@8.11.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.11.0`.
+
+### Charts
+
+#### `@mui/x-charts@8.11.0`
+
+- [charts] Add `RadarAxis` component to render labels (#19240) @alexfauquette
+- [charts] Handle item identifier with data (#19295) @JCQuintas
+- [charts] Refactor optional chaining for props in PieChart, PieChartPro, and ScatterChartPro components (#19292) @sai6855
+- [charts] Remove unused `fill` and `stroke` properties (#19316) @sai6855
+- [charts] Correct `hideLegend` prop description in docs (#19371) @sai6855
+
+#### `@mui/x-charts-pro@8.11.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.11.0`, plus:
+
+- [charts-pro] Add new `SankeyChart` (#18895) @JCQuintas
+
+### Tree View
+
+#### `@mui/x-tree-view@8.11.0`
+
+- [tree view] Improve the typing of the item's checkbox `slotProps` (#19247) @flaviendelangle
+
+#### `@mui/x-tree-view-pro@8.11.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.11.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.11.0`
+
+Internal changes.
+
+### Docs
+
+- [docs][TreeView] Fix grammar and spelling mistakes (#19299) @mapache-salvaje
+- [docs][DataGrid] Add pagination number formatting doc with a demo (#19221) @siriwatknp
+- [docs][Charts] Correct some small grammar mistakes (#19297) @mapache-salvaje
+- [docs][DataGrid] Correct grammar mistakes (#19298) @mapache-salvaje
+- [docs][DataGrid] Make it clear that the API key for AI Assistant must be private (#19244) @oliviertassinari
+
+### Core
+
+- [code-infra] Remove unnecessary triggers from publish workflow (#19348) @Janpot
+- [code-infra] Set up publishing from GitHub actions (#19264) @Janpot
+- [code-infra] Update renovate, exclude infra packages from MUI group (#19288) @Janpot
+- [internal] Add comment for Codspeed triggers (#19302) @oliviertassinari
+- [internal] Fix changelog generation for infra tags (#19266) @oliviertassinari
+- [internal] Remove dead repository field (#19301) @oliviertassinari
+- [internal] Sentence case @oliviertassinari
+- [internal] Update 8.10.1 changelog with missing changes (#19345) @cherniavskii
+- [support-infra] Improve GitHub Action that check PRs labels (#19303) @oliviertassinari
+
+### Miscellaneous
+
+- [infra] Add `synchronize` to workflow triggers (#19342) @michelengelen
+- [infra] Add charts docs folder in codowner (#19317) @alexfauquette
+- [infra] Fix publish workflow complaint (#19346) @JCQuintas
+- [infra] Migrate to use eslint without airbnb config (#19269) @brijeshb42
+- [infra] Simplify release preparation script (#19351) @michelengelen
+
 ## 8.10.2
 
 _Aug 20, 2025_
@@ -27,13 +148,13 @@ The following are all team members who have contributed to this release:
 - [DataGrid] Fix column header sortable classname when using `disableColumnSorting` (#19222) @wilcoschoneveld
 - [l10n] Improve finnish (fi-FI) locale (#19163) @lauri-heinonen-2025-04
 
-#### `@mui/x-data-grid-pro@8.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-data-grid-pro@8.10.2` [![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.10.2`, plus:
 
 - [DataGridPro] Fix quick filter not working in List View mode (#19254) @cherniavskii
 
-#### `@mui/x-data-grid-premium@8.10.2` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+#### `@mui/x-data-grid-premium@8.10.2` [![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.10.2`.
 
@@ -43,7 +164,7 @@ Same changes as in `@mui/x-data-grid-pro@8.10.2`.
 
 Internal changes.
 
-#### `@mui/x-date-pickers-pro@8.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-date-pickers-pro@8.10.2` [![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.10.2`.
 
@@ -53,7 +174,7 @@ Same changes as in `@mui/x-date-pickers@8.10.2`.
 
 Internal changes.
 
-#### `@mui/x-charts-pro@8.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-charts-pro@8.10.2` [![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.10.2`.
 
@@ -63,7 +184,7 @@ Same changes as in `@mui/x-charts@8.10.2`.
 
 - [tree view] Add `aria-hidden` to the Tree Item Checkbox (#19246) @flaviendelangle
 
-#### `@mui/x-tree-view-pro@8.10.2` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-tree-view-pro@8.10.2` [![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.10.2`.
 
@@ -95,13 +216,13 @@ Internal changes.
 
 _Aug 15, 2025_
 
-We'd like to extend a big thank you to the 8 contributors who made this release possible. Here are some highlights ✨:
+We'd like to extend a big thank you to the 11 contributors who made this release possible. Here are some highlights ✨:
 
 - 📊 Y-axes can now be grouped by category when using `band` and `point` scales.
 - 📚 Documentation improvements
 
 The following are all team members who have contributed to this release:
-@alexfauquette, @bernardobelchior, @Janpot, @JCQuintas, @mnajdova, @oliviertassinari, @prakhargupta1, @romgrk
+@alexfauquette, @bernardobelchior, @Janpot, @JCQuintas, @mnajdova, @oliviertassinari, @prakhargupta1, @romgrk, @brijeshb42, @noraleonte, @rita-codes
 
 ### Data Grid
 
@@ -110,12 +231,14 @@ The following are all team members who have contributed to this release:
 - [DataGrid] Fix scroll jumping (#19156) @romgrk
 - [DataGrid] Fix scroll restoration (#19182) @romgrk
 - [DataGrid] Fix "no row with id" error (#19193) @romgrk
+- [DataGrid] Fix missing rows in the print export window (#19159) @cherniavskii
+- [DataGrid] Fix broken scroll (#19178) @romgrk
 
-#### `@mui/x-data-grid-pro@8.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-data-grid-pro@8.10.1` [![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.10.1`.
 
-#### `@mui/x-data-grid-premium@8.10.1` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link "Premium plan")
+#### `@mui/x-data-grid-premium@8.10.1` [![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.10.1`.
 
@@ -125,7 +248,7 @@ Same changes as in `@mui/x-data-grid-pro@8.10.1`.
 
 Internal changes.
 
-#### `@mui/x-date-pickers-pro@8.10.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.10.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.10.0`.
 
@@ -141,8 +264,10 @@ Same changes as in `@mui/x-date-pickers@8.10.0`.
 - [charts] Fix default axis highlight for axes without data attribute (#18985) @alexfauquette
 - [charts] Fix tooltip mark unexpected wrapping in mobile (#19122) @bernardobelchior
 - [charts] Prevent overflow on charts tooltip (#19123) @bernardobelchior
+- [charts] Add demo for log-scale ticks without labels (#19152) @bernardobelchior
+- [charts] Update animation customization docs (#19185) @bernardobelchior
 
-#### `@mui/x-charts-pro@8.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-charts-pro@8.10.1` [![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.10.1`.
 
@@ -150,9 +275,10 @@ Same changes as in `@mui/x-charts@8.10.1`.
 
 #### `@mui/x-tree-view@8.10.1`
 
-Internal changes.
+- [tree view] Fix root not loading from cache on remount (#19088) @noraleonte
+- [tree view] Don't overwrite childrenIds when collapsed to preserve indeterminate state of the parent (#19196) @rita-codes
 
-#### `@mui/x-tree-view-pro@8.10.1` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link "Pro plan")
+#### `@mui/x-tree-view-pro@8.10.1` [![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.10.1`.
 
@@ -182,6 +308,7 @@ Internal changes.
 - [code-infra] Fix `fs-extra` removal from `formattedTSDemos` script (#19132) @bernardobelchior
 - [code-infra] Remove unused code and dependency (#19139) @bernardobelchior
 - [code-infra] Replace `fs-extra` with `node:fs` where possible (#19127) @bernardobelchior
+- [code-infra] Migrate build command to code-infra (#19006) @brijeshb42
 - [internal] Edit, keep `lockFileMaintenance` simple @oliviertassinari
 - [internal] Fix writing style action name @oliviertassinari
 - [internal] Make it clear that `lockFileMaintenance` is enabled @oliviertassinari

package/DataGrid/DataGrid.js

@@ -14,6 +14,7 @@ var _forwardRef = require("@mui/x-internals/forwardRef");
 var _components = require("../components");
 var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
 var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
+var _useGridRowsOverridableMethods = require("../hooks/features/rows/useGridRowsOverridableMethods");
 var _GridContextProvider = require("../context/GridContextProvider");
 var _useDataGridComponent = require("./useDataGridComponent");
 var _useDataGridProps = require("./useDataGridProps");
@@ -26,13 +27,14 @@ const configuration = {
     useCSSVariables: _variables.useMaterialCSSVariables,
     useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributes,
     useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes,
+    useGridRowsOverridableMethods: _useGridRowsOverridableMethods.useGridRowsOverridableMethods,
     useCellAggregationResult: () => null
   }
 };
 const DataGridRaw = function DataGrid(inProps, ref) {
   const props = (0, _useDataGridProps.useDataGridProps)(inProps);
   const privateApiRef = (0, _useGridApiInitialization.useGridApiInitialization)(props.apiRef, props);
-  (0, _useDataGridComponent.useDataGridComponent)(privateApiRef, props);
+  (0, _useDataGridComponent.useDataGridComponent)(privateApiRef, props, configuration);
   if (process.env.NODE_ENV !== 'production') {
     (0, _propValidation.validateProps)(props, _propValidation.propValidatorsDataGrid);
   }
@@ -587,7 +589,7 @@ DataGridRaw.propTypes = {
    */
   onPreferencePanelOpen: _propTypes.default.func,
   /**
-   * Callback called when `processRowUpdate` throws an error or rejects.
+   * Callback called when `processRowUpdate()` throws an error or rejects.
    * @param {any} error The error thrown.
    */
   onProcessRowUpdateError: _propTypes.default.func,

package/DataGrid/useDataGridComponent.d.ts

@@ -1,4 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
 import { DataGridProcessedProps } from "../models/props/DataGridProps.js";
 import { GridPrivateApiCommunity } from "../models/api/gridApiCommunity.js";
-export declare const useDataGridComponent: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps) => void;
+import { GridConfiguration } from "../models/configuration/gridConfiguration.js";
+export declare const useDataGridComponent: (apiRef: RefObject<GridPrivateApiCommunity>, props: DataGridProcessedProps, configuration: GridConfiguration) => void;

package/DataGrid/useDataGridComponent.js

@@ -41,7 +41,7 @@ var _useGridRowSpanning = require("../hooks/features/rows/useGridRowSpanning");
 var _useGridListView = require("../hooks/features/listView/useGridListView");
 var _useGridProps = require("../hooks/core/useGridProps");
 var _useGridDataSource = require("../hooks/features/dataSource/useGridDataSource");
-const useDataGridComponent = (apiRef, props) => {
+const useDataGridComponent = (apiRef, props, configuration) => {
   (0, _useGridInitialization.useGridInitialization)(apiRef, props);
 
   /**
@@ -76,7 +76,7 @@ const useDataGridComponent = (apiRef, props) => {
   (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);
-  (0, _useGridRows.useGridRows)(apiRef, props);
+  (0, _useGridRows.useGridRows)(apiRef, props, configuration);
   (0, _useGridRowSpanning.useGridRowSpanning)(apiRef, props);
   (0, _useGridParamsApi.useGridParamsApi)(apiRef, props);
   (0, _useGridColumnSpanning.useGridColumnSpanning)(apiRef);

package/colDef/gridDateColDef.js

@@ -11,6 +11,7 @@ var _gridDateOperators = require("./gridDateOperators");
 var _gridStringColDef = require("./gridStringColDef");
 var _GridEditDateCell = require("../components/cell/GridEditDateCell");
 var _gridPropsSelectors = require("../hooks/core/gridPropsSelectors");
+var _gridRowsUtils = require("../hooks/features/rows/gridRowsUtils");
 function throwIfNotDateObject({
   value,
   columnType,
@@ -26,6 +27,9 @@ const gridDateFormatter = (value, row, column, apiRef) => {
     return '';
   }
   const rowId = (0, _gridPropsSelectors.gridRowIdSelector)(apiRef, row);
+  if ((0, _gridRowsUtils.isAutogeneratedRow)(row) && !(value instanceof Date)) {
+    return value;
+  }
   throwIfNotDateObject({
     value,
     columnType: 'date',
@@ -40,6 +44,9 @@ const gridDateTimeFormatter = (value, row, column, apiRef) => {
     return '';
   }
   const rowId = (0, _gridPropsSelectors.gridRowIdSelector)(apiRef, row);
+  if ((0, _gridRowsUtils.isAutogeneratedRow)(row) && !(value instanceof Date)) {
+    return value;
+  }
   throwIfNotDateObject({
     value,
     columnType: 'dateTime',

package/components/GridColumnSortButton.js

@@ -17,7 +17,6 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _gridClasses = require("../constants/gridClasses");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _cssVariables = require("../constants/cssVariables");
-var _GridColumnUnsortedIcon = require("./GridColumnUnsortedIcon");
 var _assert = require("../utils/assert");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["direction", "index", "sortingOrder", "disabled", "className"];
@@ -48,7 +47,7 @@ function getIcon(icons, direction, className, sortingOrder) {
   } else if (direction === 'desc') {
     Icon = icons.columnSortedDescendingIcon;
   } else {
-    Icon = _GridColumnUnsortedIcon.GridColumnUnsortedIcon;
+    Icon = icons.columnUnsortedIcon;
     iconProps.sortingOrder = sortingOrder;
   }
   return Icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, (0, _extends2.default)({

package/components/GridColumnUnsortedIcon.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { GridBaseIconProps } from "../models/gridSlotsComponentsProps.js";
 import { GridSortDirection } from "../models/gridSortModel.js";
-interface GridColumnUnsortedIconProps extends GridBaseIconProps {
+export interface GridColumnUnsortedIconProps extends GridBaseIconProps {
   sortingOrder: GridSortDirection[];
 }
-export declare const GridColumnUnsortedIcon: React.NamedExoticComponent<GridColumnUnsortedIconProps>;
-export {};
+export declare const GridColumnUnsortedIcon: React.NamedExoticComponent<GridColumnUnsortedIconProps>;

package/components/GridRow.js

@@ -39,8 +39,11 @@ var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext
 var _createSelector = require("../utils/createSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["selected", "rowId", "row", "index", "style", "rowHeight", "className", "visibleColumns", "pinnedColumns", "offsetLeft", "columnsTotalWidth", "firstColumnIndex", "lastColumnIndex", "focusedColumnIndex", "isFirstVisible", "isLastVisible", "isNotVisible", "showBottomBorder", "scrollbarWidth", "gridHasFiller", "onClick", "onDoubleClick", "onMouseEnter", "onMouseLeave", "onMouseOut", "onMouseOver"];
-const isRowReorderingEnabledSelector = (0, _createSelector.createSelector)(_gridEditingSelectors.gridEditRowsStateSelector, (editRows, rowReordering) => {
-  if (!rowReordering) {
+const isRowReorderingEnabledSelector = (0, _createSelector.createSelector)(_gridEditingSelectors.gridEditRowsStateSelector, (editRows, {
+  rowReordering,
+  treeData
+}) => {
+  if (!rowReordering || treeData) {
     return false;
   }
   const isEditingRows = !(0, _isObjectEmpty.isObjectEmpty)(editRows);
@@ -82,10 +85,13 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const currentPage = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, rootProps);
   const sortModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortModelSelector);
-  const treeDepth = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowsSelector.gridRowMaximumTreeDepthSelector);
   const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
   const rowReordering = rootProps.rowReordering;
-  const isRowReorderingEnabled = (0, _useGridSelector.useGridSelector)(apiRef, isRowReorderingEnabledSelector, rowReordering);
+  const treeData = rootProps.treeData;
+  const isRowReorderingEnabled = (0, _useGridSelector.useGridSelector)(apiRef, isRowReorderingEnabledSelector, {
+    rowReordering,
+    treeData
+  });
   const isRowDragActive = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowReorderSelector.gridIsRowDragActiveSelector);
   const handleRef = (0, _useForkRef.default)(ref, refProp);
   const rowNode = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, rowId);
@@ -238,7 +244,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     // fixes https://github.com/mui/mui-x/issues/11126
     const isReorderCell = column.field === '__reorder__';
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
-    const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
+    const canReorderRow = isRowReorderingEnabled && !sortModel.length;
     const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow || isRowDragActive);
     const cellIsNotVisible = pinnedPosition === _constants.PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);

package/components/cell/GridActionsCell.js

@@ -149,13 +149,17 @@ function GridActionsCell(props) {
       setFocusedButtonIndex(newIndex);
     }
   };
+
+  // role="menu" requires at least one child element
+  const attributes = numberOfButtons > 0 ? {
+    role: 'menu',
+    onKeyDown: handleRootKeyDown
+  } : undefined;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
-    role: "menu",
     ref: rootRef,
     tabIndex: -1,
-    className: _gridClasses.gridClasses.actionsCell,
-    onKeyDown: handleRootKeyDown
-  }, other, {
+    className: _gridClasses.gridClasses.actionsCell
+  }, attributes, other, {
     children: [iconButtons.map((button, index) => /*#__PURE__*/React.cloneElement(button, {
       key: index,
       touchRippleRef: handleTouchRippleRef(index),

package/components/columnHeaders/GridColumnGroupHeader.js

@@ -12,6 +12,7 @@ var React = _interopRequireWildcard(require("react"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridColumnGroupsSelector = require("../../hooks/features/columnGrouping/gridColumnGroupsSelector");
@@ -96,7 +97,18 @@ function GridColumnGroupHeader(props) {
     if (hasFocus) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus?.focus();
+      if (!elementToFocus) {
+        return;
+      }
+      if ((0, _doesSupportPreventScroll.doesSupportPreventScroll)()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        const scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
+      }
     }
   }, [apiRef, hasFocus]);
   const publish = React.useCallback(eventName => event => {

package/components/columnHeaders/GridColumnHeaderItem.js

@@ -15,6 +15,7 @@ var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
+var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _ColumnHeaderMenuIcon = require("./ColumnHeaderMenuIcon");
 var _GridColumnHeaderMenu = require("../menu/columnMenu/GridColumnHeaderMenu");
@@ -174,9 +175,17 @@ function GridColumnHeaderItem(props) {
     if (hasFocus && !columnMenuState.open) {
       const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
       const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus?.focus();
-      if (apiRef.current.columnHeadersContainerRef?.current) {
-        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
+      if (!elementToFocus) {
+        return;
+      }
+      if ((0, _doesSupportPreventScroll.doesSupportPreventScroll)()) {
+        elementToFocus.focus({
+          preventScroll: true
+        });
+      } else {
+        const scrollPosition = apiRef.current.getScrollPosition();
+        elementToFocus.focus();
+        apiRef.current.scroll(scrollPosition);
       }
     }
   }, [apiRef, hasFocus]);

package/components/columnHeaders/GridGenericColumnHeaderItem.js

@@ -13,7 +13,6 @@ var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
 var _forwardRef = require("@mui/x-internals/forwardRef");
-var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _GridColumnHeaderTitle = require("./GridColumnHeaderTitle");
 var _GridColumnHeaderSeparator = require("./GridColumnHeaderSeparator");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
@@ -26,7 +25,6 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
       height,
       isResizing,
       sortDirection,
-      hasFocus,
       tabIndex,
       separatorSide,
       isDraggable,
@@ -44,7 +42,6 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
       style
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const headerCellRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(headerCellRef, ref);
@@ -52,17 +49,6 @@ const GridGenericColumnHeaderItem = exports.GridGenericColumnHeaderItem = (0, _f
   if (sortDirection != null) {
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
   }
-  React.useLayoutEffect(() => {
-    const columnMenuState = apiRef.current.state.columnMenu;
-    if (hasFocus && !columnMenuState.open) {
-      const focusableElement = headerCellRef.current.querySelector('[tabindex="0"]');
-      const elementToFocus = focusableElement || headerCellRef.current;
-      elementToFocus?.focus();
-      if (apiRef.current.columnHeadersContainerRef?.current) {
-        apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
-      }
-    }
-  }, [apiRef, hasFocus]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
     className: (0, _clsx.default)(classes.root, headerClassName),
     style: (0, _extends2.default)({}, style, {

package/components/columnsManagement/GridColumnsManagement.js

@@ -185,7 +185,8 @@ function GridColumnsManagement(props) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridColumnsManagementBody, {
         className: classes.root,
         ownerState: rootProps,
-        children: [currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseCheckbox, (0, _extends2.default)({
+        children: [currentColumns.map(column => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementRow, (0, _extends2.default)({
+          as: rootProps.slots.baseCheckbox,
           className: classes.row,
           disabled: column.hideable === false || pivotActive,
           checked: columnVisibilityModel[column.field] !== false,
@@ -315,4 +316,8 @@ const GridColumnsManagementEmptyText = (0, _styles.styled)('div', {
   padding: _cssVariables.vars.spacing(1, 0),
   alignSelf: 'center',
   font: _cssVariables.vars.typography.font.body
-});
+});
+const GridColumnsManagementRow = (0, _styles.styled)(_assert.NotRendered, {
+  name: 'MuiDataGrid',
+  slot: 'ColumnsManagementRow'
+})();

package/components/containers/GridRootStyles.js

@@ -547,6 +547,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         opacity: 0.5
       }
     },
+    // Hide the column separator when the column has border and it is not resizable
+    // In this case, this column separator may block interaction with the separator from the adjacent column that is resizable
+    [`& .${_gridClasses.gridClasses['columnHeader--withLeftBorder']} .${_gridClasses.gridClasses['columnSeparator--sideLeft']}:not(.${_gridClasses.gridClasses['columnSeparator--resizable']}), & .${_gridClasses.gridClasses['columnHeader--withRightBorder']} .${_gridClasses.gridClasses['columnSeparator--sideRight']}:not(.${_gridClasses.gridClasses['columnSeparator--resizable']})`]: {
+      display: 'none'
+    },
     [`& .${_gridClasses.gridClasses['columnSeparator--sideLeft']}`]: {
       left: columnSeparatorOffset
     },
@@ -796,7 +801,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
       display: 'none'
     },
-    [`& .${_gridClasses.gridClasses['columnHeader--dragging']}, & .${_gridClasses.gridClasses['row--dragging']}`]: {
+    [`& .${_gridClasses.gridClasses['columnHeader--dragging']}`]: {
       background: _cssVariables.vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
@@ -806,8 +811,11 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       background: _cssVariables.vars.colors.background.overlay,
       padding: '0 12px',
       borderRadius: 'var(--unstable_DataGrid-radius)',
-      opacity: _cssVariables.vars.colors.interactive.disabledOpacity,
+      border: '1px solid var(--DataGrid-rowBorderColor)',
+      color: _cssVariables.vars.colors.foreground.base,
+      transform: 'translateZ(0)',
       [`& .${_gridClasses.gridClasses.rowReorderCellPlaceholder}`]: {
+        padding: '0 6px',
         display: 'flex'
       }
     },
@@ -883,6 +891,7 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['row--dropAbove']}`]: {
       position: 'relative',
       '&::before': {
+        pointerEvents: 'none',
         content: '""',
         position: 'absolute',
         top: 0,
@@ -894,7 +903,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses['row--dropBelow']}`]: {
       position: 'relative',
-      '&::before': {
+      '&::after': {
+        zIndex: 100,
+        pointerEvents: 'none',
         content: '""',
         position: 'absolute',
         bottom: '-2px',
@@ -904,14 +915,16 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
         backgroundColor: _cssVariables.vars.colors.interactive.selected
       },
       [`&.${_gridClasses.gridClasses['row--lastVisible']}`]: {
-        '&::before': {
+        '&::after': {
           bottom: 'calc(var(--DataGrid-hasScrollY) * 0px + (1 - var(--DataGrid-hasScrollY)) * -2px)'
         }
       }
     },
     [`& .${_gridClasses.gridClasses['row--beingDragged']}`]: {
-      backgroundColor: _cssVariables.vars.colors.background.overlay,
-      color: _cssVariables.vars.colors.foreground.disabled
+      color: _cssVariables.vars.colors.foreground.disabled,
+      '&:hover': {
+        backgroundColor: 'transparent'
+      }
     }
   };
   return gridStyle;

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -32,8 +32,9 @@ function GridColumnMenuSortItem(props) {
   const onSortMenuItemClick = React.useCallback(event => {
     onClick(event);
     const direction = event.currentTarget.getAttribute('data-value') || null;
-    apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction);
-  }, [apiRef, colDef, onClick, sortDirection]);
+    const allowMultipleSorting = rootProps.multipleColumnsSortingMode === 'always';
+    apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction, allowMultipleSorting);
+  }, [apiRef, colDef, onClick, sortDirection, rootProps.multipleColumnsSortingMode]);
   if (rootProps.disableColumnSorting || !colDef || !colDef.sortable || !sortingOrder.some(item => !!item)) {
     return null;
   }

package/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.d.ts

@@ -5,7 +5,7 @@ import type { ValueOptions } from "../../../models/colDef/gridColDef.js";
 export type GridFilterInputMultipleSingleSelectProps = GridFilterInputValueProps<Omit<AutocompleteProps<ValueOptions, true, false, true>, 'options'>> & {
   type?: 'singleSelect';
 };
-declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element;
+declare function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingleSelectProps): React.JSX.Element | null;
 declare namespace GridFilterInputMultipleSingleSelect {
   var propTypes: any;
 }