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

package/CHANGELOG.md

@@ -5,6 +5,215 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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_
+
+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 +232,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`.
 
@@ -324,8 +533,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
@@ -1239,7 +1448,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
@@ -6733,7 +6942,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
 
@@ -6871,7 +7080,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
@@ -7418,7 +7627,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/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 = "MTc1NDYwNDAwMDAwMA==";
 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

@@ -56,6 +56,7 @@ const useDataGridProComponent = (apiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.propsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.headerFilteringStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowSelectionStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridRowReorder.rowReorderStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridDetailPanel.detailPanelStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridColumnPinning.columnPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
@@ -78,6 +79,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 = "MTc1NDYwNDAwMDAwMA==";
 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";
@@ -12,7 +12,7 @@ import { useGridColumnPinning, columnPinningStateInitializer } from "../hooks/fe
 import { useGridColumnPinningPreProcessors } from "../hooks/features/columnPinning/useGridColumnPinningPreProcessors.js";
 import { useGridDetailPanel, detailPanelStateInitializer } from "../hooks/features/detailPanel/useGridDetailPanel.js";
 import { useGridDetailPanelPreProcessors } from "../hooks/features/detailPanel/useGridDetailPanelPreProcessors.js";
-import { useGridRowReorder } from "../hooks/features/rowReorder/useGridRowReorder.js";
+import { useGridRowReorder, rowReorderStateInitializer } from "../hooks/features/rowReorder/useGridRowReorder.js";
 import { useGridRowReorderPreProcessors } from "../hooks/features/rowReorder/useGridRowReorderPreProcessors.js";
 import { useGridLazyLoader } from "../hooks/features/lazyLoader/useGridLazyLoader.js";
 import { useGridLazyLoaderPreProcessors } from "../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors.js";
@@ -49,6 +49,7 @@ export const useDataGridProComponent = (apiRef, props) => {
   useGridInitializeState(propsStateInitializer, apiRef, props);
   useGridInitializeState(headerFilteringStateInitializer, apiRef, props);
   useGridInitializeState(rowSelectionStateInitializer, apiRef, props);
+  useGridInitializeState(rowReorderStateInitializer, apiRef, props);
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
@@ -71,6 +72,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

@@ -18,8 +18,7 @@ const useUtilityClasses = ownerState => {
     return composeClasses(slots, getDataGridUtilityClass, classes);
   }, [classes]);
 };
-const filterItemsCache = Object.create(null);
-export const useGridColumnHeaders = props => {
+export const useGridColumnHeadersPro = props => {
   const apiRef = useGridPrivateApiContext();
   const {
     headerGroupingMaxDepth,
@@ -54,6 +53,7 @@ export const useGridColumnHeaders = props => {
   const headerFilterHeight = useGridSelector(apiRef, gridHeaderFilterHeightSelector);
   const scrollbarWidth = useGridSelector(apiRef, gridVerticalScrollbarWidthSelector);
   const columnHeaderFilterFocus = useGridSelector(apiRef, gridFocusColumnHeaderFilterSelector);
+  const filterItemsCache = React.useRef(Object.create(null)).current;
   const getFilterItem = React.useCallback(colDef => {
     const filterModelItem = filterModel?.items.find(it => it.field === colDef.field && it.operator !== 'isAnyOf');
     if (filterModelItem != null) {
@@ -69,7 +69,9 @@ export const useGridColumnHeaders = props => {
     const defaultItem = getGridFilter(colDef);
     filterItemsCache[colDef.field] = defaultItem;
     return defaultItem;
-  }, [filterModel]);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [filterModel]);
   const getColumnFilters = params => {
     const {
       renderedColumns,

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";
@@ -12,7 +13,7 @@ export declare const useGridDataSourceBasePro: <Api extends GridPrivateApiPro>(a
     public: GridDataSourceApiPro;
     private: GridDataSourcePrivateApiPro;
   };
-  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: Partial<import("@mui/x-data-grid").GridGetRowsParams>) => void) & import("@mui/utils/debounce").Cancelable;
+  debouncedFetchRows: ((parentId?: import("@mui/x-data-grid").GridRowId, params?: import("@mui/x-data-grid/hooks/features/dataSource/models").GridDataSourceFetchRowsParams) => void) & import("@mui/utils/debounce").Cancelable;
   strategyProcessor: {
     strategyName: DataSourceRowsUpdateStrategy;
     group: "dataSourceRowsUpdate";