@mui/x-data-grid-premium 5.15.1 → 5.16.0

package/CHANGELOG.md

@@ -3,6 +3,148 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.16.0
+
+_Aug 25, 2022_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce column grouping for data grid (#5133) @alexfauquette
+
+  You can now group columns using the `columnGroupingModel` prop. This lets you to display more structured data.
+
+  <img src="https://user-images.githubusercontent.com/45398769/186178366-4fba66b2-bf90-4c7a-9d83-940a7fc78704.png" width="800" />
+
+  To enable this feature, add `experimentalFeatures={{ columnGrouping: true }}`.
+  The grouping header can be fully customized.
+  See the [documentation](https://mui.com/x/react-data-grid/column-groups/) to explore everything it has to offer.
+
+- 🐞 Bugfixes
+- 🌏 New locales for pickers thanks to @tesseractjh and @drastus
+
+### `@mui/x-data-grid@v5.16.0` / `@mui/x-data-grid-pro@v5.16.0` / `@mui/x-data-grid-premium@v5.16.0`
+
+#### Changes
+
+- [DataGrid] Implement column grouping (#5133) @alexfauquette
+- [DataGrid] Handle `disableVirtualization` prop change (#5889) @cherniavskii
+- [DataGrid] Improve `GridRowModel` typing (#5734) @cherniavskii
+- [DataGrid] Update deprecation note for `GridColDef` `hide` property (#5886) @cherniavskii
+
+### `@mui/x-date-pickers@v5.0.0-beta.7` / `@mui/x-date-pickers-pro@v5.0.0-beta.7`
+
+#### Changes
+
+- [DatePicker] Fix to pass down `className` prop provided on DatePicker to `renderInput` (#5471) @CruseCtrl
+- [DatePicker] Improve `a11y` support (#5809) @LukasTy
+- [pickers] Add `PaperContent` component slot (#5801) @LukasTy
+- [pickers] Add a breaking change section in the migration guide (#5805) @alexfauquette
+- [pickers] Add new translations to `localeText` (#5143) @alexfauquette
+- [pickers] Document components slots (#4657) @flaviendelangle
+- [pickers] Add new unstable field components (#5504) @flaviendelangle
+- [pickers] Fallback to default `minDate` / `maxDate` when `null` value is passed (#5397) @flaviendelangle
+- [l10n] Add Korean (ko-KR) locale (#5854) @tesseractjh
+- [l10n] Add Polish (pl-PL) locale (#5833) @drastus
+
+### Docs
+
+- [docs] Fix typo in `migration from lab` (#5277) @chuckwired
+- [docs] Use `dayjs` instead of `date-fns` in doc examples (#5481) @flaviendelangle
+
+### Core
+
+- [core] Clarify the scope of the license key used for tests and documentation (#5824) @oliviertassinari
+- [core] Fix Typescript error on field hooks (#5892) @flaviendelangle
+- [core] Memoize `columns` in `useDemoData` hook (#5848) @cherniavskii
+- [core] Remove Firefox from the BrowserStack list (#5874) @DanailH
+- [core] Small changes to the release script (#5840) @m4theushw
+
+## 5.15.3
+
+_Aug 18, 2022_
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.15.3` / `@mui/x-data-grid-pro@v5.15.3` / `@mui/x-data-grid-premium@v5.15.3`
+
+#### Changes
+
+- [DataGrid] Fix <kbd>Enter</kbd> causing Select to re-open when commiting value (#5756) @m4theushw
+- [DataGrid] Fix `GridOverlays` bypassing pointer events (#5674) @philjones88
+
+### `@mui/x-date-pickers@v5.0.0-beta.6` / `@mui/x-date-picker-pro@v5.0.0-beta.6`
+
+#### Changes
+
+- [DatePicker] Support click on day outside of current month (#5768) @alexfauquette
+- [pickers] Extend `PickersActionBarProps` with `DialogActionProps` (#5798) @LukasTy
+
+### Docs
+
+- [docs] Fix API anchor link scroll top (#5795) @oliviertassinari
+- [docs] Fix contradiction in the free trial clause (#5732) @oliviertassinari
+- [docs] Fix default value of the DataGrid `logLevel` prop to false (#5784) @HwangTaehyun
+- [docs] Fix typo on the row height page (#5772) @flaviendelangle
+- [docs] Improve "upgrading plans" documentation. (#5683) @joserodolfofreitas
+- [docs] Link the license docs before pricing (#5726) @oliviertassinari
+- [docs] Update packages README files (#5835) @cherniavskii
+- [docs] Use `InputBase` for pickers inputs (#5597) @cherniavskii
+
+### Core
+
+- [core] Upgrade monorepo (#5771, #5797) @cherniavskii
+- [core] Various TS improvements (#5556) @flaviendelangle
+- [license] Give more context in the missing license (#5731) @oliviertassinari
+- [license] Only log an error type once (#5730) @oliviertassinari
+- [test] Increase timeout to take print screenshot (#5799) @m4theushw
+
+## 5.15.2
+
+_Aug 11, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- ✨ Improve quick filtering with row grouping (#5701) @alexfauquette
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.15.2` / `@mui/x-data-grid-pro@v5.15.2` / `@mui/x-data-grid-premium@v5.15.2`
+
+#### Changes
+
+- [DataGrid] Catch errors if rows freezing is not supported (#5711) @cherniavskii
+- [DataGrid] Preserve cell mode when entering edit mode while commiting (#5686) @m4theushw
+- [DataGridPremium] Let quick filter search in row grouping children (#5701) @alexfauquette
+
+### `@mui/x-date-pickers@v5.0.0-beta.5` / `@mui/x-date-picker-pro@5.0.0-beta.5`
+
+#### Changes
+
+- [pickers] Add `react-dom` to peerDependencies (#5752) @cherniavskii
+- [TimePicker] Set clock focus outline to `none` (#5758) @LukasTy
+- [pickers] Fix theme augmentation with TypeScript (#5596) @alexfauquette
+- [pickers] Reset input value when locale is modified (#5310) @alexfauquette
+- [pickers] Support `disableHighlightToday` on `MonthPicker` and `YearPicker` (#5562) @flaviendelangle
+- [pickers] Fallback to desktop mode when `matchMedia` is unavailable (#5684) @LukasTy
+- [pickers] Trigger `onChange` when clearing or accepting `Invalid date` (#5740) @LukasTy
+
+### Docs
+
+- [docs] Add RFC GH issue template (#5739) @bytasv
+- [docs] Add description to the `GridExportStateParams` page (#5654) @oliviertassinari
+- [docs] Improve the Events page (#5413) @flaviendelangle
+- [docs] Use new editing API in the introduction demos (#5728) @oliviertassinari
+
+### Core
+
+- [core] Remove duplicated `FUNDING.yml` file (#5656) @oliviertassinari
+- [core] Remove outdated Next.js options (#5727) @oliviertassinari
+- [core] Update tooling to run with React 18 (#4155) @m4theushw
+- [test] Fix failing dynamic row height tests on Edge (#5707) @m4theushw
+
 ## 5.15.1
 
 _Aug 4, 2022_

package/DataGridPremium/DataGridPremium.js

@@ -124,6 +124,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -305,6 +306,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     aggregation: PropTypes.bool,
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -517,7 +519,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
 
@@ -875,7 +877,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: PropTypes.func,
 

package/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridColumnGroupingPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping } from '@mui/x-data-grid-pro/internals';
 // Premium-only features
 import { useGridAggregation, aggregationStateInitializer } from '../hooks/features/aggregation/useGridAggregation';
 import { useGridAggregationPreProcessors } from '../hooks/features/aggregation/useGridAggregationPreProcessors';
@@ -13,6 +13,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
@@ -59,6 +60,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/README.md

@@ -1,4 +1,4 @@
-# @mui/x-data-grid-pro
+# @mui/x-data-grid-premium
 
 This package is the Premium plan edition of the data grid component.
 It's part of MUI X, an open core extension of MUI, with advanced components.
@@ -21,7 +21,8 @@ This component has the following peer dependencies that you will need to install
 "peerDependencies": {
   "@mui/material": "^5.4.1",
   "@mui/system": "^5.4.1",
-  "react": "^17.0.2 || ^18.0.0"
+  "react": "^17.0.2 || ^18.0.0",
+  "react-dom": "^17.0.2 || ^18.0.0"
 },
 ```
 

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -66,11 +66,6 @@ const getLeafProperties = leafColDef => {
         }
 
         return params => {
-          // We only want to filter leaves
-          if (params.rowNode.groupingField != null) {
-            return true;
-          }
-
           return originalFn(params);
         };
       }
@@ -109,11 +104,6 @@ const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
         }
 
         return params => {
-          // We only want to filter the groups of the current grouping criteria
-          if (params.rowNode.groupingField !== groupedByColDef.field) {
-            return true;
-          }
-
           return originalFn(params);
         };
       }

package/hooks/features/rowGrouping/gridRowGroupingUtils.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridRowTreeConfig, GridFilterState } from '@mui/x-data-grid-pro';
+import { GridRowTreeConfig, GridFilterState, GridFilterModel } from '@mui/x-data-grid-pro';
 import { GridAggregatedFilterItemApplier } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridRowGroupingModel } from './gridRowGroupingInterfaces';
@@ -13,6 +13,7 @@ export declare const isGroupingColumn: (field: string) => boolean;
 interface FilterRowTreeFromTreeDataParams {
     rowTree: GridRowTreeConfig;
     isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
+    filterModel: GridFilterModel;
 }
 /**
  * A leaf is visible if it passed the filter

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { passFilterLogic } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
 export const ROW_GROUPING_STRATEGY = 'grouping-columns';
@@ -42,48 +43,56 @@ const shouldApplyFilterItemOnGroup = (columnField, node) => {
 export const filterRowTreeFromGroupingColumns = params => {
   const {
     rowTree,
-    isRowMatchingFilters
+    isRowMatchingFilters,
+    filterModel
   } = params;
   const visibleRowsLookup = {};
   const filteredRowsLookup = {};
   const filteredDescendantCountLookup = {};
 
-  const filterTreeNode = (node, areAncestorsPassingChildren, areAncestorsExpanded) => {
-    var _node$children, _node$children2;
+  const filterTreeNode = (node, areAncestorsExpanded, ancestorsResults) => {
+    var _node$children;
 
-    let isMatchingFilters;
+    let isPassingFiltering = false;
+    let filterResults = {
+      passingFilterItems: null,
+      passingQuickFilterValues: null
+    };
 
-    if (!isRowMatchingFilters) {
-      isMatchingFilters = true;
-    } else {
+    if (isRowMatchingFilters && node.position !== 'footer') {
       const shouldApplyItem = node.isAutoGenerated ? columnField => shouldApplyFilterItemOnGroup(columnField, node) : undefined;
-      isMatchingFilters = isRowMatchingFilters(node.id, shouldApplyItem);
+      filterResults = isRowMatchingFilters(node.id, shouldApplyItem);
+    } else {
+      isPassingFiltering = true;
     }
 
     let filteredDescendantCount = 0;
     (_node$children = node.children) == null ? void 0 : _node$children.forEach(childId => {
       const childNode = rowTree[childId];
-      const childSubTreeSize = filterTreeNode(childNode, areAncestorsPassingChildren && isMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+      const childSubTreeSize = filterTreeNode(childNode, areAncestorsExpanded && !!node.childrenExpanded, [...ancestorsResults, filterResults]);
       filteredDescendantCount += childSubTreeSize;
     });
-    let shouldPassFilters;
 
-    if (!areAncestorsPassingChildren) {
-      shouldPassFilters = false;
-    } else if ((_node$children2 = node.children) != null && _node$children2.length) {
-      shouldPassFilters = isMatchingFilters && filteredDescendantCount > 0;
-    } else {
-      shouldPassFilters = isMatchingFilters;
+    if (isPassingFiltering === false) {
+      var _node$children2;
+
+      if ((_node$children2 = node.children) != null && _node$children2.length) {
+        // If node has children - it's passing if at least one child passes filters
+        isPassingFiltering = filteredDescendantCount > 0;
+      } else {
+        const allResults = [...ancestorsResults, filterResults];
+        isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel);
+      }
     }
 
-    visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
-    filteredRowsLookup[node.id] = shouldPassFilters;
+    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
+    filteredRowsLookup[node.id] = isPassingFiltering;
 
     if (node.footerId != null) {
-      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
+      visibleRowsLookup[node.footerId] = isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
     }
 
-    if (!shouldPassFilters) {
+    if (!isPassingFiltering) {
       return 0;
     }
 
@@ -102,7 +111,7 @@ export const filterRowTreeFromGroupingColumns = params => {
     const node = nodes[i];
 
     if (node.depth === 0) {
-      filterTreeNode(node, true, true);
+      filterTreeNode(node, true, []);
     }
   }
 

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -136,7 +136,8 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
     const rowTree = gridRowTreeSelector(apiRef);
     return filterRowTreeFromGroupingColumns({
       rowTree,
-      isRowMatchingFilters: params.isRowMatchingFilters
+      isRowMatchingFilters: params.isRowMatchingFilters,
+      filterModel: params.filterModel
     });
   }, [apiRef]);
   const sortRows = React.useCallback(params => {

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.1
+/** @license MUI v5.16.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/DataGridPremium/DataGridPremium.js

@@ -124,6 +124,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -305,6 +306,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     aggregation: PropTypes.bool,
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -517,7 +519,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
 
@@ -875,7 +877,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: PropTypes.func,
 

package/legacy/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridColumnGroupingPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping } from '@mui/x-data-grid-pro/internals';
 // Premium-only features
 import { useGridAggregation, aggregationStateInitializer } from '../hooks/features/aggregation/useGridAggregation';
 import { useGridAggregationPreProcessors } from '../hooks/features/aggregation/useGridAggregationPreProcessors';
@@ -13,6 +13,7 @@ export var useDataGridPremiumComponent = function useDataGridPremiumComponent(in
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
@@ -59,6 +60,7 @@ export var useDataGridPremiumComponent = function useDataGridPremiumComponent(in
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/legacy/hooks/features/rowGrouping/createGroupingColDef.js

@@ -68,11 +68,6 @@ var getLeafProperties = function getLeafProperties(leafColDef) {
           }
 
           return function (params) {
-            // We only want to filter leaves
-            if (params.rowNode.groupingField != null) {
-              return true;
-            }
-
             return originalFn(params);
           };
         }
@@ -113,11 +108,6 @@ var getGroupingCriteriaProperties = function getGroupingCriteriaProperties(group
           }
 
           return function (params) {
-            // We only want to filter the groups of the current grouping criteria
-            if (params.rowNode.groupingField !== groupedByColDef.field) {
-              return true;
-            }
-
             return originalFn(params);
           };
         }

package/legacy/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,4 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import { passFilterLogic } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 export var GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
 export var ROW_GROUPING_STRATEGY = 'grouping-columns';
@@ -43,49 +45,61 @@ var shouldApplyFilterItemOnGroup = function shouldApplyFilterItemOnGroup(columnF
 
 export var filterRowTreeFromGroupingColumns = function filterRowTreeFromGroupingColumns(params) {
   var rowTree = params.rowTree,
-      isRowMatchingFilters = params.isRowMatchingFilters;
+      isRowMatchingFilters = params.isRowMatchingFilters,
+      filterModel = params.filterModel;
   var visibleRowsLookup = {};
   var filteredRowsLookup = {};
   var filteredDescendantCountLookup = {};
 
-  var filterTreeNode = function filterTreeNode(node, areAncestorsPassingChildren, areAncestorsExpanded) {
-    var _node$children, _node$children2;
+  var filterTreeNode = function filterTreeNode(node, areAncestorsExpanded, ancestorsResults) {
+    var _node$children;
 
-    var isMatchingFilters;
+    var isPassingFiltering = false;
+    var filterResults = {
+      passingFilterItems: null,
+      passingQuickFilterValues: null
+    };
 
-    if (!isRowMatchingFilters) {
-      isMatchingFilters = true;
-    } else {
+    if (isRowMatchingFilters && node.position !== 'footer') {
       var shouldApplyItem = node.isAutoGenerated ? function (columnField) {
         return shouldApplyFilterItemOnGroup(columnField, node);
       } : undefined;
-      isMatchingFilters = isRowMatchingFilters(node.id, shouldApplyItem);
+      filterResults = isRowMatchingFilters(node.id, shouldApplyItem);
+    } else {
+      isPassingFiltering = true;
     }
 
     var filteredDescendantCount = 0;
     (_node$children = node.children) == null ? void 0 : _node$children.forEach(function (childId) {
       var childNode = rowTree[childId];
-      var childSubTreeSize = filterTreeNode(childNode, areAncestorsPassingChildren && isMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+      var childSubTreeSize = filterTreeNode(childNode, areAncestorsExpanded && !!node.childrenExpanded, [].concat(_toConsumableArray(ancestorsResults), [filterResults]));
       filteredDescendantCount += childSubTreeSize;
     });
-    var shouldPassFilters;
 
-    if (!areAncestorsPassingChildren) {
-      shouldPassFilters = false;
-    } else if ((_node$children2 = node.children) != null && _node$children2.length) {
-      shouldPassFilters = isMatchingFilters && filteredDescendantCount > 0;
-    } else {
-      shouldPassFilters = isMatchingFilters;
+    if (isPassingFiltering === false) {
+      var _node$children2;
+
+      if ((_node$children2 = node.children) != null && _node$children2.length) {
+        // If node has children - it's passing if at least one child passes filters
+        isPassingFiltering = filteredDescendantCount > 0;
+      } else {
+        var allResults = [].concat(_toConsumableArray(ancestorsResults), [filterResults]);
+        isPassingFiltering = passFilterLogic(allResults.map(function (result) {
+          return result.passingFilterItems;
+        }), allResults.map(function (result) {
+          return result.passingQuickFilterValues;
+        }), filterModel);
+      }
     }
 
-    visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
-    filteredRowsLookup[node.id] = shouldPassFilters;
+    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
+    filteredRowsLookup[node.id] = isPassingFiltering;
 
     if (node.footerId != null) {
-      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
+      visibleRowsLookup[node.footerId] = isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
     }
 
-    if (!shouldPassFilters) {
+    if (!isPassingFiltering) {
       return 0;
     }
 
@@ -104,7 +118,7 @@ export var filterRowTreeFromGroupingColumns = function filterRowTreeFromGrouping
     var node = nodes[i];
 
     if (node.depth === 0) {
-      filterTreeNode(node, true, true);
+      filterTreeNode(node, true, []);
     }
   }
 

package/legacy/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -146,7 +146,8 @@ export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProce
     var rowTree = gridRowTreeSelector(apiRef);
     return filterRowTreeFromGroupingColumns({
       rowTree: rowTree,
-      isRowMatchingFilters: params.isRowMatchingFilters
+      isRowMatchingFilters: params.isRowMatchingFilters,
+      filterModel: params.filterModel
     });
   }, [apiRef]);
   var sortRows = React.useCallback(function (params) {

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.1
+/** @license MUI v5.16.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/utils/releaseInfo.js

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

package/modern/DataGridPremium/DataGridPremium.js

@@ -124,6 +124,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -305,6 +306,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   experimentalFeatures: PropTypes.shape({
     aggregation: PropTypes.bool,
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -517,7 +519,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: PropTypes.oneOf(['debug', 'error', 'info', 'warn', false]),
 
@@ -875,7 +877,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: PropTypes.func,
 

package/modern/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridColumnGroupingPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping } from '@mui/x-data-grid-pro/internals';
 // Premium-only features
 import { useGridAggregation, aggregationStateInitializer } from '../hooks/features/aggregation/useGridAggregation';
 import { useGridAggregationPreProcessors } from '../hooks/features/aggregation/useGridAggregationPreProcessors';
@@ -11,6 +11,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
@@ -57,6 +58,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/modern/hooks/features/rowGrouping/createGroupingColDef.js

@@ -63,11 +63,6 @@ const getLeafProperties = leafColDef => ({
       }
 
       return params => {
-        // We only want to filter leaves
-        if (params.rowNode.groupingField != null) {
-          return true;
-        }
-
         return originalFn(params);
       };
     }
@@ -103,11 +98,6 @@ const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
         }
 
         return params => {
-          // We only want to filter the groups of the current grouping criteria
-          if (params.rowNode.groupingField !== groupedByColDef.field) {
-            return true;
-          }
-
           return originalFn(params);
         };
       }

package/modern/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import { passFilterLogic } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 export const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
 export const ROW_GROUPING_STRATEGY = 'grouping-columns';
@@ -42,46 +43,52 @@ const shouldApplyFilterItemOnGroup = (columnField, node) => {
 export const filterRowTreeFromGroupingColumns = params => {
   const {
     rowTree,
-    isRowMatchingFilters
+    isRowMatchingFilters,
+    filterModel
   } = params;
   const visibleRowsLookup = {};
   const filteredRowsLookup = {};
   const filteredDescendantCountLookup = {};
 
-  const filterTreeNode = (node, areAncestorsPassingChildren, areAncestorsExpanded) => {
-    let isMatchingFilters;
+  const filterTreeNode = (node, areAncestorsExpanded, ancestorsResults) => {
+    let isPassingFiltering = false;
+    let filterResults = {
+      passingFilterItems: null,
+      passingQuickFilterValues: null
+    };
 
-    if (!isRowMatchingFilters) {
-      isMatchingFilters = true;
-    } else {
+    if (isRowMatchingFilters && node.position !== 'footer') {
       const shouldApplyItem = node.isAutoGenerated ? columnField => shouldApplyFilterItemOnGroup(columnField, node) : undefined;
-      isMatchingFilters = isRowMatchingFilters(node.id, shouldApplyItem);
+      filterResults = isRowMatchingFilters(node.id, shouldApplyItem);
+    } else {
+      isPassingFiltering = true;
     }
 
     let filteredDescendantCount = 0;
     node.children?.forEach(childId => {
       const childNode = rowTree[childId];
-      const childSubTreeSize = filterTreeNode(childNode, areAncestorsPassingChildren && isMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+      const childSubTreeSize = filterTreeNode(childNode, areAncestorsExpanded && !!node.childrenExpanded, [...ancestorsResults, filterResults]);
       filteredDescendantCount += childSubTreeSize;
     });
-    let shouldPassFilters;
 
-    if (!areAncestorsPassingChildren) {
-      shouldPassFilters = false;
-    } else if (node.children?.length) {
-      shouldPassFilters = isMatchingFilters && filteredDescendantCount > 0;
-    } else {
-      shouldPassFilters = isMatchingFilters;
+    if (isPassingFiltering === false) {
+      if (node.children?.length) {
+        // If node has children - it's passing if at least one child passes filters
+        isPassingFiltering = filteredDescendantCount > 0;
+      } else {
+        const allResults = [...ancestorsResults, filterResults];
+        isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel);
+      }
     }
 
-    visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
-    filteredRowsLookup[node.id] = shouldPassFilters;
+    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
+    filteredRowsLookup[node.id] = isPassingFiltering;
 
     if (node.footerId != null) {
-      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
+      visibleRowsLookup[node.footerId] = isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
     }
 
-    if (!shouldPassFilters) {
+    if (!isPassingFiltering) {
       return 0;
     }
 
@@ -100,7 +107,7 @@ export const filterRowTreeFromGroupingColumns = params => {
     const node = nodes[i];
 
     if (node.depth === 0) {
-      filterTreeNode(node, true, true);
+      filterTreeNode(node, true, []);
     }
   }
 

package/modern/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -136,7 +136,8 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
     const rowTree = gridRowTreeSelector(apiRef);
     return filterRowTreeFromGroupingColumns({
       rowTree,
-      isRowMatchingFilters: params.isRowMatchingFilters
+      isRowMatchingFilters: params.isRowMatchingFilters,
+      filterModel: params.filterModel
     });
   }, [apiRef]);
   const sortRows = React.useCallback(params => {

package/modern/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.1
+/** @license MUI v5.16.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/modern/utils/releaseInfo.js

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

package/node/DataGridPremium/DataGridPremium.js

@@ -147,6 +147,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @default 3
    */
   columnBuffer: _propTypes.default.number,
+  columnGroupingModel: _propTypes.default.arrayOf(_propTypes.default.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -328,6 +329,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   experimentalFeatures: _propTypes.default.shape({
     aggregation: _propTypes.default.bool,
+    columnGrouping: _propTypes.default.bool,
     newEditingApi: _propTypes.default.bool,
     preventCommitWhileValidating: _propTypes.default.bool,
     rowPinning: _propTypes.default.bool,
@@ -540,7 +542,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
 
   /**
    * Allows to pass the logging level or false to turn off logging.
-   * @default "debug"
+   * @default "error" ("warn" in dev mode)
    */
   logLevel: _propTypes.default.oneOf(['debug', 'error', 'info', 'warn', false]),
 
@@ -898,7 +900,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * @param {GridState} state The new state.
    * @param {MuiEvent<{}>} event The event object.
    * @param {GridCallbackDetails} details Additional details for this callback.
-   * @internal
+   * @ignore - do not document.
    */
   onStateChange: _propTypes.default.func,
 

package/node/DataGridPremium/useDataGridPremiumComponent.js

@@ -26,6 +26,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
    * Register all pre-processors called during state initialization here.
    */
 
+  (0, _internals.useGridColumnGroupingPreProcessors)(apiRef, props);
   (0, _internals.useGridSelectionPreProcessors)(apiRef, props);
   (0, _internals.useGridRowReorderPreProcessors)(apiRef, props);
   (0, _useGridRowGroupingPreProcessors.useGridRowGroupingPreProcessors)(apiRef, props);
@@ -72,6 +73,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridParamsApi)(apiRef);
   (0, _internals.useGridDetailPanel)(apiRef, props);
   (0, _internals.useGridColumnSpanning)(apiRef);
+  (0, _internals.useGridColumnGrouping)(apiRef, props);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _internals.useGridEditing_new : _internals.useGridEditing_old;
   useGridEditing(apiRef, props);
   (0, _internals.useGridFocus)(apiRef, props);

package/node/hooks/features/rowGrouping/createGroupingColDef.js

@@ -88,11 +88,6 @@ const getLeafProperties = leafColDef => {
         }
 
         return params => {
-          // We only want to filter leaves
-          if (params.rowNode.groupingField != null) {
-            return true;
-          }
-
           return originalFn(params);
         };
       }
@@ -131,11 +126,6 @@ const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
         }
 
         return params => {
-          // We only want to filter the groups of the current grouping criteria
-          if (params.rowNode.groupingField !== groupedByColDef.field) {
-            return true;
-          }
-
           return originalFn(params);
         };
       }

package/node/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -9,6 +9,8 @@ exports.setStrategyAvailability = exports.mergeStateWithRowGroupingModel = expor
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _internals = require("@mui/x-data-grid-pro/internals");
+
 var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
 
 const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
@@ -64,48 +66,56 @@ const shouldApplyFilterItemOnGroup = (columnField, node) => {
 const filterRowTreeFromGroupingColumns = params => {
   const {
     rowTree,
-    isRowMatchingFilters
+    isRowMatchingFilters,
+    filterModel
   } = params;
   const visibleRowsLookup = {};
   const filteredRowsLookup = {};
   const filteredDescendantCountLookup = {};
 
-  const filterTreeNode = (node, areAncestorsPassingChildren, areAncestorsExpanded) => {
-    var _node$children, _node$children2;
+  const filterTreeNode = (node, areAncestorsExpanded, ancestorsResults) => {
+    var _node$children;
 
-    let isMatchingFilters;
+    let isPassingFiltering = false;
+    let filterResults = {
+      passingFilterItems: null,
+      passingQuickFilterValues: null
+    };
 
-    if (!isRowMatchingFilters) {
-      isMatchingFilters = true;
-    } else {
+    if (isRowMatchingFilters && node.position !== 'footer') {
       const shouldApplyItem = node.isAutoGenerated ? columnField => shouldApplyFilterItemOnGroup(columnField, node) : undefined;
-      isMatchingFilters = isRowMatchingFilters(node.id, shouldApplyItem);
+      filterResults = isRowMatchingFilters(node.id, shouldApplyItem);
+    } else {
+      isPassingFiltering = true;
     }
 
     let filteredDescendantCount = 0;
     (_node$children = node.children) == null ? void 0 : _node$children.forEach(childId => {
       const childNode = rowTree[childId];
-      const childSubTreeSize = filterTreeNode(childNode, areAncestorsPassingChildren && isMatchingFilters, areAncestorsExpanded && !!node.childrenExpanded);
+      const childSubTreeSize = filterTreeNode(childNode, areAncestorsExpanded && !!node.childrenExpanded, [...ancestorsResults, filterResults]);
       filteredDescendantCount += childSubTreeSize;
     });
-    let shouldPassFilters;
 
-    if (!areAncestorsPassingChildren) {
-      shouldPassFilters = false;
-    } else if ((_node$children2 = node.children) != null && _node$children2.length) {
-      shouldPassFilters = isMatchingFilters && filteredDescendantCount > 0;
-    } else {
-      shouldPassFilters = isMatchingFilters;
+    if (isPassingFiltering === false) {
+      var _node$children2;
+
+      if ((_node$children2 = node.children) != null && _node$children2.length) {
+        // If node has children - it's passing if at least one child passes filters
+        isPassingFiltering = filteredDescendantCount > 0;
+      } else {
+        const allResults = [...ancestorsResults, filterResults];
+        isPassingFiltering = (0, _internals.passFilterLogic)(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel);
+      }
     }
 
-    visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
-    filteredRowsLookup[node.id] = shouldPassFilters;
+    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
+    filteredRowsLookup[node.id] = isPassingFiltering;
 
     if (node.footerId != null) {
-      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
+      visibleRowsLookup[node.footerId] = isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
     }
 
-    if (!shouldPassFilters) {
+    if (!isPassingFiltering) {
       return 0;
     }
 
@@ -124,7 +134,7 @@ const filterRowTreeFromGroupingColumns = params => {
     const node = nodes[i];
 
     if (node.depth === 0) {
-      filterTreeNode(node, true, true);
+      filterTreeNode(node, true, []);
     }
   }
 

package/node/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -156,7 +156,8 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
     const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
     return (0, _gridRowGroupingUtils.filterRowTreeFromGroupingColumns)({
       rowTree,
-      isRowMatchingFilters: params.isRowMatchingFilters
+      isRowMatchingFilters: params.isRowMatchingFilters,
+      filterModel: params.filterModel
     });
   }, [apiRef]);
   const sortRows = React.useCallback(params => {

package/node/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.1
+/** @license MUI v5.16.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/node/utils/releaseInfo.js

@@ -8,7 +8,7 @@ exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY1OTU2NDAwMDAwMA==";
+  const releaseInfo = "MTY2MTM3ODQwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "5.15.1",
+  "version": "5.16.0",
   "description": "The Premium plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -31,11 +31,11 @@
     "directory": "packages/grid/x-data-grid-premium"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
-    "@mui/utils": "^5.4.1",
-    "@mui/x-data-grid": "5.15.1",
-    "@mui/x-data-grid-pro": "5.15.1",
-    "@mui/x-license-pro": "5.15.0",
+    "@babel/runtime": "^7.18.9",
+    "@mui/utils": "^5.9.3",
+    "@mui/x-data-grid": "5.16.0",
+    "@mui/x-data-grid-pro": "5.16.0",
+    "@mui/x-license-pro": "5.16.0",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.2.1",
     "exceljs": "^4.3.0",

package/utils/releaseInfo.js

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