@mui/x-data-grid-pro 5.12.1 → 5.13.0

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -1,18 +1,55 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import { useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
+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, 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) => {
+    var _previousHeightCache$;
+
+    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 ? (_previousHeightCache$ = previousHeightCache[id]) == null ? void 0 : _previousHeightCache$.height : height
+    };
+    return acc;
+  }, {});
+  return {
+    contentCache,
+    heightCache
+  };
+}
+
 export const useGridDetailPanel = (apiRef, props) => {
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
@@ -51,22 +88,6 @@ export const useGridDetailPanel = (apiRef, props) => {
   }, [apiRef, props.getDetailPanelContent]);
   useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
-  const addDetailHeight = React.useCallback((initialValue, row) => {
-    var _heightCache$row$id;
-
-    if (expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
-      return _extends({}, initialValue, {
-        detail: 0
-      });
-    }
-
-    const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef.current.state);
-    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)
-
-    });
-  }, [apiRef, expandedRowIds]);
-  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
   apiRef.current.unstable_registerControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,
@@ -99,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(() => {
@@ -114,4 +161,51 @@ export const useGridDetailPanel = (apiRef, props) => {
       }
     }
   }, [apiRef, props.detailPanelExpandedRowIds]);
+  const updateCachesAndForceUpdate = 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', updateCachesAndForceUpdate);
+  const previousGetDetailPanelContentProp = React.useRef();
+  const previousGetDetailPanelHeightProp = React.useRef();
+  const updateCachesIfNeeded = React.useCallback(() => {
+    if (props.getDetailPanelContent === previousGetDetailPanelContentProp.current && props.getDetailPanelHeight === previousGetDetailPanelHeightProp.current) {
+      return;
+    }
+
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
+      });
+    });
+    previousGetDetailPanelContentProp.current = props.getDetailPanelContent;
+    previousGetDetailPanelHeightProp.current = props.getDetailPanelHeight;
+  }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
+  const addDetailHeight = React.useCallback((initialValue, row) => {
+    var _heightCache$row$id;
+
+    if (!expandedRowIds || expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
+      return _extends({}, initialValue, {
+        detail: 0
+      });
+    }
+
+    updateCachesIfNeeded();
+    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)
+
+    });
+  }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
+  useGridRegisterPipeProcessor(apiRef, 'rowHeight', addDetailHeight);
+  const isFirstRender = React.useRef(true);
+
+  if (isFirstRender.current) {
+    isFirstRender.current = false;
+    updateCachesIfNeeded();
+  }
 };

package/hooks/features/detailPanel/useGridDetailPanelCache.js

@@ -2,7 +2,7 @@ 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) {
+function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight, previousHeightCache) {
   if (typeof getDetailPanelContent !== 'function') {
     return {};
   } // TODO change to lazy approach using a Proxy
@@ -16,12 +16,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 ? height : (_previousHeightCache$ = previousHeightCache[id]) == null ? void 0 : _previousHeightCache$.height
+    };
     return acc;
   }, {});
   return {
@@ -34,7 +41,7 @@ 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))
+        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight, state.detailPanel.heightCache))
       });
     });
     apiRef.current.forceUpdate();

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
@@ -21,8 +22,10 @@ export const useGridDetailPanelPreProcessors = (apiRef, props) => {
 
 
     columnsState.all = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.all];
-    columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
+    columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = _extends({}, GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
+      headerName: apiRef.current.getLocaleText('detailPanelToggle')
+    });
     return columnsState;
-  }, [props.getDetailPanelContent]);
+  }, [apiRef, props.getDetailPanelContent]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addToggleColumn);
 };

package/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["hideDescendantCount"];
 import * as React from 'react';
-import { gridRowIdsSelector, gridRowTreeSelector, useFirstRender } from '@mui/x-data-grid';
+import { gridRowIdsSelector, gridRowTreeSelector, useFirstRender, GRID_CHECKBOX_SELECTION_FIELD } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor, useGridRegisterStrategyProcessor } from '@mui/x-data-grid/internals';
 import { GRID_TREE_DATA_GROUPING_COL_DEF, GRID_TREE_DATA_GROUPING_COL_DEF_FORCED_PROPERTIES } from './gridTreeDataGroupColDef';
 import { filterRowTreeFromTreeData, TREE_DATA_STRATEGY } from './gridTreeDataUtils';
@@ -61,7 +61,7 @@ export const useGridTreeDataPreProcessors = (apiRef, props) => {
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
 
       if (prevGroupingColumn == null) {
-        const index = columnsState.all[0] === '__check__' ? 1 : 0;
+        const index = columnsState.all[0] === GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
         columnsState.all = [...columnsState.all.slice(0, index), groupingColDefField, ...columnsState.all.slice(index)];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {

package/index.js

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

package/internals/index.d.ts

@@ -6,7 +6,6 @@ export { useGridColumnPinning, columnPinningStateInitializer, } from '../hooks/f
 export { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
 export { useGridColumnReorder, columnReorderStateInitializer, } from '../hooks/features/columnReorder/useGridColumnReorder';
 export { useGridDetailPanel, detailPanelStateInitializer, } from '../hooks/features/detailPanel/useGridDetailPanel';
-export { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
 export { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 export { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 export { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';

package/internals/index.js

@@ -6,7 +6,6 @@ export { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/fe
 export { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
 export { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
 export { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
-export { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
 export { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 export { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 export { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';

package/legacy/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/legacy/DataGridPro/useDataGridProComponent.js

@@ -8,7 +8,6 @@ import { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGrid
 import { useGridColumnPinning, columnPinningStateInitializer } from '../hooks/features/columnPinning/useGridColumnPinning';
 import { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinning/useGridColumnPinningPreProcessors';
 import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
-import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 import { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
 import { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
@@ -51,13 +50,12 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridTreeData(apiRef);
   useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
-  useGridDetailPanel(apiRef, props);
   useGridColumnPinning(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
+  useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
-  useGridDetailPanelCache(apiRef, props);
   var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/legacy/components/DataGridProColumnHeaders.js

@@ -6,6 +6,7 @@ var _excluded = ["style", "className", "innerRef"];
 import * as React from 'react';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { styled, alpha } from '@mui/material/styles';
+import { useEventCallback } from '@mui/material/utils';
 import { getDataGridUtilityClass, gridClasses, useGridSelector, useGridApiEventHandler, gridVisibleColumnFieldsSelector, GridColumnHeaderSeparatorSides } from '@mui/x-data-grid';
 import { GridColumnHeaders, GridColumnHeadersInner, useGridColumnHeaders } from '@mui/x-data-grid/internals';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
@@ -79,17 +80,19 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
       scrollbarSize = _React$useState2[0],
       setScrollbarSize = _React$useState2[1];
 
-  var handleContentSizeChange = React.useCallback(function () {
-    var _apiRef$current$windo;
+  var handleContentSizeChange = useEventCallback(function () {
+    var rootDimensions = apiRef.current.getRootDimensions();
 
-    if (!((_apiRef$current$windo = apiRef.current.windowRef) != null && _apiRef$current$windo.current)) {
+    if (!rootDimensions) {
       return;
-    } // TODO expose scrollbar size on getRootDimensions
+    }
 
+    var newScrollbarSize = rootDimensions.hasScrollY ? rootDimensions.scrollBarSize : 0;
 
-    var newScrollbarSize = apiRef.current.windowRef.current.offsetWidth - apiRef.current.windowRef.current.clientWidth;
-    setScrollbarSize(newScrollbarSize);
-  }, [apiRef]);
+    if (scrollbarSize !== newScrollbarSize) {
+      setScrollbarSize(newScrollbarSize);
+    }
+  });
   useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
   var pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
 

package/legacy/components/DataGridProVirtualScroller.js

@@ -6,7 +6,6 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 var _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';
@@ -14,6 +13,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 var filterColumns = function filterColumns(pinnedColumns, columns) {
@@ -81,31 +81,15 @@ var VirtualScrollerDetailPanels = styled('div', {
 })({
   position: 'relative'
 });
-var VirtualScrollerDetailPanel = styled(Box, {
-  name: 'MuiDataGrid',
-  slot: 'DetailPanel',
-  overridesResolver: function overridesResolver(props, styles) {
-    return styles.detailPanel;
-  }
-})(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    zIndex: 2,
-    width: '100%',
-    position: 'absolute',
-    backgroundColor: theme.palette.background.default,
-    overflow: 'auto'
-  };
-});
 var VirtualScrollerPinnedColumns = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedColumns',
   overridesResolver: function overridesResolver(props, styles) {
     return [_defineProperty({}, "&.".concat(gridClasses['pinnedColumns--left']), styles['pinnedColumns--left']), _defineProperty({}, "&.".concat(gridClasses['pinnedColumns--right']), styles['pinnedColumns--right']), styles.pinnedColumns];
   }
-})(function (_ref4) {
-  var theme = _ref4.theme,
-      ownerState = _ref4.ownerState;
+})(function (_ref3) {
+  var theme = _ref3.theme,
+      ownerState = _ref3.ownerState;
   return _extends({
     position: 'sticky',
     overflow: 'hidden',
@@ -135,8 +119,8 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   var detailPanelsHeights = useGridSelector(apiRef, gridDetailPanelExpandedRowsHeightCacheSelector);
   var leftColumns = React.useRef(null);
   var rightColumns = React.useRef(null);
-  var handleRenderZonePositioning = React.useCallback(function (_ref5) {
-    var top = _ref5.top;
+  var handleRenderZonePositioning = React.useCallback(function (_ref4) {
+    var top = _ref4.top;
 
     if (leftColumns.current) {
       leftColumns.current.style.transform = "translate3d(0px, ".concat(top, "px, 0px)");
@@ -227,15 +211,17 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       var exists = rowIndex !== undefined;
 
       if ( /*#__PURE__*/React.isValidElement(content) && exists) {
-        var height = detailPanelsHeights[id];
+        var hasAutoHeight = apiRef.current.unstable_detailPanelHasAutoHeight(id);
+        var height = hasAutoHeight ? 'auto' : detailPanelsHeights[id];
         var sizes = apiRef.current.unstable_getRowInternalSizes(id);
         var spacingTop = (sizes == null ? void 0 : sizes.spacingTop) || 0;
         var top = rowsMeta.positions[rowIndex] + apiRef.current.unstable_getRowHeight(id) + spacingTop;
-        panels.push( /*#__PURE__*/_jsx(VirtualScrollerDetailPanel, {
+        panels.push( /*#__PURE__*/_jsx(GridDetailPanel, {
+          rowId: id,
           style: {
-            top: top,
-            height: height
+            top: top
           },
+          height: height,
           className: classes.detailPanel,
           children: content
         }, i));

package/legacy/components/GridDetailPanel.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _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";
+var DetailPanel = styled(Box, {
+  name: 'MuiDataGrid',
+  slot: 'DetailPanel',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.detailPanel;
+  }
+})(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    zIndex: 2,
+    width: '100%',
+    position: 'absolute',
+    backgroundColor: theme.palette.background.default,
+    overflow: 'auto'
+  };
+});
+
+var GridDetailPanel = function GridDetailPanel(props) {
+  var rowId = props.rowId,
+      height = props.height,
+      _props$style = props.style,
+      styleProp = _props$style === void 0 ? {} : _props$style,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var apiRef = useGridApiContext();
+  var ref = React.useRef();
+  React.useLayoutEffect(function () {
+    if (height === 'auto' && ref.current && typeof ResizeObserver === 'undefined') {
+      // Fallback for IE
+      apiRef.current.unstable_storeDetailPanelHeight(rowId, ref.current.clientHeight);
+    }
+  }, [apiRef, height, rowId]);
+  React.useLayoutEffect(function () {
+    var hasFixedHeight = height !== 'auto';
+
+    if (!ref.current || hasFixedHeight || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var _entries = _slicedToArray(entries, 1),
+          entry = _entries[0];
+
+      var 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 function () {
+      return resizeObserver.disconnect();
+    };
+  }, [apiRef, height, rowId]);
+
+  var style = _extends({}, styleProp, {
+    height: height
+  });
+
+  return /*#__PURE__*/_jsx(DetailPanel, _extends({
+    ref: ref,
+    style: style
+  }, other));
+};
+
+export { GridDetailPanel };

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

@@ -1,9 +1,22 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { createSelector } from '@mui/x-data-grid/internals';
 export var gridDetailPanelExpandedRowIdsSelector = function gridDetailPanelExpandedRowIdsSelector(state) {
   return state.detailPanel.expandedRowIds;
 };
 export var gridDetailPanelExpandedRowsContentCacheSelector = function gridDetailPanelExpandedRowsContentCacheSelector(state) {
   return state.detailPanel.contentCache;
 };
-export var gridDetailPanelExpandedRowsHeightCacheSelector = function gridDetailPanelExpandedRowsHeightCacheSelector(state) {
+export var gridDetailPanelRawHeightCacheSelector = function gridDetailPanelRawHeightCacheSelector(state) {
   return state.detailPanel.heightCache;
-};
+}; // TODO v6: Make this selector return the full object, including the autoHeight flag
+
+export var gridDetailPanelExpandedRowsHeightCacheSelector = createSelector(gridDetailPanelRawHeightCacheSelector, function (heightCache) {
+  return Object.entries(heightCache).reduce(function (acc, _ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        id = _ref2[0],
+        height = _ref2[1].height;
+
+    acc[id] = height || 0;
+    return acc;
+  }, {});
+});

package/legacy/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -7,7 +7,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export var GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
 export var GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
-  headerName: '',
   type: 'detailPanelToggle',
   editable: false,
   sortable: false,
@@ -24,5 +23,8 @@ export var GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF,
   },
   renderCell: function renderCell(params) {
     return /*#__PURE__*/_jsx(GridDetailPanelToggleCell, _extends({}, params));
+  },
+  renderHeader: function renderHeader() {
+    return null;
   }
 });

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

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