@mui/x-data-grid-pro 8.9.1 → 8.9.2

package/CHANGELOG.md

@@ -5,6 +5,100 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 8.9.2
+
+_Jul 31, 2025_
+
+We'd like to extend a big thank you to the 23 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌎 Improve French (fr-FR), Hebrew (he-IL) and Polish (pl-PL) locales on the Data Grid
+- 🌎 Improve Korean (ko-KR) locale on the Date and Time Pickers
+- 📈 Add symlog scale to charts
+- 📊 Fix bar border radius on Firefox
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+
+Special thanks go out to the community members for their valuable contributions:
+@AmrElnaggar99, @atlanteh, @ddolcimascolo, @Jiseoup, @leonaha5, @noherczeg, @sai6855
+
+The following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @bharatkashyap, @brijeshb42, @cherniavskii, @flaviendelangle, @Janpot, @JCQuintas, @KenanYusuf, @LukasTy, @mapache-salvaje, @MBilalShafi, @rita-codes, @romgrk, @siriwatknp
+
+### Data Grid
+
+#### `@mui/x-data-grid@8.9.2`
+
+- [DataGrid] Add debounce for columns panel search (#18719) @noherczeg
+- [DataGrid] Extract virtualization engine (#18275) @romgrk
+- [DataGrid] Improve types in `<GridEditSingleSelect />` (#18184) @sai6855
+- [l10n] Improve French (fr-FR) locale (#18905) @ddolcimascolo
+- [l10n] Improve Hebrew (he-IL) locale (#18665) @atlanteh
+- [l10n] Improve Polish (pl-PL) locale (#18068) @leonaha5
+
+#### `@mui/x-data-grid-pro@8.9.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.9.2`, plus:
+
+- [DataGridPro] Fix duplicate nested rows for dynamically updated row IDs (#18526) @MBilalShafi
+
+#### `@mui/x-data-grid-premium@8.9.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.9.2`, plus:
+
+- [DataGridPremium] Add `privateMode` to AI assistant prompt resolver (#18759) @bharatkashyap
+- [DataGridPremium] Fix empty nested group values caused by main criterial `valueFormatter()` (#18916) @cherniavskii
+- [DataGridPremium] Sidebar content and state is managed the same way as for preference panel (#18741) @arminmeh
+- [DataGridPremium] Make `api` param for the aggregation function optional (#18984) @arminmeh
+
+### Date and Time Pickers
+
+#### `@mui/x-date-pickers@8.9.2`
+
+- [l10n] Improve Korean (ko-KR) locale (#18664) @Jiseoup
+- [pickers] Fix popper click-away behavior (#18804) @LukasTy
+- [pickers] Fix usage not in main document (#18944) @LukasTy
+
+#### `@mui/x-date-pickers-pro@8.9.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.9.2`.
+
+### Charts
+
+#### `@mui/x-charts@8.9.2`
+
+- [charts] Add symlog scale to charts (#18729) @bernardobelchior
+- [charts] Fix bar border radius on Firefox (#18824) @bernardobelchior
+- [charts] Fix crash when rendering large scatter dataset (#18845) @bernardobelchior
+- [charts] Remove unnecessary type assertion in tooltip `valueFormatter()` (#18877) @sai6855
+- [charts] Export `ChartsWrapper` from `'./ChartsWrapper'` rather than `'./internals'` (#18966) @JCQuintas
+
+#### `@mui/x-charts-pro@8.9.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.9.2`, plus:
+
+- [charts-pro] Fix voronoi interaction with zoom (#18950) @alexfauquette
+- [charts-pro] Hide toolbar by default when exporting (#18764) @bernardobelchior
+
+### Codemod
+
+#### `@mui/x-codemod@8.9.2`
+
+Internal changes.
+
+### Docs
+
+- [docs] Add Data Grid demo pages (#18180) @KenanYusuf
+- [docs] Copyedit the Charts Overview page (#18840) @mapache-salvaje
+- [docs] Fix incorrect parameter name in pickers "Custom components" page from `variant` to `pickerVariant` (#18919) @AmrElnaggar99
+
+### Miscellaneous
+
+- [code-infra] Auto-generate deep exports to prevent asymmetric exports (#18917) @JCQuintas
+- [docs-infra] Turn on "Edit in Chat" for X docs (#18869) @siriwatknp
+- [infra] Add specific bundle size tracking (#18884) @Janpot
+- [infra] Fix markdown formatting in llms generation (#18914) @Janpot
+- [infra] Use CI action from mui-public (#18709) @brijeshb42
+
 ## 8.9.1
 
 _Jul 21, 2025_
@@ -23,11 +117,11 @@ The following are all team members who have contributed to this release:
 - [DataGrid] Move conditional list view column logic into `gridVisibleColumnDefinitionsSelector` (#18724) @KenanYusuf
 - [DataGrid] Fix row selection "exclude" model inconsistency (#18844) @MBilalShafi
 
-#### `@mui/x-data-grid-pro@8.9.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.9.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.9.1`.
 
-#### `@mui/x-data-grid-premium@8.9.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.9.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.9.1`.
 

package/DataGridPro/DataGridPro.js

@@ -24,12 +24,12 @@ var _jsxRuntime = require("react/jsx-runtime");
 const configuration = {
   hooks: {
     useCSSVariables: _material.useMaterialCSSVariables,
-    useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributes,
-    useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes,
+    useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributesPro,
+    useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributesPro,
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc1MzAzODAwMDAwMA==";
+const releaseInfo = "MTc1MzkxMjgwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -146,6 +146,11 @@ DataGridProRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: _propTypes.default.number,
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  columnFilterDebounceMs: _propTypes.default.number,
   /**
    * Sets the height in pixels of the column group headers in the Data Grid.
    * Inherits the `columnHeaderHeight` value if not set.

package/DataGridPro/useDataGridProComponent.js

@@ -78,6 +78,7 @@ const useDataGridProComponent = (apiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.dimensionsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
+  (0, _internals.useGridVirtualizer)(apiRef, props);
   (0, _internals.useGridHeaderFiltering)(apiRef, props);
   (0, _useGridTreeData.useGridTreeData)(apiRef, props);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);

package/components/GridColumnHeaders.js

@@ -42,7 +42,7 @@ const GridColumnHeaders = exports.GridColumnHeaders = (0, _forwardRef.forwardRef
     getColumnHeadersRow,
     getColumnFiltersRow,
     getColumnGroupHeadersRows
-  } = (0, _useGridColumnHeaders.useGridColumnHeaders)({
+  } = (0, _useGridColumnHeaders.useGridColumnHeadersPro)({
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,

package/components/GridDataSourceTreeDataGroupingCell.js

@@ -43,7 +43,9 @@ function GridTreeDataGroupingCellIcon(props) {
       // always fetch/get from cache the children when the node is expanded
       apiRef.current.dataSource.fetchRows(id);
     } else {
-      apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+      // Collapse the node and remove child rows from the grid
+      apiRef.current.setRowChildrenExpansion(id, false);
+      apiRef.current.removeChildrenRows(id);
     }
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation(); // TODO remove event.stopPropagation

package/components/GridDetailPanels.js

@@ -10,7 +10,6 @@ exports.GridDetailPanels = GridDetailPanels;
 var React = _interopRequireWildcard(require("react"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _xDataGrid = require("@mui/x-data-grid");
-var _internals = require("@mui/x-data-grid/internals");
 var _useGridPrivateApiContext = require("../hooks/utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _detailPanel = require("../hooks/features/detailPanel");
@@ -60,15 +59,11 @@ function GridDetailPanelsImpl({
     }, `panel-${rowId}`);
   }, [apiRef, classes.detailPanel, detailPanelsHeights, detailPanelsContent]);
   React.useEffect(() => {
-    if (expandedRowIds.size === 0) {
-      setPanels(_internals.EMPTY_DETAIL_PANELS);
-    } else {
-      const map = new Map();
-      for (const rowId of expandedRowIds) {
-        map.set(rowId, getDetailPanel(rowId));
-      }
-      setPanels(map);
+    const map = new Map();
+    for (const rowId of expandedRowIds) {
+      map.set(rowId, getDetailPanel(rowId));
     }
+    setPanels(map);
   }, [expandedRowIds, setPanels, getDetailPanel]);
   return null;
 }

package/components/GridPinnedRows.js

@@ -26,6 +26,9 @@ function GridPinnedRows({
   const apiRef = (0, _internals.useGridPrivateApiContext)();
   const pinnedRowsData = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridPinnedRowsSelector);
   const rows = pinnedRowsData[position];
+  const {
+    getRows
+  } = virtualScroller;
   const pinnedRenderContext = React.useMemo(() => ({
     firstRowIndex: 0,
     lastRowIndex: rows.length,
@@ -35,11 +38,11 @@ function GridPinnedRows({
   if (rows.length === 0) {
     return null;
   }
-  const pinnedRows = virtualScroller.getRows({
+  const pinnedRows = getRows({
     position,
     rows,
     renderContext: pinnedRenderContext
-  });
+  }, (0, _xDataGrid.gridRowTreeSelector)(apiRef));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _clsx.default)(classes.root, _xDataGrid.gridClasses[`pinnedRows--${position}`]),
     role: "presentation",

package/esm/DataGridPro/DataGridPro.js

@@ -11,18 +11,18 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridProComponent } from "./useDataGridProComponent.js";
 import { useDataGridProProps } from "./useDataGridProProps.js";
 import { propValidatorsDataGridPro } from "../internals/propValidation.js";
-import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
-import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
+import { useGridAriaAttributesPro } from "../hooks/utils/useGridAriaAttributes.js";
+import { useGridRowAriaAttributesPro } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useCSSVariables: useMaterialCSSVariables,
-    useGridAriaAttributes,
-    useGridRowAriaAttributes,
+    useGridAriaAttributes: useGridAriaAttributesPro,
+    useGridRowAriaAttributes: useGridRowAriaAttributesPro,
     useCellAggregationResult: () => null
   }
 };
-const releaseInfo = "MTc1MzAzODAwMDAwMA==";
+const releaseInfo = "MTc1MzkxMjgwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-pro",
   releaseInfo: releaseInfo
@@ -139,6 +139,11 @@ DataGridProRaw.propTypes = {
    * @default 150
    */
   columnBufferPx: PropTypes.number,
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  columnFilterDebounceMs: PropTypes.number,
   /**
    * Sets the height in pixels of the column group headers in the Data Grid.
    * Inherits the `columnHeaderHeight` value if not set.

package/esm/DataGridPro/useDataGridProComponent.js

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridVirtualizer, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridColumnResize, columnResizeStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from "../hooks/features/infiniteLoader/useGridInfiniteLoader.js";
 import { useGridColumnReorder, columnReorderStateInitializer } from "../hooks/features/columnReorder/useGridColumnReorder.js";
@@ -71,6 +71,7 @@ export const useDataGridProComponent = (apiRef, props) => {
   useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
+  useGridVirtualizer(apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);

package/esm/components/GridColumnHeaders.js

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { forwardRef } from '@mui/x-internals/forwardRef';
 import { vars, GridBaseColumnHeaders } from '@mui/x-data-grid/internals';
-import { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
+import { useGridColumnHeadersPro } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Filler = styled('div')({
   flex: 1,
@@ -34,7 +34,7 @@ const GridColumnHeaders = forwardRef(function GridColumnHeaders(props, ref) {
     getColumnHeadersRow,
     getColumnFiltersRow,
     getColumnGroupHeadersRows
-  } = useGridColumnHeaders({
+  } = useGridColumnHeadersPro({
     visibleColumns,
     sortColumnLookup,
     filterColumnLookup,

package/esm/components/GridDataSourceTreeDataGroupingCell.js

@@ -35,7 +35,9 @@ function GridTreeDataGroupingCellIcon(props) {
       // always fetch/get from cache the children when the node is expanded
       apiRef.current.dataSource.fetchRows(id);
     } else {
-      apiRef.current.setRowChildrenExpansion(id, !rowNode.childrenExpanded);
+      // Collapse the node and remove child rows from the grid
+      apiRef.current.setRowChildrenExpansion(id, false);
+      apiRef.current.removeChildrenRows(id);
     }
     apiRef.current.setCellFocus(id, field);
     event.stopPropagation(); // TODO remove event.stopPropagation

package/esm/components/GridDetailPanels.js

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid';
-import { EMPTY_DETAIL_PANELS } from '@mui/x-data-grid/internals';
 import { useGridPrivateApiContext } from "../hooks/utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowIdsSelector } from "../hooks/features/detailPanel/index.js";
@@ -53,15 +52,11 @@ function GridDetailPanelsImpl({
     }, `panel-${rowId}`);
   }, [apiRef, classes.detailPanel, detailPanelsHeights, detailPanelsContent]);
   React.useEffect(() => {
-    if (expandedRowIds.size === 0) {
-      setPanels(EMPTY_DETAIL_PANELS);
-    } else {
-      const map = new Map();
-      for (const rowId of expandedRowIds) {
-        map.set(rowId, getDetailPanel(rowId));
-      }
-      setPanels(map);
+    const map = new Map();
+    for (const rowId of expandedRowIds) {
+      map.set(rowId, getDetailPanel(rowId));
     }
+    setPanels(map);
   }, [expandedRowIds, setPanels, getDetailPanel]);
   return null;
 }

package/esm/components/GridPinnedRows.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
-import { getDataGridUtilityClass, gridClasses, useGridSelector } from '@mui/x-data-grid';
+import { getDataGridUtilityClass, gridClasses, gridRowTreeSelector, useGridSelector } from '@mui/x-data-grid';
 import { gridPinnedRowsSelector, useGridPrivateApiContext } from '@mui/x-data-grid/internals';
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = () => {
@@ -18,6 +18,9 @@ export function GridPinnedRows({
   const apiRef = useGridPrivateApiContext();
   const pinnedRowsData = useGridSelector(apiRef, gridPinnedRowsSelector);
   const rows = pinnedRowsData[position];
+  const {
+    getRows
+  } = virtualScroller;
   const pinnedRenderContext = React.useMemo(() => ({
     firstRowIndex: 0,
     lastRowIndex: rows.length,
@@ -27,11 +30,11 @@ export function GridPinnedRows({
   if (rows.length === 0) {
     return null;
   }
-  const pinnedRows = virtualScroller.getRows({
+  const pinnedRows = getRows({
     position,
     rows,
     renderContext: pinnedRenderContext
-  });
+  }, gridRowTreeSelector(apiRef));
   return /*#__PURE__*/_jsx("div", {
     className: clsx(classes.root, gridClasses[`pinnedRows--${position}`]),
     role: "presentation",

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { UseGridColumnHeadersProps, GetHeadersParams } from '@mui/x-data-grid/internals';
-export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
+export declare const useGridColumnHeadersPro: (props: UseGridColumnHeadersProps) => {
   getColumnFiltersRow: () => React.JSX.Element | null;
   getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
   getColumnHeadersRow: () => React.JSX.Element;

package/esm/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -19,7 +19,7 @@ const useUtilityClasses = ownerState => {
   }, [classes]);
 };
 const filterItemsCache = Object.create(null);
-export const useGridColumnHeaders = props => {
+export const useGridColumnHeadersPro = props => {
   const apiRef = useGridPrivateApiContext();
   const {
     headerGroupingMaxDepth,

package/esm/hooks/features/dataSource/models.d.ts

@@ -72,4 +72,10 @@ export interface GridDataSourcePrivateApiPro {
    * Resets the data source state.
    */
   resetDataSourceState: () => void;
+  /**
+   * Removes the children rows of a parent from the grid.
+   * This is used when collapsing a parent row to ensure dynamic data updates work properly.
+   * @param {GridRowId} parentId The id of the parent node.
+   */
+  removeChildrenRows: (parentId: GridRowId) => void;
 }

package/esm/hooks/features/dataSource/useGridDataSourceBasePro.d.ts

@@ -1,4 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
+import { GridRowId } from '@mui/x-data-grid';
 import { CacheChunkManager, DataSourceRowsUpdateStrategy, GridDataSourceBaseOptions } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
 import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";

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

@@ -181,6 +181,30 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       });
     });
   }, [apiRef]);
+  const removeChildrenRows = React.useCallback(parentId => {
+    const rowNode = gridRowNodeSelector(apiRef, parentId);
+    if (!rowNode || rowNode.type !== 'group' || rowNode.children.length === 0) {
+      return;
+    }
+    const removedRows = [];
+    const traverse = nodeId => {
+      const node = gridRowNodeSelector(apiRef, nodeId);
+      if (!node) {
+        return;
+      }
+      if (node.type === 'group' && node.children.length > 0) {
+        node.children.forEach(traverse);
+      }
+      removedRows.push({
+        id: nodeId,
+        _action: 'delete'
+      });
+    };
+    rowNode.children.forEach(traverse);
+    if (removedRows.length > 0) {
+      apiRef.current.updateNestedRows(removedRows, rowNode.path);
+    }
+  }, [apiRef]);
   const dataSourceApi = {
     dataSource: _extends({}, api.public.dataSource, {
       setChildrenLoading,
@@ -189,7 +213,8 @@ export const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
   };
   const dataSourcePrivateApi = {
     fetchRowChildren,
-    resetDataSourceState
+    resetDataSourceState,
+    removeChildrenRows
   };
   React.useEffect(() => {
     if (groupsToAutoFetch && groupsToAutoFetch.length && scheduledGroups.current < groupsToAutoFetch.length) {

package/esm/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -25,6 +25,7 @@ export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF
     const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(apiRef);
     return expandedRowIds.has(rowId);
   },
+  rowSpanValueGetter: (_, row, __, apiRef) => gridRowIdSelector(apiRef, row),
   renderCell: params => /*#__PURE__*/_jsx(GridDetailPanelToggleCell, _extends({}, params)),
   renderHeader: ({
     colDef

package/esm/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
+import { gridRowIdSelector, GRID_STRING_COL_DEF } from '@mui/x-data-grid';
 import { renderRowReorderCell } from "../../../components/GridRowReorderCell.js";
 export const GRID_REORDER_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   type: 'custom',
@@ -16,5 +16,6 @@ export const GRID_REORDER_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   // @ts-ignore
   aggregable: false,
   renderHeader: () => ' ',
-  renderCell: renderRowReorderCell
+  renderCell: renderRowReorderCell,
+  rowSpanValueGetter: (_, row, __, apiRef) => gridRowIdSelector(apiRef, row)
 });

package/esm/hooks/features/rows/useGridRowAriaAttributes.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridTreeNode } from '@mui/x-data-grid';
-export declare const useGridRowAriaAttributes: (addTreeDataAttributes?: boolean) => (rowNode: GridTreeNode, index: number) => React.HTMLAttributes<HTMLElement>;
+export declare const useGridRowAriaAttributesPro: (addTreeDataAttributes?: boolean) => (rowNode: GridTreeNode, index: number) => React.HTMLAttributes<HTMLElement>;

package/esm/hooks/features/rows/useGridRowAriaAttributes.js

@@ -3,7 +3,7 @@ import { useGridSelector, gridFilteredTopLevelRowCountSelector, GRID_ROOT_GROUP_
 import { useGridRowAriaAttributes as useGridRowAriaAttributesCommunity, gridFilteredChildrenCountLookupSelector, gridExpandedSortedRowTreeLevelPositionLookupSelector } from '@mui/x-data-grid/internals';
 import { useGridPrivateApiContext } from "../../utils/useGridPrivateApiContext.js";
 import { useGridRootProps } from "../../utils/useGridRootProps.js";
-export const useGridRowAriaAttributes = addTreeDataAttributes => {
+export const useGridRowAriaAttributesPro = addTreeDataAttributes => {
   const apiRef = useGridPrivateApiContext();
   const props = useGridRootProps();
   const getRowAriaAttributesCommunity = useGridRowAriaAttributesCommunity();
@@ -12,7 +12,7 @@ export const useGridRowAriaAttributes = addTreeDataAttributes => {
   const sortedVisibleRowPositionsLookup = useGridSelector(apiRef, gridExpandedSortedRowTreeLevelPositionLookupSelector);
   return React.useCallback((rowNode, index) => {
     const ariaAttributes = getRowAriaAttributesCommunity(rowNode, index);
-    if (rowNode === null || !(props.treeData || addTreeDataAttributes)) {
+    if (!rowNode || !(props.treeData || addTreeDataAttributes)) {
       return ariaAttributes;
     }
 

package/esm/hooks/utils/useGridAriaAttributes.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
+export declare const useGridAriaAttributesPro: () => React.HTMLAttributes<HTMLElement>;

package/esm/hooks/utils/useGridAriaAttributes.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { useGridAriaAttributes as useGridAriaAttributesCommunity } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from "./useGridRootProps.js";
-export const useGridAriaAttributes = () => {
+export const useGridAriaAttributesPro = () => {
   const ariaAttributesCommunity = useGridAriaAttributesCommunity();
   const rootProps = useGridRootProps();
   const ariaAttributesPro = rootProps.treeData ? {

package/esm/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.9.1
+ * @mui/x-data-grid-pro v8.9.2
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/esm/internals/index.d.ts

@@ -1,12 +1,9 @@
 export * from '@mui/x-data-grid/internals';
 export { GridColumnHeaders } from "../components/GridColumnHeaders.js";
 export { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridProDefaultSlotsComponents.js";
-/**
- * x-data-grid-pro internals that are overriding the x-data-grid internals
- */
-export { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
-export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
-export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
+export { useGridColumnHeadersPro } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
+export { useGridAriaAttributesPro } from "../hooks/utils/useGridAriaAttributes.js";
+export { useGridRowAriaAttributesPro } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 export { useGridColumnPinning, columnPinningStateInitializer } from "../hooks/features/columnPinning/useGridColumnPinning.js";
 export { useGridColumnPinningPreProcessors } from "../hooks/features/columnPinning/useGridColumnPinningPreProcessors.js";
 export { useGridColumnReorder, columnReorderStateInitializer } from "../hooks/features/columnReorder/useGridColumnReorder.js";
@@ -35,4 +32,8 @@ export { sortRowTree } from "../utils/tree/sortRowTree.js";
 export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from "../utils/tree/utils.js";
 export type { RowTreeBuilderGroupingCriterion } from "../utils/tree/models.js";
 export { skipSorting, skipFiltering, getParentPath } from "../hooks/features/serverSideTreeData/utils.js";
+export declare enum RowGroupingStrategy {
+  Default = "grouping-columns",
+  DataSource = "grouping-columns-data-source",
+}
 export * from "./propValidation.js";

package/esm/internals/index.js

@@ -1,17 +1,13 @@
-// eslint-disable-next-line import/export
 export * from '@mui/x-data-grid/internals';
 export { GridColumnHeaders } from "../components/GridColumnHeaders.js";
 export { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridProDefaultSlotsComponents.js";
 
-/**
+/*
  * x-data-grid-pro internals that are overriding the x-data-grid internals
  */
-/* eslint-disable import/export */
-export { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
-export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
-export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
-/* eslint-enable import/export */
-
+export { useGridColumnHeadersPro } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
+export { useGridAriaAttributesPro } from "../hooks/utils/useGridAriaAttributes.js";
+export { useGridRowAriaAttributesPro } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 export { useGridColumnPinning, columnPinningStateInitializer } from "../hooks/features/columnPinning/useGridColumnPinning.js";
 export { useGridColumnPinningPreProcessors } from "../hooks/features/columnPinning/useGridColumnPinningPreProcessors.js";
 export { useGridColumnReorder, columnReorderStateInitializer } from "../hooks/features/columnReorder/useGridColumnReorder.js";
@@ -38,4 +34,9 @@ export { updateRowTree } from "../utils/tree/updateRowTree.js";
 export { sortRowTree } from "../utils/tree/sortRowTree.js";
 export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from "../utils/tree/utils.js";
 export { skipSorting, skipFiltering, getParentPath } from "../hooks/features/serverSideTreeData/utils.js";
+export let RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
+  RowGroupingStrategy["Default"] = "grouping-columns";
+  RowGroupingStrategy["DataSource"] = "grouping-columns-data-source";
+  return RowGroupingStrategy;
+}({});
 export * from "./propValidation.js";

package/esm/utils/tree/removeDataRowFromTree.d.ts

@@ -28,6 +28,7 @@ interface RemoveDataRowFromTreeParams {
    * If not defined, then the tracking will be skipped.
    */
   updatedGroupsManager?: GridRowTreeUpdatedGroupsManager;
+  groupingName: string;
 }
 /**
  * Removed a data row from the tree.
@@ -40,6 +41,7 @@ export declare const removeDataRowFromTree: ({
   id,
   tree,
   treeDepths,
-  updatedGroupsManager
+  updatedGroupsManager,
+  groupingName
 }: RemoveDataRowFromTreeParams) => void;
 export {};

package/esm/utils/tree/removeDataRowFromTree.js

@@ -1,10 +1,11 @@
 import { GRID_ROOT_GROUP_ID } from '@mui/x-data-grid';
 import { getNodePathInTree, getGroupRowIdFromPath, removeNodeFromTree, updateGroupNodeIdAndAutoGenerated } from "./utils.js";
-const removeNodeAndCleanParent = ({
+import { TreeDataStrategy } from "../../hooks/features/treeData/gridTreeDataUtils.js";
+import { RowGroupingStrategy } from "../../internals/index.js";
+const removeNode = ({
   node,
   tree,
-  treeDepths,
-  updatedGroupsManager
+  treeDepths
 }) => {
   removeNodeFromTree({
     node,
@@ -18,6 +19,18 @@ const removeNodeAndCleanParent = ({
       treeDepths
     });
   }
+};
+const removeNodeAndCleanParent = ({
+  node,
+  tree,
+  treeDepths,
+  updatedGroupsManager
+}) => {
+  removeNode({
+    node,
+    tree,
+    treeDepths
+  });
   const parentNode = tree[node.parent];
   updatedGroupsManager?.addAction(parentNode.id, 'removeChildren');
   const shouldDeleteGroup = parentNode.id !== GRID_ROOT_GROUP_ID && parentNode.children.length === 0;
@@ -73,7 +86,8 @@ export const removeDataRowFromTree = ({
   id,
   tree,
   treeDepths,
-  updatedGroupsManager
+  updatedGroupsManager,
+  groupingName
 }) => {
   const node = tree[id];
   if (node.type === 'group' && node.children.length > 0) {
@@ -83,12 +97,18 @@ export const removeDataRowFromTree = ({
       treeDepths,
       updatedGroupsManager
     });
-  } else {
+  } else if (groupingName === TreeDataStrategy.Default || groupingName === RowGroupingStrategy.Default) {
     removeNodeAndCleanParent({
       node,
       tree,
       treeDepths,
       updatedGroupsManager
     });
+  } else {
+    removeNode({
+      node,
+      tree,
+      treeDepths
+    });
   }
 };

package/esm/utils/tree/updateRowTree.js

@@ -36,7 +36,8 @@ export const updateRowTree = params => {
       tree,
       treeDepths,
       updatedGroupsManager,
-      id: nodeId
+      id: nodeId,
+      groupingName: params.groupingName
     });
   }
   for (let i = 0; i < params.nodes.modified.length; i += 1) {
@@ -55,7 +56,8 @@ export const updateRowTree = params => {
         tree,
         treeDepths,
         updatedGroupsManager,
-        id
+        id,
+        groupingName: params.groupingName
       });
       insertDataRowInTree({
         previousTree: params.previousTree,

package/hooks/features/columnHeaders/useGridColumnHeaders.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { UseGridColumnHeadersProps, GetHeadersParams } from '@mui/x-data-grid/internals';
-export declare const useGridColumnHeaders: (props: UseGridColumnHeadersProps) => {
+export declare const useGridColumnHeadersPro: (props: UseGridColumnHeadersProps) => {
   getColumnFiltersRow: () => React.JSX.Element | null;
   getFillers: (params: GetHeadersParams | undefined, children: React.ReactNode, leftOverflow: number, borderBottom?: boolean) => React.JSX.Element;
   getColumnHeadersRow: () => React.JSX.Element;

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -5,7 +5,7 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridColumnHeaders = void 0;
+exports.useGridColumnHeadersPro = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
@@ -27,7 +27,7 @@ const useUtilityClasses = ownerState => {
   }, [classes]);
 };
 const filterItemsCache = Object.create(null);
-const useGridColumnHeaders = props => {
+const useGridColumnHeadersPro = props => {
   const apiRef = (0, _internals.useGridPrivateApiContext)();
   const {
     headerGroupingMaxDepth,
@@ -150,4 +150,4 @@ const useGridColumnHeaders = props => {
     getColumnFiltersRow
   });
 };
-exports.useGridColumnHeaders = useGridColumnHeaders;
+exports.useGridColumnHeadersPro = useGridColumnHeadersPro;

package/hooks/features/dataSource/models.d.ts

@@ -72,4 +72,10 @@ export interface GridDataSourcePrivateApiPro {
    * Resets the data source state.
    */
   resetDataSourceState: () => void;
+  /**
+   * Removes the children rows of a parent from the grid.
+   * This is used when collapsing a parent row to ensure dynamic data updates work properly.
+   * @param {GridRowId} parentId The id of the parent node.
+   */
+  removeChildrenRows: (parentId: GridRowId) => void;
 }

package/hooks/features/dataSource/useGridDataSourceBasePro.d.ts

@@ -1,4 +1,5 @@
 import { RefObject } from '@mui/x-internals/types';
+import { GridRowId } from '@mui/x-data-grid';
 import { CacheChunkManager, DataSourceRowsUpdateStrategy, GridDataSourceBaseOptions } from '@mui/x-data-grid/internals';
 import { GridPrivateApiPro } from "../../../models/gridApiPro.js";
 import { DataGridProProcessedProps } from "../../../models/dataGridProProps.js";

package/hooks/features/dataSource/useGridDataSourceBasePro.js

@@ -188,6 +188,30 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
       });
     });
   }, [apiRef]);
+  const removeChildrenRows = React.useCallback(parentId => {
+    const rowNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, parentId);
+    if (!rowNode || rowNode.type !== 'group' || rowNode.children.length === 0) {
+      return;
+    }
+    const removedRows = [];
+    const traverse = nodeId => {
+      const node = (0, _xDataGrid.gridRowNodeSelector)(apiRef, nodeId);
+      if (!node) {
+        return;
+      }
+      if (node.type === 'group' && node.children.length > 0) {
+        node.children.forEach(traverse);
+      }
+      removedRows.push({
+        id: nodeId,
+        _action: 'delete'
+      });
+    };
+    rowNode.children.forEach(traverse);
+    if (removedRows.length > 0) {
+      apiRef.current.updateNestedRows(removedRows, rowNode.path);
+    }
+  }, [apiRef]);
   const dataSourceApi = {
     dataSource: (0, _extends2.default)({}, api.public.dataSource, {
       setChildrenLoading,
@@ -196,7 +220,8 @@ const useGridDataSourceBasePro = (apiRef, props, options = {}) => {
   };
   const dataSourcePrivateApi = {
     fetchRowChildren,
-    resetDataSourceState
+    resetDataSourceState,
+    removeChildrenRows
   };
   React.useEffect(() => {
     if (groupsToAutoFetch && groupsToAutoFetch.length && scheduledGroups.current < groupsToAutoFetch.length) {

package/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -38,6 +38,7 @@ const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = exports.GRID_DETAIL_PANEL_TOGGLE_COL_DE
     const expandedRowIds = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(apiRef);
     return expandedRowIds.has(rowId);
   },
+  rowSpanValueGetter: (_, row, __, apiRef) => (0, _xDataGrid.gridRowIdSelector)(apiRef, row),
   renderCell: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridDetailPanelToggleCell.GridDetailPanelToggleCell, (0, _extends2.default)({}, params)),
   renderHeader: ({
     colDef

package/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -23,5 +23,6 @@ const GRID_REORDER_COL_DEF = exports.GRID_REORDER_COL_DEF = (0, _extends2.defaul
   // @ts-ignore
   aggregable: false,
   renderHeader: () => ' ',
-  renderCell: _GridRowReorderCell.renderRowReorderCell
+  renderCell: _GridRowReorderCell.renderRowReorderCell,
+  rowSpanValueGetter: (_, row, __, apiRef) => (0, _xDataGrid.gridRowIdSelector)(apiRef, row)
 });

package/hooks/features/rows/useGridRowAriaAttributes.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
 import { GridTreeNode } from '@mui/x-data-grid';
-export declare const useGridRowAriaAttributes: (addTreeDataAttributes?: boolean) => (rowNode: GridTreeNode, index: number) => React.HTMLAttributes<HTMLElement>;
+export declare const useGridRowAriaAttributesPro: (addTreeDataAttributes?: boolean) => (rowNode: GridTreeNode, index: number) => React.HTMLAttributes<HTMLElement>;

package/hooks/features/rows/useGridRowAriaAttributes.js

@@ -4,13 +4,13 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridRowAriaAttributes = void 0;
+exports.useGridRowAriaAttributesPro = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _xDataGrid = require("@mui/x-data-grid");
 var _internals = require("@mui/x-data-grid/internals");
 var _useGridPrivateApiContext = require("../../utils/useGridPrivateApiContext");
 var _useGridRootProps = require("../../utils/useGridRootProps");
-const useGridRowAriaAttributes = addTreeDataAttributes => {
+const useGridRowAriaAttributesPro = addTreeDataAttributes => {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const props = (0, _useGridRootProps.useGridRootProps)();
   const getRowAriaAttributesCommunity = (0, _internals.useGridRowAriaAttributes)();
@@ -19,7 +19,7 @@ const useGridRowAriaAttributes = addTreeDataAttributes => {
   const sortedVisibleRowPositionsLookup = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridExpandedSortedRowTreeLevelPositionLookupSelector);
   return React.useCallback((rowNode, index) => {
     const ariaAttributes = getRowAriaAttributesCommunity(rowNode, index);
-    if (rowNode === null || !(props.treeData || addTreeDataAttributes)) {
+    if (!rowNode || !(props.treeData || addTreeDataAttributes)) {
       return ariaAttributes;
     }
 
@@ -42,4 +42,4 @@ const useGridRowAriaAttributes = addTreeDataAttributes => {
     return ariaAttributes;
   }, [props.treeData, addTreeDataAttributes, filteredTopLevelRowCount, filteredChildrenCountLookup, sortedVisibleRowPositionsLookup, getRowAriaAttributesCommunity]);
 };
-exports.useGridRowAriaAttributes = useGridRowAriaAttributes;
+exports.useGridRowAriaAttributesPro = useGridRowAriaAttributesPro;

package/hooks/utils/useGridAriaAttributes.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const useGridAriaAttributes: () => React.HTMLAttributes<HTMLElement>;
+export declare const useGridAriaAttributesPro: () => React.HTMLAttributes<HTMLElement>;

package/hooks/utils/useGridAriaAttributes.js

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useGridAriaAttributes = void 0;
+exports.useGridAriaAttributesPro = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _internals = require("@mui/x-data-grid/internals");
 var _useGridRootProps = require("./useGridRootProps");
-const useGridAriaAttributes = () => {
+const useGridAriaAttributesPro = () => {
   const ariaAttributesCommunity = (0, _internals.useGridAriaAttributes)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const ariaAttributesPro = rootProps.treeData ? {
@@ -16,4 +16,4 @@ const useGridAriaAttributes = () => {
   } : {};
   return (0, _extends2.default)({}, ariaAttributesCommunity, ariaAttributesPro);
 };
-exports.useGridAriaAttributes = useGridAriaAttributes;
+exports.useGridAriaAttributesPro = useGridAriaAttributesPro;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-pro v8.9.1
+ * @mui/x-data-grid-pro v8.9.2
  *
  * @license SEE LICENSE IN LICENSE
  * This source code is licensed under the SEE LICENSE IN LICENSE license found in the

package/internals/index.d.ts

@@ -1,12 +1,9 @@
 export * from '@mui/x-data-grid/internals';
 export { GridColumnHeaders } from "../components/GridColumnHeaders.js";
 export { DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS } from "../constants/dataGridProDefaultSlotsComponents.js";
-/**
- * x-data-grid-pro internals that are overriding the x-data-grid internals
- */
-export { useGridColumnHeaders } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
-export { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
-export { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
+export { useGridColumnHeadersPro } from "../hooks/features/columnHeaders/useGridColumnHeaders.js";
+export { useGridAriaAttributesPro } from "../hooks/utils/useGridAriaAttributes.js";
+export { useGridRowAriaAttributesPro } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 export { useGridColumnPinning, columnPinningStateInitializer } from "../hooks/features/columnPinning/useGridColumnPinning.js";
 export { useGridColumnPinningPreProcessors } from "../hooks/features/columnPinning/useGridColumnPinningPreProcessors.js";
 export { useGridColumnReorder, columnReorderStateInitializer } from "../hooks/features/columnReorder/useGridColumnReorder.js";
@@ -35,4 +32,8 @@ export { sortRowTree } from "../utils/tree/sortRowTree.js";
 export { insertNodeInTree, removeNodeFromTree, getVisibleRowsLookup } from "../utils/tree/utils.js";
 export type { RowTreeBuilderGroupingCriterion } from "../utils/tree/models.js";
 export { skipSorting, skipFiltering, getParentPath } from "../hooks/features/serverSideTreeData/utils.js";
+export declare enum RowGroupingStrategy {
+  Default = "grouping-columns",
+  DataSource = "grouping-columns-data-source",
+}
 export * from "./propValidation.js";

package/internals/index.js

@@ -4,11 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  RowGroupingStrategy: true,
   GridColumnHeaders: true,
   DATA_GRID_PRO_DEFAULT_SLOTS_COMPONENTS: true,
-  useGridColumnHeaders: true,
-  useGridAriaAttributes: true,
-  useGridRowAriaAttributes: true,
+  useGridColumnHeadersPro: true,
+  useGridAriaAttributesPro: true,
+  useGridRowAriaAttributesPro: true,
   useGridColumnPinning: true,
   columnPinningStateInitializer: true,
   useGridColumnPinningPreProcessors: true,
@@ -58,6 +59,7 @@ Object.defineProperty(exports, "GridColumnHeaders", {
     return _GridColumnHeaders.GridColumnHeaders;
   }
 });
+exports.RowGroupingStrategy = void 0;
 Object.defineProperty(exports, "addPinnedRow", {
   enumerable: true,
   get: function () {
@@ -166,16 +168,16 @@ Object.defineProperty(exports, "updateRowTree", {
     return _updateRowTree.updateRowTree;
   }
 });
-Object.defineProperty(exports, "useGridAriaAttributes", {
+Object.defineProperty(exports, "useGridAriaAttributesPro", {
   enumerable: true,
   get: function () {
-    return _useGridAriaAttributes.useGridAriaAttributes;
+    return _useGridAriaAttributes.useGridAriaAttributesPro;
   }
 });
-Object.defineProperty(exports, "useGridColumnHeaders", {
+Object.defineProperty(exports, "useGridColumnHeadersPro", {
   enumerable: true,
   get: function () {
-    return _useGridColumnHeaders.useGridColumnHeaders;
+    return _useGridColumnHeaders.useGridColumnHeadersPro;
   }
 });
 Object.defineProperty(exports, "useGridColumnPinning", {
@@ -250,10 +252,10 @@ Object.defineProperty(exports, "useGridLazyLoaderPreProcessors", {
     return _useGridLazyLoaderPreProcessors.useGridLazyLoaderPreProcessors;
   }
 });
-Object.defineProperty(exports, "useGridRowAriaAttributes", {
+Object.defineProperty(exports, "useGridRowAriaAttributesPro", {
   enumerable: true,
   get: function () {
-    return _useGridRowAriaAttributes.useGridRowAriaAttributes;
+    return _useGridRowAriaAttributes.useGridRowAriaAttributesPro;
   }
 });
 Object.defineProperty(exports, "useGridRowPinning", {
@@ -346,4 +348,12 @@ Object.keys(_propValidation).forEach(function (key) {
       return _propValidation[key];
     }
   });
-});
+});
+/*
+ * x-data-grid-pro internals that are overriding the x-data-grid internals
+ */
+let RowGroupingStrategy = exports.RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
+  RowGroupingStrategy["Default"] = "grouping-columns";
+  RowGroupingStrategy["DataSource"] = "grouping-columns-data-source";
+  return RowGroupingStrategy;
+}({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "8.9.1",
+  "version": "8.9.2",
   "author": "MUI Team",
   "description": "The Pro plan edition of the MUI X Data Grid components.",
   "main": "./index.js",
@@ -13,8 +13,7 @@
     "**/*.css"
   ],
   "publishConfig": {
-    "access": "public",
-    "directory": "build"
+    "access": "public"
   },
   "keywords": [
     "react",
@@ -35,14 +34,14 @@
     "directory": "packages/x-data-grid-pro"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.6",
+    "@babel/runtime": "^7.28.2",
     "@mui/utils": "^7.2.0",
     "@types/format-util": "^1.0.4",
     "clsx": "^2.1.1",
     "prop-types": "^15.8.1",
-    "@mui/x-internals": "8.8.0",
-    "@mui/x-license": "8.9.0",
-    "@mui/x-data-grid": "8.9.1"
+    "@mui/x-license": "8.9.2",
+    "@mui/x-internals": "8.9.2",
+    "@mui/x-data-grid": "8.9.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11.9.0",

package/utils/tree/removeDataRowFromTree.d.ts

@@ -28,6 +28,7 @@ interface RemoveDataRowFromTreeParams {
    * If not defined, then the tracking will be skipped.
    */
   updatedGroupsManager?: GridRowTreeUpdatedGroupsManager;
+  groupingName: string;
 }
 /**
  * Removed a data row from the tree.
@@ -40,6 +41,7 @@ export declare const removeDataRowFromTree: ({
   id,
   tree,
   treeDepths,
-  updatedGroupsManager
+  updatedGroupsManager,
+  groupingName
 }: RemoveDataRowFromTreeParams) => void;
 export {};

package/utils/tree/removeDataRowFromTree.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.removeDataRowFromTree = void 0;
 var _xDataGrid = require("@mui/x-data-grid");
 var _utils = require("./utils");
-const removeNodeAndCleanParent = ({
+var _gridTreeDataUtils = require("../../hooks/features/treeData/gridTreeDataUtils");
+var _internals = require("../../internals");
+const removeNode = ({
   node,
   tree,
-  treeDepths,
-  updatedGroupsManager
+  treeDepths
 }) => {
   (0, _utils.removeNodeFromTree)({
     node,
@@ -24,6 +25,18 @@ const removeNodeAndCleanParent = ({
       treeDepths
     });
   }
+};
+const removeNodeAndCleanParent = ({
+  node,
+  tree,
+  treeDepths,
+  updatedGroupsManager
+}) => {
+  removeNode({
+    node,
+    tree,
+    treeDepths
+  });
   const parentNode = tree[node.parent];
   updatedGroupsManager?.addAction(parentNode.id, 'removeChildren');
   const shouldDeleteGroup = parentNode.id !== _xDataGrid.GRID_ROOT_GROUP_ID && parentNode.children.length === 0;
@@ -79,7 +92,8 @@ const removeDataRowFromTree = ({
   id,
   tree,
   treeDepths,
-  updatedGroupsManager
+  updatedGroupsManager,
+  groupingName
 }) => {
   const node = tree[id];
   if (node.type === 'group' && node.children.length > 0) {
@@ -89,13 +103,19 @@ const removeDataRowFromTree = ({
       treeDepths,
       updatedGroupsManager
     });
-  } else {
+  } else if (groupingName === _gridTreeDataUtils.TreeDataStrategy.Default || groupingName === _internals.RowGroupingStrategy.Default) {
     removeNodeAndCleanParent({
       node,
       tree,
       treeDepths,
       updatedGroupsManager
     });
+  } else {
+    removeNode({
+      node,
+      tree,
+      treeDepths
+    });
   }
 };
 exports.removeDataRowFromTree = removeDataRowFromTree;

package/utils/tree/updateRowTree.js

@@ -43,7 +43,8 @@ const updateRowTree = params => {
       tree,
       treeDepths,
       updatedGroupsManager,
-      id: nodeId
+      id: nodeId,
+      groupingName: params.groupingName
     });
   }
   for (let i = 0; i < params.nodes.modified.length; i += 1) {
@@ -62,7 +63,8 @@ const updateRowTree = params => {
         tree,
         treeDepths,
         updatedGroupsManager,
-        id
+        id,
+        groupingName: params.groupingName
       });
       (0, _insertDataRowInTree.insertDataRowInTree)({
         previousTree: params.previousTree,