@mui/x-data-grid-premium 5.11.0 → 5.12.1

package/CHANGELOG.md

@@ -3,21 +3,247 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.12.1
+
+_Jun 9, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add `reason` to `onFilterModelChange` (#4938) @m4theushw
+- 🔎 Control quick filter input value via model prop (#5013) @alexfauquette
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.12.1` / `@mui/x-data-grid-pro@v5.12.1` / `@mui/x-data-grid-premium@v5.12.1`
+
+#### Changes
+
+- [DataGrid] Add `reason` to `onFilterModelChange` (#4938) @m4theushw
+- [DataGrid] Restore focus after dismissing the column menu (#5027) @m4theushw
+- [DataGrid] Update quick filter input when model is modified (#5013) @alexfauquette
+- [DataGrid] Fix implicit dependency on react-dom (#5121) @oliviertassinari
+- [DataGrid] Support `getRowId` in row reordering (#5093) @flaviendelangle
+- [DataGridPro] Fix column resizing in RTL mode (#4989) @cherniavskii
+- [DataGridPro] Fix column resizing on touchscreen (#5056) @cherniavskii
+- [l10n] Update Japanese (ja-JP) locale (#5122) @hikotq
+- [l10n] Update Russian (ru-RU) locale (#5069) @Artboomy
+
+### `@mui/x-date-pickers@5.0.0-alpha.6` / `@mui/x-date-pickers-pro@5.0.0-alpha.6`
+
+#### Changes
+
+- [pickers] Fix usage of `maxDate` / `minDate` / `disableFuture` and `disablePast` (#5081) @flaviendelangle
+- [pickers] Infer mask from `inputFormat` (#5060) @alexfauquette
+- [pickers] Manage input value without using the focus (#4486) @alexfauquette
+- [pickers] Use new localization for doc examples (#5097) @flaviendelangle
+- [pickers] Fix `shouldDisableDate` in range pickers (#5123) @flaviendelangle
+- [l10n] Add Brazilian Portuguese (pt-BR) locale (#5100) @jardelnovaes
+- [l10n] Use `localText` for remaining texts (#4986) @alexfauquette
+
+### Docs
+
+- [docs] Implement the focus management on data grid demo links (#5070) @alexfauquette
+- [docs] Fix `301` link to render cell (#5106) @oliviertassinari
+- [docs] Fix broken anchor link @oliviertassinari
+- [docs] Improve movie dataset (#5142) @flaviendelangle
+- [docs] Move all localization documentation in a unique page (#5072) @alexfauquette
+- [docs] Section for overwriting core components i18n keys (#4998) @DanailH
+- [docs] Small grammar and format fixes for Dynamic Row Height section (#5098) @samuelsycamore
+
+### Core
+
+- [core] Allows to run tests with different date adapters (#5055) @alexfauquette
+- [core] Prettify the l10n issue (#4928) @alexfauquette
+- [core] Set correct `apiRef` type in row reorder pre processors #5125 @DanailH
+- [core] Stop using `GridEvents` in technical doc (#5157) @flaviendelangle
+- [core] Upgrade monorepo (#5101) @oliviertassinari
+- [test] Fix dynamic row height test failing on Chrome (#5147) @m4theushw
+- [test] Remove delay on server demo for regression tests (#5131) @alexfauquette
+
+## v5.12.0
+
+_May 31, 2022_
+
+We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce support for [dynamic row height](https://mui.com/x/react-data-grid/rows/#dynamic-row-height) (#4859) @m4theushw
+
+  <img src="https://user-images.githubusercontent.com/42154031/171183167-718d7bcd-ec0f-459e-97fe-0f650abb4a99.gif" width="800">
+
+- ⚠️ Remove deprecated row grouping feature from `@mui/x-data-grid-pro`
+
+  Row grouping is available through the `@mui/x-data-grid-premium` package - see [Premium plan release blogpost](https://mui.com/blog/premium-plan-release/).
+
+- 🐞 Bug fixes and improvements
+
+### `@mui/x-data-grid@v5.12.0` / `@mui/x-data-grid-pro@v5.12.0` / `@mui/x-data-grid-premium@v5.12.0`
+
+#### Changes
+
+- [DataGrid] Support dynamic row height (#4859) @m4theushw
+- [DataGrid] Add `onMenuOpen` and `onMenuClose` props (#4825) @DanailH
+- [DataGrid] Add generics to `GridActionsColDef` to match `GridColDef` (#4982) @subvertallchris
+- [DataGrid] Disable drag event handlers when row or column reorder are disabled (#4857) @DanailH
+- [DataGrid] Allow other attempts to stop edit mode if the first failed (#5016) @m4theushw
+- [DataGrid] Better reflect the dependency on Material UI (#4795) @oliviertassinari
+- [DataGrid] Add an id to the filter item created when opening the filter panel (#5014) @flaviendelangle
+- [DataGrid] Use column visibility model on Hide All / Show All when enabled (#5050) @flaviendelangle
+- [DataGridPro] Unpin columns back to original position (#4512) @m4theushw
+- [DataGridPro] Remove experimental row grouping from Pro plan (#4949) @flaviendelangle
+- [DataGridPro] Allow to scroll detail panel content if it overflows the panel (#4979) @cherniavskii
+- [DataGridPro] Do not call `setRowIndex` when dragging a column over a row (#4987) @flaviendelangle
+- [l10n] Add Norwegian (Bokmål) (nb-NO) locale (#5001) @spiftire
+- [l10n] Add Turkish (tr-TR) locale (#5026) @Rassilion
+
+### `@mui/x-date-pickers@5.0.0-alpha.5` / `@mui/x-date-pickers-pro@5.0.0-alpha.5`
+
+#### Breaking changes
+
+- [pickers] Restructure props in `MonthPicker` / `YearPicker` and `DayPicker` (#4814) @flaviendelangle
+
+  The props of `MonthPicker` / `YearPicker` and `DayPicker` have been reworked to make them more consistent for a standalone usage (#4814) @flaviendelangle
+
+  **MonthPicker**: The prop `onMonthChange` has been removed, you can use `onChange` instead since every change is a month change
+
+  **YearPicker**: The prop `onYearPicker` has been removed, you can use `onChange` instead since every change is a year change
+
+  **DayPicker**: The prop `isDateDisabled` has been removed, you can now use the same validation props as for the other components (`maxDate`, `minDate`, `shouldDisableDate`, `disableFuture` and `disablePast`)
+
+#### Changes
+
+- [pickers] Add German (de-DE) translations (#4974) @felixh10r
+- [pickers] Support action bar on static pickers and improve typing (#5015) @flaviendelangle
+
+### Docs
+
+- [docs] Add docs sections / pages for upcoming features on pickers (#4603) @flaviendelangle
+- [docs] Add docs for filter panel components (#4919) @m4theushw
+- [docs] Explain how to manage focus with `renderCell` (#4254) @alexfauquette
+- [docs] Fix broken links to GitHub source (#5003) @Edwardveb
+- [docs] Fix navigation links (#4956) @oliviertassinari
+- [docs] Fix typo on rows docs (#4952) @jamesRadicl
+- [docs] New WAI-ARIA guidelines location (#4957) @oliviertassinari
+- [docs] Add "Slots" section to the right nav in the API pages (#4993) @DanailH
+- [docs] Fix docs feedback widget not working (#4905) @cherniavskii
+- [docs] Replace custom notes and warning with callouts (#5008) @flaviendelangle
+
+### Core
+
+- [core] Avoid Order ID to refer to GitHub issues/PRs (#5005) @oliviertassinari
+- [core] Improve the workflow for incomplete issues (#5012) @mnajdova
+- [core] Remove dead code on row grouping tree creation (#4945) @flaviendelangle
+- [core] Use new cache api for the row grouping last model tracking (#4980) @flaviendelangle
+- [core] Ensure that PRs have atleast 1 label (#5011) @DanailH
+- [core] Fix trailing-space @oliviertassinari
+- [core] Stop Renovate PR updates when PR is on hold (#5020) @cherniavskii
+- [license] Remove support for UTF-8 (#4893) @oliviertassinari
+- [license] Tweak error messages (#4907) @mbrookes
+- [test] Skip Safari and Firefox on broken tests (#4994) @alexfauquette
+- [test] Make argos screenshots stable (#5061) @m4theushw
+
+## v5.11.1
+
+_May 20, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Support localization on the date and time picker components (#4517) @alexfauquette
+
+  Texts can be translated in the pickers components, similar to what can be done in the data grid component. Check the [documentation](https://mui.com/x/react-date-pickers/localization/) for more information.
+
+- 📃 Add support for column spanning when exporting to Excel (#4830) @cherniavskii
+
+  <img src="https://user-images.githubusercontent.com/13808724/167691417-bf6baeb9-d409-4134-acb6-aadaf6434de9.png" width="800">
+
+- 🐞 Bugs fixes
+
+### `@mui/x-data-grid@v5.11.1` / `@mui/x-data-grid-pro@v5.11.1` / `@mui/x-data-grid-premium@v5.11.1`
+
+#### Changes
+
+- [DataGrid] Add a CSS class corresponding to current density (#4858) @m4theushw
+- [DataGrid] Execute the pipe-processors in their initialization order (#4913) @flaviendelangle
+- [DataGrid] Fix rendering of the no rows overlay when the `loading` prop is changed (#4910) @m4theushw
+- [DataGridPremium] Add `exceljs` to the dependencies (#4939) @alexfauquette
+- [DataGridPremium] Support column spanning in the Excel export (#4830) @cherniavskii
+- [l10n] Improve Russian (ru-RU) locale (#4864) @arvkonstantin
+
+### `@mui/x-date-pickers@5.0.0-alpha.4` / `@mui/x-date-pickers-pro@5.0.0-alpha.4`
+
+#### Breaking changes
+
+- The props related to the action bar buttons have been removed (`clearable`, `showTodayButton`, `cancelText`, `okText`)
+
+  To decide which button must be displayed and in which order, you can now use the `actions` prop of the `actionBar` component slot props.
+
+  ```jsx
+  <DatePicker
+    componentsProps={{
+      actionBar: {
+        // The actions will be the same between desktop and mobile
+        actions: ['clear'],
+
+        // The actions will be different between desktop and mobile
+        actions: (variant) => (variant === 'desktop' ? [] : ['clear']),
+      },
+    }}
+  />
+  ```
+
+  The build-in `ActionBar` component supports 4 different actions: `'clear'`, `'cancel'`, `'accept'`, and `'today'`.
+  By default, the pickers will render the cancel and accept button on mobile and no action on desktop.
+
+  If you need other actions, you can provide your own component to the `ActionBar` component slot
+
+  ```jsx
+  <DatePicker components={{ ActionBar: CustomActionBar }} />
+  ```
+
+#### Changes
+
+- [DatePicker] Fix keyboard accessibility for first and last year (#4807) @alexfauquette
+- [pickers] Add component slot for action bar (#4778) @alexfauquette
+- [pickers] Add l10n support (#4517) @alexfauquette
+- [pickers] Close Popper when pressing <kbd>Esc</kbd> inside a modal (#4499) @alexfauquette
+- [pickers] Support class slots on toolbar components (#4855) @flaviendelangle
+- [TimePicker] Fix time validation when current date is `null` (#4867) @flaviendelangle
+
+### Docs
+
+- [docs] Add 301 redirect for columns page (#4940) @alexfauquette
+- [docs] Avoid confusion with license key installation (#4891) @oliviertassinari
+- [docs] Complete the instructions for pickers installation in readme (#4852) @alexfauquette
+- [docs] Disable ads on paid-only pages (#4842) @flaviendelangle
+- [docs] Don't redirect to localized doc on deploy preview (#4818) @m4theushw
+- [docs] Limit `LICENSE` file to 80 char per line (#4873) @oliviertassinari
+- [docs] Typo on OrderId @oliviertassinari
+- [docs] Update feature comparison table (#4918) @cherniavskii
+
+### Core
+
+- [core] Add new script to generate tree data rows from file tree (#4902) @flaviendelangle
+- [core] Fix code style (#4874) @oliviertassinari
+- [core] Fix React 18 peer dependency (#4908) @oliviertassinari
+- [core] Fix link to the LICENSE file (#4875) @oliviertassinari
+- [core] Fix transitive babel dependency (#4793) @oliviertassinari
+- [core] New pipe processing `rowHydration` (#4896) @flaviendelangle
+- [core] Remove dead code for the docs (#4791) @oliviertassinari
+- [core] Run `yarn prettier` @oliviertassinari
+- [core] Polishes on `CHANGELOG.md` (#4876) @oliviertassinari
+- [core] Simplify rows cache management (#4933) @flaviendelangle
+- [core] Use internal icons for quick filter (#4912) @alexfauquette
+
 ## v5.11.0
 
 _May 13, 2022_
 
 We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 
-- 🚀 Premium plan release
-
-  We’re happy to announce that the Premium plan is [finally out](https://mui.com/blog/premium-plan-release/)!
-  With it, MUI X officially steps up to the next level, supporting the most advanced use cases for UI components.
+- 🚀 **Premium plan release**. We're happy to announce that the Premium plan is [finally out](https://mui.com/blog/premium-plan-release/)! With it, MUI X officially steps up to the next level, supporting the most advanced use cases for UI components.
 
   This plan is available through the new `@mui/x-data-grid-premium` package, which contains the row grouping and the Excel export features.
 
-  If you were already using the row grouping feature, you can upgrade by [installing](https://mui.com/x/react-data-grid/getting-started/#installation) `@mui/x-data-grid-premium` and replace `DataGridPro` with `DataGridPremium`, as follows.
-  Note that the experimental flag is not required anymore to use the row grouping.
+  If you were already using the row grouping feature, you can upgrade by [installing](https://mui.com/x/react-data-grid/getting-started/#installation) `@mui/x-data-grid-premium` and replace `DataGridPro` with `DataGridPremium`, as follows. Note that the experimental flag is not required anymore to use the row grouping.
 
   ```diff
   -import { DataGridPro } from '@mui/x-data-grid-pro';
@@ -29,16 +255,11 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
   For more information about the revised pricing model please have a look at the [blog post](https://mui.com/blog/premium-plan-release/#the-new-licensing-model).
 
-- 👔 Add 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.
+- 👔 **Excel export**. You can find this new Premium feature at: https://mui.com/x/react-data-grid/export/#excel-export.
 
-  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).
 
-  ![image](https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png)
+  <img src="https://user-images.githubusercontent.com/13808724/167700105-5a5acc7c-5463-4871-8514-3d09e2f365ae.png" width="724">
 
 - 🐞 Bugs fixes
 
@@ -46,7 +267,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 #### Breaking changes
 
-- Moving row grouping to premium package
+- Move row grouping to the premium package (#4223) @flaviendelangle
 
   The use of `rowGrouping` in the `@mui/x-data-grid-pro` package is deprecated. The experimental flag will be removed in an upcoming release.
 
@@ -76,7 +297,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 #### Breaking changes
 
-- Rework the auto-closing behavior of the pickers.
+- Rework the auto-closing behavior of the pickers (#4408) @flaviendelangle
 
   The `disableCloseOnSelect` prop has been replaced by a new `closeOnSelect` prop which has the opposite behavior.
   The default behavior remains the same (close after the last step on desktop but not on mobile).

package/DataGridPremium/DataGridPremium.js

@@ -275,7 +275,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
-    rowGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
@@ -329,6 +328,15 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   getDetailPanelHeight: PropTypes.func,
 
+  /**
+   * Function that returns the estimated height for a row.
+   * Only works if dynamic row height is used.
+   * Once the row height is measured this value is discarded.
+   * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
+   * @returns {number | null} The estimated row height value. If `null` or `undefined` then the default row height, based on the density, is applied.
+   */
+  getEstimatedRowHeight: PropTypes.func,
+
   /**
    * Function that applies CSS classes dynamically on rows.
    * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
@@ -339,7 +347,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * Function that sets the row height per row.
    * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
-   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied.
+   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied. If "auto" then the row height is calculated based on the content.
    */
   getRowHeight: PropTypes.func,
 
@@ -665,6 +673,22 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   onFilterModelChange: PropTypes.func,
 
+  /**
+   * Callback fired when the menu is closed.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuClose: PropTypes.func,
+
+  /**
+   * Callback fired when the menu is opened.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuOpen: PropTypes.func,
+
   /**
    * Callback fired when the current page has changed.
    * @param {number} page Index of the page displayed on the Grid.

package/LICENSE

@@ -2,9 +2,9 @@ Commercial License
 
 Copyright (c) 2020 Material-UI SAS
 
-MUI X Premium (https://mui.com/pricing/) is commercial software. You must purchase
-a license and agree to the End User License Agreement (EULA: https://mui.com/r/x-license-eula)
-to be able to use the software.
+MUI X Premium (https://mui.com/pricing/) is commercial software.
+You must purchase a license and agree to the End User License Agreement
+(EULA: https://mui.com/r/x-license-eula) to be able to use the software.
 
 Commercial licenses can be obtained at https://mui.com/r/x-get-license?scope=premium.
 You are free to install and try the software without a license key as long as it

package/README.md

@@ -19,10 +19,9 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.2.8",
-  "@mui/system": "^5.2.8",
-  "react": "^17.0.2 || ^18.0.0",
-  "react-dom": "^17.0.2 || ^18.0.0"
+  "@mui/material": "^5.4.1",
+  "@mui/system": "^5.4.1",
+  "react": "^17.0.2 || ^18.0.0"
 },
 ```
 

package/hooks/features/export/serializer/excelSerializer.js

@@ -34,9 +34,29 @@ const getFormattedValueOptions = (colDef, valueOptions, api) => {
 const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   const row = {};
   const dataValidation = {};
+  const mergedCells = [];
   const firstCellParams = api.getCellParams(id, columns[0].field);
-  const outlineLevel = firstCellParams.rowNode.depth;
-  columns.forEach(column => {
+  const outlineLevel = firstCellParams.rowNode.depth; // `colSpan` is only calculated for rendered rows, so we need to calculate it during export for every row
+
+  api.unstable_calculateColSpan({
+    rowId: id,
+    minFirstColumn: 0,
+    maxLastColumn: columns.length - 1
+  });
+  columns.forEach((column, colIndex) => {
+    const colSpanInfo = api.unstable_getCellColSpanInfo(id, colIndex);
+
+    if (colSpanInfo && colSpanInfo.spannedByColSpan) {
+      return;
+    }
+
+    if (colSpanInfo && colSpanInfo.cellProps.colSpan > 1) {
+      mergedCells.push({
+        leftIndex: colIndex + 1,
+        rightIndex: colIndex + colSpanInfo.cellProps.colSpan
+      });
+    }
+
     const cellParams = api.getCellParams(id, column.field);
 
     switch (cellParams.colDef.type) {
@@ -119,7 +139,8 @@ const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
   return {
     row,
     dataValidation,
-    outlineLevel
+    outlineLevel,
+    mergedCells
   };
 };
 
@@ -195,7 +216,8 @@ export async function buildExcel(options, api) {
     const {
       row,
       dataValidation,
-      outlineLevel
+      outlineLevel,
+      mergedCells
     } = serializeRow(id, columns, api, defaultValueOptionsFormulae);
     const newRow = worksheet.addRow(row);
     Object.keys(dataValidation).forEach(field => {
@@ -204,7 +226,13 @@ export async function buildExcel(options, api) {
 
     if (outlineLevel) {
       newRow.outlineLevel = outlineLevel;
-    }
+    } // use `rowCount`, since worksheet can have additional rows added in `exceljsPreProcess`
+
+
+    const lastRowIndex = newRow.worksheet.rowCount;
+    mergedCells.forEach(mergedCell => {
+      worksheet.mergeCells(lastRowIndex, mergedCell.leftIndex, lastRowIndex, mergedCell.rightIndex);
+    });
   });
 
   if (exceljsPostProcess) {

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

@@ -1,15 +1,16 @@
 export declare type GridRowGroupingModel = string[];
 export interface GridRowGroupingState {
     model: GridRowGroupingModel;
+}
+export interface GridRowGroupingInitialState {
+    model?: GridRowGroupingModel;
+}
+export interface GridRowGroupingInternalCache {
     /**
      * Tracks the model on the last pre-processing
      * Allows to check if we need to re-build the grouping columns when the grid upserts a column.
-     * TODO: Move outside of the state
      */
-    unstable_sanitizedModelOnLastRowTreeCreation: GridRowGroupingModel;
-}
-export interface GridRowGroupingInitialState {
-    model?: GridRowGroupingModel;
+    sanitizedModelOnLastRowTreeCreation: GridRowGroupingModel;
 }
 export interface GridRowGroupingApi {
     /**

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -3,18 +3,20 @@ import * as React from 'react';
 import Divider from '@mui/material/Divider';
 import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid-pro';
 import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid-pro/internals';
-import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector, gridRowGroupingStateSelector } from './gridRowGroupingSelector';
+import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroupingColumn, mergeStateWithRowGroupingModel, setStrategyAvailability } from './gridRowGroupingUtils';
 import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
 import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const rowGroupingStateInitializer = (state, props) => {
+export const rowGroupingStateInitializer = (state, props, apiRef) => {
   var _ref, _props$rowGroupingMod, _props$initialState, _props$initialState$r;
 
+  apiRef.current.unstable_caches.rowGrouping = {
+    sanitizedModelOnLastRowTreeCreation: []
+  };
   return _extends({}, state, {
     rowGrouping: {
-      model: (_ref = (_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$r = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState$r.model) != null ? _ref : [],
-      unstable_sanitizedModelOnLastRowTreeCreation: []
+      model: (_ref = (_props$rowGroupingMod = props.rowGroupingModel) != null ? _props$rowGroupingMod : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$r = _props$initialState.rowGrouping) == null ? void 0 : _props$initialState$r.model) != null ? _ref : []
     }
   });
 };
@@ -25,7 +27,7 @@ export const rowGroupingStateInitializer = (state, props) => {
  */
 
 export const useGridRowGrouping = (apiRef, props) => {
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'rowGrouping',
     propModel: props.rowGroupingModel,
     propOnChange: props.onRowGroupingModelChange,
@@ -168,14 +170,10 @@ export const useGridRowGrouping = (apiRef, props) => {
   }, [apiRef, props.rowGroupingColumnMode]);
   const checkGroupingColumnsModelDiff = React.useCallback(() => {
     const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
-    const lastGroupingColumnsModelApplied = gridRowGroupingStateSelector(apiRef.current.state).unstable_sanitizedModelOnLastRowTreeCreation;
+    const lastGroupingColumnsModelApplied = apiRef.current.unstable_caches.rowGrouping.sanitizedModelOnLastRowTreeCreation;
 
     if (!isDeepEqual(lastGroupingColumnsModelApplied, rowGroupingModel)) {
-      apiRef.current.setState(state => _extends({}, state, {
-        rowGrouping: _extends({}, state.rowGrouping, {
-          unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
-        })
-      }));
+      apiRef.current.unstable_caches.rowGrouping.sanitizedModelOnLastRowTreeCreation = rowGroupingModel;
       apiRef.current.unstable_requestPipeProcessorsApplication('hydrateColumns');
       setStrategyAvailability(apiRef, props.disableRowGrouping); // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -77,15 +77,7 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
   const createRowTree = React.useCallback(params => {
     const rowGroupingModel = gridRowGroupingSanitizedModelSelector(apiRef);
     const columnsLookup = gridColumnLookupSelector(apiRef);
-    apiRef.current.setState(state => _extends({}, state, {
-      rowGrouping: _extends({}, state.rowGrouping, {
-        unstable_sanitizedModelOnLastRowTreeCreation: rowGroupingModel
-      })
-    }));
-    const distinctValues = Object.fromEntries(rowGroupingModel.map(groupingField => [groupingField, {
-      lookup: {},
-      list: []
-    }]));
+    apiRef.current.unstable_caches.rowGrouping.sanitizedModelOnLastRowTreeCreation = rowGroupingModel;
 
     const getCellGroupingCriteria = ({
       row,
@@ -117,24 +109,6 @@ export const useGridRowGroupingPreProcessors = (apiRef, props) => {
       };
     };
 
-    params.ids.forEach(rowId => {
-      const row = params.idRowsLookup[rowId];
-      rowGroupingModel.forEach(groupingCriteria => {
-        const {
-          key
-        } = getCellGroupingCriteria({
-          row,
-          id: rowId,
-          colDef: columnsLookup[groupingCriteria]
-        });
-        const groupingFieldsDistinctKeys = distinctValues[groupingCriteria];
-
-        if (key != null && !groupingFieldsDistinctKeys.lookup[key.toString()]) {
-          groupingFieldsDistinctKeys.lookup[key.toString()] = true;
-          groupingFieldsDistinctKeys.list.push(key);
-        }
-      });
-    });
     const rows = params.ids.map(rowId => {
       const row = params.idRowsLookup[rowId];
       const parentPath = rowGroupingModel.map(groupingField => getCellGroupingCriteria({

package/index.d.ts

@@ -1,5 +1,4 @@
 import './typeOverloads';
-import '@mui/x-data-grid-pro/typeOverloads';
 export { LicenseInfo } from '@mui/x-license-pro';
 export * from '@mui/x-data-grid/components';
 export * from '@mui/x-data-grid-pro/components';

package/index.js

@@ -1,10 +1,9 @@
-/** @license MUI v5.11.0
+/** @license MUI v5.12.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import './typeOverloads';
-import '@mui/x-data-grid-pro/typeOverloads';
 export { LicenseInfo } from '@mui/x-license-pro';
 export * from '@mui/x-data-grid/components';
 export * from '@mui/x-data-grid-pro/components';

package/legacy/DataGridPremium/DataGridPremium.js

@@ -275,7 +275,6 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
-    rowGrouping: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
@@ -329,6 +328,15 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   getDetailPanelHeight: PropTypes.func,
 
+  /**
+   * Function that returns the estimated height for a row.
+   * Only works if dynamic row height is used.
+   * Once the row height is measured this value is discarded.
+   * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
+   * @returns {number | null} The estimated row height value. If `null` or `undefined` then the default row height, based on the density, is applied.
+   */
+  getEstimatedRowHeight: PropTypes.func,
+
   /**
    * Function that applies CSS classes dynamically on rows.
    * @param {GridRowClassNameParams} params With all properties from [[GridRowClassNameParams]].
@@ -339,7 +347,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   /**
    * Function that sets the row height per row.
    * @param {GridRowHeightParams} params With all properties from [[GridRowHeightParams]].
-   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied.
+   * @returns {GridRowHeightReturnValue} The row height value. If `null` or `undefined` then the default row height is applied. If "auto" then the row height is calculated based on the content.
    */
   getRowHeight: PropTypes.func,
 
@@ -665,6 +673,22 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   onFilterModelChange: PropTypes.func,
 
+  /**
+   * Callback fired when the menu is closed.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuClose: PropTypes.func,
+
+  /**
+   * Callback fired when the menu is opened.
+   * @param {GridMenuParams} params With all properties from [[GridMenuParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onMenuOpen: PropTypes.func,
+
   /**
    * Callback fired when the current page has changed.
    * @param {number} page Index of the page displayed on the Grid.