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

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

@@ -1,6 +1,6 @@
 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';
@@ -11,6 +11,35 @@ export const detailPanelStateInitializer = (state, props) => {
     }
   });
 };
+
+function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight) {
+  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);
+    acc[id] = getDetailPanelHeight(params);
+    return acc;
+  }, {});
+  return {
+    contentCache,
+    heightCache
+  };
+}
+
 export const useGridDetailPanel = (apiRef, props) => {
   const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
   const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
@@ -49,21 +78,7 @@ export const useGridDetailPanel = (apiRef, props) => {
   }, [apiRef, props.getDetailPanelContent]);
   useGridApiEventHandler(apiRef, 'cellClick', handleCellClick);
   useGridApiEventHandler(apiRef, 'cellKeyDown', handleCellKeyDown);
-  const addDetailHeight = React.useCallback((initialValue, row) => {
-    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] ?? 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_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,
@@ -110,4 +125,49 @@ 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))
+      });
+    });
+    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))
+      });
+    });
+    previousGetDetailPanelContentProp.current = props.getDetailPanelContent;
+    previousGetDetailPanelHeightProp.current = props.getDetailPanelHeight;
+  }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
+  const addDetailHeight = React.useCallback((initialValue, row) => {
+    if (!expandedRowIds || expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
+      return _extends({}, initialValue, {
+        detail: 0
+      });
+    }
+
+    updateCachesIfNeeded();
+    const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef.current.state);
+    return _extends({}, initialValue, {
+      detail: 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/modern/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/modern/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';
@@ -59,7 +59,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/modern/index.js

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

package/modern/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/modern/utils/releaseInfo.js

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

package/node/DataGridPro/useDataGridProComponent.js

@@ -23,8 +23,6 @@ var _useGridColumnPinningPreProcessors = require("../hooks/features/columnPinnin
 
 var _useGridDetailPanel = require("../hooks/features/detailPanel/useGridDetailPanel");
 
-var _useGridDetailPanelCache = require("../hooks/features/detailPanel/useGridDetailPanelCache");
-
 var _useGridDetailPanelPreProcessors = require("../hooks/features/detailPanel/useGridDetailPanelPreProcessors");
 
 var _useGridRowReorder = require("../hooks/features/rowReorder/useGridRowReorder");
@@ -71,13 +69,12 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _useGridTreeData.useGridTreeData)(apiRef);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridSelection)(apiRef, props);
-  (0, _useGridDetailPanel.useGridDetailPanel)(apiRef, props);
   (0, _useGridColumnPinning.useGridColumnPinning)(apiRef, props);
   (0, _internals.useGridColumns)(apiRef, props);
   (0, _internals.useGridRows)(apiRef, props);
   (0, _internals.useGridParamsApi)(apiRef);
+  (0, _useGridDetailPanel.useGridDetailPanel)(apiRef, props);
   (0, _internals.useGridColumnSpanning)(apiRef);
-  (0, _useGridDetailPanelCache.useGridDetailPanelCache)(apiRef, props);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _internals.useGridEditing_new : _internals.useGridEditing_old;
   useGridEditing(apiRef, props);
   (0, _internals.useGridFocus)(apiRef, props);

package/node/components/DataGridProColumnHeaders.js

@@ -17,6 +17,8 @@ var _material = require("@mui/material");
 
 var _styles = require("@mui/material/styles");
 
+var _utils = require("@mui/material/utils");
+
 var _xDataGrid = require("@mui/x-data-grid");
 
 var _internals = require("@mui/x-data-grid/internals");
@@ -99,17 +101,19 @@ const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function DataGrid
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const visibleColumnFields = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridVisibleColumnFieldsSelector);
   const [scrollbarSize, setScrollbarSize] = React.useState(0);
-  const handleContentSizeChange = React.useCallback(() => {
-    var _apiRef$current$windo;
+  const handleContentSizeChange = (0, _utils.useEventCallback)(() => {
+    const 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
+    }
 
+    const newScrollbarSize = rootDimensions.hasScrollY ? rootDimensions.scrollBarSize : 0;
 
-    const newScrollbarSize = apiRef.current.windowRef.current.offsetWidth - apiRef.current.windowRef.current.clientWidth;
-    setScrollbarSize(newScrollbarSize);
-  }, [apiRef]);
+    if (scrollbarSize !== newScrollbarSize) {
+      setScrollbarSize(newScrollbarSize);
+    }
+  });
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
   const pinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _columnPinning.gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = (0, _DataGridProVirtualScroller.filterColumns)(pinnedColumns, visibleColumnFields);

package/node/components/GridRowReorderCell.js

@@ -59,16 +59,16 @@ const GridRowReorderCell = params => {
     } // The row might have been deleted
 
 
-    if (!apiRef.current.getRow(params.row.id)) {
+    if (!apiRef.current.getRow(params.id)) {
       return;
     }
 
-    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.row.id), event);
+    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.id), event);
 
     if (propHandler) {
       propHandler(event);
     }
-  }, [apiRef, params.row.id]);
+  }, [apiRef, params.id]);
   const draggableEventHandlers = isDraggable ? {
     onDragStart: publish('rowDragStart'),
     onDragOver: publish('rowDragOver'),

package/node/hooks/features/columnPinning/useGridColumnPinning.js

@@ -213,7 +213,7 @@ const useGridColumnPinning = (apiRef, props) => {
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'canBeReordered', checkIfCanBeReordered);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'pinnedColumns',
     propModel: props.pinnedColumns,
     propOnChange: props.onPinnedColumnsChange,

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -17,6 +17,8 @@ var _xDataGrid = require("@mui/x-data-grid");
 
 var _internals = require("@mui/x-data-grid/internals");
 
+var _styles = require("@mui/material/styles");
+
 var _domUtils = require("../../../utils/domUtils");
 
 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); }
@@ -69,10 +71,10 @@ function trackFinger(event, currentTouchId) {
   };
 }
 
-function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separatorSide) {
+function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, resizeDirection) {
   let newWidth = initialOffsetToSeparator;
 
-  if (separatorSide === _xDataGrid.GridColumnHeaderSeparatorSides.Right) {
+  if (resizeDirection === 'Right') {
     newWidth += clickX - columnBounds.left;
   } else {
     newWidth += columnBounds.right - clickX;
@@ -81,16 +83,31 @@ function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separat
   return newWidth;
 }
 
-function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
-  if (separatorSide === _xDataGrid.GridColumnHeaderSeparatorSides.Left) {
+function computeOffsetToSeparator(clickX, columnBounds, resizeDirection) {
+  if (resizeDirection === 'Left') {
     return clickX - columnBounds.left;
   }
 
   return columnBounds.right - clickX;
 }
 
-function getSeparatorSide(element) {
-  return element.classList.contains(_xDataGrid.gridClasses['columnSeparator--sideRight']) ? _xDataGrid.GridColumnHeaderSeparatorSides.Right : _xDataGrid.GridColumnHeaderSeparatorSides.Left;
+function flipResizeDirection(side) {
+  if (side === 'Right') {
+    return 'Left';
+  }
+
+  return 'Right';
+}
+
+function getResizeDirection(element, direction) {
+  const side = element.classList.contains(_xDataGrid.gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
+
+  if (direction === 'rtl') {
+    // Resizing logic should be mirrored in the RTL case
+    return flipResizeDirection(side);
+  }
+
+  return side;
 }
 
 const columnResizeStateInitializer = state => (0, _extends2.default)({}, state, {
@@ -110,12 +127,13 @@ const useGridColumnResize = (apiRef, props) => {
   const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
-  const colCellElementsRef = React.useRef(); // To improve accessibility, the separator has padding on both sides.
+  const colCellElementsRef = React.useRef();
+  const theme = (0, _styles.useTheme)(); // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
   // This ref stores the offset between the click and the separator.
 
   const initialOffsetToSeparator = React.useRef();
-  const separatorSide = React.useRef();
+  const resizeDirection = React.useRef();
   const stopResizeEventTimeout = React.useRef();
   const touchId = React.useRef();
 
@@ -174,7 +192,7 @@ const useGridColumnResize = (apiRef, props) => {
       return;
     }
 
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     newWidth = (0, _internals.clamp)(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     const params = {
@@ -210,8 +228,8 @@ const useGridColumnResize = (apiRef, props) => {
     colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current, apiRef.current);
     const doc = (0, _utils.ownerDocument)(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
-    separatorSide.current = getSeparatorSide(event.currentTarget);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    resizeDirection.current = getResizeDirection(event.currentTarget, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(event.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
   });
@@ -244,7 +262,7 @@ const useGridColumnResize = (apiRef, props) => {
       return;
     }
 
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     newWidth = (0, _internals.clamp)(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     const params = {
@@ -285,8 +303,8 @@ const useGridColumnResize = (apiRef, props) => {
     colDefRef.current = colDef;
     colElementRef.current = (0, _domUtils.findHeaderElementFromField)((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
     colCellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(colElementRef.current, apiRef.current);
-    separatorSide.current = getSeparatorSide(event.target);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), separatorSide.current);
+    resizeDirection.current = getResizeDirection(event.target, theme.direction);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
     const doc = (0, _utils.ownerDocument)(event.currentTarget);
     doc.addEventListener('touchmove', handleTouchMove);
     doc.addEventListener('touchend', handleTouchEnd);

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

@@ -27,7 +27,6 @@ const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
 exports.GRID_DETAIL_PANEL_TOGGLE_FIELD = GRID_DETAIL_PANEL_TOGGLE_FIELD;
 const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = (0, _extends2.default)({}, _xDataGrid.GRID_STRING_COL_DEF, {
   field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
-  headerName: '',
   type: 'detailPanelToggle',
   editable: false,
   sortable: false,
@@ -42,6 +41,7 @@ const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = (0, _extends2.default)({}, _xDataGrid.G
     const expandedRowIds = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector)(params.api.state);
     return expandedRowIds.includes(params.id);
   },
-  renderCell: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridDetailPanelToggleCell.GridDetailPanelToggleCell, (0, _extends2.default)({}, params))
+  renderCell: params => /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridDetailPanelToggleCell.GridDetailPanelToggleCell, (0, _extends2.default)({}, params)),
+  renderHeader: () => null
 });
 exports.GRID_DETAIL_PANEL_TOGGLE_COL_DEF = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;

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

@@ -35,6 +35,34 @@ const detailPanelStateInitializer = (state, props) => {
 
 exports.detailPanelStateInitializer = detailPanelStateInitializer;
 
+function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight) {
+  if (typeof getDetailPanelContent !== 'function') {
+    return {};
+  } // TODO change to lazy approach using a Proxy
+  // only call getDetailPanelContent when asked for an id
+
+
+  const rowIds = (0, _xDataGrid.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);
+    acc[id] = getDetailPanelHeight(params);
+    return acc;
+  }, {});
+  return {
+    contentCache,
+    heightCache
+  };
+}
+
 const useGridDetailPanel = (apiRef, props) => {
   const expandedRowIds = (0, _xDataGrid.useGridSelector)(apiRef, _gridDetailPanelSelector.gridDetailPanelExpandedRowIdsSelector);
   const contentCache = (0, _xDataGrid.useGridSelector)(apiRef, _gridDetailPanelSelector.gridDetailPanelExpandedRowsContentCacheSelector);
@@ -73,23 +101,7 @@ const useGridDetailPanel = (apiRef, props) => {
   }, [apiRef, props.getDetailPanelContent]);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'cellClick', handleCellClick);
   (0, _xDataGrid.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
-  const addDetailHeight = React.useCallback((initialValue, row) => {
-    var _heightCache$row$id;
-
-    if (expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
-      return (0, _extends2.default)({}, initialValue, {
-        detail: 0
-      });
-    }
-
-    const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowsHeightCacheSelector)(apiRef.current.state);
-    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)
-
-    });
-  }, [apiRef, expandedRowIds]);
-  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'rowHeight', addDetailHeight);
-  apiRef.current.unstable_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,
@@ -136,6 +148,53 @@ const useGridDetailPanel = (apiRef, props) => {
       }
     }
   }, [apiRef, props.detailPanelExpandedRowIds]);
+  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))
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
+  (0, _xDataGrid.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 (0, _extends2.default)({}, state, {
+        detailPanel: (0, _extends2.default)({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight))
+      });
+    });
+    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 (0, _extends2.default)({}, initialValue, {
+        detail: 0
+      });
+    }
+
+    updateCachesIfNeeded();
+    const heightCache = (0, _gridDetailPanelSelector.gridDetailPanelExpandedRowsHeightCacheSelector)(apiRef.current.state);
+    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)
+
+    });
+  }, [apiRef, expandedRowIds, updateCachesIfNeeded]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'rowHeight', addDetailHeight);
+  const isFirstRender = React.useRef(true);
+
+  if (isFirstRender.current) {
+    isFirstRender.current = false;
+    updateCachesIfNeeded();
+  }
 };
 
 exports.useGridDetailPanel = useGridDetailPanel;

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

@@ -1,10 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useGridDetailPanelPreProcessors = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _internals = require("@mui/x-data-grid/internals");
@@ -35,9 +39,11 @@ const useGridDetailPanelPreProcessors = (apiRef, props) => {
 
 
     columnsState.all = [_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.all];
-    columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
+    columnsState.lookup[_gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_FIELD] = (0, _extends2.default)({}, _gridDetailPanelToggleColDef.GRID_DETAIL_PANEL_TOGGLE_COL_DEF, {
+      headerName: apiRef.current.getLocaleText('detailPanelToggle')
+    });
     return columnsState;
-  }, [props.getDetailPanelContent]);
+  }, [apiRef, props.getDetailPanelContent]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', addToggleColumn);
 };
 

package/node/hooks/features/treeData/useGridTreeDataPreProcessors.js

@@ -85,7 +85,7 @@ const useGridTreeDataPreProcessors = (apiRef, props) => {
       columnsState.lookup[groupingColDefField] = newGroupingColumn;
 
       if (prevGroupingColumn == null) {
-        const index = columnsState.all[0] === '__check__' ? 1 : 0;
+        const index = columnsState.all[0] === _xDataGrid.GRID_CHECKBOX_SELECTION_FIELD ? 1 : 0;
         columnsState.all = [...columnsState.all.slice(0, index), groupingColDefField, ...columnsState.all.slice(index)];
       }
     } else if (!shouldHaveGroupingColumn && prevGroupingColumn) {

package/node/index.js

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

package/node/internals/index.js

@@ -15,7 +15,6 @@ var _exportNames = {
   columnReorderStateInitializer: true,
   useGridDetailPanel: true,
   detailPanelStateInitializer: true,
-  useGridDetailPanelCache: true,
   useGridDetailPanelPreProcessors: true,
   useGridInfiniteLoader: true,
   useGridRowReorder: true,
@@ -103,12 +102,6 @@ Object.defineProperty(exports, "useGridDetailPanel", {
     return _useGridDetailPanel.useGridDetailPanel;
   }
 });
-Object.defineProperty(exports, "useGridDetailPanelCache", {
-  enumerable: true,
-  get: function () {
-    return _useGridDetailPanelCache.useGridDetailPanelCache;
-  }
-});
 Object.defineProperty(exports, "useGridDetailPanelPreProcessors", {
   enumerable: true,
   get: function () {
@@ -174,8 +167,6 @@ var _useGridColumnReorder = require("../hooks/features/columnReorder/useGridColu
 
 var _useGridDetailPanel = require("../hooks/features/detailPanel/useGridDetailPanel");
 
-var _useGridDetailPanelCache = require("../hooks/features/detailPanel/useGridDetailPanelCache");
-
 var _useGridDetailPanelPreProcessors = require("../hooks/features/detailPanel/useGridDetailPanelPreProcessors");
 
 var _useGridInfiniteLoader = require("../hooks/features/infiniteLoader/useGridInfiniteLoader");

package/node/utils/releaseInfo.js

@@ -8,7 +8,7 @@ exports.getReleaseInfo = void 0;
 var _utils = require("@mui/utils");
 
 const getReleaseInfo = () => {
-  const releaseInfo = "MTY1Mzk0ODAwMDAwMA==";
+  const releaseInfo = "MTY1NjAyMTYwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/x-data-grid-pro",
-  "version": "5.12.0",
+  "version": "5.12.3",
   "description": "The Pro plan edition of the data grid component (MUI X).",
   "author": "MUI Team",
   "main": "./node/index.js",
@@ -33,17 +33,18 @@
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@mui/utils": "^5.4.1",
-    "@mui/x-data-grid": "5.12.0",
-    "@mui/x-license-pro": "5.12.0",
+    "@mui/x-data-grid": "5.12.3",
+    "@mui/x-license-pro": "5.12.3",
     "@types/format-util": "^1.0.2",
     "clsx": "^1.0.4",
     "prop-types": "^15.8.1",
-    "reselect": "^4.1.5"
+    "reselect": "^4.1.6"
   },
   "peerDependencies": {
     "@mui/material": "^5.4.1",
     "@mui/system": "^5.4.1",
-    "react": "^17.0.2 || ^18.0.0"
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "setupFiles": [
     "<rootDir>/src/setupTests.js"

package/utils/releaseInfo.js

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

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

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import { GridApiPro } from '../../../models/gridApiPro';
-import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
-export declare const useGridDetailPanelCache: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'getDetailPanelContent' | 'getDetailPanelHeight'>) => void;