@mui/x-data-grid 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/DataGrid/DataGrid.js

@@ -133,6 +133,11 @@ DataGridRaw.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/DataGrid/useDataGridComponent.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDataGridComponent = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useGridInitialization = require("../hooks/core/useGridInitialization");
+var _useGridVirtualizer = require("../hooks/core/useGridVirtualizer");
 var _useGridInitializeState = require("../hooks/utils/useGridInitializeState");
 var _useGridClipboard = require("../hooks/features/clipboard/useGridClipboard");
 var _useGridColumnMenu = require("../hooks/features/columnMenu/useGridColumnMenu");
@@ -71,6 +72,7 @@ const useDataGridComponent = (apiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridDimensions.dimensionsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridRowsMeta.rowsMetaStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridListView.listViewStateInitializer, apiRef, props);
+  (0, _useGridVirtualizer.useGridVirtualizer)(apiRef, props);
   (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);

package/colDef/gridCheckboxSelectionColDef.js

@@ -32,6 +32,7 @@ const GRID_CHECKBOX_SELECTION_COL_DEF = exports.GRID_CHECKBOX_SELECTION_COL_DEF
     const rowId = (0, _gridPropsSelectors.gridRowIdSelector)(apiRef, row);
     return apiRef.current.isRowSelected(rowId);
   },
+  rowSpanValueGetter: (_, row, column, apiRef) => (0, _gridPropsSelectors.gridRowIdSelector)(apiRef, row),
   renderHeader: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridHeaderCheckbox.GridHeaderCheckbox, (0, _extends2.default)({}, params)),
   renderCell: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridCellCheckboxRenderer.GridCellCheckboxRenderer, (0, _extends2.default)({}, params))
 });

package/components/GridDetailPanels.d.ts

@@ -1,5 +1,5 @@
-import type { VirtualScroller } from "../hooks/features/virtualization/useGridVirtualScroller.js";
+import type { VirtualScrollerCompat } from '@mui/x-virtualizer';
 export interface GridDetailPanelsProps {
-  virtualScroller: VirtualScroller;
+  virtualScroller: VirtualScrollerCompat;
 }
 export declare function GridDetailPanels(_: GridDetailPanelsProps): null;

package/components/GridFooter.js

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

package/components/GridPagination.js

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

package/components/GridPinnedRows.d.ts

@@ -1,6 +1,6 @@
-import type { VirtualScroller } from "../hooks/features/virtualization/useGridVirtualScroller.js";
+import type { VirtualScrollerCompat } from '@mui/x-virtualizer';
 export interface GridPinnedRowsProps {
   position: 'top' | 'bottom';
-  virtualScroller: VirtualScroller;
+  virtualScroller: VirtualScrollerCompat;
 }
 export declare function GridPinnedRows(_: GridPinnedRowsProps): null;

package/components/GridRow.js

@@ -31,6 +31,7 @@ var _constants = require("../internals/constants");
 var _gridSortingSelector = require("../hooks/features/sorting/gridSortingSelector");
 var _gridRowsSelector = require("../hooks/features/rows/gridRowsSelector");
 var _gridEditingSelectors = require("../hooks/features/editing/gridEditingSelectors");
+var _gridRowReorderSelector = require("../hooks/features/rowReorder/gridRowReorderSelector");
 var _GridScrollbarFillerCell = require("./GridScrollbarFillerCell");
 var _getPinnedCellOffset = require("../internals/utils/getPinnedCellOffset");
 var _useGridConfiguration = require("../hooks/utils/useGridConfiguration");
@@ -85,6 +86,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
   const columnPositions = (0, _useGridSelector.useGridSelector)(apiRef, _gridColumnsSelector.gridColumnPositionsSelector);
   const rowReordering = rootProps.rowReordering;
   const isRowReorderingEnabled = (0, _useGridSelector.useGridSelector)(apiRef, isRowReorderingEnabledSelector, rowReordering);
+  const isRowDragActive = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowReorderSelector.gridIsRowDragActiveSelector);
   const handleRef = (0, _useForkRef.default)(ref, refProp);
   const rowNode = (0, _gridRowsSelector.gridRowNodeSelector)(apiRef, rowId);
   const editing = (0, _useGridSelector.useGridSelector)(apiRef, _gridEditingSelectors.gridRowIsEditingSelector, {
@@ -209,6 +211,11 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     });
     rowClassNames.push(rootProps.getRowClassName(rowParams));
   }
+
+  // XXX: fix this properly
+  if (!rowNode) {
+    return null;
+  }
   const getCell = (column, indexInSection, indexRelativeToAllColumns, sectionLength, pinnedPosition = _constants.PinnedColumnPosition.NONE) => {
     const cellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, indexRelativeToAllColumns);
     if (cellColSpanInfo?.spannedByColSpan) {
@@ -232,7 +239,7 @@ const GridRow = (0, _forwardRef.forwardRef)(function GridRow(props, refProp) {
     const isReorderCell = column.field === '__reorder__';
     const canReorderColumn = !(disableColumnReorder || column.disableReorder);
     const canReorderRow = isRowReorderingEnabled && !sortModel.length && treeDepth <= 1;
-    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow);
+    const disableDragEvents = !(canReorderColumn || isReorderCell && canReorderRow || isRowDragActive);
     const cellIsNotVisible = pinnedPosition === _constants.PinnedColumnPosition.VIRTUAL;
     const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
     const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);

package/components/cell/GridCell.js

@@ -19,6 +19,8 @@ var _capitalize = _interopRequireDefault(require("@mui/utils/capitalize"));
 var _fastMemo = require("@mui/x-internals/fastMemo");
 var _RtlProvider = require("@mui/system/RtlProvider");
 var _forwardRef = require("@mui/x-internals/forwardRef");
+var _store = require("@mui/x-internals/store");
+var _xVirtualizer = require("@mui/x-virtualizer");
 var _doesSupportPreventScroll = require("../../utils/doesSupportPreventScroll");
 var _gridClasses = require("../../constants/gridClasses");
 var _models = require("../../models");
@@ -27,7 +29,6 @@ var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridFocusStateSelector = require("../../hooks/features/focus/gridFocusStateSelector");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
 var _constants = require("../../internals/constants");
-var _gridRowSpanningSelectors = require("../../hooks/features/rows/gridRowSpanningSelectors");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _gridEditingSelectors = require("../../hooks/features/editing/gridEditingSelectors");
 var _utils = require("../../internals/utils");
@@ -123,8 +124,9 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
     id: rowId,
     field
   }));
-  const hiddenCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningHiddenCellsSelector);
-  const spannedCells = (0, _useGridSelector.useGridSelector)(apiRef, _gridRowSpanningSelectors.gridRowSpanningSpannedCellsSelector);
+  const store = apiRef.current.virtualizer.store;
+  const hiddenCells = (0, _store.useStore)(store, _xVirtualizer.Rowspan.selectors.hiddenCells);
+  const spannedCells = (0, _store.useStore)(store, _xVirtualizer.Rowspan.selectors.spannedCells);
   const {
     hasFocus,
     isEditable = false,
@@ -193,8 +195,8 @@ const GridCell = (0, _forwardRef.forwardRef)(function GridCell(props, ref) {
       propHandler(event);
     }
   }, [apiRef, field, rowId]);
-  const isCellRowSpanned = hiddenCells[rowId]?.[field] ?? false;
-  const rowSpan = spannedCells[rowId]?.[field] ?? 1;
+  const isCellRowSpanned = hiddenCells[rowId]?.[colIndex] ?? false;
+  const rowSpan = spannedCells[rowId]?.[colIndex] ?? 1;
   const style = React.useMemo(() => {
     if (isNotVisible) {
       return {

package/components/cell/GridEditSingleSelectCell.js

@@ -22,7 +22,7 @@ var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "tabIndex", "className", "hasFocus", "isValidating", "isProcessingProps", "error", "onValueChange", "initialOpen", "slotProps"];
 function isKeyboardEvent(event) {
-  return !!event.key;
+  return 'key' in event && !!event.key;
 }
 function GridEditSingleSelectCell(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

package/components/columnsManagement/GridColumnsManagement.d.ts

@@ -1,10 +1,16 @@
 import * as React from 'react';
 import { TextFieldProps } from "../../models/gridBaseSlots.js";
+import type { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 import type { GridColDef } from "../../models/colDef/gridColDef.js";
 export interface GridColumnsManagementProps {
   sort?: 'asc' | 'desc';
   searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
   searchInputProps?: Partial<TextFieldProps>;
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  searchDebounceMs?: DataGridProcessedProps['columnFilterDebounceMs'];
   /**
    * If `true`, the column search field will be focused automatically.
    * If `false`, the first column switch input will be focused automatically.

package/components/columnsManagement/GridColumnsManagement.js

@@ -12,6 +12,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
 var _styles = require("@mui/material/styles");
 var _InputBase = require("@mui/material/InputBase");
 var _cssVariables = require("../../constants/cssVariables");
@@ -59,8 +60,12 @@ function GridColumnsManagement(props) {
     disableResetButton = false,
     toggleAllMode = 'all',
     getTogglableColumns,
-    searchInputProps
+    searchInputProps,
+    searchDebounceMs = rootProps.columnFilterDebounceMs
   } = props;
+  const debouncedFilter = React.useMemo(() => (0, _debounce.default)(value => {
+    setSearchValue(value);
+  }, searchDebounceMs ?? 150), [searchDebounceMs]);
   const isResetDisabled = React.useMemo(() => (0, _utils.checkColumnVisibilityModelsSame)(columnVisibilityModel, initialColumnVisibilityModel), [columnVisibilityModel, initialColumnVisibilityModel]);
   const sortedColumns = React.useMemo(() => {
     switch (sort) {
@@ -105,8 +110,8 @@ function GridColumnsManagement(props) {
     return apiRef.current.setColumnVisibilityModel(newModel);
   }, [apiRef, columns, getTogglableColumns, toggleAllMode, currentColumns]);
   const handleSearchValueChange = React.useCallback(event => {
-    setSearchValue(event.target.value);
-  }, []);
+    debouncedFilter(event.target.value);
+  }, [debouncedFilter]);
   const hideableColumns = React.useMemo(() => currentColumns.filter(col => col.hideable), [currentColumns]);
   const allHideableColumnsVisible = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] == null || columnVisibilityModel[column.field] !== false), [columnVisibilityModel, hideableColumns]);
   const allHideableColumnsHidden = React.useMemo(() => hideableColumns.every(column => columnVisibilityModel[column.field] === false), [columnVisibilityModel, hideableColumns]);
@@ -128,7 +133,10 @@ function GridColumnsManagement(props) {
   };
   const handleSearchReset = React.useCallback(() => {
     setSearchValue('');
-    searchInputRef.current?.focus();
+    if (searchInputRef.current) {
+      searchInputRef.current.value = '';
+      searchInputRef.current.focus();
+    }
   }, []);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnsManagementHeader, {
@@ -140,7 +148,6 @@ function GridColumnsManagement(props) {
         placeholder: apiRef.current.getLocaleText('columnsManagementSearchTitle'),
         inputRef: searchInputRef,
         className: classes.searchInput,
-        value: searchValue,
         onChange: handleSearchValueChange,
         size: "small",
         type: "search",
@@ -243,6 +250,11 @@ process.env.NODE_ENV !== "production" ? GridColumnsManagement.propTypes = {
    * @returns {GridColDef['field'][]} The list of togglable columns' field names.
    */
   getTogglableColumns: _propTypes.default.func,
+  /**
+   * The milliseconds delay to wait after a keystroke before triggering filtering in the columns menu.
+   * @default 150
+   */
+  searchDebounceMs: _propTypes.default.number,
   searchInputProps: _propTypes.default.object,
   searchPredicate: _propTypes.default.func,
   sort: _propTypes.default.oneOf(['asc', 'desc']),

package/components/containers/GridRootStyles.d.ts

@@ -2,4 +2,4 @@ import { DataGridProcessedProps } from "../../models/props/DataGridProps.js";
 export type OwnerState = DataGridProcessedProps;
 export declare const GridRootStyles: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
   ownerState: OwnerState;
-}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement> | keyof import("react").ClassAttributes<HTMLDivElement>>, {}>;
+}, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("react").ClassAttributes<HTMLDivElement> | keyof import("react").HTMLAttributes<HTMLDivElement>>, {}>;

package/components/toolbarV8/Toolbar.d.ts

@@ -6,7 +6,7 @@ export type ToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
    */
   render?: RenderProp<React.ComponentProps<typeof ToolbarRoot>>;
 };
-declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | keyof React.ClassAttributes<HTMLDivElement>>, {}>;
+declare const ToolbarRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}>;
 /**
  * The top level Toolbar component that provides context to child components.
  * It renders a styled `<div />` element.

package/components/virtualization/GridVirtualScroller.js

@@ -11,12 +11,12 @@ var React = _interopRequireWildcard(require("react"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
+var _rows = require("../../hooks/features/rows");
 var _GridScrollArea = require("../GridScrollArea");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
-var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
 var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _gridClasses = require("../../constants/gridClasses");
-var _useGridVirtualScroller = require("../../hooks/features/virtualization/useGridVirtualScroller");
 var _useGridOverlays = require("../../hooks/features/overlays/useGridOverlays");
 var _GridHeaders = require("../GridHeaders");
 var _GridMainContainer = require("./GridMainContainer");
@@ -69,7 +69,7 @@ const Scroller = (0, _system.styled)('div', {
 });
 const hasPinnedRightSelector = apiRef => apiRef.current.state.dimensions.rightPinnedWidth > 0;
 function GridVirtualScroller(props) {
-  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const hasScrollY = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollYSelector);
   const hasScrollX = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridHasScrollXSelector);
@@ -85,7 +85,7 @@ function GridVirtualScroller(props) {
     hasPinnedRight
   }, overlaysProps);
   const classes = useUtilityClasses(ownerState);
-  const virtualScroller = (0, _useGridVirtualScroller.useGridVirtualScroller)();
+  const virtualScroller = apiRef.current.virtualizer.api.useVirtualization().getters;
   const {
     getContainerProps,
     getScrollerProps,
@@ -96,7 +96,7 @@ function GridVirtualScroller(props) {
     getRows,
     getScrollAreaProps
   } = virtualScroller;
-  const rows = getRows();
+  const rows = getRows(undefined, (0, _rows.gridRowTreeSelector)(apiRef));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridMainContainer.GridMainContainer, (0, _extends2.default)({
     className: classes.root
   }, getContainerProps(), {

package/constants/dataGridPropsDefaultValues.js

@@ -16,6 +16,7 @@ const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES =
   checkboxSelectionVisibleOnly: false,
   clipboardCopyCellDelimiter: '\t',
   columnBufferPx: 150,
+  columnFilterDebounceMs: 150,
   columnHeaderHeight: 56,
   disableAutosize: false,
   disableColumnFilter: false,

package/esm/DataGrid/DataGrid.js

@@ -126,6 +126,11 @@ DataGridRaw.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/DataGrid/useDataGridComponent.js

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { useGridInitialization } from "../hooks/core/useGridInitialization.js";
+import { useGridVirtualizer } from "../hooks/core/useGridVirtualizer.js";
 import { useGridInitializeState } from "../hooks/utils/useGridInitializeState.js";
 import { useGridClipboard } from "../hooks/features/clipboard/useGridClipboard.js";
 import { columnMenuStateInitializer, useGridColumnMenu } from "../hooks/features/columnMenu/useGridColumnMenu.js";
@@ -65,6 +66,7 @@ export const useDataGridComponent = (apiRef, props) => {
   useGridInitializeState(dimensionsStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
+  useGridVirtualizer(apiRef, props);
   useGridKeyboardNavigation(apiRef, props);
   useGridRowSelection(apiRef, props);
   useGridColumns(apiRef, props);