@mui/x-data-grid-pro 6.2.0 → 6.3.0

package/CHANGELOG.md

@@ -3,9 +3,126 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.3.0
+
+_Apr 28, 2023_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 New [time-picking UI](https://mui.com/x/react-date-pickers/digital-clock/) designed for desktops (#7958) @LukasTy
+
+  <img src="https://user-images.githubusercontent.com/4941090/235072007-de39a397-e4a4-4c98-8e10-5ee4ad440108.gif" width="494" />
+
+- ✨ Picker fields [now always include a leading zero](https://mui.com/x/react-date-pickers/adapters-locale/#respect-leading-zeros-in-fields) on digit sections (#8527) @flaviendelangle
+- 🌍 Improve Chinese (zh-CN), French (fr-FR), and Turkish (tr-TR) locales
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.3.0` / `@mui/x-data-grid-pro@v6.3.0` / `@mui/x-data-grid-premium@v6.3.0`
+
+#### Changes
+
+- [DataGrid] Add overlay classes to `gridClasses` (#8686) @lindapaiste
+- [DataGrid] Avoid passing `api` prop to div (#8679) @someden
+- [DataGrid] Fix 'ResizeObserver loop limit exceeded' error (#8744) @m4theushw
+- [DataGrid] Add Joy UI slots (button and switch) (#8699) @siriwatknp
+- [DataGrid] Fix aggregation label alignment (#8694) @joserodolfofreitas
+- [DataGridPremium] Fix infinite loop when updating grouped rows (#8693) @cherniavskii
+- [DataGridPro] Fix error after updating `columns` and `columnGroupingModel` at once (#8730) @cherniavskii
+- [l10n] Improve Chinese (zh-CN) locale (#8753) @SakumyZ
+- [l10n] Improve French (fr-FR) locale (#8704) @Jul13nT
+- [l10n] Improve Turkish (tr-TR) locale (#8783) @cccaaannn
+
+### `@mui/x-date-pickers@v6.3.0` / `@mui/x-date-pickers-pro@v6.3.0`
+
+#### Changes
+
+- [fields] Always add leading zeroes on digit sections (#8527) @flaviendelangle
+- [fields] Pass the `readOnly` prop to `InputProps` instead of `inputProps` (#8659) @flaviendelangle
+- [pickers] Add missing export for `caES` locale (#8782) @flaviendelangle
+- [pickers] Add new `DigitalClock` desktop time picking experience (#7958) @LukasTy
+- [pickers] Do not use `instanceOf DateTime` in `AdapterLuxon` (#8734) @flaviendelangle
+- [pickers] Fix date calendar `selected` & `disabled` day style (#8773) @LukasTy
+- [pickers] Migrate `AdapterDateFns` to our repository (#8736) @flaviendelangle
+- [pickers] Migrate `AdapterLuxon` to our repository (#8600) @flaviendelangle
+- [pickers] Migrate `AdapterMomentHijri` to our repository (#8776) @flaviendelangle
+- [pickers] Migrate `AdapterMomentJalaali` and `AdapterDateFnsJalali` to our repository (#8741) @flaviendelangle
+- [pickers] Migrate `AdapterMoment` to our repository (#8700) @flaviendelangle
+- [pickers] Refactor the validation files (#8622) @flaviendelangle
+- [pickers] Use `en dash` instead of `em dash` in multi input range fields (#8738) @flaviendelangle
+- [l10n] Improve Chinese (zh-CN) locale (#8753) @SakumyZ
+- [l10n] Improve Turkish (tr-TR) locale (#8783) @cccaaannn
+
+### Docs
+
+- [docs] Add icons for charts menu (#8752) @alexfauquette
+- [docs] Document the supported formats (#8746) @flaviendelangle
+- [docs] Fix Hijri demo (#8698) @alexfauquette
+- [docs] Fix `x-codemod` package version in changelog (#8690) @MBilalShafi
+- [docs] Fix columns special properties code example (#8414) @mikkelhl
+- [docs] Fix error in `minDateTime` `validation` page section (#8777) @LukasTy
+- [docs] Update custom field pickers using theme scoping (#8609) @siriwatknp
+- [docs] Use community version of data grid for column grouping demo (#7346) @ASchwad
+- [docs] Use new `slots` / `slotProps` props in the pickers migration guide (#8341) @flaviendelangle
+
+### Core
+
+- [core] Cleanup picker tests (#8652) @flaviendelangle
+- [core] Use `adapter.lib` instead of `adapterName` in `describeAdapters` (#8779) @flaviendelangle
+- [charts] Adapt line and scatter plot to the "band" scale type (#8701) @alexfauquette
+- [charts] Link the Gantt Charts issue in the docs (#8739) @flaviendelangle
+
+## 6.2.1
+
+_Apr 20, 2023_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Add virtualization to row detail panels (#7969) @yaredtsy
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v6.2.1` / `@mui/x-data-grid-pro@v6.2.1` / `@mui/x-data-grid-premium@v6.2.1`
+
+#### Changes
+
+- [DataGrid] Add `getTogglableColumns` to `Hide all` and `Show all` actions (#8496) @MBilalShafi
+- [DataGrid] Add Grid + Joy UI experiment page (#8067) @cherniavskii
+- [DataGrid] Fix print style when rendering inside Shadow DOM (#8656) @Bwatermelon
+- [DataGrid] Replace `GridAutoSizer` with `ResizeObserver` (#8091) @m4theushw
+- [DataGrid] Use stable ID for the placeholder filter item (#8603) @m4theushw
+- [DataGridPro] Virtualize row detail panels (#7969) @yaredtsy
+
+### `@mui/x-date-pickers@v6.2.1` / `@mui/x-date-pickers-pro@v6.2.1`
+
+#### Changes
+
+- [pickers] Do not include the time in date components when going to today (#8657) @flaviendelangle
+- [pickers] Sync internal state with controlled value (#8674) @alexfauquette
+
+### `@mui/x-codemod@v6.2.1`
+
+#### Changes
+
+- [codemod] Avoid filter failures on object prototype properties (#8647) @LukasTy
+
+### Docs
+
+- [docs] Add no-op service worker to fix stale cache issue (#8598) @cherniavskii
+- [docs] Clarify what `AdapterDayjs` is in the Getting Started page (#8219) @flaviendelangle
+- [docs] Fix typo on picker page description (#8611) @maxolasersquad
+- [docs] Improve section title in Getting Started page (#8648) @flaviendelangle
+- [docs] Inform about input format modification (#8458) @alexfauquette
+
+### Core
+
+- [core] Fix release date (#8618) @flaviendelangle
+- [core] Upgrade monorepo (#8668) @MBilalShafi
+- [charts] Support Tooltip (#8356) @alexfauquette
+
 ## 6.2.0
 
-_Apr 13, 2023_
+_Apr 14, 2023_
 
 We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
 

package/components/DataGridProVirtualScroller.js

@@ -229,40 +229,41 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  const getDetailPanels = () => {
-    const panels = [];
-    if (rootProps.getDetailPanelContent == null) {
-      return panels;
-    }
+
+  // Create a lookup for faster check if the row is expanded
+  const expandedRowIdsLookup = React.useMemo(() => {
+    const lookup = {};
+    expandedRowIds.forEach(id => {
+      lookup[id] = true;
+    });
+    return lookup;
+  }, [expandedRowIds]);
+  const getDetailPanel = rowId => {
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
-    const uniqueExpandedRowIds = Array.from(new Set([...expandedRowIds]).values());
-    for (let i = 0; i < uniqueExpandedRowIds.length; i += 1) {
-      const id = uniqueExpandedRowIds[i];
-      const content = detailPanelsContent[id];
+    const content = detailPanelsContent[rowId];
 
-      // Check if the id exists in the current page
-      const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
-      const exists = rowIndex !== undefined;
-      if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(id);
-        const height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
-        const sizes = apiRef.current.unstable_getRowInternalSizes(id);
-        const spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
-        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
-        panels.push( /*#__PURE__*/_jsx(GridDetailPanel, {
-          rowId: id,
-          style: {
-            top
-          },
-          height: height,
-          className: classes.detailPanel,
-          children: content
-        }, id));
-      }
+    // Check if the id exists in the current page
+    const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
+    const exists = rowIndex !== undefined;
+    if ( /*#__PURE__*/React.isValidElement(content) && exists) {
+      const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(rowId);
+      const height = hasAutoHeight ? 'auto' : detailPanelsHeights[rowId];
+      const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      const spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
+      const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(rowId) + spacingTop;
+      return /*#__PURE__*/_jsx(GridDetailPanel, {
+        rowId: rowId,
+        style: {
+          top
+        },
+        height: height,
+        className: classes.detailPanel,
+        children: content
+      }, rowId);
     }
-    return panels;
+    return null;
   };
-  const detailPanels = getDetailPanels();
+  const detailPanels = [];
   const topPinnedRows = getRows({
     renderContext,
     rows: topPinnedRowsData,
@@ -272,7 +273,19 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const mainRows = getRows({
     renderContext,
     rowIndexOffset: topPinnedRowsData.length,
-    position: 'center'
+    position: 'center',
+    onRowRender: rowId => {
+      if (rootProps.getDetailPanelContent == null) {
+        return;
+      }
+      if (!expandedRowIdsLookup[rowId]) {
+        return;
+      }
+      const detailPanel = getDetailPanel(rowId);
+      if (detailPanel) {
+        detailPanels.push(detailPanel);
+      }
+    }
   });
   const bottomPinnedRows = getRows({
     renderContext,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.2.0
+ * @mui/x-data-grid-pro v6.3.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/components/DataGridProVirtualScroller.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
@@ -237,40 +236,41 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  var getDetailPanels = function getDetailPanels() {
-    var panels = [];
-    if (rootProps.getDetailPanelContent == null) {
-      return panels;
-    }
+
+  // Create a lookup for faster check if the row is expanded
+  var expandedRowIdsLookup = React.useMemo(function () {
+    var lookup = {};
+    expandedRowIds.forEach(function (id) {
+      lookup[id] = true;
+    });
+    return lookup;
+  }, [expandedRowIds]);
+  var getDetailPanel = function getDetailPanel(rowId) {
     var rowsMeta = gridRowsMetaSelector(apiRef.current.state);
-    var uniqueExpandedRowIds = Array.from(new Set(_toConsumableArray(expandedRowIds)).values());
-    for (var i = 0; i < uniqueExpandedRowIds.length; i += 1) {
-      var id = uniqueExpandedRowIds[i];
-      var content = detailPanelsContent[id];
+    var content = detailPanelsContent[rowId];
 
-      // Check if the id exists in the current page
-      var rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
-      var exists = rowIndex !== undefined;
-      if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        var hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(id);
-        var height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
-        var sizes = apiRef.current.unstable_getRowInternalSizes(id);
-        var spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
-        var top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
-        panels.push( /*#__PURE__*/_jsx(GridDetailPanel, {
-          rowId: id,
-          style: {
-            top: top
-          },
-          height: height,
-          className: classes.detailPanel,
-          children: content
-        }, id));
-      }
+    // Check if the id exists in the current page
+    var rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
+    var exists = rowIndex !== undefined;
+    if ( /*#__PURE__*/React.isValidElement(content) && exists) {
+      var hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(rowId);
+      var height = hasAutoHeight ? 'auto' : detailPanelsHeights[rowId];
+      var sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      var spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
+      var top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(rowId) + spacingTop;
+      return /*#__PURE__*/_jsx(GridDetailPanel, {
+        rowId: rowId,
+        style: {
+          top: top
+        },
+        height: height,
+        className: classes.detailPanel,
+        children: content
+      }, rowId);
     }
-    return panels;
+    return null;
   };
-  var detailPanels = getDetailPanels();
+  var detailPanels = [];
   var topPinnedRows = getRows({
     renderContext: renderContext,
     rows: topPinnedRowsData,
@@ -280,7 +280,19 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   var mainRows = getRows({
     renderContext: renderContext,
     rowIndexOffset: topPinnedRowsData.length,
-    position: 'center'
+    position: 'center',
+    onRowRender: function onRowRender(rowId) {
+      if (rootProps.getDetailPanelContent == null) {
+        return;
+      }
+      if (!expandedRowIdsLookup[rowId]) {
+        return;
+      }
+      var detailPanel = getDetailPanel(rowId);
+      if (detailPanel) {
+        detailPanels.push(detailPanel);
+      }
+    }
   });
   var bottomPinnedRows = getRows({
     renderContext: renderContext,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.2.0
+ * @mui/x-data-grid-pro v6.3.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export var getReleaseInfo = function getReleaseInfo() {
-  var releaseInfo = "MTY4MTQyMzIwMDAwMA==";
+  var releaseInfo = "MTY4MjYyOTIwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/legacy/utils/tree/removeDataRowFromTree.js

@@ -23,7 +23,7 @@ var removeNodeAndCleanParent = function removeNodeAndCleanParent(_ref) {
   if (shouldDeleteGroup) {
     if (parentNode.isAutoGenerated) {
       removeNodeAndCleanParent({
-        node: node,
+        node: parentNode,
         tree: tree,
         treeDepths: treeDepths
       });

package/modern/components/DataGridProVirtualScroller.js

@@ -226,40 +226,41 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  const getDetailPanels = () => {
-    const panels = [];
-    if (rootProps.getDetailPanelContent == null) {
-      return panels;
-    }
+
+  // Create a lookup for faster check if the row is expanded
+  const expandedRowIdsLookup = React.useMemo(() => {
+    const lookup = {};
+    expandedRowIds.forEach(id => {
+      lookup[id] = true;
+    });
+    return lookup;
+  }, [expandedRowIds]);
+  const getDetailPanel = rowId => {
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
-    const uniqueExpandedRowIds = Array.from(new Set([...expandedRowIds]).values());
-    for (let i = 0; i < uniqueExpandedRowIds.length; i += 1) {
-      const id = uniqueExpandedRowIds[i];
-      const content = detailPanelsContent[id];
+    const content = detailPanelsContent[rowId];
 
-      // Check if the id exists in the current page
-      const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
-      const exists = rowIndex !== undefined;
-      if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(id);
-        const height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
-        const sizes = apiRef.current.unstable_getRowInternalSizes(id);
-        const spacingTop = sizes?.spacingTop || 0;
-        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
-        panels.push( /*#__PURE__*/_jsx(GridDetailPanel, {
-          rowId: id,
-          style: {
-            top
-          },
-          height: height,
-          className: classes.detailPanel,
-          children: content
-        }, id));
-      }
+    // Check if the id exists in the current page
+    const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
+    const exists = rowIndex !== undefined;
+    if ( /*#__PURE__*/React.isValidElement(content) && exists) {
+      const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(rowId);
+      const height = hasAutoHeight ? 'auto' : detailPanelsHeights[rowId];
+      const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      const spacingTop = sizes?.spacingTop || 0;
+      const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(rowId) + spacingTop;
+      return /*#__PURE__*/_jsx(GridDetailPanel, {
+        rowId: rowId,
+        style: {
+          top
+        },
+        height: height,
+        className: classes.detailPanel,
+        children: content
+      }, rowId);
     }
-    return panels;
+    return null;
   };
-  const detailPanels = getDetailPanels();
+  const detailPanels = [];
   const topPinnedRows = getRows({
     renderContext,
     rows: topPinnedRowsData,
@@ -269,7 +270,19 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const mainRows = getRows({
     renderContext,
     rowIndexOffset: topPinnedRowsData.length,
-    position: 'center'
+    position: 'center',
+    onRowRender: rowId => {
+      if (rootProps.getDetailPanelContent == null) {
+        return;
+      }
+      if (!expandedRowIdsLookup[rowId]) {
+        return;
+      }
+      const detailPanel = getDetailPanel(rowId);
+      if (detailPanel) {
+        detailPanels.push(detailPanel);
+      }
+    }
   });
   const bottomPinnedRows = getRows({
     renderContext,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.2.0
+ * @mui/x-data-grid-pro v6.3.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4MTQyMzIwMDAwMA==";
+  const releaseInfo = "MTY4MjYyOTIwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/modern/utils/tree/removeDataRowFromTree.js

@@ -24,7 +24,7 @@ const removeNodeAndCleanParent = ({
   if (shouldDeleteGroup) {
     if (parentNode.isAutoGenerated) {
       removeNodeAndCleanParent({
-        node,
+        node: parentNode,
         tree,
         treeDepths
       });

package/node/components/DataGridProVirtualScroller.js

@@ -235,40 +235,41 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  const getDetailPanels = () => {
-    const panels = [];
-    if (rootProps.getDetailPanelContent == null) {
-      return panels;
-    }
+
+  // Create a lookup for faster check if the row is expanded
+  const expandedRowIdsLookup = React.useMemo(() => {
+    const lookup = {};
+    expandedRowIds.forEach(id => {
+      lookup[id] = true;
+    });
+    return lookup;
+  }, [expandedRowIds]);
+  const getDetailPanel = rowId => {
     const rowsMeta = (0, _xDataGrid.gridRowsMetaSelector)(apiRef.current.state);
-    const uniqueExpandedRowIds = Array.from(new Set([...expandedRowIds]).values());
-    for (let i = 0; i < uniqueExpandedRowIds.length; i += 1) {
-      const id = uniqueExpandedRowIds[i];
-      const content = detailPanelsContent[id];
+    const content = detailPanelsContent[rowId];
 
-      // Check if the id exists in the current page
-      const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(id);
-      const exists = rowIndex !== undefined;
-      if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(id);
-        const height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
-        const sizes = apiRef.current.unstable_getRowInternalSizes(id);
-        const spacingTop = sizes?.spacingTop || 0;
-        const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
-        panels.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridDetailPanel.GridDetailPanel, {
-          rowId: id,
-          style: {
-            top
-          },
-          height: height,
-          className: classes.detailPanel,
-          children: content
-        }, id));
-      }
+    // Check if the id exists in the current page
+    const rowIndex = apiRef.current.getRowIndexRelativeToVisibleRows(rowId);
+    const exists = rowIndex !== undefined;
+    if ( /*#__PURE__*/React.isValidElement(content) && exists) {
+      const hasAutoHeight = apiRef.current.detailPanelHasAutoHeight(rowId);
+      const height = hasAutoHeight ? 'auto' : detailPanelsHeights[rowId];
+      const sizes = apiRef.current.unstable_getRowInternalSizes(rowId);
+      const spacingTop = sizes?.spacingTop || 0;
+      const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(rowId) + spacingTop;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridDetailPanel.GridDetailPanel, {
+        rowId: rowId,
+        style: {
+          top
+        },
+        height: height,
+        className: classes.detailPanel,
+        children: content
+      }, rowId);
     }
-    return panels;
+    return null;
   };
-  const detailPanels = getDetailPanels();
+  const detailPanels = [];
   const topPinnedRows = getRows({
     renderContext,
     rows: topPinnedRowsData,
@@ -278,7 +279,19 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const mainRows = getRows({
     renderContext,
     rowIndexOffset: topPinnedRowsData.length,
-    position: 'center'
+    position: 'center',
+    onRowRender: rowId => {
+      if (rootProps.getDetailPanelContent == null) {
+        return;
+      }
+      if (!expandedRowIdsLookup[rowId]) {
+        return;
+      }
+      const detailPanel = getDetailPanel(rowId);
+      if (detailPanel) {
+        detailPanels.push(detailPanel);
+      }
+    }
   });
   const bottomPinnedRows = getRows({
     renderContext,

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v6.2.0
+ * @mui/x-data-grid-pro v6.3.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY4MTQyMzIwMDAwMA==";
+  const releaseInfo = "MTY4MjYyOTIwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/node/utils/tree/removeDataRowFromTree.js

@@ -30,7 +30,7 @@ const removeNodeAndCleanParent = ({
   if (shouldDeleteGroup) {
     if (parentNode.isAutoGenerated) {
       removeNodeAndCleanParent({
-        node,
+        node: parentNode,
         tree,
         treeDepths
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "6.2.0",
+  "version": "6.3.0",
   "description": "The Pro plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -32,13 +32,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/utils": "^5.11.13",
-    "@mui/x-data-grid": "6.2.0",
+    "@mui/utils": "^5.12.0",
+    "@mui/x-data-grid": "6.3.0",
     "@mui/x-license-pro": "6.0.4",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.2.1",
     "prop-types": "^15.8.1",
-    "reselect": "^4.1.7"
+    "reselect": "^4.1.8"
   },
   "peerDependencies": {
     "@mui/material": "^5.4.1",

package/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY4MTQyMzIwMDAwMA==";
+  const releaseInfo = "MTY4MjYyOTIwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/utils/tree/removeDataRowFromTree.js

@@ -24,7 +24,7 @@ const removeNodeAndCleanParent = ({
   if (shouldDeleteGroup) {
     if (parentNode.isAutoGenerated) {
       removeNodeAndCleanParent({
-        node,
+        node: parentNode,
         tree,
         treeDepths
       });