@mui/x-data-grid-pro 5.12.2 → 5.13.1

package/modern/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/modern/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/modern/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/modern/hooks/features/detailPanel/useGridDetailPanel.js

@@ -3,16 +3,17 @@ 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) => {
   return _extends({}, state, {
     detailPanel: {
+      heightCache: {},
       expandedRowIds: props.detailPanelExpandedRowIds ?? props.initialState?.detailPanel?.expandedRowIds ?? []
     }
   });
 };
 
-function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight) {
+function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight, previousHeightCache) {
   if (typeof getDetailPanelContent !== 'function') {
     return {};
   } // TODO change to lazy approach using a Proxy
@@ -31,7 +32,12 @@ function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeig
     }
 
     const params = apiRef.current.getRowParams(id);
-    acc[id] = getDetailPanelHeight(params);
+    const height = getDetailPanelHeight(params);
+    const autoHeight = height === 'auto';
+    acc[id] = {
+      autoHeight,
+      height: autoHeight ? previousHeightCache[id]?.height : height
+    };
     return acc;
   }, {});
   return {
@@ -110,10 +116,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(() => {
@@ -128,7 +160,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();
@@ -143,7 +175,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;
@@ -157,7 +189,7 @@ export const useGridDetailPanel = (apiRef, props) => {
     }
 
     updateCachesIfNeeded();
-    const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef.current.state);
+    const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef);
     return _extends({}, initialValue, {
       detail: heightCache[row.id] ?? 0 // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
 

package/modern/hooks/features/detailPanel/useGridDetailPanelCache.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiEventHandler, gridRowIdsSelector } from '@mui/x-data-grid';
+
+function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight, previousHeightCache) {
+  if (typeof getDetailPanelContent !== 'function') {
+    return {};
+  } // TODO change to lazy approach using a Proxy
+  // only call getDetailPanelContent when asked for an id
+
+
+  const rowIds = gridRowIdsSelector(apiRef);
+  const contentCache = rowIds.reduce((acc, id) => {
+    const params = apiRef.current.getRowParams(id);
+    acc[id] = getDetailPanelContent(params);
+    return acc;
+  }, {});
+  const heightCache = rowIds.reduce((acc, id) => {
+    if (contentCache[id] == null) {
+      return acc;
+    }
+
+    const params = apiRef.current.getRowParams(id);
+    const height = getDetailPanelHeight(params);
+    const autoHeight = height === 'auto';
+    acc[id] = {
+      autoHeight,
+      height: !autoHeight ? height : previousHeightCache[id]?.height
+    };
+    return acc;
+  }, {});
+  return {
+    contentCache,
+    heightCache
+  };
+}
+
+export const useGridDetailPanelCache = (apiRef, props) => {
+  const updateCaches = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
+  useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCaches);
+  const isFirstRender = React.useRef(true);
+
+  if (isFirstRender.current) {
+    isFirstRender.current = false;
+    updateCaches();
+  }
+
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      return;
+    }
+
+    updateCaches();
+  }, [updateCaches]);
+};

package/modern/index.js

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

package/modern/utils/releaseInfo.js

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

package/node/DataGridPro/DataGridPro.js

@@ -342,7 +342,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.default.func,

package/node/components/DataGridProColumnHeaders.js

@@ -141,15 +141,21 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
+  const innerProps = getInnerProps();
+  const pinnedColumnHeadersProps = {
+    role: innerProps.role,
+    'aria-rowindex': innerProps['aria-rowindex']
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridColumnHeaders, (0, _extends2.default)({
     ref: ref,
     className: className
   }, getRootProps(other), {
-    children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersPinnedColumnHeaders, {
+    children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
       className: classes.leftPinnedColumns,
       ownerState: {
         side: _columnPinning.GridPinnedPosition.left
-      },
+      }
+    }, pinnedColumnHeadersProps, {
       children: getColumns({
         renderContext: leftRenderContext,
         minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -157,22 +163,23 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
       }, {
         disableReorder: true
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridColumnHeadersInner, (0, _extends2.default)({
       isDragging: isDragging
-    }, getInnerProps(), {
+    }, innerProps, {
       children: getColumns({
         renderContext,
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })
-    })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersPinnedColumnHeaders, {
+    })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeadersPinnedColumnHeaders, (0, _extends2.default)({
       ownerState: {
         side: _columnPinning.GridPinnedPosition.right
       },
       className: classes.rightPinnedColumns,
       style: {
         paddingRight: scrollbarSize
-      },
+      }
+    }, pinnedColumnHeadersProps, {
       children: getColumns({
         renderContext: rightRenderContext,
         minFirstColumn: rightRenderContext.firstColumnIndex,
@@ -181,7 +188,7 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
         disableReorder: true,
         separatorSide: _xDataGrid.GridColumnHeaderSeparatorSides.Left
       })
-    })]
+    }))]
   }));
 });
 exports.DataGridProColumnHeaders = DataGridProColumnHeaders;

package/node/components/DataGridProVirtualScroller.js

@@ -15,8 +15,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _styles = require("@mui/material/styles");
 
-var _Box = _interopRequireDefault(require("@mui/material/Box"));
-
 var _material = require("@mui/material");
 
 var _xDataGrid = require("@mui/x-data-grid");
@@ -31,6 +29,8 @@ var _columnPinning = require("../hooks/features/columnPinning");
 
 var _detailPanel = require("../hooks/features/detailPanel");
 
+var _GridDetailPanel = require("./GridDetailPanel");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className", "disableVirtualization"];
@@ -102,19 +102,6 @@ const VirtualScrollerDetailPanels = (0, _styles.styled)('div', {
 })({
   position: 'relative'
 });
-const VirtualScrollerDetailPanel = (0, _styles.styled)(_Box.default, {
-  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 = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedColumns',
@@ -237,15 +224,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__*/(0, _jsxRuntime.jsx)(VirtualScrollerDetailPanel, {
+        panels.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridDetailPanel.GridDetailPanel, {
+          rowId: id,
           style: {
-            top,
-            height
+            top
           },
+          height: height,
           className: classes.detailPanel,
           children: content
         }, i));

package/node/components/GridDetailPanel.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridDetailPanel = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _styles = require("@mui/material/styles");
+
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["rowId", "height", "style"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const DetailPanel = (0, _styles.styled)(_Box.default, {
+  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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const apiRef = (0, _useGridApiContext.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 = (0, _extends2.default)({}, styleProp, {
+    height
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DetailPanel, (0, _extends2.default)({
+    ref: ref,
+    style: style
+  }, other));
+};
+
+exports.GridDetailPanel = GridDetailPanel;

package/node/hooks/features/detailPanel/gridDetailPanelSelector.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridDetailPanelExpandedRowsHeightCacheSelector = exports.gridDetailPanelExpandedRowsContentCacheSelector = exports.gridDetailPanelExpandedRowIdsSelector = void 0;
+exports.gridDetailPanelRawHeightCacheSelector = exports.gridDetailPanelExpandedRowsHeightCacheSelector = exports.gridDetailPanelExpandedRowsContentCacheSelector = exports.gridDetailPanelExpandedRowIdsSelector = void 0;
+
+var _internals = require("@mui/x-data-grid/internals");
 
 const gridDetailPanelExpandedRowIdsSelector = state => state.detailPanel.expandedRowIds;
 
@@ -13,6 +15,14 @@ const gridDetailPanelExpandedRowsContentCacheSelector = state => state.detailPan
 
 exports.gridDetailPanelExpandedRowsContentCacheSelector = gridDetailPanelExpandedRowsContentCacheSelector;
 
-const gridDetailPanelExpandedRowsHeightCacheSelector = state => state.detailPanel.heightCache;
+const gridDetailPanelRawHeightCacheSelector = state => state.detailPanel.heightCache; // TODO v6: Make this selector return the full object, including the autoHeight flag
+
 
+exports.gridDetailPanelRawHeightCacheSelector = gridDetailPanelRawHeightCacheSelector;
+const gridDetailPanelExpandedRowsHeightCacheSelector = (0, _internals.createSelector)(gridDetailPanelRawHeightCacheSelector, heightCache => Object.entries(heightCache).reduce((acc, [id, {
+  height
+}]) => {
+  acc[id] = height || 0;
+  return acc;
+}, {}));
 exports.gridDetailPanelExpandedRowsHeightCacheSelector = gridDetailPanelExpandedRowsHeightCacheSelector;

package/node/hooks/features/detailPanel/index.js

@@ -3,11 +3,35 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  gridDetailPanelExpandedRowIdsSelector: true,
+  gridDetailPanelExpandedRowsContentCacheSelector: true,
+  gridDetailPanelExpandedRowsHeightCacheSelector: true
+};
+Object.defineProperty(exports, "gridDetailPanelExpandedRowIdsSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector;
+  }
+});
+Object.defineProperty(exports, "gridDetailPanelExpandedRowsContentCacheSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridDetailPanelSelector.gridDetailPanelExpandedRowsContentCacheSelector;
+  }
+});
+Object.defineProperty(exports, "gridDetailPanelExpandedRowsHeightCacheSelector", {
+  enumerable: true,
+  get: function () {
+    return _gridDetailPanelSelector.gridDetailPanelExpandedRowsHeightCacheSelector;
+  }
+});
 
 var _gridDetailPanelToggleColDef = require("./gridDetailPanelToggleColDef");
 
 Object.keys(_gridDetailPanelToggleColDef).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _gridDetailPanelToggleColDef[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -19,21 +43,11 @@ Object.keys(_gridDetailPanelToggleColDef).forEach(function (key) {
 
 var _gridDetailPanelSelector = require("./gridDetailPanelSelector");
 
-Object.keys(_gridDetailPanelSelector).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _gridDetailPanelSelector[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _gridDetailPanelSelector[key];
-    }
-  });
-});
-
 var _gridDetailPanelInterface = require("./gridDetailPanelInterface");
 
 Object.keys(_gridDetailPanelInterface).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _gridDetailPanelInterface[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/node/hooks/features/detailPanel/useGridDetailPanel.js

@@ -28,6 +28,7 @@ const detailPanelStateInitializer = (state, props) => {
 
   return (0, _extends2.default)({}, 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 : []
     }
   });
@@ -35,7 +36,7 @@ const detailPanelStateInitializer = (state, props) => {
 
 exports.detailPanelStateInitializer = detailPanelStateInitializer;
 
-function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight) {
+function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight, previousHeightCache) {
   if (typeof getDetailPanelContent !== 'function') {
     return {};
   } // TODO change to lazy approach using a Proxy
@@ -49,12 +50,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 {
@@ -133,10 +141,36 @@ const useGridDetailPanel = (apiRef, props) => {
     });
     apiRef.current.forceUpdate();
   }, [apiRef]);
+  const storeDetailPanelHeight = React.useCallback((id, height) => {
+    const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelRawHeightCacheSelector)(apiRef.current.state);
+
+    if (!heightCache[id] || heightCache[id].height === height) {
+      return;
+    }
+
+    apiRef.current.setState(state => {
+      return (0, _extends2.default)({}, state, {
+        detailPanel: (0, _extends2.default)({}, state.detailPanel, {
+          heightCache: (0, _extends2.default)({}, heightCache, {
+            [id]: (0, _extends2.default)({}, heightCache[id], {
+              height
+            })
+          })
+        })
+      });
+    });
+    apiRef.current.unstable_requestPipeProcessorsApplication('rowHeight');
+  }, [apiRef]);
+  const detailPanelHasAutoHeight = React.useCallback(id => {
+    const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelRawHeightCacheSelector)(apiRef.current.state);
+    return heightCache[id] ? heightCache[id].autoHeight : false;
+  }, [apiRef]);
   const detailPanelApi = {
     toggleDetailPanel,
     getExpandedDetailPanels,
-    setExpandedDetailPanels
+    setExpandedDetailPanels,
+    unstable_storeDetailPanelHeight: storeDetailPanelHeight,
+    unstable_detailPanelHasAutoHeight: detailPanelHasAutoHeight
   };
   (0, _xDataGrid.useGridApiMethod)(apiRef, detailPanelApi, 'detailPanelApi');
   React.useEffect(() => {
@@ -151,7 +185,7 @@ const useGridDetailPanel = (apiRef, props) => {
   const updateCachesAndForceUpdate = React.useCallback(() => {
     apiRef.current.setState(state => {
       return (0, _extends2.default)({}, state, {
-        detailPanel: (0, _extends2.default)({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight))
+        detailPanel: (0, _extends2.default)({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
       });
     });
     apiRef.current.forceUpdate();
@@ -166,7 +200,7 @@ const useGridDetailPanel = (apiRef, props) => {
 
     apiRef.current.setState(state => {
       return (0, _extends2.default)({}, state, {
-        detailPanel: (0, _extends2.default)({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight))
+        detailPanel: (0, _extends2.default)({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
       });
     });
     previousGetDetailPanelContentProp.current = props.getDetailPanelContent;
@@ -182,7 +216,7 @@ const useGridDetailPanel = (apiRef, props) => {
     }
 
     updateCachesIfNeeded();
-    const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowsHeightCacheSelector)(apiRef.current.state);
+    const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowsHeightCacheSelector)(apiRef);
     return (0, _extends2.default)({}, 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)