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

package/CHANGELOG.md

@@ -3,6 +3,157 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.12.3
+
+_Jun 23, 2022_
+
+We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
+
+- 🌍 Add Swedish (sv-SE) locale on the data grid and the pickers (#5210) @mrxdst
+- 🌍 Add Dutch (nl-NL) locale on the pickers (#5237) @DDukers
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.12.3` / `@mui/x-data-grid-pro@v5.12.3` / `@mui/x-data-grid-premium@v5.12.3`
+
+#### Changes
+
+- [DataGrid] Do not hide non-hideable column when pressing Hide All button (#5298) @flaviendelangle
+- [DataGrid] Do not regenerate the row tree when the `loading` prop changes (#5213) @flaviendelangle
+- [DataGrid] Fix the default filter operator fallback on state initialization (#5266) @flaviendelangle
+- [DataGrid] Stop using the deprecated `api` prop in the grid components (#5205) @flaviendelangle
+- [DataGrid] Add Swedish (sv-SE) locale (#5210) @mrxdst
+- [DataGridPremium] Fix detail panel on `DataGridPremium` (#5264) @flaviendelangle
+- [DataGridPremium] Fix Excel import with Remix / Vite (#5207) @alexfauquette
+- [DataGridPremium] Fix error with quick filter and grouping rows (#5238) @alexfauquette
+
+### `@mui/x-date-pickers@v5.0.0-alpha.7` / `@mui/x-date-pickers-pro@v5.0.0-alpha.7`
+
+#### Changes
+
+- [pickers] Export adapters from both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` (#5204) @flaviendelangle
+- [pickers] Add Dutch (nl-NL) locale (#5237) @DDukers
+
+### Docs
+
+- [docs] Add `DataGridPremium` to all API sections (#5196) @flaviendelangle
+- [docs] Add plan badge next to event name in the Events page (#5200) @flaviendelangle
+- [docs] Add section for theme augmentation in the picker docs (#5276) @flaviendelangle
+- [docs] Add waiting for upvote section for row group panel (#5271) @flaviendelangle
+- [docs] Disable ad on main demo page (#5301) @joserodolfofreitas
+- [docs] Fix typo in the `DateRangePicker` documentation (#5259) @flaviendelangle
+
+### Core
+
+- [core] Allow having multiple playgrounds (#5288) @alexfauquette
+- [core] Improve typing of `GridFilterInputMultipleSingleSelect` (#5206) @flaviendelangle
+- [core] Remove arbitrary new lines (#5245) @oliviertassinari
+- [core] Remove dead logic (#5282) @oliviertassinari
+- [test] Fix `inputFormat` when testing with different date adapters (#5291) @cherniavskii
+- [test] Fix date assertion in Safari 13 (#5221) @m4theushw
+- [test] Throw if date adapter is not found (#5289) @cherniavskii
+- [test] Use mock for `ResizeObserver` (#5215) @m4theushw
+
+## v5.12.2
+
+_Jun 16, 2022_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🚀 Performance improvement for dynamic row height (#5135) @m4theushw
+- 🕒 Add demo of how to use the data grid with date pickers (#5053) @cherniavskii
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.12.2` / `@mui/x-data-grid-pro@v5.12.2` / `@mui/x-data-grid-premium@v5.12.2`
+
+#### Changes
+
+- [DataGrid] Fix for cosmetic bug on column filter badge (#5170) @simbahandiane
+- [DataGrid] Hide vertical scrollbar if `autoHeight` is enabled (#5164) @m4theushw
+- [DataGrid] Use exponential search to render non-measured rows (#5135) @m4theushw
+- [DataGridPro] Fix label of the detail panel toggle column (#5191) @m4theushw
+- [DataGridPro] Refresh detail panel caches when props change (#5110) @m4theushw
+
+### Docs
+
+- [docs] Add example with custom checkbox column (#5161) @flaviendelangle
+- [docs] Batch small changes (#5177) @oliviertassinari
+- [docs] Fix demo currency format (#5034) @oliviertassinari
+- [docs] Fix outdated license description to match the EULA (#5219) @joserodolfofreitas
+- [docs] Fix redundant headers (#5104) @oliviertassinari
+- [docs] Fix some capitalization to match the guidelines (#5105) @oliviertassinari
+- [docs] Improve the `getRowId` doc section (#5156) @flaviendelangle
+- [docs] Instruction to deal with invalid license message (#5074) @joserodolfofreitas
+- [docs] Use redirection in the code (#5114) @oliviertassinari
+- [docs] Add demo of how to use the data grid with date pickers (#5053) @cherniavskii
+
+### Core
+
+- [core] Improve inline code rendering within the details tag (#5166) @Harmouch101
+- [core] Remove unused props from plugin typing (#5185) @flaviendelangle
+- [core] Use the scrollbar size from `useGridDimensions` on `DataGridProColumnHeaders` (#5201) @flaviendelangle
+- [core] Fix `GridColTypeDef` type (#5167) @cherniavskii
+- [core] Fix `GridColTypeDef` usage in demo (#5197) @cherniavskii
+- [test] Add `waitFor` before asserting height (#5203) @m4theushw
+
+## v5.12.1
+
+_Jun 9, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Add `reason` to `onFilterModelChange` (#4938) @m4theushw
+- 🔎 Control quick filter input value via model prop (#5013) @alexfauquette
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.12.1` / `@mui/x-data-grid-pro@v5.12.1` / `@mui/x-data-grid-premium@v5.12.1`
+
+#### Changes
+
+- [DataGrid] Add `reason` to `onFilterModelChange` (#4938) @m4theushw
+- [DataGrid] Restore focus after dismissing the column menu (#5027) @m4theushw
+- [DataGrid] Update quick filter input when model is modified (#5013) @alexfauquette
+- [DataGrid] Fix implicit dependency on react-dom (#5121) @oliviertassinari
+- [DataGrid] Support `getRowId` in row reordering (#5093) @flaviendelangle
+- [DataGridPro] Fix column resizing in RTL mode (#4989) @cherniavskii
+- [DataGridPro] Fix column resizing on touchscreen (#5056) @cherniavskii
+- [l10n] Update Japanese (ja-JP) locale (#5122) @hikotq
+- [l10n] Update Russian (ru-RU) locale (#5069) @Artboomy
+
+### `@mui/x-date-pickers@v5.0.0-alpha.6` / `@mui/x-date-pickers-pro@v5.0.0-alpha.6`
+
+#### Changes
+
+- [pickers] Fix usage of `maxDate` / `minDate` / `disableFuture` and `disablePast` (#5081) @flaviendelangle
+- [pickers] Infer mask from `inputFormat` (#5060) @alexfauquette
+- [pickers] Manage input value without using the focus (#4486) @alexfauquette
+- [pickers] Use new localization for doc examples (#5097) @flaviendelangle
+- [pickers] Fix `shouldDisableDate` in range pickers (#5123) @flaviendelangle
+- [l10n] Add Brazilian Portuguese (pt-BR) locale (#5100) @jardelnovaes
+- [l10n] Use `localText` for remaining texts (#4986) @alexfauquette
+
+### Docs
+
+- [docs] Implement the focus management on data grid demo links (#5070) @alexfauquette
+- [docs] Fix `301` link to render cell (#5106) @oliviertassinari
+- [docs] Fix broken anchor link @oliviertassinari
+- [docs] Improve movie dataset (#5142) @flaviendelangle
+- [docs] Move all localization documentation in a unique page (#5072) @alexfauquette
+- [docs] Section for overwriting core components i18n keys (#4998) @DanailH
+- [docs] Small grammar and format fixes for Dynamic Row Height section (#5098) @samuelsycamore
+
+### Core
+
+- [core] Allows to run tests with different date adapters (#5055) @alexfauquette
+- [core] Prettify the l10n issue (#4928) @alexfauquette
+- [core] Set correct `apiRef` type in row reorder pre processors #5125 @DanailH
+- [core] Stop using `GridEvents` in technical doc (#5157) @flaviendelangle
+- [core] Upgrade monorepo (#5101) @oliviertassinari
+- [test] Fix dynamic row height test failing on Chrome (#5147) @m4theushw
+- [test] Remove delay on server demo for regression tests (#5131) @alexfauquette
+
 ## v5.12.0
 
 _May 31, 2022_
@@ -21,6 +172,8 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
 ### `@mui/x-data-grid@v5.12.0` / `@mui/x-data-grid-pro@v5.12.0` / `@mui/x-data-grid-premium@v5.12.0`
 
+#### Changes
+
 - [DataGrid] Support dynamic row height (#4859) @m4theushw
 - [DataGrid] Add `onMenuOpen` and `onMenuClose` props (#4825) @DanailH
 - [DataGrid] Add generics to `GridActionsColDef` to match `GridColDef` (#4982) @subvertallchris
@@ -36,7 +189,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [l10n] Add Norwegian (Bokmål) (nb-NO) locale (#5001) @spiftire
 - [l10n] Add Turkish (tr-TR) locale (#5026) @Rassilion
 
-### `@mui/x-date-pickers@5.0.0-alpha.5` / `@mui/x-date-pickers-pro@5.0.0-alpha.5`
+### `@mui/x-date-pickers@v5.0.0-alpha.5` / `@mui/x-date-pickers-pro@v5.0.0-alpha.5`
 
 #### Breaking changes
 
@@ -109,7 +262,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 - [DataGridPremium] Support column spanning in the Excel export (#4830) @cherniavskii
 - [l10n] Improve Russian (ru-RU) locale (#4864) @arvkonstantin
 
-### `@mui/x-date-pickers@5.0.0-alpha.4` / `@mui/x-date-pickers-pro@5.0.0-alpha.4`
+### `@mui/x-date-pickers@v5.0.0-alpha.4` / `@mui/x-date-pickers-pro@v5.0.0-alpha.4`
 
 #### Breaking changes
 
@@ -234,7 +387,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 - [l10n] Improve German (de-DE) locale (#4748) @sebastianfrey
 - [l10n] Improve German (de-DE) locale (#4668) @izu-co
 
-### `@mui/x-date-pickers@5.0.0-alpha.3` / `@mui/x-date-pickers-pro@5.0.0-alpha.3`
+### `@mui/x-date-pickers@v5.0.0-alpha.3` / `@mui/x-date-pickers-pro@v5.0.0-alpha.3`
 
 #### Breaking changes
 
@@ -335,7 +488,7 @@ We'd like to offer a big thanks to the 6 contributors who made this release poss
 - [DataGrid] Don't close column menu when updating rows (#4498) @m4theushw
 - [DataGridPro] Introduce row reorder (#4034) @DanailH
 
-### `@mui/x-date-pickers@5.0.0-alpha.2` / `@mui/x-date-pickers-pro@5.0.0-alpha.2`
+### `@mui/x-date-pickers@v5.0.0-alpha.2` / `@mui/x-date-pickers-pro@v5.0.0-alpha.2`
 
 - [pickers] Pass `PaperProps` to `DesktopWrapper` component (#4584) @alexfauquette
 - [TimePicker] Fix bug when time picker clear value (#4582) @alexfauquette
@@ -396,7 +549,7 @@ We'd like to offer a big thanks to the 9 contributors who made this release poss
 - [DataGridPro] Fix toggling detail panel using keyboard (#4409) @cherniavskii
 - [l10n] Add Hungarian (hu-HU) locale (#4458) @x22tri
 
-### `@mui/x-date-pickers@5.0.0-alpha.1` / `@mui/x-date-pickers-pro@5.0.0-alpha.1`
+### `@mui/x-date-pickers@v5.0.0-alpha.1` / `@mui/x-date-pickers-pro@v5.0.0-alpha.1`
 
 - [ClockPicker] Should call `shouldDisableTime` with the hours with meridiem (#4404) @flaviendelangle
 - [MonthPicker] Clicking on a `PickersMonth` button should not trigger the form submit (#4402) @flaviendelangle
@@ -4025,9 +4178,9 @@ Big thanks to the 8 contributors who made this release possible. Here are some h
 
 ### Docs
 
-- [docs] Data Grid depends on side effects (#666) @oliviertassinari
+- [docs] Data grid depends on side effects (#666) @oliviertassinari
 - [docs] Clarify the purpose of x-grid-data-generator (#634) @Elius94
-- [docs] Data Grid is in the lab (#612) @oliviertassinari
+- [docs] Data grid is in the lab (#612) @oliviertassinari
 - [docs] Fix Demo app, downgrade webpack-cli, known issue in latest version (#647) @dtassone
 - [docs] Fix typo in columns.md @stojy
 - [docs] Reduce confusion on /export page (#646) @SerdarMustafa1

package/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 const useDataGridProComponent = (inputApiRef, props) => {
   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);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/components/DataGridProColumnHeaders.js

@@ -4,6 +4,7 @@ const _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';
@@ -76,17 +77,19 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
   const apiRef = useGridApiContext();
   const visibleColumnFields = useGridSelector(apiRef, gridVisibleColumnFieldsSelector);
   const [scrollbarSize, setScrollbarSize] = React.useState(0);
-  const handleContentSizeChange = React.useCallback(() => {
-    var _apiRef$current$windo;
+  const handleContentSizeChange = 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);
+    }
+  });
   useGridApiEventHandler(apiRef, 'virtualScrollerContentSizeChange', handleContentSizeChange);
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);

package/components/GridRowReorderCell.js

@@ -42,16 +42,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/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, 'initialState' | 'disableColumnPinning' | 'pinnedColumns' | 'onPinnedColumnsChange'>) => void;
+export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnPinning' | 'pinnedColumns' | 'onPinnedColumnsChange'>) => void;

package/hooks/features/columnPinning/useGridColumnPinning.js

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

package/hooks/features/columnResize/useGridColumnResize.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { ownerDocument, useEventCallback } from '@mui/material/utils';
-import { gridClasses, GridColumnHeaderSeparatorSides, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
+import { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
+import { useTheme } from '@mui/material/styles';
 import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
@@ -50,10 +51,10 @@ function trackFinger(event, currentTouchId) {
   };
 }
 
-function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separatorSide) {
+function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, resizeDirection) {
   let newWidth = initialOffsetToSeparator;
 
-  if (separatorSide === GridColumnHeaderSeparatorSides.Right) {
+  if (resizeDirection === 'Right') {
     newWidth += clickX - columnBounds.left;
   } else {
     newWidth += columnBounds.right - clickX;
@@ -62,16 +63,31 @@ function computeNewWidth(initialOffsetToSeparator, clickX, columnBounds, separat
   return newWidth;
 }
 
-function computeOffsetToSeparator(clickX, columnBounds, separatorSide) {
-  if (separatorSide === 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(gridClasses['columnSeparator--sideRight']) ? GridColumnHeaderSeparatorSides.Right : GridColumnHeaderSeparatorSides.Left;
+function flipResizeDirection(side) {
+  if (side === 'Right') {
+    return 'Left';
+  }
+
+  return 'Right';
+}
+
+function getResizeDirection(element, direction) {
+  const side = element.classList.contains(gridClasses['columnSeparator--sideRight']) ? 'Right' : 'Left';
+
+  if (direction === 'rtl') {
+    // Resizing logic should be mirrored in the RTL case
+    return flipResizeDirection(side);
+  }
+
+  return side;
 }
 
 export const columnResizeStateInitializer = state => _extends({}, state, {
@@ -88,12 +104,13 @@ export const useGridColumnResize = (apiRef, props) => {
   const logger = 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 = 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();
 
@@ -152,7 +169,7 @@ export 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 = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     const params = {
@@ -188,8 +205,8 @@ export const useGridColumnResize = (apiRef, props) => {
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     const doc = 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);
   });
@@ -222,7 +239,7 @@ export 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 = clamp(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
     updateWidth(newWidth);
     const params = {
@@ -263,8 +280,8 @@ export const useGridColumnResize = (apiRef, props) => {
     colDefRef.current = colDef;
     colElementRef.current = findHeaderElementFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
     colCellElementsRef.current = 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 = ownerDocument(event.currentTarget);
     doc.addEventListener('touchmove', handleTouchMove);
     doc.addEventListener('touchend', handleTouchEnd);

package/hooks/features/detailPanel/gridDetailPanelToggleColDef.js

@@ -7,7 +7,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const GRID_DETAIL_PANEL_TOGGLE_FIELD = '__detail_panel_toggle__';
 export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   field: GRID_DETAIL_PANEL_TOGGLE_FIELD,
-  headerName: '',
   type: 'detailPanelToggle',
   editable: false,
   sortable: false,
@@ -22,5 +21,6 @@ export const GRID_DETAIL_PANEL_TOGGLE_COL_DEF = _extends({}, GRID_STRING_COL_DEF
     const expandedRowIds = gridDetailPanelExpandedRowIdsSelector(params.api.state);
     return expandedRowIds.includes(params.id);
   },
-  renderCell: params => /*#__PURE__*/_jsx(GridDetailPanelToggleCell, _extends({}, params))
+  renderCell: params => /*#__PURE__*/_jsx(GridDetailPanelToggleCell, _extends({}, params)),
+  renderHeader: () => null
 });

package/hooks/features/detailPanel/useGridDetailPanel.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 detailPanelStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'initialState' | 'detailPanelExpandedRowIds'>>;
-export declare const useGridDetailPanel: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'initialState' | 'getDetailPanelContent' | 'getDetailPanelHeight' | 'detailPanelExpandedRowIds' | 'onDetailPanelExpandedRowIdsChange' | 'pagination' | 'paginationMode'>) => void;
+export declare const useGridDetailPanel: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'getDetailPanelContent' | 'getDetailPanelHeight' | 'detailPanelExpandedRowIds' | 'onDetailPanelExpandedRowIdsChange'>) => void;

package/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';
@@ -13,6 +13,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);
@@ -51,23 +80,7 @@ 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_updateControlState({
+  apiRef.current.unstable_registerControlState({
     stateId: 'detailPanels',
     propModel: props.detailPanelExpandedRowIds,
     propOnChange: props.onDetailPanelExpandedRowIdsChange,
@@ -114,4 +127,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))
+      });
+    });
+    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) => {
+    var _heightCache$row$id;
+
+    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 = 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/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/rowReorder/useGridRowReorderPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { GridApiCommunity } from '@mui/x-data-grid/internals';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
-export declare const useGridRowReorderPreProcessors: (apiRef: React.MutableRefObject<GridApiCommunity>, props: DataGridProProcessedProps) => void;
+import { GridApiPro } from '../../../models/gridApiPro';
+export declare const useGridRowReorderPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>, props: DataGridProProcessedProps) => void;

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.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/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';