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

@@ -18,19 +18,17 @@ var _forwardRef = require("@mui/x-internals/forwardRef");
 var _useDataGridPremiumComponent = require("./useDataGridPremiumComponent");
 var _useDataGridPremiumProps = require("./useDataGridPremiumProps");
 var _sidebar = require("../components/sidebar");
-var _GridPivotPanel = require("../components/pivotPanel/GridPivotPanel");
 var _useGridAriaAttributes = require("../hooks/utils/useGridAriaAttributes");
 var _useGridRowAriaAttributes = require("../hooks/features/rows/useGridRowAriaAttributes");
 var _gridAggregationSelectors = require("../hooks/features/aggregation/gridAggregationSelectors");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
-var _gridPivotingSelectors = require("../hooks/features/pivoting/gridPivotingSelectors");
-var _utils = require("../hooks/features/pivoting/utils");
+var _sidebar2 = require("../hooks/features/sidebar");
 var _jsxRuntime = require("react/jsx-runtime");
 const configuration = {
   hooks: {
     useCSSVariables: _material.useMaterialCSSVariables,
-    useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributes,
-    useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributes,
+    useGridAriaAttributes: _useGridAriaAttributes.useGridAriaAttributesPremium,
+    useGridRowAriaAttributes: _useGridRowAriaAttributes.useGridRowAriaAttributesPremium,
     useCellAggregationResult: (id, field) => {
       const apiRef = (0, _useGridApiContext.useGridApiContext)();
       return (0, _xDataGridPro.useGridSelector)(apiRef, _gridAggregationSelectors.gridCellAggregationResultSelector, {
@@ -40,7 +38,7 @@ const configuration = {
     }
   }
 };
-const releaseInfo = "MTc1MzAzODAwMDAwMA==";
+const releaseInfo = "MTc1MzkxMjgwMDAwMA==";
 const watermark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_xLicense.Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -54,13 +52,11 @@ const DataGridPremiumRaw = (0, _forwardRef.forwardRef)(function DataGridPremium(
   const privateApiRef = (0, _internals.useGridApiInitialization)(initialProps.apiRef, initialProps);
   const props = (0, _useDataGridPremiumComponent.useDataGridPremiumComponent)(privateApiRef, initialProps);
   (0, _xLicense.useLicenseVerifier)('x-data-grid-premium', releaseInfo);
-  const pivotSettingsOpen = (0, _xDataGridPro.useGridSelector)(privateApiRef, _gridPivotingSelectors.gridPivotPanelOpenSelector);
   if (process.env.NODE_ENV !== 'production') {
     (0, _internals.validateProps)(props, dataGridPremiumPropValidators);
   }
-  const sidePanel = (0, _utils.isPivotingAvailable)(props) && pivotSettingsOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.Sidebar, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanel.GridPivotPanel, {})
-  }) : null;
+  const sidebarOpen = (0, _xDataGridPro.useGridSelector)(privateApiRef, _sidebar2.gridSidebarOpenSelector);
+  const sidePanel = sidebarOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sidebar.Sidebar, {}) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridContextProvider, {
     privateApiRef: privateApiRef,
     configuration: configuration,
@@ -224,6 +220,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.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.
@@ -895,6 +896,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * Callback fired when the pivot side panel open state changes.
    * @param {boolean} pivotPanelOpen Whether the pivot side panel is visible.
+   * @deprecated Use the `sidebarOpen` and `sidebarClose` events or corresponding event handlers `onSidebarOpen()` and `onSidebarClose()` instead.
    */
   onPivotPanelOpenChange: _propTypes.default.func,
   /**
@@ -996,6 +998,20 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @deprecated Use the {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead.
    */
   onRowsScrollEnd: _propTypes.default.func,
+  /**
+   * Callback fired when the sidebar is closed.
+   * @param {GridSidebarParams} params With all properties from [[GridSidebarParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onSidebarClose: _propTypes.default.func,
+  /**
+   * Callback fired when the sidebar is opened.
+   * @param {GridSidebarParams} params With all properties from [[GridSidebarParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onSidebarOpen: _propTypes.default.func,
   /**
    * Callback fired when the sort model changes before a column is sorted.
    * @param {GridSortModel} model With all properties from [[GridSortModel]].
@@ -1102,6 +1118,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * If `true`, the pivot side panel is visible.
    * @default false
+   * @deprecated Use `initialState.sidebar.open` instead.
    */
   pivotPanelOpen: _propTypes.default.bool,
   /**

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -23,6 +23,7 @@ var _useGridClipboardImport = require("../hooks/features/clipboard/useGridClipbo
 var _useGridPivoting = require("../hooks/features/pivoting/useGridPivoting");
 var _gridPivotingSelectors = require("../hooks/features/pivoting/gridPivotingSelectors");
 var _useGridAiAssistant = require("../hooks/features/aiAssistant/useGridAiAssistant");
+var _useGridSidebar = require("../hooks/features/sidebar/useGridSidebar");
 // Premium-only features
 
 const useDataGridPremiumComponent = (apiRef, inProps) => {
@@ -74,6 +75,7 @@ const useDataGridPremiumComponent = (apiRef, inProps) => {
   (0, _internals.useGridInitializeState)(_internals.detailPanelStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnPinningStateInitializer, apiRef, props, key);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props, key);
+  (0, _internals.useGridInitializeState)(_useGridSidebar.sidebarStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridPivoting.pivotingStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
@@ -95,6 +97,8 @@ const useDataGridPremiumComponent = (apiRef, inProps) => {
   (0, _internals.useGridInitializeState)(_internals.rowsMetaStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.listViewStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridAiAssistant.aiAssistantStateInitializer, apiRef, props);
+  (0, _internals.useGridVirtualizer)(apiRef, props);
+  (0, _useGridSidebar.useGridSidebar)(apiRef, props);
   (0, _useGridPivoting.useGridPivoting)(apiRef, props, inProps.columns, inProps.rows);
   (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props);
   (0, _internals.useGridHeaderFiltering)(apiRef, props);

package/components/GridColumnMenuPivotItem.js

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridColumnMenuPivotItem = GridColumnMenuPivotItem;
 var React = _interopRequireWildcard(require("react"));
 var _xDataGridPro = require("@mui/x-data-grid-pro");
-var _internals = require("@mui/x-data-grid-pro/internals");
+var _gridPivotingSelectors = require("../hooks/features/pivoting/gridPivotingSelectors");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+var _sidebar = require("../hooks/features/sidebar");
 var _jsxRuntime = require("react/jsx-runtime");
 function GridColumnMenuPivotItem(props) {
   const {
@@ -17,10 +18,10 @@ function GridColumnMenuPivotItem(props) {
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
-  const isPivotPanelOpen = (0, _xDataGridPro.useGridSelector)(apiRef, _internals.gridPivotPanelOpenSelector);
+  const isPivotPanelOpen = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotPanelOpenSelector);
   const openPivotSettings = event => {
     onClick(event);
-    apiRef.current.setPivotPanelOpen(true);
+    apiRef.current.showSidebar(_sidebar.GridSidebarValue.Pivot);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
     onClick: openPivotSettings,

package/components/GridDataSourceGroupingCriteriaCell.js

@@ -42,7 +42,9 @@ function GridGroupingCriteriaCellIcon(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();

package/components/pivotPanel/GridPivotPanelHeader.js

@@ -81,7 +81,7 @@ function GridPivotPanelHeader(props) {
         })
       }, rootProps.slotProps?.baseSwitch)), /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseIconButton, (0, _extends2.default)({
         onClick: () => {
-          apiRef.current.setPivotPanelOpen(false);
+          apiRef.current.hideSidebar();
           if (isEmptyPivot) {
             apiRef.current.setPivotActive(false);
           }

package/components/pivotPanel/PivotPanelTrigger.js

@@ -17,6 +17,7 @@ var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
 var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
+var _sidebar = require("../../hooks/features/sidebar");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["render", "className", "onClick", "onPointerUp"];
 /**
@@ -50,7 +51,11 @@ const PivotPanelTrigger = exports.PivotPanelTrigger = (0, _forwardRef.forwardRef
   };
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const handleClick = event => {
-    apiRef.current.setPivotPanelOpen(!open);
+    if (open) {
+      apiRef.current.hideSidebar();
+    } else {
+      apiRef.current.showSidebar(_sidebar.GridSidebarValue.Pivot, panelId, buttonId);
+    }
     onClick?.(event);
   };
   const element = (0, _useComponentRenderer.useComponentRenderer)(rootProps.slots.baseButton, render, (0, _extends2.default)({}, rootProps.slotProps?.baseButton, {

package/components/sidebar/Sidebar.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 export type SidebarProps = React.HTMLAttributes<HTMLDivElement>;
-declare function Sidebar(props: SidebarProps): React.JSX.Element;
+declare function Sidebar(props: SidebarProps): React.JSX.Element | null;
 export { Sidebar };

package/components/sidebar/Sidebar.js

@@ -13,8 +13,10 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
 var _resizablePanel = require("../resizablePanel");
 var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
+var _sidebar = require("../../hooks/features/sidebar");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["className", "children"];
 const useUtilityClasses = ownerState => {
@@ -39,16 +41,30 @@ const SidebarRoot = (0, _system.styled)(_resizablePanel.ResizablePanel, {
 });
 function Sidebar(props) {
   const {
-      className,
-      children
+      className
     } = props,
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
+  const {
+    value,
+    sidebarId,
+    labelId
+  } = (0, _xDataGridPro.useGridSelector)(apiRef, _sidebar.gridSidebarContentSelector);
+  if (!value) {
+    return null;
+  }
+  const sidebarContent = apiRef.current.unstable_applyPipeProcessors('sidebar', null, value);
+  if (!sidebarContent) {
+    return null;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SidebarRoot, (0, _extends2.default)({
+    id: sidebarId,
     className: (0, _clsx.default)(className, classes.root),
-    ownerState: rootProps
+    ownerState: rootProps,
+    "aria-labelledby": labelId
   }, other, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_resizablePanel.ResizablePanelHandle, {}), children]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_resizablePanel.ResizablePanelHandle, {}), sidebarContent]
   }));
 }

package/esm/DataGridPremium/DataGridPremium.js

@@ -11,19 +11,17 @@ import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridPremiumComponent } from "./useDataGridPremiumComponent.js";
 import { useDataGridPremiumProps } from "./useDataGridPremiumProps.js";
 import { Sidebar } from "../components/sidebar/index.js";
-import { GridPivotPanel } from "../components/pivotPanel/GridPivotPanel.js";
-import { useGridAriaAttributes } from "../hooks/utils/useGridAriaAttributes.js";
-import { useGridRowAriaAttributes } from "../hooks/features/rows/useGridRowAriaAttributes.js";
+import { useGridAriaAttributesPremium } from "../hooks/utils/useGridAriaAttributes.js";
+import { useGridRowAriaAttributesPremium } from "../hooks/features/rows/useGridRowAriaAttributes.js";
 import { gridCellAggregationResultSelector } from "../hooks/features/aggregation/gridAggregationSelectors.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
-import { gridPivotPanelOpenSelector } from "../hooks/features/pivoting/gridPivotingSelectors.js";
-import { isPivotingAvailable } from "../hooks/features/pivoting/utils.js";
+import { gridSidebarOpenSelector } from "../hooks/features/sidebar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const configuration = {
   hooks: {
     useCSSVariables: useMaterialCSSVariables,
-    useGridAriaAttributes,
-    useGridRowAriaAttributes,
+    useGridAriaAttributes: useGridAriaAttributesPremium,
+    useGridRowAriaAttributes: useGridRowAriaAttributesPremium,
     useCellAggregationResult: (id, field) => {
       const apiRef = useGridApiContext();
       return useGridSelector(apiRef, gridCellAggregationResultSelector, {
@@ -33,7 +31,7 @@ const configuration = {
     }
   }
 };
-const releaseInfo = "MTc1MzAzODAwMDAwMA==";
+const releaseInfo = "MTc1MzkxMjgwMDAwMA==";
 const watermark = /*#__PURE__*/_jsx(Watermark, {
   packageName: "x-data-grid-premium",
   releaseInfo: releaseInfo
@@ -47,13 +45,11 @@ const DataGridPremiumRaw = forwardRef(function DataGridPremium(inProps, ref) {
   const privateApiRef = useGridApiInitialization(initialProps.apiRef, initialProps);
   const props = useDataGridPremiumComponent(privateApiRef, initialProps);
   useLicenseVerifier('x-data-grid-premium', releaseInfo);
-  const pivotSettingsOpen = useGridSelector(privateApiRef, gridPivotPanelOpenSelector);
   if (process.env.NODE_ENV !== 'production') {
     validateProps(props, dataGridPremiumPropValidators);
   }
-  const sidePanel = isPivotingAvailable(props) && pivotSettingsOpen ? /*#__PURE__*/_jsx(Sidebar, {
-    children: /*#__PURE__*/_jsx(GridPivotPanel, {})
-  }) : null;
+  const sidebarOpen = useGridSelector(privateApiRef, gridSidebarOpenSelector);
+  const sidePanel = sidebarOpen ? /*#__PURE__*/_jsx(Sidebar, {}) : null;
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     configuration: configuration,
@@ -217,6 +213,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.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.
@@ -888,6 +889,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * Callback fired when the pivot side panel open state changes.
    * @param {boolean} pivotPanelOpen Whether the pivot side panel is visible.
+   * @deprecated Use the `sidebarOpen` and `sidebarClose` events or corresponding event handlers `onSidebarOpen()` and `onSidebarClose()` instead.
    */
   onPivotPanelOpenChange: PropTypes.func,
   /**
@@ -989,6 +991,20 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @deprecated Use the {@link https://mui.com/x/react-data-grid/server-side-data/lazy-loading/#infinite-loading Server-side data-Infinite loading} instead.
    */
   onRowsScrollEnd: PropTypes.func,
+  /**
+   * Callback fired when the sidebar is closed.
+   * @param {GridSidebarParams} params With all properties from [[GridSidebarParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onSidebarClose: PropTypes.func,
+  /**
+   * Callback fired when the sidebar is opened.
+   * @param {GridSidebarParams} params With all properties from [[GridSidebarParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onSidebarOpen: PropTypes.func,
   /**
    * Callback fired when the sort model changes before a column is sorted.
    * @param {GridSortModel} model With all properties from [[GridSortModel]].
@@ -1095,6 +1111,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * If `true`, the pivot side panel is visible.
    * @default false
+   * @deprecated Use `initialState.sidebar.open` instead.
    */
   pivotPanelOpen: PropTypes.bool,
   /**

package/esm/DataGridPremium/useDataGridPremiumComponent.js

@@ -2,7 +2,7 @@
 
 import _extends from "@babel/runtime/helpers/esm/extends";
 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, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, useGridInfiniteLoadingIntersection, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer } from '@mui/x-data-grid-pro/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, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, useGridDataSourceLazyLoader, useGridInfiniteLoadingIntersection, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer, propsStateInitializer } from '@mui/x-data-grid-pro/internals';
 import { useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridDataSourcePremium as useGridDataSource } from "../hooks/features/dataSource/useGridDataSourcePremium.js";
 // Premium-only features
@@ -17,6 +17,7 @@ import { useGridClipboardImport } from "../hooks/features/clipboard/useGridClipb
 import { pivotingStateInitializer, useGridPivoting, useGridPivotingExportState } from "../hooks/features/pivoting/useGridPivoting.js";
 import { gridPivotPropsOverridesSelector } from "../hooks/features/pivoting/gridPivotingSelectors.js";
 import { useGridAiAssistant, aiAssistantStateInitializer } from "../hooks/features/aiAssistant/useGridAiAssistant.js";
+import { useGridSidebar, sidebarStateInitializer } from "../hooks/features/sidebar/useGridSidebar.js";
 export const useDataGridPremiumComponent = (apiRef, inProps) => {
   const pivotPropsOverrides = useGridSelector(apiRef, gridPivotPropsOverridesSelector);
   const props = React.useMemo(() => {
@@ -66,6 +67,7 @@ export const useDataGridPremiumComponent = (apiRef, inProps) => {
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props, key);
   useGridInitializeState(columnsStateInitializer, apiRef, props, key);
+  useGridInitializeState(sidebarStateInitializer, apiRef, props);
   useGridInitializeState(pivotingStateInitializer, apiRef, props);
   useGridInitializeState(rowPinningStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
@@ -87,6 +89,8 @@ export const useDataGridPremiumComponent = (apiRef, inProps) => {
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridInitializeState(aiAssistantStateInitializer, apiRef, props);
+  useGridVirtualizer(apiRef, props);
+  useGridSidebar(apiRef, props);
   useGridPivoting(apiRef, props, inProps.columns, inProps.rows);
   useGridRowGrouping(apiRef, props);
   useGridHeaderFiltering(apiRef, props);

package/esm/components/GridColumnMenuPivotItem.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { useGridSelector } from '@mui/x-data-grid-pro';
-import { gridPivotPanelOpenSelector } from '@mui/x-data-grid-pro/internals';
+import { gridPivotPanelOpenSelector } from "../hooks/features/pivoting/gridPivotingSelectors.js";
 import { useGridRootProps } from "../hooks/utils/useGridRootProps.js";
 import { useGridApiContext } from "../hooks/utils/useGridApiContext.js";
+import { GridSidebarValue } from "../hooks/features/sidebar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function GridColumnMenuPivotItem(props) {
   const {
@@ -13,7 +14,7 @@ export function GridColumnMenuPivotItem(props) {
   const isPivotPanelOpen = useGridSelector(apiRef, gridPivotPanelOpenSelector);
   const openPivotSettings = event => {
     onClick(event);
-    apiRef.current.setPivotPanelOpen(true);
+    apiRef.current.showSidebar(GridSidebarValue.Pivot);
   };
   return /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, {
     onClick: openPivotSettings,

package/esm/components/GridDataSourceGroupingCriteriaCell.js

@@ -34,7 +34,9 @@ function GridGroupingCriteriaCellIcon(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();

package/esm/components/pivotPanel/GridPivotPanelHeader.js

@@ -73,7 +73,7 @@ function GridPivotPanelHeader(props) {
         })
       }, rootProps.slotProps?.baseSwitch)), /*#__PURE__*/_jsx(rootProps.slots.baseIconButton, _extends({
         onClick: () => {
-          apiRef.current.setPivotPanelOpen(false);
+          apiRef.current.hideSidebar();
           if (isEmptyPivot) {
             apiRef.current.setPivotActive(false);
           }

package/esm/components/pivotPanel/PivotPanelTrigger.js

@@ -10,6 +10,7 @@ import { useGridSelector } from '@mui/x-data-grid-pro';
 import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
 import { gridPivotPanelOpenSelector, gridPivotActiveSelector } from "../../hooks/features/pivoting/gridPivotingSelectors.js";
+import { GridSidebarValue } from "../../hooks/features/sidebar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * A button that opens and closes the pivot panel.
@@ -42,7 +43,11 @@ const PivotPanelTrigger = forwardRef(function PivotPanelTrigger(props, ref) {
   };
   const resolvedClassName = typeof className === 'function' ? className(state) : className;
   const handleClick = event => {
-    apiRef.current.setPivotPanelOpen(!open);
+    if (open) {
+      apiRef.current.hideSidebar();
+    } else {
+      apiRef.current.showSidebar(GridSidebarValue.Pivot, panelId, buttonId);
+    }
     onClick?.(event);
   };
   const element = useComponentRenderer(rootProps.slots.baseButton, render, _extends({}, rootProps.slotProps?.baseButton, {

package/esm/components/sidebar/Sidebar.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 export type SidebarProps = React.HTMLAttributes<HTMLDivElement>;
-declare function Sidebar(props: SidebarProps): React.JSX.Element;
+declare function Sidebar(props: SidebarProps): React.JSX.Element | null;
 export { Sidebar };

package/esm/components/sidebar/Sidebar.js

@@ -4,10 +4,12 @@ const _excluded = ["className", "children"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { getDataGridUtilityClass } from '@mui/x-data-grid-pro';
+import { getDataGridUtilityClass, useGridSelector } from '@mui/x-data-grid-pro';
 import composeClasses from '@mui/utils/composeClasses';
+import { useGridApiContext } from "../../hooks/utils/useGridApiContext.js";
 import { ResizablePanel, ResizablePanelHandle } from "../resizablePanel/index.js";
 import { useGridRootProps } from "../../hooks/utils/useGridRootProps.js";
+import { gridSidebarContentSelector } from "../../hooks/features/sidebar/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -31,17 +33,31 @@ const SidebarRoot = styled(ResizablePanel, {
 });
 function Sidebar(props) {
   const {
-      className,
-      children
+      className
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
+  const {
+    value,
+    sidebarId,
+    labelId
+  } = useGridSelector(apiRef, gridSidebarContentSelector);
+  if (!value) {
+    return null;
+  }
+  const sidebarContent = apiRef.current.unstable_applyPipeProcessors('sidebar', null, value);
+  if (!sidebarContent) {
+    return null;
+  }
   return /*#__PURE__*/_jsxs(SidebarRoot, _extends({
+    id: sidebarId,
     className: clsx(className, classes.root),
-    ownerState: rootProps
+    ownerState: rootProps,
+    "aria-labelledby": labelId
   }, other, {
-    children: [/*#__PURE__*/_jsx(ResizablePanelHandle, {}), children]
+    children: [/*#__PURE__*/_jsx(ResizablePanelHandle, {}), sidebarContent]
   }));
 }
 export { Sidebar };

package/esm/hooks/features/aggregation/gridAggregationInterfaces.d.ts

@@ -47,7 +47,7 @@ export interface GridAggregationFunction<V = any, AV = V> {
    * @param {GridApiPremium} api The grid API.
    * @returns {AV} The aggregated value.
    */
-  apply: (params: GridAggregationParams<V>, api: GridApiPremium) => AV | null | undefined;
+  apply: (params: GridAggregationParams<V>, api?: GridApiPremium) => AV | null | undefined;
   /**
    * Label of the aggregation function.
    * Used for adding a label to the footer of the grouping column when this aggregation function is the only one being used.