@mui/x-data-grid 8.9.2 → 8.10.1

package/CHANGELOG.md

@@ -5,6 +5,217 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.10.1
+
+_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 ✨:
+
+- 📊 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
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.1`
+
+- [DataGrid] Fix scroll jumping (#19156) @romgrk
+- [DataGrid] Fix scroll restoration (#19182) @romgrk
+- [DataGrid] Fix "no row with id" error (#19193) @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")
+
+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")
+
+Same changes as in `@mui/x-data-grid-pro@8.10.1`.
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.0`
+
+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")
+
+Same changes as in `@mui/x-date-pickers@8.10.0`.
+
+### Charts
+
+- Axes can now be grouped by category when using `band` and `point` scales
+
+  <img width="643" height="455" alt="Bar chart with y-axis grouped per categories" src="https://github.com/user-attachments/assets/59044afe-bcc5-4152-8bf1-225db0635025" />
+
+#### `@mui/x-charts@8.10.1`
+
+- [charts] Allow y-axis to be grouped (#19081) @JCQuintas
+- [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
+
+#### `@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`.
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.1`
+
+Internal changes.
+
+#### `@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`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.1`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add all planned charts on the overview page (#19077) @prakhargupta1
+- [docs] Add future charts components link in the sidebar (#19140) @prakhargupta1
+- [docs] Fix Heatmap docs duplicate text (#19138) @JCQuintas
+- [docs] Remove preview from Toolbar & Funnel (#19131) @mnajdova
+- [docs] Reproduce npm sparkline (#19089) @alexfauquette
+
+### Core
+
+- [core] Fix licensing model name (#19025) @oliviertassinari
+- [core] Fix usage of `:catalog` for `@babel/runtime` (#19028) @oliviertassinari
+- [core] Refactor virtualizer API (#18995) @romgrk
+
+### Miscellaneous
+
+- [code-infra] Remove namespaces (#19071) @Janpot
+- [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
+- [internal] Edit, keep `lockFileMaintenance` simple @oliviertassinari
+- [internal] Fix writing style action name @oliviertassinari
+- [internal] Make it clear that `lockFileMaintenance` is enabled @oliviertassinari
+- [support-infra] Remove default issue label (#19104) @oliviertassinari
+
+## 8.10.0
+
+_Aug 8, 2025_
+
+We'd like to extend a big thank you to the 17 contributors who made this release possible. Here are some highlights ✨:
+
+- 📊 [`FunnelChart`](https://mui.com/x/react-charts/funnel/) marked as stable
+- 📈 [Zoom slider](https://mui.com/x/react-charts/zoom-and-pan/#zoom-slider) and [Preview](https://mui.com/x/react-charts/zoom-and-pan/#preview) marked as stable
+- 📈 Supporting [label groups](https://mui.com/x/react-charts/axis/#grouped-axes) in band and point axis
+- 🌎 Improve Norwegian Nynorsk (nn-NO) locale on the Data Grid
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@AnderzL7, @aqeelat, @dwrth, @noobyogi0010, @nusr, @sai6855
+
+The following are all team members who have contributed to this release:
+@arminmeh, @bernardobelchior, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @mapache-salvaje, @MBilalShafi, @oliviertassinari, @rita-codes, @romgrk
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.10.0`
+
+- [DataGrid] Move spread operator in `BaseSelect` to allow `variant` change (#19026) @dwrth
+- [DataGrid] Use `use-sync-external-store` shim (#19063) @romgrk
+- [DataGrid] Allow skipping cache in `dataSource.fetchRows()` API method (#18904) @MBilalShafi
+- [DataGrid] Do not call `preProcessEditCellProps()` if cell is not editable based on `isCellEditable()` (#18405) @nusr
+- [DataGrid] Fix `renderCountry` throwing an error when used in tree data (#19068) @cherniavskii
+- [DataGrid] Fix performance issue for root level "select all" (#19015) @MBilalShafi
+- [DataGrid] Fix pagination `slotProps` being ignored by the grid (#19095) @romgrk
+- [l10n] Improve Norwegian Nynorsk (nn-NO) locale (#19076) @AnderzL7
+
+#### `@mui/x-data-grid-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-data-grid@8.10.0`, plus:
+
+- [DataGridPro] Fix row reorder not working with column reorder disabled (#19016) @MBilalShafi
+- [DataGridPro] Fix header filters cache sharing issue (#19090) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.10.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.10.0`, plus:
+
+- [DataGridPremium] Allow additional derived columns customization via `valueFormatter` (#18982) @arminmeh
+- [DataGridPremium] Fix complex `singleSelect` columns not working in pivot model (#18971) @cherniavskii
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.10.0`
+
+- [pickers] `MuiPickersLayout-toolbar` is overlapping the Calendar in RTL `MobileDatePicker` variant (#18981) @rita-codes
+
+#### `@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`.
+
+### Charts
+
+#### `@mui/x-charts@8.10.0`
+
+- [charts] Add `groups` to `band` and `point` axis config (#18766) @JCQuintas
+- [charts] Animation example using `motion` library (#18993) @JCQuintas
+- [charts] Deprecate `Unstable_` radar exports (#19079) @JCQuintas
+- [charts] Improve grouped axis logic (#19069) @JCQuintas
+- [charts] Fix type assertion in axis highlight components (#19060) @sai6855
+- [charts] Remove unnecessary type assertion in tooltip `valueFormatter` in heatmap (#19047) @sai6855
+
+#### `@mui/x-charts-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-charts@8.10.0`, plus:
+
+- [charts-pro] Fix `slotProps.tooltip.trigger` not respected in `ScatterChartPro` and `FunnelChart` (#18902) @bernardobelchior
+- [charts-pro] Fix zoom filtering adjusting axis too soon (#18992) @bernardobelchior
+- [charts-pro] Mark `FunnelChart` as stable (#19048) @JCQuintas
+- [charts-pro] Mark zoom slider and preview as stable (#19049) @JCQuintas
+- [charts-pro] Refactor `createAxisFilterMapper` (#18998) @bernardobelchior
+
+### Tree View
+
+#### `@mui/x-tree-view@8.10.0`
+
+Internal changes.
+
+#### `@mui/x-tree-view-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-tree-view@8.10.0`.
+
+### Codemod
+
+#### `@mui/x-codemod@8.10.0`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add CSS bundler breaking change to migration guide (#17436) @romgrk
+- [docs] `RichTreeViewPro` demo for dragging via custom drag-handle is not working properly (#19008) @rita-codes
+- [docs] Fix broken link to D3 in Charts (#19020) @oliviertassinari
+- [docs] Revise the Charts Animation doc (#18990) @mapache-salvaje
+- [docs] Fix incorrect code in line chart preview (#19023) @noobyogi0010
+- [docs] Improve bundling instructions for the Data Grid (#19065) @romgrk
+- [docs] Reduce image size in the inventory grid demo (#19004) @arminmeh
+
+### Core
+
+- [core] Fix ESLint reference name @oliviertassinari
+
+### Miscellaneous
+
+- [infra] Remove bundle size tracking for subpaths (#19072) @Janpot
+- [infra] Accept `PORT` env on `docs:dev` script (#19014) @JCQuintas
+- [infra] Skip codesandbox iframe demos in regressions tests (#18970) @cherniavskii
+- [infra] Remove package.json `module` field (#18961) @Janpot
+- [internal] Remove peer dependency on `@mui/system` (#19062) @aqeelat
+
 ## 8.9.2
 
 _Jul 31, 2025_
@@ -418,8 +629,8 @@ Same changes as in `@mui/x-tree-view@8.7.0`, plus:
 
 - [code-infra] Bump code-infra version and fix breaking changes (#18653) @brijeshb42
 - [code-infra] Ensure `material-ui/disallow-react-api-in-server-components` ESLint rule is applied (#18570) @LukasTy
-- [code-infra] Migrate to flat eslint config (#18562) @brijeshb42
-- [code-infra] Refactor eslint config (#18643) @LukasTy
+- [code-infra] Migrate to flat ESLint config (#18562) @brijeshb42
+- [code-infra] Refactor ESLint config (#18643) @LukasTy
 - [infra] Add renovatebot rule for latest infra packages (#18609) @Janpot
 - [infra] Move pushArgos script to code-infra (#18667) @Janpot
 - [infra] Updates release script to fetch latest major version from upstream (#18552) @michelengelen
@@ -1333,7 +1544,7 @@ Same changes as in `@mui/x-tree-view@8.2.0`.
 - [core] Fix all Vale errors @oliviertassinari
 - [core] Move `loadStyleSheets` to internals and use it in data grid and charts (#17548) @bernardobelchior
 - [core] Remove empty version (#17582) @oliviertassinari
-- [core] Remove eslint from codemod spec files (#17443) @alexfauquette
+- [core] Remove ESLint from codemod spec files (#17443) @alexfauquette
 - [core] Remove unnecessary versions (#17597) @oliviertassinari
 - [code-infra] Allow postinstall scripts for packages requesting it (#17635) @LukasTy
 - [code-infra] Data Grid `vitest` changes (#17619) @JCQuintas
@@ -6827,7 +7038,7 @@ Same changes as in `@mui/x-date-pickers@7.8.0`.
 
 ### Core
 
-- [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas
+- [core] Add ESLint rule to restrict import from `../internals` root (#13633) @JCQuintas
 - [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot
 - [license] Allow usage of Charts and Tree View Pro package for old premium licenses (#13619) @flaviendelangle
 
@@ -6965,7 +7176,7 @@ Same changes as in `@mui/x-date-pickers@7.7.0`.
 
 - [charts] Add watermark on the pro `ResponsiveChartContainer` (#13398) @alexfauquette
 - [charts] Allow to specify y-axis configuration (#13438) @alexfauquette
-- [charts] Fix eslint for react compiler (#13444) @alexfauquette
+- [charts] Fix ESLint for react compiler (#13444) @alexfauquette
 - [charts] Improve themeAugmentation typing (#13433) @noraleonte
 - [charts] Move the `ZAxisContextProvider` by default in the `ChartContainer` (#13465) @alexfauquette
 - [charts] Use plugins to define series extremum and colors (#13397) @alexfauquette
@@ -7512,7 +7723,7 @@ Same changes as in `@mui/x-date-pickers@7.3.1`.
 - [core] Use `describeTreeView` for focus tests (#12698) @flaviendelangle
 - [core] Use `describeTreeView` for type-ahead tests (#12811) @flaviendelangle
 - [code-infra] Change package manager to `pnpm` (#11875) @LukasTy
-- [code-infra] Closer sync with eslint config of codebase (#12864) @oliviertassinari
+- [code-infra] Closer sync with ESLint config of codebase (#12864) @oliviertassinari
 - [support-infra] Add release announcement to GitHub workflows (#11867) (#12843) @michelengelen
 
 ## 7.3.0

package/components/GridFooter.js

@@ -32,7 +32,7 @@ const GridFooter = exports.GridFooter = (0, _forwardRef.forwardRef)(function Gri
     rowCount: totalTopLevelRowCount,
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
-  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pagination, {});
+  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.pagination, (0, _extends2.default)({}, rootProps.slotProps?.pagination));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridFooterContainer.GridFooterContainer, (0, _extends2.default)({}, props, {
     ref: ref,
     children: [selectedRowCountElement, rowCountElement, paginationElement]

package/components/GridPagination.js

@@ -1,11 +1,12 @@
 "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.GridPagination = GridPagination;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -67,7 +68,7 @@ function GridPagination() {
     }
   }
   const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
     as: rootProps.slots.basePagination,
     count: rowCount,
     page: computedPage,
@@ -76,7 +77,7 @@ function GridPagination() {
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange,
     disabled: disabled
-  });
+  }, rootProps.slotProps?.basePagination));
 }
 process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
   // ----------------------------- Warning --------------------------------

package/components/GridRow.js

@@ -31,6 +31,7 @@ var _constants = require("../internals/constants");
 var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
+var _gridRowReorderSelector = require("../hooks/features/rowReorder/gridRowReorderSelector");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
@@ -85,6 +86,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
   const rowReordering = rootProps.rowReordering;
   const isRowReorderingEnabled = (0, _useGridSelector.useGridSelector)(apiRef, isRowReorderingEnabledSelector, rowReordering);
+  const isRowDragActive = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowReorderSelector.gridIsRowDragActiveSelector);
   const handleRef = (0, _useForkRef.default)(ref, refProp);
   const rowNode = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, rowId);
   const editing = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, {
@@ -198,6 +200,11 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     }
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
+
+  // HACK: Sometimes, the rowNode has already been removed from the state but the row is still rendered.
+  if (!rowNode) {
+    return null;
+  }
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
@@ -209,11 +216,6 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  // XXX: fix this properly
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -237,7 +239,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     const isReorderCell = column.field === '__reorder__';
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
     const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
-    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
+    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow || isRowDragActive);
     const cellIsNotVisible = pinnedPosition === _constants.PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
     const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);

package/components/virtualization/GridVirtualScroller.js

@@ -90,7 +90,6 @@ function GridVirtualScroller(props) {
     getContainerProps,
     getScrollerProps,
     getContentProps,
-    getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
@@ -119,11 +118,12 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })]
       }), getOverlay(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridVirtualScrollerContent.GridVirtualScrollerContent, (0, _extends2.default)({}, getContentProps(), {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridVirtualScrollerRenderZone.GridVirtualScrollerRenderZone, {
+          role: "rowgroup",
           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/esm/DataGrid/index.js

@@ -1,2 +1,2 @@
-import "../index.css";
+import '../index.css';
 export * from "./DataGrid.js";

package/esm/components/GridFooter.js

@@ -24,7 +24,7 @@ const GridFooter = forwardRef(function GridFooter(props, ref) {
     rowCount: totalTopLevelRowCount,
     visibleRowCount: visibleTopLevelRowCount
   })) : null;
-  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, {});
+  const paginationElement = rootProps.pagination && !rootProps.hideFooterPagination && rootProps.slots.pagination && /*#__PURE__*/_jsx(rootProps.slots.pagination, _extends({}, rootProps.slotProps?.pagination));
   return /*#__PURE__*/_jsxs(GridFooterContainer, _extends({}, props, {
     ref: ref,
     children: [selectedRowCountElement, rowCountElement, paginationElement]

package/esm/components/GridPagination.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
@@ -59,7 +60,7 @@ function GridPagination() {
     }
   }
   const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
-  return /*#__PURE__*/_jsx(GridPaginationRoot, {
+  return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     as: rootProps.slots.basePagination,
     count: rowCount,
     page: computedPage,
@@ -68,7 +69,7 @@ function GridPagination() {
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange,
     disabled: disabled
-  });
+  }, rootProps.slotProps?.basePagination));
 }
 process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
   // ----------------------------- Warning --------------------------------

package/esm/components/GridRow.js

@@ -25,6 +25,7 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD, PinnedColumnPosition } from "../interna
 import { gridSortModelSelector } from "../hooks/features/sorting/gridSortingSelector.js";
 import { gridRowMaximumTreeDepthSelector, 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 { GridScrollbarFillerCell as ScrollbarFiller } from "./GridScrollbarFillerCell.js";
 import { getPinnedCellOffset } from "../internals/utils/getPinnedCellOffset.js";
 import { useGridConfiguration } from "../hooks/utils/useGridConfiguration.js";
@@ -78,6 +79,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
   const columnPositions = useGridSelector(apiRef, gridColumnPositionsSelector);
   const rowReordering = rootProps.rowReordering;
   const isRowReorderingEnabled = useGridSelector(apiRef, isRowReorderingEnabledSelector, rowReordering);
+  const isRowDragActive = useGridSelector(apiRef, gridIsRowDragActiveSelector);
   const handleRef = useForkRef(ref, refProp);
   const rowNode = gridRowNodeSelector(apiRef, rowId);
   const editing = useGridSelector(apiRef, gridRowIsEditingSelector, {
@@ -191,6 +193,11 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     }
     return rowStyle;
   }, [isNotVisible, rowHeight, styleProp, heightEntry, rootProps.rowSpacingType]);
+
+  // HACK: Sometimes, the rowNode has already been removed from the state but the row is still rendered.
+  if (!rowNode) {
+    return null;
+  }
   const rowClassNames = apiRef.current.unstable_applyPipeProcessors('rowClassName', [], rowId);
   const ariaAttributes = getRowAriaAttributes(rowNode, index);
   if (typeof rootProps.getRowClassName === 'function') {
@@ -202,11 +209,6 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
-
-  // XXX: fix this properly
-  if (!rowNode) {
-    return null;
-  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -230,7 +232,7 @@ const GridRow = forwardRef(function GridRow(props, refProp) {
     const isReorderCell = column.field === '__reorder__';
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
     const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
-    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
+    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow || isRowDragActive);
     const cellIsNotVisible = pinnedPosition === PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = shouldCellShowLeftBorder(pinnedPosition, indexInSection);
     const showRightBorder = shouldCellShowRightBorder(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);

package/esm/components/virtualization/GridVirtualScroller.js

@@ -82,7 +82,6 @@ function GridVirtualScroller(props) {
     getContainerProps,
     getScrollerProps,
     getContentProps,
-    getRenderZoneProps,
     getScrollbarVerticalProps,
     getScrollbarHorizontalProps,
     getRows,
@@ -111,11 +110,12 @@ function GridVirtualScroller(props) {
           virtualScroller: virtualScroller
         })]
       }), getOverlay(), /*#__PURE__*/_jsx(Content, _extends({}, getContentProps(), {
-        children: /*#__PURE__*/_jsxs(RenderZone, _extends({}, getRenderZoneProps(), {
+        children: /*#__PURE__*/_jsxs(RenderZone, {
+          role: "rowgroup",
           children: [rows, /*#__PURE__*/_jsx(rootProps.slots.detailPanels, {
             virtualScroller: virtualScroller
           })]
-        }))
+        })
       })), hasBottomFiller && /*#__PURE__*/_jsx(SpaceFiller, {
         rowsLength: rows.length
       }), /*#__PURE__*/_jsx(rootProps.slots.bottomContainer, {