@mui/x-data-grid-premium 6.5.0 → 6.6.0

package/CHANGELOG.md

@@ -3,6 +3,82 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.6.0
+
+_Jun 1, 2023_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 New date time picking UI on [`DesktopDateTimePicker`](https://mui.com/x/react-date-pickers/date-time-picker/)
+
+  <img src="https://user-images.githubusercontent.com/4941090/242533399-2b106390-8158-4aba-9ca4-b621c6310977.gif" width="628" />
+
+- 🚀 Performance improvements
+- 🐞 Bugfixes
+- 📚 Documentation improvements
+- 🌍 Improve Dutch (nl-NL) and French (fr-FR) locales on the data grid
+- 🌍 Add Vietnamese (vi-VN) locale on the pickers
+
+### `@mui/x-data-grid@v6.6.0` / `@mui/x-data-grid-pro@v6.6.0` / `@mui/x-data-grid-premium@v6.6.0`
+
+#### Changes
+
+- [DataGrid] Support data attributes (#8845) @romgrk
+- [DataGrid] Avoid allocations in `hydrateRowsMeta` (#9121) @romgrk
+- [DataGrid] Fix filter input select accessibility (#9018) @Jul13nT
+- [DataGrid] Fix accessibility issues in panels and toolbar buttons (#8862) @romgrk
+- [DataGrid] Fix `onCellEditStop` not invoked (#8857) @romgrk
+- [DataGridPro] Fix auto-scroll when reordering columns (#8856) @m4theushw
+- [DataGridPro] Fix row ID type casting in detail panels lookup (#8976) @minchaej
+- [DataGridPro] Emit `columnWidthChange` event on `touchEnd` of column resize (#8669) @MBilalShafi
+- [DataGridPro] Do not apply filters on `rowExpansionChange` (#8671) @cherniavskii
+- [DataGridPro] Prevent click event on sorting after a resize (#9117) @romgrk
+- [DataGridPremium] Improve Excel export interface (#9128) @TiagoPortfolio
+- [l10n] Improve Dutch (nl-NL) locale (#9043) @thedutchruben
+- [l10n] Improve French (fr-FR) locale (#9109) @Jul13nT
+
+### `@mui/x-date-pickers@v6.6.0` / `@mui/x-date-pickers-pro@v6.6.0`
+
+#### Changes
+
+- [fields] Allow to explicitly define the reference value and improve its default value (#9019) @flaviendelangle
+- [l10n] Add Vietnamese (vi-VN) locale (#9099) @nhannt201
+- [pickers] Add `DigitalClock` to `DesktopDateTimePicker` (#8946) @LukasTy
+- [pickers] Add support for timezones on the adapters (#9068) @flaviendelangle
+- [pickers] Fix `MonthCalendar` and `YearCalendar` disabled validation (#9149) @LukasTy
+- [pickers] Fix bug when fields have a unique section (#9110) @alexfauquette
+- [pickers] Fix focus jumping on Safari (#9072) @LukasTy
+- [pickers] Use the locale start of the week in `getWeekArray` (#9176) @flaviendelangle
+
+### Docs
+
+- [docs] Add single input range picker demo (#9159) @LukasTy
+- [docs] Align `DateCalendar` demo views with labels (#9152) @LukasTy
+- [docs] Clarify the peer dependency with React (#9067) @oliviertassinari
+- [docs] Fix Norwegian locale typo (#9168) @LukasTy
+- [docs] Fix column menu item demo (#9071) @MBilalShafi
+- [docs] Improve localization table progress bars (#9033) @noraleonte
+- [docs] Smooth performance animation (#8986) @oliviertassinari
+- [docs] Use responsive time and date time pickers and the views sections (#9127) @flaviendelangle
+- [docs] Reduce layout shift in grid demo (#9132) @oliviertassinari
+- [docs] Fix tree data children lazy-loading demo (#8840) @yaredtsy
+- [docs] Improve filtering docs discoverability (#9074) @MBilalShafi
+
+### Core
+
+- [core] Allow string literals as keys in `localesText` (#9045) @MBilalShafi
+- [core] Fix `randomInt` producing values exceeding `max` value (#9086) @cherniavskii
+- [core] Fix flaky test on `dateWithTimezone` adapter test (#9129) @flaviendelangle
+- [core] Lock `@types/node` on v18 (#9107) @LukasTy
+- [core] Remove `cross-fetch` dependency (#9108) @LukasTy
+- [core] Remove `createDetectElementResize()` replaced with `ResizeObserver` (#9015) @oliviertassinari
+- [core] Upgrade monorepo (#9027) @m4theushw
+- [core] Upgrade monorepo (#9106) @LukasTy
+- [charts] Fix proptypes (#9125) @LukasTy
+- [charts] Generate the charts proptypes (#9010) @alexfauquette
+- [charts] Manage series stacking (#8888) @alexfauquette
+- [license] List side effects in the license package (#9092) @cherniavskii
+
 ## v6.5.0
 
 _May 19, 2023_
@@ -102,7 +178,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 ### Docs
 
-- [docs] Fix date pickers typo in the docs  (#8939) @richbustos
+- [docs] Fix date pickers typo in the docs (#8939) @richbustos
 - [docs] Fix master detail demo (#8894) @m4theushw
 - [docs] Fix typo in clipboard docs (#8971) @MBilalShafi
 - [docs] Reduce list of dependencies in Codesandbox/Stackblitz demos (#8535) @cherniavskii
@@ -4440,7 +4516,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 - 👔 **Excel export**. You can find this new Premium feature at: https://mui.com/x/react-data-grid/export/#excel-export.
 
-- 🔎 **Quick filtering**. You can now add a quick filtering search bar to your grid. To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar. More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/#quick-filter).
+- 🔎 **Quick filtering**. You can now add a quick filtering search bar to your grid. To do so, either pass `showQuickFilter` prop to the `<GridToolbar />` or use the `<GridToolbarQuickFilter />` component in your custom toolbar. More information about how to customize the filtering logic is in the [documentation](https://mui.com/x/react-data-grid/filtering/quick-filter/).
 
   <img src="https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png" width="724">
 

package/DataGridPremium/DataGridPremium.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
@@ -18,11 +19,12 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, {
+    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         VirtualScrollerComponent: DataGridProVirtualScroller,
         ColumnHeadersProps: {
@@ -33,7 +35,7 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
           releaseInfo: releaseInfo
         })
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 export const DataGridPremium = /*#__PURE__*/React.memo(DataGridPremiumRaw);
@@ -286,6 +288,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: PropTypes.object,
   /**
    * Determines the position of an aggregated value.
    * @param {GridGroupNode} groupNode The current group.

package/README.md

@@ -21,8 +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-dom": "^17.0.2 || ^18.0.0"
+  "react": "^17.0.0 || ^18.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0"
 },
 ```
 

package/components/GridAggregationHeader.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnHeaderParams } from '@mui/x-data-grid';
-declare function GridAggregationHeader(props: GridColumnHeaderParams): JSX.Element | null;
+declare function GridAggregationHeader(props: GridColumnHeaderParams): React.JSX.Element | null;
 export { GridAggregationHeader };

package/components/GridColumnMenuAggregationItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
-declare function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps): JSX.Element;
+declare function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps): React.JSX.Element;
 declare namespace GridColumnMenuAggregationItem {
     var propTypes: any;
 }

package/components/GridColumnMenuRowGroupItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
-declare function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuRowGroupItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuRowGroupItem {
     var propTypes: any;
 }

package/components/GridColumnMenuRowUngroupItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
-declare function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps): JSX.Element | null;
+declare function GridColumnMenuRowUngroupItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 declare namespace GridColumnMenuRowUngroupItem {
     var propTypes: any;
 }

package/components/GridExcelExportMenuItem.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridExportMenuItemProps } from '@mui/x-data-grid-pro';
 import { GridExcelExportOptions } from '../hooks/features/export';
 export type GridExcelExportMenuItemProps = GridExportMenuItemProps<GridExcelExportOptions>;
-declare function GridExcelExportMenuItem(props: GridExcelExportMenuItemProps): JSX.Element;
+declare function GridExcelExportMenuItem(props: GridExcelExportMenuItemProps): React.JSX.Element;
 declare namespace GridExcelExportMenuItem {
     var propTypes: any;
 }

package/components/GridFooterCell.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridRenderCellParams } from '@mui/x-data-grid';
 import { Theme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 interface GridFooterCellProps extends GridRenderCellParams {
     sx?: SxProps<Theme>;
 }
-declare function GridFooterCell(props: GridFooterCellProps): JSX.Element;
+declare function GridFooterCell(props: GridFooterCellProps): React.JSX.Element;
 export { GridFooterCell };

package/components/GridGroupingColumnFooterCell.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridRenderCellParams } from '@mui/x-data-grid-pro';
-declare function GridGroupingColumnFooterCell(props: GridRenderCellParams): JSX.Element;
+declare function GridGroupingColumnFooterCell(props: GridRenderCellParams): React.JSX.Element;
 export { GridGroupingColumnFooterCell };

package/components/GridGroupingColumnLeafCell.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridRenderCellParams } from '@mui/x-data-grid-pro';
-declare function GridGroupingColumnLeafCell(props: GridRenderCellParams): JSX.Element;
+declare function GridGroupingColumnLeafCell(props: GridRenderCellParams): React.JSX.Element;
 export { GridGroupingColumnLeafCell };

package/components/GridGroupingCriteriaCell.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { GridRenderCellParams, GridGroupNode } from '@mui/x-data-grid-pro';
 interface GridGroupingCriteriaCellProps extends GridRenderCellParams<any, any, any, GridGroupNode> {
     hideDescendantCount?: boolean;
 }
-export declare function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps): JSX.Element;
+export declare function GridGroupingCriteriaCell(props: GridGroupingCriteriaCellProps): React.JSX.Element;
 export {};

package/components/GridPremiumColumnMenu.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { GridColumnMenuProps, GridColumnMenuItemProps } from '@mui/x-data-grid-pro';
 import { GridColumnMenuAggregationItem } from './GridColumnMenuAggregationItem';
-export declare function GridColumnMenuGroupingItem(props: GridColumnMenuItemProps): JSX.Element | null;
+export declare function GridColumnMenuGroupingItem(props: GridColumnMenuItemProps): React.JSX.Element | null;
 export declare const GRID_COLUMN_MENU_SLOTS_PREMIUM: {
     columnMenuAggregationItem: typeof GridColumnMenuAggregationItem;
     columnMenuGroupingItem: typeof GridColumnMenuGroupingItem;

package/hooks/features/export/gridExcelExportInterface.d.ts

@@ -7,7 +7,7 @@ export interface GridExceljsProcessInput {
     worksheet: Excel.Worksheet;
 }
 export interface ColumnsStylesInterface {
-    [field: string]: Excel.Style;
+    [field: string]: Partial<Excel.Style>;
 }
 /**
  * The options to apply on the Excel export.

package/hooks/features/export/serializer/excelSerializer.d.ts

@@ -22,18 +22,18 @@ export declare const serializeColumn: (column: GridColDef, columnsStyles: Column
     headerText: string;
     width: number;
     style: {
-        numFmt: string;
-        font: Partial<Excel.Font>;
-        alignment: Partial<Excel.Alignment>;
-        protection: Partial<Excel.Protection>;
-        border: Partial<Excel.Borders>;
-        fill: Excel.Fill;
+        numFmt?: string | undefined;
+        font?: Partial<Excel.Font> | undefined;
+        alignment?: Partial<Excel.Alignment> | undefined;
+        protection?: Partial<Excel.Protection> | undefined;
+        border?: Partial<Excel.Borders> | undefined;
+        fill?: Excel.Fill | undefined;
     };
 };
 type SerializedColumns = Array<{
     key: string;
     width: number;
-    style: Excel.Style;
+    style: Partial<Excel.Style>;
     headerText: string;
 }>;
 export declare function serializeColumns(columns: GridStateColDef[], styles: ColumnsStylesInterface): SerializedColumns;

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -40,7 +40,6 @@ export const filterRowTreeFromGroupingColumns = params => {
     isRowMatchingFilters,
     filterModel
   } = params;
-  const visibleRowsLookup = {};
   const filteredRowsLookup = {};
   const filteredDescendantCountLookup = {};
   const filterTreeNode = (node, areAncestorsExpanded, ancestorsResults) => {
@@ -72,13 +71,7 @@ export const filterRowTreeFromGroupingColumns = params => {
         isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel, params.apiRef);
       }
     }
-    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
     filteredRowsLookup[node.id] = isPassingFiltering;
-
-    // TODO rows v6: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
-    if (node.type === 'group' && node.footerId != null) {
-      visibleRowsLookup[node.footerId] = isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
-    }
     if (!isPassingFiltering) {
       return 0;
     }
@@ -96,7 +89,6 @@ export const filterRowTreeFromGroupingColumns = params => {
     }
   }
   return {
-    visibleRowsLookup,
     filteredRowsLookup,
     filteredDescendantCountLookup
   };

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { gridColumnLookupSelector, gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, createRowTree, updateRowTree } from '@mui/x-data-grid-pro/internals';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, createRowTree, updateRowTree, getVisibleRowsLookup } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
 import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability, getCellGroupingCriteria, getGroupingRules } from './gridRowGroupingUtils';
@@ -138,6 +138,7 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTreeForRowGrouping);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.5.0
+ * @mui/x-data-grid-premium v6.6.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/DataGridPremium/DataGridPremium.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
@@ -18,11 +19,12 @@ var DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremium(
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, {
+    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         VirtualScrollerComponent: DataGridProVirtualScroller,
         ColumnHeadersProps: {
@@ -33,7 +35,7 @@ var DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremium(
           releaseInfo: releaseInfo
         })
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 export var DataGridPremium = /*#__PURE__*/React.memo(DataGridPremiumRaw);
@@ -286,6 +288,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: PropTypes.object,
   /**
    * Determines the position of an aggregated value.
    * @param {GridGroupNode} groupNode The current group.

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

@@ -41,7 +41,6 @@ export var filterRowTreeFromGroupingColumns = function filterRowTreeFromGrouping
   var rowTree = params.rowTree,
     isRowMatchingFilters = params.isRowMatchingFilters,
     filterModel = params.filterModel;
-  var visibleRowsLookup = {};
   var filteredRowsLookup = {};
   var filteredDescendantCountLookup = {};
   var filterTreeNode = function filterTreeNode(node, areAncestorsExpanded, ancestorsResults) {
@@ -79,13 +78,7 @@ export var filterRowTreeFromGroupingColumns = function filterRowTreeFromGrouping
         }), filterModel, params.apiRef);
       }
     }
-    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
     filteredRowsLookup[node.id] = isPassingFiltering;
-
-    // TODO rows v6: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
-    if (node.type === 'group' && node.footerId != null) {
-      visibleRowsLookup[node.footerId] = isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
-    }
     if (!isPassingFiltering) {
       return 0;
     }
@@ -103,7 +96,6 @@ export var filterRowTreeFromGroupingColumns = function filterRowTreeFromGrouping
     }
   }
   return {
-    visibleRowsLookup: visibleRowsLookup,
     filteredRowsLookup: filteredRowsLookup,
     filteredDescendantCountLookup: filteredDescendantCountLookup
   };

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

@@ -1,7 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import * as React from 'react';
 import { gridColumnLookupSelector, gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, createRowTree, updateRowTree } from '@mui/x-data-grid-pro/internals';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, createRowTree, updateRowTree, getVisibleRowsLookup } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
 import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability, getCellGroupingCriteria, getGroupingRules } from './gridRowGroupingUtils';
@@ -149,6 +149,7 @@ export var useGridRowGroupingPreProcessors = function useGridRowGroupingPreProce
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTreeForRowGrouping);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.5.0
+ * @mui/x-data-grid-premium v6.6.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/legacy/utils/releaseInfo.js

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

package/modern/DataGridPremium/DataGridPremium.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { useLicenseVerifier, Watermark } from '@mui/x-license-pro';
@@ -18,11 +19,12 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
   return /*#__PURE__*/_jsx(GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/_jsxs(GridRoot, {
+    children: /*#__PURE__*/_jsxs(GridRoot, _extends({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/_jsx(GridHeader, {}), /*#__PURE__*/_jsx(GridBody, {
         VirtualScrollerComponent: DataGridProVirtualScroller,
         ColumnHeadersProps: {
@@ -33,7 +35,7 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
           releaseInfo: releaseInfo
         })
       }), /*#__PURE__*/_jsx(GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 export const DataGridPremium = /*#__PURE__*/React.memo(DataGridPremiumRaw);
@@ -286,6 +288,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     quickFilterLogicOperator: PropTypes.oneOf(['and', 'or']),
     quickFilterValues: PropTypes.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: PropTypes.object,
   /**
    * Determines the position of an aggregated value.
    * @param {GridGroupNode} groupNode The current group.

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

@@ -40,7 +40,6 @@ export const filterRowTreeFromGroupingColumns = params => {
     isRowMatchingFilters,
     filterModel
   } = params;
-  const visibleRowsLookup = {};
   const filteredRowsLookup = {};
   const filteredDescendantCountLookup = {};
   const filterTreeNode = (node, areAncestorsExpanded, ancestorsResults) => {
@@ -72,13 +71,7 @@ export const filterRowTreeFromGroupingColumns = params => {
         isPassingFiltering = passFilterLogic(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel, params.apiRef);
       }
     }
-    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
     filteredRowsLookup[node.id] = isPassingFiltering;
-
-    // TODO rows v6: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
-    if (node.type === 'group' && node.footerId != null) {
-      visibleRowsLookup[node.footerId] = isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
-    }
     if (!isPassingFiltering) {
       return 0;
     }
@@ -96,7 +89,6 @@ export const filterRowTreeFromGroupingColumns = params => {
     }
   }
   return {
-    visibleRowsLookup,
     filteredRowsLookup,
     filteredDescendantCountLookup
   };

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { gridColumnLookupSelector, gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid-pro';
-import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, createRowTree, updateRowTree } from '@mui/x-data-grid-pro/internals';
+import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor, sortRowTree, createRowTree, updateRowTree, getVisibleRowsLookup } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { createGroupingColDefForAllGroupingCriteria, createGroupingColDefForOneGroupingCriteria } from './createGroupingColDef';
 import { filterRowTreeFromGroupingColumns, getColDefOverrides, ROW_GROUPING_STRATEGY, isGroupingColumn, setStrategyAvailability, getCellGroupingCriteria, getGroupingRules } from './gridRowGroupingUtils';
@@ -138,6 +138,7 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTreeForRowGrouping);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'filtering', filterRows);
   useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'sorting', sortRows);
+  useGridRegisterStrategyProcessor(apiRef, ROW_GROUPING_STRATEGY, 'visibleRowsLookupCreation', getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.5.0
+ * @mui/x-data-grid-premium v6.6.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/utils/releaseInfo.js

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

package/node/DataGridPremium/DataGridPremium.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataGridPremium = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _xLicensePro = require("@mui/x-license-pro");
@@ -26,11 +27,12 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridContextProvider, {
     privateApiRef: privateApiRef,
     props: props,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGridPro.GridRoot, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_xDataGridPro.GridRoot, (0, _extends2.default)({
       className: props.className,
       style: props.style,
       sx: props.sx,
-      ref: ref,
+      ref: ref
+    }, props.forwardedProps, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridHeader, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridBody, {
         VirtualScrollerComponent: _internals.DataGridProVirtualScroller,
         ColumnHeadersProps: {
@@ -41,7 +43,7 @@ const DataGridPremiumRaw = /*#__PURE__*/React.forwardRef(function DataGridPremiu
           releaseInfo: releaseInfo
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridFooterPlaceholder, {})]
-    })
+    }))
   });
 });
 const DataGridPremium = /*#__PURE__*/React.memo(DataGridPremiumRaw);
@@ -295,6 +297,11 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     quickFilterLogicOperator: _propTypes.default.oneOf(['and', 'or']),
     quickFilterValues: _propTypes.default.array
   }),
+  /**
+   * Forwarded props for the grid root element.
+   * @ignore - do not document.
+   */
+  forwardedProps: _propTypes.default.object,
   /**
    * Determines the position of an aggregated value.
    * @param {GridGroupNode} groupNode The current group.

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

@@ -52,7 +52,6 @@ const filterRowTreeFromGroupingColumns = params => {
     isRowMatchingFilters,
     filterModel
   } = params;
-  const visibleRowsLookup = {};
   const filteredRowsLookup = {};
   const filteredDescendantCountLookup = {};
   const filterTreeNode = (node, areAncestorsExpanded, ancestorsResults) => {
@@ -84,13 +83,7 @@ const filterRowTreeFromGroupingColumns = params => {
         isPassingFiltering = (0, _internals.passFilterLogic)(allResults.map(result => result.passingFilterItems), allResults.map(result => result.passingQuickFilterValues), filterModel, params.apiRef);
       }
     }
-    visibleRowsLookup[node.id] = isPassingFiltering && areAncestorsExpanded;
     filteredRowsLookup[node.id] = isPassingFiltering;
-
-    // TODO rows v6: Should we keep storing the visibility status of footer independently or rely on the group visibility in the selector ?
-    if (node.type === 'group' && node.footerId != null) {
-      visibleRowsLookup[node.footerId] = isPassingFiltering && areAncestorsExpanded && !!node.childrenExpanded;
-    }
     if (!isPassingFiltering) {
       return 0;
     }
@@ -108,7 +101,6 @@ const filterRowTreeFromGroupingColumns = params => {
     }
   }
   return {
-    visibleRowsLookup,
     filteredRowsLookup,
     filteredDescendantCountLookup
   };

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

@@ -146,6 +146,7 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
   (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTreeForRowGrouping);
   (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'filtering', filterRows);
   (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'sorting', sortRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'visibleRowsLookupCreation', _internals.getVisibleRowsLookup);
 
   /**
    * 1ST RENDER

package/node/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v6.5.0
+ * @mui/x-data-grid-premium v6.6.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/node/utils/releaseInfo.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY4NDQ0MzYwMDAwMA==";
+  const releaseInfo = "MTY4NTU3MDQwMDAwMA==";
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).
     // eslint-disable-next-line no-useless-concat

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-premium",
-  "version": "6.5.0",
+  "version": "6.6.0",
   "description": "The Premium plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -32,10 +32,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.21.0",
-    "@mui/utils": "^5.12.3",
-    "@mui/x-data-grid": "6.5.0",
-    "@mui/x-data-grid-pro": "6.5.0",
-    "@mui/x-license-pro": "6.0.4",
+    "@mui/utils": "^5.13.1",
+    "@mui/x-data-grid": "6.6.0",
+    "@mui/x-data-grid-pro": "6.6.0",
+    "@mui/x-license-pro": "6.6.0",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.2.1",
     "exceljs": "^4.3.0",
@@ -45,8 +45,8 @@
   "peerDependencies": {
     "@mui/material": "^5.4.1",
     "@mui/system": "^5.4.1",
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0"
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "setupFiles": [
     "<rootDir>/src/setupTests.js"

package/utils/releaseInfo.js

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