@mui/x-data-grid-pro 5.12.3 → 5.14.0

package/CHANGELOG.md

@@ -3,6 +3,152 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.14.0
+
+_Jul 21, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧪 Export `GridBooleanCell` component from data grid (#5537) @cliedeman
+- ⚙️ Improve accessibility of the Export menu (#5486) @nogalpaulina
+- 🌍 Improvements to different locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@5.14.0` / `@mui/x-data-grid-pro@5.14.0` / `@mui/x-data-grid-premium@5.14.0`
+
+#### Changes
+
+- [DataGrid] Add generics to `GridPreProcessEditCellProps` (#5510) @YunosukeY
+- [DataGrid] Avoid inconsistent state export (#5390) @flaviendelangle
+- [DataGrid] Export `GridBooleanCell` component (#5537) @cliedeman
+- [DataGrid] Fix `date`/`dateTime` edit input font size to match view mode (#5304) @cherniavskii
+- [DataGrid] Fix loading overlay position (#5558) @DanailH
+- [DataGrid] Improve accessibility of the Export menu in the toolbar (#5486) @nogalpaulina
+- [DataGridPremium] Implement Aggregation - not publicly released (#4208) @flaviendelangle
+- [DataGridPremium] Fix crash when exporting all columns to Excel (#5425) @cherniavskii
+- [l10n] Add Traditional Chinese (zh-TW) locale (#5498) @happyincent
+
+### `@mui/x-date-pickers@v5.0.0-beta.2` / `@mui/x-date-picker-pro@5.0.0-beta.2`
+
+#### Changes
+
+- [l10n] Add Norwegian (nb-NO) locale (#5475) @elkebab
+
+### Docs
+
+- [docs] New page presenting the `apiRef` (#5273) @flaviendelangle
+- [docs] Remove blank line @oliviertassinari
+
+### Core
+
+- [core] Add missing comments on zh-TW translation (#5559) @flaviendelangle
+- [core] Polish on the bug issue template (#5525) @oliviertassinari
+- [test] Add more tests related to `isPrintableKey` (#5458) @mnajdova
+
+## 5.13.1
+
+_Jul 15, 2022_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- ✏️ Enter edit mode when pasting in a cell with Ctrl+V (Cmd+V on macOS) (#5405) @alexfauquette
+- 🌍 Many improvements to the locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.13.1` / `@mui/x-data-grid-pro@v5.13.1` / `@mui/x-data-grid-premium@v5.13.1`
+
+#### Changes
+
+- [DataGrid] Fix blank space when using dynamic row height with pagination (#5315) @m4theushw
+- [DataGrid] Start editing with uppercase letter and Ctrl+V (#5405) @alexfauquette
+- [DataGrid] Fix some filters being removed from filter model on filter panel open (#5403) @cherniavskii
+- [DataGridPro] Improve pinned column headers accessibility (#5370) @cherniavskii
+- [l10n] Improve Dutch (nl-NL) locale (#5464) @developenguin
+- [l10n] Improve French (fr-FR) locale (#3211) (#5420) @Zenoo
+- [l10n] Improve German (de-DE) locale (#5448) @sebastianfrey
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#5394) @andrepxa
+- [l10n] Improve Romanian (ro-RO) locale (#5449) @rolule
+
+### `@mui/x-date-pickers@v5.0.0-beta.1` / `@mui/x-date-picker-pro@5.0.0-beta.1`
+
+#### Changes
+
+- [pickers] Add Italian (it-IT) locale (#5467) @felixh10r
+- [pickers] Add Spanish (es-ES) locale (#5468) @felixh10r
+- [pickers] Improve French (fr-FR) locale (#5446) @Zenoo
+- [pickers] Improve German (de-DE) locale (#5447) @sebastianfrey
+
+### Docs
+
+- [docs] Fix typo in the sorting page (#5431) @JosephMarinier
+- [docs] Fix description for "Striped rows" example (#5432) @lindapaiste
+- [docs] Make a clear difference between the license and license key (#5316) @oliviertassinari
+- [docs] Update pickers README files (#5456) @cherniavskii
+- [docs] Clarify the scope of support for MUI X (#5423) @joserodolfofreitas
+
+### Core
+
+- [core] Add technical support link to \_redirects (#5428) @joserodolfofreitas
+- [core] Improve GitHub bug reproduction template (#5067) @joserodolfofreitas
+- [core] Include playground pages in tsconfig (#5367) @cherniavskii
+- [core] Sort keys like in material-ui @oliviertassinari
+- [test] Wait for flags to load on regression tests (#5473) @m4theushw
+
+## 5.13.0
+
+_Jul 7, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` are now in beta!
+
+- ✨ Allow detail panel's height to match its content (#5163) @m4theushw
+
+  ```tsx
+  <DataGridPro getDetailPanelHeight={() => 'auto'} />
+  ```
+
+- 🌍 Add Romanian (ro-RO) locale on the data grid (#5345) @rolule
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.13.0` / `@mui/x-data-grid-pro@v5.13.0` / `@mui/x-data-grid-premium@v5.13.0`
+
+#### Changes
+
+- [DataGrid] Allows to customize variant of value input in filter panel (#4826) @alexfauquette
+- [DataGrid] Add Romanian (ro-RO) locale (#5345) @rolule
+- [DataGrid] Export Norwegian (nb-NO) locale (#5407) @cherniavskii
+- [DataGrid] Fix broken "start editing" integration with Japanese (#5414) @mnajdova
+- [DataGrid] Fix "stop editing" integration with IME e.g. Japanese (#5257) @Gumichocopengin8
+- [DataGrid] Fix dimensions computation with `autoHeight` and scroll x (#5401) @flaviendelangle
+- [DataGrid] Improve Slovak (sk-SK) locale (#5332) @msidlo
+- [DataGrid] Mention Premium plan in error messages and docs warnings (#5328) @cherniavskii
+- [DataGrid] Remove trailing spaces in filter input (#5279) @alexfauquette
+- [DataGridPro] Allow to infer detail panel height from content (#5163) @m4theushw
+- [DataGridPro] Fix the depth of nodes when switching from a non-flat tree to a flat tree (#5362) @flaviendelangle
+
+### `@mui/x-date-pickers@v5.0.0-beta.0` / `@mui/x-date-picker-pro@5.0.0-beta.0`
+
+#### Changes
+
+- [DateRangePicker] Fix keyboard selection (#5265) @alexfauquette
+- [DayPicker] Remove empty space at the bottom of the day view (#5073) @flaviendelangle
+- [pickers] Add missing type dependencies (#5331) @Methuselah96
+- [pickers] Pass the generics to the components in the theme augmentation (#5199) @toruticas
+
+### Docs
+
+- [docs] Explain how to use hooks inside a cell renderer (#5158) @flaviendelangle
+- [docs] Fix server-side pagination demo (#5361) @cherniavskii
+- [docs] Fix typo in the quick filter docs (#5313) @alexfauquette
+- [docs] Improve the "Getting started" page (#5293) @alexfauquette
+- [docs] New page for the pickers action bar customization (#5267) @flaviendelangle
+- [docs] Revise and split up "Overview" page into "Introduction" (#4692) @samuelsycamore
+- [docs] Use `useKeepGroupedColumnsHiddren` from the grid package on remaining demo (#5382) @flaviendelangle
+
 ## v5.12.3
 
 _Jun 23, 2022_
@@ -1363,7 +1509,7 @@ A big thanks to the 5 contributors who made this release possible. Here are some
 - [core] Fix `yarn prettier` script (#3292) @oliviertassinari
 - [core] Improve tests for Tree Data (#3366) @flaviendelangle
 - [core] Never import directly from the `__modules__` folder in the `x-data-grid-generator` package (#3379) @flaviendelangle
-- [core] Transition to a new StackOverflow tag (#3308) @oliviertassinari
+- [core] Transition to a new Stack Overflow tag (#3308) @oliviertassinari
 - [core] Update monorepo (#3370) @flaviendelangle
 - [core] Use pre-processors for sorting and filtering (#3318) @flaviendelangle
 - [test] Replace `useFakeTimers` (#3323) @m4theushw

package/DataGridPro/DataGridPro.js

@@ -318,7 +318,7 @@ DataGridProRaw.propTypes = {
   /**
    * Function that returns the height of the row detail panel.
    * @param {GridRowParams} params With all properties from [[GridRowParams]].
-   * @returns {number} The height in pixels.
+   * @returns {number | string} The height in pixels or "auto" to use the content height.
    * @default "() => 500"
    */
   getDetailPanelHeight: PropTypes.func,

package/DataGridPro/useDataGridProComponent.js

@@ -59,7 +59,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridPreferencesPanel(apiRef);
+  useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props);
   useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);

package/components/DataGridProColumnHeaders.js

@@ -117,15 +117,21 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
+  const innerProps = getInnerProps();
+  const pinnedColumnHeadersProps = {
+    role: innerProps.role,
+    'aria-rowindex': innerProps['aria-rowindex']
+  };
   return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
     ref: ref,
     className: className
   }, getRootProps(other), {
-    children: [leftRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
+    children: [leftRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, _extends({
       className: classes.leftPinnedColumns,
       ownerState: {
         side: GridPinnedPosition.left
-      },
+      }
+    }, pinnedColumnHeadersProps, {
       children: getColumns({
         renderContext: leftRenderContext,
         minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -133,22 +139,23 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
       }, {
         disableReorder: true
       })
-    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+    })), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
       isDragging: isDragging
-    }, getInnerProps(), {
+    }, innerProps, {
       children: getColumns({
         renderContext,
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })
-    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
+    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, _extends({
       ownerState: {
         side: GridPinnedPosition.right
       },
       className: classes.rightPinnedColumns,
       style: {
         paddingRight: scrollbarSize
-      },
+      }
+    }, pinnedColumnHeadersProps, {
       children: getColumns({
         renderContext: rightRenderContext,
         minFirstColumn: rightRenderContext.firstColumnIndex,
@@ -157,6 +164,6 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
       })
-    })]
+    }))]
   }));
 });

package/components/DataGridProVirtualScroller.js

@@ -3,7 +3,6 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 const _excluded = ["className", "disableVirtualization"];
 import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
-import Box from '@mui/material/Box';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler } from '@mui/x-data-grid';
 import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
@@ -11,6 +10,7 @@ import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
 import { gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, gridDetailPanelExpandedRowIdsSelector } from '../hooks/features/detailPanel';
+import { GridDetailPanel } from './GridDetailPanel';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const filterColumns = (pinnedColumns, columns) => {
@@ -74,19 +74,6 @@ const VirtualScrollerDetailPanels = styled('div', {
 })({
   position: 'relative'
 });
-const VirtualScrollerDetailPanel = styled(Box, {
-  name: 'MuiDataGrid',
-  slot: 'DetailPanel',
-  overridesResolver: (props, styles) => styles.detailPanel
-})(({
-  theme
-}) => ({
-  zIndex: 2,
-  width: '100%',
-  position: 'absolute',
-  backgroundColor: theme.palette.background.default,
-  overflow: 'auto'
-}));
 const VirtualScrollerPinnedColumns = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedColumns',
@@ -210,15 +197,17 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
       const exists = rowIndex !== undefined;
 
       if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        const height = detailPanelsHeights[id];
+        const hasAutoHeight = apiRef.current.unstable_detailPanelHasAutoHeight(id);
+        const height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
         const sizes = apiRef.current.unstable_getRowInternalSizes(id);
         const spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
         const top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
-        panels.push( /*#__PURE__*/_jsx(VirtualScrollerDetailPanel, {
+        panels.push( /*#__PURE__*/_jsx(GridDetailPanel, {
+          rowId: id,
           style: {
-            top,
-            height
+            top
           },
+          height: height,
           className: classes.detailPanel,
           children: content
         }, i));

package/components/GridDetailPanel.d.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { GridRowId } from '@mui/x-data-grid';
+interface GridDetailPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The system prop that allows defining system overrides as well as additional CSS styles.
+     */
+    sx?: SxProps<Theme>;
+    /**
+     * The panel height.
+     */
+    height: number | 'auto';
+    /**
+     * The row ID that this panel belongs to.
+     */
+    rowId: GridRowId;
+}
+declare const GridDetailPanel: (props: GridDetailPanelProps) => JSX.Element;
+export { GridDetailPanel };

package/components/GridDetailPanel.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["rowId", "height", "style"];
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DetailPanel = styled(Box, {
+  name: 'MuiDataGrid',
+  slot: 'DetailPanel',
+  overridesResolver: (props, styles) => styles.detailPanel
+})(({
+  theme
+}) => ({
+  zIndex: 2,
+  width: '100%',
+  position: 'absolute',
+  backgroundColor: theme.palette.background.default,
+  overflow: 'auto'
+}));
+
+const GridDetailPanel = props => {
+  const {
+    rowId,
+    height,
+    style: styleProp = {}
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  const apiRef = useGridApiContext();
+  const ref = React.useRef();
+  React.useLayoutEffect(() => {
+    if (height === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
+      // Fallback for IE
+      apiRef.current.unstable_storeDetailPanelHeight(rowId, ref.current.clientHeight);
+    }
+  }, [apiRef, height, rowId]);
+  React.useLayoutEffect(() => {
+    const hasFixedHeight = height !== 'auto';
+
+    if (!ref.current || hasFixedHeight || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const resizeObserver = new ResizeObserver(entries => {
+      const [entry] = entries;
+      const observedHeight = entry.borderBoxSize && entry.borderBoxSize.length > 0 ? entry.borderBoxSize[0].blockSize : entry.contentRect.height;
+      apiRef.current.unstable_storeDetailPanelHeight(rowId, observedHeight);
+    });
+    resizeObserver.observe(ref.current);
+    return () => resizeObserver.disconnect();
+  }, [apiRef, height, rowId]);
+
+  const style = _extends({}, styleProp, {
+    height
+  });
+
+  return /*#__PURE__*/_jsx(DetailPanel, _extends({
+    ref: ref,
+    style: style
+  }, other));
+};
+
+export { GridDetailPanel };

package/components/GridRowReorderCell.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { GridRenderCellParams } from '@mui/x-data-grid';
-declare const GridRowReorderCell: (params: GridRenderCellParams) => JSX.Element;
+declare const GridRowReorderCell: (params: GridRenderCellParams) => JSX.Element | null;
 export { GridRowReorderCell };
 export declare const renderRowReorderCell: (params: GridRenderCellParams) => JSX.Element;

package/components/GridRowReorderCell.js

@@ -19,6 +19,8 @@ const useUtilityClasses = ownerState => {
 };
 
 const GridRowReorderCell = params => {
+  var _params$rowNode$posit;
+
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
@@ -57,6 +59,11 @@ const GridRowReorderCell = params => {
     onDragOver: publish('rowDragOver'),
     onDragEnd: publish('rowDragEnd')
   } : null;
+
+  if (((_params$rowNode$posit = params.rowNode.position) != null ? _params$rowNode$posit : 'body') !== 'body') {
+    return null;
+  }
+
   return /*#__PURE__*/_jsxs("div", _extends({
     className: classes.root,
     draggable: isDraggable

package/hooks/features/columnPinning/useGridColumnPinning.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedColumns' | 'initialState' | 'disableColumnPinning'>>;
-export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnPinning' | 'pinnedColumns' | 'onPinnedColumnsChange'>) => void;
+export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnPinning' | 'initialState' | 'pinnedColumns' | 'onPinnedColumnsChange'>) => void;

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -43,6 +43,8 @@ const mergeStateWithPinnedColumns = pinnedColumns => state => _extends({}, state
 });
 
 export const useGridColumnPinning = (apiRef, props) => {
+  var _props$initialState4;
+
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector); // Each visible row (not to be confused with a filter result) is composed of a central .MuiDataGrid-row element
   // and up to two additional .MuiDataGrid-row's, one for the columns pinned to the left and another
   // for those on the right side. When hovering any of these elements, the :hover styles are applied only to
@@ -164,17 +166,24 @@ export const useGridColumnPinning = (apiRef, props) => {
 
     return initialValue;
   }, [apiRef, pinnedColumns]);
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    var _props$initialState3, _pinnedColumnsToExpor, _pinnedColumnsToExpor2;
+
     const pinnedColumnsToExport = gridPinnedColumnsSelector(apiRef.current.state);
+    const shouldExportPinnedColumns = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.pinnedColumns != null || // Always export if the model has been initialized
+    ((_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.pinnedColumns) != null || // Export if the model is not empty
+    ((_pinnedColumnsToExpor = pinnedColumnsToExport.left) != null ? _pinnedColumnsToExpor : []).length > 0 || ((_pinnedColumnsToExpor2 = pinnedColumnsToExport.right) != null ? _pinnedColumnsToExpor2 : []).length > 0;
 
-    if ((!pinnedColumnsToExport.left || pinnedColumnsToExport.left.length === 0) && (!pinnedColumnsToExport.right || pinnedColumnsToExport.right.length === 0)) {
+    if (!shouldExportPinnedColumns) {
       return prevState;
     }
 
     return _extends({}, prevState, {
       pinnedColumns: pinnedColumnsToExport
     });
-  }, [apiRef]);
+  }, [apiRef, props.pinnedColumns, (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.pinnedColumns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const newPinnedColumns = context.stateToRestore.pinnedColumns;
 

package/hooks/features/detailPanel/gridDetailPanelInterface.d.ts

@@ -1,5 +1,9 @@
 import * as React from 'react';
 import { GridRowId } from '@mui/x-data-grid';
+declare type DetailPanelHeightCache = Record<GridRowId, {
+    autoHeight: boolean;
+    height: number;
+}>;
 /**
  * The master/detail API interface that is available in the grid [[apiRef]].
  */
@@ -19,10 +23,25 @@ export interface GridDetailPanelApi {
      * @param {GridRowId[]} ids The ids of the rows to open the detail panel.
      */
     setExpandedDetailPanels: (ids: GridRowId[]) => void;
+    /**
+     * Stores the panel height measurement and triggers the row height pre-processing.
+     * @param {GridRowId} id The id of the row.
+     * @param {number} height The new height.
+     * @ignore - do not document.
+     */
+    unstable_storeDetailPanelHeight: (id: GridRowId, height: number) => void;
+    /**
+     * Determines if the height of a detail panel is "auto".
+     * @param {GridRowId} id The id of the row.
+     * @return {boolean} `true` if the detail panel height is "auto".
+     * @ignore - do not document.
+     */
+    unstable_detailPanelHasAutoHeight: (id: GridRowId) => boolean;
 }
 export interface GridDetailPanelState {
     expandedRowIds: GridRowId[];
     contentCache: Record<GridRowId, React.ReactNode>;
-    heightCache: Record<GridRowId, number>;
+    heightCache: DetailPanelHeightCache;
 }
 export declare type GridDetailPanelInitialState = Pick<GridDetailPanelState, 'expandedRowIds'>;
+export {};

package/hooks/features/detailPanel/gridDetailPanelSelector.d.ts

@@ -1,5 +1,16 @@
 /// <reference types="react" />
+import { GridRowId } from '@mui/x-data-grid';
 import { GridStatePro } from '../../../models/gridStatePro';
-export declare const gridDetailPanelExpandedRowIdsSelector: (state: GridStatePro) => import("@mui/x-data-grid").GridRowId[];
-export declare const gridDetailPanelExpandedRowsContentCacheSelector: (state: GridStatePro) => Record<import("@mui/x-data-grid").GridRowId, import("react").ReactNode>;
-export declare const gridDetailPanelExpandedRowsHeightCacheSelector: (state: GridStatePro) => Record<import("@mui/x-data-grid").GridRowId, number>;
+export declare const gridDetailPanelExpandedRowIdsSelector: (state: GridStatePro) => GridRowId[];
+export declare const gridDetailPanelExpandedRowsContentCacheSelector: (state: GridStatePro) => Record<GridRowId, import("react").ReactNode>;
+export declare const gridDetailPanelRawHeightCacheSelector: (state: GridStatePro) => {
+    [x: string]: {
+        autoHeight: boolean;
+        height: number;
+    };
+    [x: number]: {
+        autoHeight: boolean;
+        height: number;
+    };
+};
+export declare const gridDetailPanelExpandedRowsHeightCacheSelector: import("@mui/x-data-grid").OutputSelector<GridStatePro, Record<GridRowId, number>>;

package/hooks/features/detailPanel/gridDetailPanelSelector.js

@@ -1,3 +1,11 @@
+import { createSelector } from '@mui/x-data-grid/internals';
 export const gridDetailPanelExpandedRowIdsSelector = state => state.detailPanel.expandedRowIds;
 export const gridDetailPanelExpandedRowsContentCacheSelector = state => state.detailPanel.contentCache;
-export const gridDetailPanelExpandedRowsHeightCacheSelector = state => state.detailPanel.heightCache;
+export const gridDetailPanelRawHeightCacheSelector = state => state.detailPanel.heightCache; // TODO v6: Make this selector return the full object, including the autoHeight flag
+
+export const gridDetailPanelExpandedRowsHeightCacheSelector = createSelector(gridDetailPanelRawHeightCacheSelector, heightCache => Object.entries(heightCache).reduce((acc, [id, {
+  height
+}]) => {
+  acc[id] = height || 0;
+  return acc;
+}, {}));

package/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -12,6 +12,8 @@ export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF
   sortable: false,
   filterable: false,
   resizable: false,
+  // @ts-ignore
+  aggregable: false,
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,

package/hooks/features/detailPanel/index.d.ts

@@ -1,3 +1,3 @@
 export * from './gridDetailPanelToggleColDef';
-export * from './gridDetailPanelSelector';
+export { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, } from './gridDetailPanelSelector';
 export * from './gridDetailPanelInterface';

package/hooks/features/detailPanel/index.js

@@ -1,3 +1,3 @@
 export * from './gridDetailPanelToggleColDef';
-export * from './gridDetailPanelSelector';
+export { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
 export * from './gridDetailPanelInterface';

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -3,18 +3,19 @@ import * as React from 'react';
 import { useGridSelector, useGridApiEventHandler, useGridApiMethod, gridRowIdsSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
-import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
+import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, gridDetailPanelRawHeightCacheSelector } from './gridDetailPanelSelector';
 export const detailPanelStateInitializer = (state, props) => {
   var _ref, _props$detailPanelExp, _props$initialState, _props$initialState$d;
 
   return _extends({}, state, {
     detailPanel: {
+      heightCache: {},
       expandedRowIds: (_ref = (_props$detailPanelExp = props.detailPanelExpandedRowIds) != null ? _props$detailPanelExp : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$d = _props$initialState.detailPanel) == null ? void 0 : _props$initialState$d.expandedRowIds) != null ? _ref : []
     }
   });
 };
 
-function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight) {
+function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight, previousHeightCache) {
   if (typeof getDetailPanelContent !== 'function') {
     return {};
   } // TODO change to lazy approach using a Proxy
@@ -28,12 +29,19 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
     return acc;
   }, {});
   const heightCache = rowIds.reduce((acc, id) => {
+    var _previousHeightCache$;
+
     if (contentCache[id] == null) {
       return acc;
     }
 
     const params = apiRef.current.getRowParams(id);
-    acc[id] = getDetailPanelHeight(params);
+    const height = getDetailPanelHeight(params);
+    const autoHeight = height === 'auto';
+    acc[id] = {
+      autoHeight,
+      height: autoHeight ? (_previousHeightCache$ = previousHeightCache[id]) == null ? void 0 : _previousHeightCache$.height : height
+    };
     return acc;
   }, {});
   return {
@@ -112,10 +120,36 @@ export const useGridDetailPanel = (apiRef, props) => {
     });
     apiRef.current.forceUpdate();
   }, [apiRef]);
+  const storeDetailPanelHeight = React.useCallback((id, height) => {
+    const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef.current.state);
+
+    if (!heightCache[id] || heightCache[id].height === height) {
+      return;
+    }
+
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        detailPanel: _extends({}, state.detailPanel, {
+          heightCache: _extends({}, heightCache, {
+            [id]: _extends({}, heightCache[id], {
+              height
+            })
+          })
+        })
+      });
+    });
+    apiRef.current.unstable_requestPipeProcessorsApplication('rowHeight');
+  }, [apiRef]);
+  const detailPanelHasAutoHeight = React.useCallback(id => {
+    const heightCache = gridDetailPanelRawHeightCacheSelector(apiRef.current.state);
+    return heightCache[id] ? heightCache[id].autoHeight : false;
+  }, [apiRef]);
   const detailPanelApi = {
     toggleDetailPanel,
     getExpandedDetailPanels,
-    setExpandedDetailPanels
+    setExpandedDetailPanels,
+    unstable_storeDetailPanelHeight: storeDetailPanelHeight,
+    unstable_detailPanelHasAutoHeight: detailPanelHasAutoHeight
   };
   useGridApiMethod(apiRef, detailPanelApi, 'detailPanelApi');
   React.useEffect(() => {
@@ -130,7 +164,7 @@ export const useGridDetailPanel = (apiRef, props) => {
   const updateCachesAndForceUpdate = React.useCallback(() => {
     apiRef.current.setState(state => {
       return _extends({}, state, {
-        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight))
+        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
       });
     });
     apiRef.current.forceUpdate();
@@ -145,7 +179,7 @@ export const useGridDetailPanel = (apiRef, props) => {
 
     apiRef.current.setState(state => {
       return _extends({}, state, {
-        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight))
+        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
       });
     });
     previousGetDetailPanelContentProp.current = props.getDetailPanelContent;
@@ -161,7 +195,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     }
 
     updateCachesIfNeeded();
-    const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef.current.state);
+    const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef);
     return _extends({}, initialValue, {
       detail: (_heightCache$row$id = heightCache[row.id]) != null ? _heightCache$row$id : 0 // Fallback to zero because the cache might not be ready yet (e.g. page was changed)