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

package/hooks/features/columnPinning/useGridColumnPinning.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import MuiDivider from '@mui/material/Divider';
-import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, useGridApiMethod, useGridApiEventHandler } from '@mui/x-data-grid';
+import { useGridSelector, gridVisibleColumnDefinitionsSelector, gridColumnsTotalWidthSelector, gridColumnPositionsSelector, gridVisibleColumnFieldsSelector, gridClasses, useGridApiMethod, useGridApiEventHandler, gridColumnFieldsSelector } from '@mui/x-data-grid';
 import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
 import { GridColumnPinningMenuItems } from '../../../components/GridColumnPinningMenuItems';
 import { GridPinnedPosition } from './gridColumnPinningInterface';
@@ -13,9 +13,12 @@ const Divider = () => /*#__PURE__*/_jsx(MuiDivider, {
   onClick: event => event.stopPropagation()
 });
 
-export const columnPinningStateInitializer = (state, props) => {
+export const columnPinningStateInitializer = (state, props, apiRef) => {
   var _props$initialState;
 
+  apiRef.current.unstable_caches.columnPinning = {
+    orderedFieldsBeforePinningColumns: null
+  };
   let model;
 
   if (props.disableColumnPinning) {
@@ -186,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,
@@ -205,34 +208,20 @@ export const useGridColumnPinning = (apiRef, props) => {
       return;
     }
 
-    apiRef.current.setState(state => {
-      const otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right;
-
-      const newPinnedColumns = _extends({}, state.pinnedColumns, {
-        [side]: [...(state.pinnedColumns[side] || []), field],
-        [otherSide]: (state.pinnedColumns[otherSide] || []).filter(column => column !== field)
-      });
-
-      return _extends({}, state, {
-        pinnedColumns: newPinnedColumns
-      });
-    });
-    apiRef.current.forceUpdate();
-  }, [apiRef, checkIfEnabled]);
+    const otherSide = side === GridPinnedPosition.right ? GridPinnedPosition.left : GridPinnedPosition.right;
+    const newPinnedColumns = {
+      [side]: [...(pinnedColumns[side] || []), field],
+      [otherSide]: (pinnedColumns[otherSide] || []).filter(column => column !== field)
+    };
+    apiRef.current.setPinnedColumns(newPinnedColumns);
+  }, [apiRef, checkIfEnabled, pinnedColumns]);
   const unpinColumn = React.useCallback(field => {
     checkIfEnabled('unpinColumn');
-    apiRef.current.setState(state => {
-      const newPinnedColumns = _extends({}, state.pinnedColumns, {
-        left: (state.pinnedColumns.left || []).filter(column => column !== field),
-        right: (state.pinnedColumns.right || []).filter(column => column !== field)
-      });
-
-      return _extends({}, state, {
-        pinnedColumns: newPinnedColumns
-      });
+    apiRef.current.setPinnedColumns({
+      left: (pinnedColumns.left || []).filter(column => column !== field),
+      right: (pinnedColumns.right || []).filter(column => column !== field)
     });
-    apiRef.current.forceUpdate();
-  }, [apiRef, checkIfEnabled]);
+  }, [apiRef, checkIfEnabled, pinnedColumns.left, pinnedColumns.right]);
   const getPinnedColumns = React.useCallback(() => {
     checkIfEnabled('getPinnedColumns');
     return gridPinnedColumnsSelector(apiRef.current.state);
@@ -266,6 +255,62 @@ export const useGridColumnPinning = (apiRef, props) => {
     isColumnPinned
   };
   useGridApiMethod(apiRef, columnPinningApi, 'columnPinningApi');
+  const handleColumnOrderChange = React.useCallback(params => {
+    if (!apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns) {
+      return;
+    }
+
+    const {
+      field,
+      targetIndex,
+      oldIndex
+    } = params;
+    const delta = targetIndex > oldIndex ? 1 : -1;
+    const latestColumnFields = gridColumnFieldsSelector(apiRef);
+    /**
+     * When a column X is reordered to somewhere else, the position where this column X is dropped
+     * on must be moved to left or right to make room for it. The ^^^ below represents the column
+     * which gave space to receive X.
+     *
+     * | X | B | C | D | -> | B | C | D | X | (e.g. X moved to after D, so delta=1)
+     *              ^^^              ^^^
+     *
+     * | A | B | C | X | -> | X | A | B | C | (e.g. X moved before A, so delta=-1)
+     *  ^^^                      ^^^
+     *
+     * If column P is pinned, it will not move to provide space. However, it will jump to the next
+     * non-pinned column.
+     *
+     * | X | B | P | D | -> | B | D | P | X | (e.g. X moved to after D, with P pinned)
+     *              ^^^          ^^^
+     */
+
+    const siblingField = latestColumnFields[targetIndex - delta];
+    const newOrderedFieldsBeforePinningColumns = [...apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns]; // The index to start swapping fields
+
+    let i = newOrderedFieldsBeforePinningColumns.findIndex(column => column === field); // The index of the field to swap with
+
+    let j = i + delta; // When to stop swapping fields.
+    // We stop one field before because the swap is done with i + 1 (if delta=1)
+
+    const stop = newOrderedFieldsBeforePinningColumns.findIndex(column => column === siblingField);
+
+    while (delta > 0 ? i < stop : i > stop) {
+      // If the field to swap with is a pinned column, jump to the next
+      while (apiRef.current.isColumnPinned(newOrderedFieldsBeforePinningColumns[j])) {
+        j += delta;
+      }
+
+      const temp = newOrderedFieldsBeforePinningColumns[i];
+      newOrderedFieldsBeforePinningColumns[i] = newOrderedFieldsBeforePinningColumns[j];
+      newOrderedFieldsBeforePinningColumns[j] = temp;
+      i = j;
+      j = i + delta;
+    }
+
+    apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
+  }, [apiRef]);
+  useGridApiEventHandler(apiRef, 'columnOrderChange', handleColumnOrderChange);
   React.useEffect(() => {
     if (props.pinnedColumns) {
       apiRef.current.setPinnedColumns(props.pinnedColumns);

package/hooks/features/columnPinning/useGridColumnPinningPreProcessors.js

@@ -23,23 +23,86 @@ export const useGridColumnPinningPreProcessors = (apiRef, props) => {
     pinnedColumns = gridPinnedColumnsSelector(initializedState);
   }
 
+  const prevAllPinnedColumns = React.useRef();
   const reorderPinnedColumns = React.useCallback(columnsState => {
     if (columnsState.all.length === 0 || disableColumnPinning) {
       return columnsState;
     }
 
     const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, columnsState.all);
+    let newOrderedFields;
+    const allPinnedColumns = [...leftPinnedColumns, ...rightPinnedColumns];
+    const {
+      orderedFieldsBeforePinningColumns
+    } = apiRef.current.unstable_caches.columnPinning;
 
-    if (leftPinnedColumns.length === 0 && rightPinnedColumns.length === 0) {
-      return columnsState;
+    if (orderedFieldsBeforePinningColumns) {
+      newOrderedFields = new Array(columnsState.all.length).fill(null);
+      const newOrderedFieldsBeforePinningColumns = [...newOrderedFields]; // Contains the fields not added to the orderedFields array yet
+
+      const remainingFields = [...columnsState.all]; // First, we check if the column was unpinned since the last processing.
+      // If yes and it still exists, we move it back to the same position it was before pinning
+
+      prevAllPinnedColumns.current.forEach(field => {
+        if (!allPinnedColumns.includes(field) && columnsState.lookup[field]) {
+          // Get the position before pinning
+          const index = orderedFieldsBeforePinningColumns.indexOf(field);
+          newOrderedFields[index] = field;
+          newOrderedFieldsBeforePinningColumns[index] = field; // This field was already consumed so we prevent from being added again
+
+          remainingFields.splice(remainingFields.indexOf(field), 1);
+        }
+      }); // For columns still pinned, we keep stored their original positions
+
+      allPinnedColumns.forEach(field => {
+        let index = orderedFieldsBeforePinningColumns.indexOf(field); // If index = -1, the pinned field didn't exist in the last processing, it's possibly being added now
+        // If index >= newOrderedFieldsBeforePinningColumns.length, then one or more columns were removed
+        // In both cases, use the position from the columns array
+        // TODO: detect removed columns and decrease the positions after it
+
+        if (index === -1 || index >= newOrderedFieldsBeforePinningColumns.length) {
+          index = columnsState.all.indexOf(field);
+        } // The fallback above may make the column to be inserted in a position already occupied
+        // In this case, put it in any empty slot available
+
+
+        if (newOrderedFieldsBeforePinningColumns[index] !== null) {
+          index = 0;
+
+          while (newOrderedFieldsBeforePinningColumns[index] !== null) {
+            index += 1;
+          }
+        }
+
+        newOrderedFields[index] = field;
+        newOrderedFieldsBeforePinningColumns[index] = field; // This field was already consumed so we prevent from being added again
+
+        remainingFields.splice(remainingFields.indexOf(field), 1);
+      }); // The fields remaining are those that're neither pinnned nor were unpinned
+      // For these, we spread them across both arrays making sure to not override existing values
+
+      let i = 0;
+      remainingFields.forEach(field => {
+        while (newOrderedFieldsBeforePinningColumns[i] !== null) {
+          i += 1;
+        }
+
+        newOrderedFieldsBeforePinningColumns[i] = field;
+        newOrderedFields[i] = field;
+      });
+      apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns = newOrderedFieldsBeforePinningColumns;
+    } else {
+      newOrderedFields = [...columnsState.all];
+      apiRef.current.unstable_caches.columnPinning.orderedFieldsBeforePinningColumns = [...columnsState.all];
     }
 
-    const centerColumns = columnsState.all.filter(field => {
+    prevAllPinnedColumns.current = allPinnedColumns;
+    const centerColumns = newOrderedFields.filter(field => {
       return !leftPinnedColumns.includes(field) && !rightPinnedColumns.includes(field);
     });
     return _extends({}, columnsState, {
       all: [...leftPinnedColumns, ...centerColumns, ...rightPinnedColumns]
     });
-  }, [disableColumnPinning, pinnedColumns]);
+  }, [apiRef, disableColumnPinning, pinnedColumns]);
   useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', reorderPinnedColumns);
 };

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/useGridRowReorder.js

@@ -60,6 +60,10 @@ export const useGridRowReorder = (apiRef, props) => {
     originRowIndex.current = apiRef.current.getRowIndex(params.id);
   }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
   const handleDragOver = React.useCallback((params, event) => {
+    if (dragRowId === '') {
+      return;
+    }
+
     logger.debug(`Dragging over row ${params.id}`);
     event.preventDefault(); // Prevent drag events propagation.
     // For more information check here https://github.com/mui/mui-x/issues/2680.
@@ -75,7 +79,7 @@ export const useGridRowReorder = (apiRef, props) => {
     // Call the gridEditRowsStateSelector directly to avoid infnite loop
     const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
 
-    if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
+    if (dragRowId === '' || isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
       return;
     }
 

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.d.ts

@@ -17,5 +17,3 @@ export * from './utils';
 export type { DataGridProProps, GridExperimentalProFeatures } from './models/dataGridProProps';
 export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
 export type { GridApiRef, GridApi, GridInitialState, GridState } from './typeOverloads/reexports';
-export * from './hooks/features/rowGrouping';
-export * from './models/gridGroupingValueGetterParams';

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.11.1
+/** @license MUI v5.12.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -18,7 +18,4 @@ export * from './hooks';
 export * from './models';
 export * from './components';
 export * from './utils';
-export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';
-// We export them from here to avoid export duplication between pro and premium
-export * from './hooks/features/rowGrouping';
-export * from './models/gridGroupingValueGetterParams';
+export { useGridApiContext, useGridApiRef, useGridRootProps } from './typeOverloads/reexports';

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