@mui/x-data-grid 7.17.0 → 7.19.0

package/node/components/containers/GridRoot.js

@@ -54,7 +54,7 @@ const GridRoot = exports.GridRoot = /*#__PURE__*/React.forwardRef(function GridR
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridRootStyles.GridRootStyles, (0, _extends2.default)({
     ref: handleRef,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: ownerState
   }, other));
 });

package/node/components/containers/GridRootStyles.js

@@ -177,14 +177,28 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
   const hoverOpacity = (t.vars || t).palette.action.hoverOpacity;
   const hoverColor = (t.vars || t).palette.action.hover;
   const selectedOpacity = (t.vars || t).palette.action.selectedOpacity;
+  const selectedHoverOpacity = t.vars ? `calc(${hoverOpacity} + ${selectedOpacity})` // TODO: Improve type
+  : hoverOpacity + selectedOpacity;
   const selectedBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedOpacity})` : (0, _styles.alpha)(t.palette.primary.main, selectedOpacity);
-  const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / calc(
-                ${t.vars.palette.action.selectedOpacity} +
-                ${t.vars.palette.action.hoverOpacity}
-              ))` : (0, _styles.alpha)(t.palette.primary.main, t.palette.action.selectedOpacity + t.palette.action.hoverOpacity);
-  const pinnedHoverBackground = t.vars ? hoverColor : blend(pinnedBackground, hoverColor, hoverOpacity);
-  const pinnedSelectedBackground = t.vars ? selectedBackground : blend(pinnedBackground, selectedBackground, selectedOpacity);
-  const pinnedSelectedHoverBackground = t.vars ? hoverColor : blend(pinnedSelectedBackground, hoverColor, hoverOpacity);
+  const selectedHoverBackground = t.vars ? `rgba(${t.vars.palette.primary.mainChannel} / ${selectedHoverOpacity})` : (0, _styles.alpha)(t.palette.primary.main, selectedHoverOpacity);
+  const blendFn = t.vars ? blendCssVars : blend;
+  const getPinnedBackgroundStyles = backgroundColor => ({
+    [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
+      backgroundColor,
+      '&.Mui-selected': {
+        backgroundColor: blendFn(backgroundColor, selectedBackground, selectedOpacity),
+        '&:hover': {
+          backgroundColor: blendFn(backgroundColor, selectedBackground, selectedHoverOpacity)
+        }
+      }
+    }
+  });
+  const pinnedBackgroundColor = blendFn(pinnedBackground, hoverColor, hoverOpacity);
+  const pinnedHoverStyles = getPinnedBackgroundStyles(pinnedBackgroundColor);
+  const pinnedSelectedBackgroundColor = blendFn(pinnedBackground, selectedBackground, selectedOpacity);
+  const pinnedSelectedStyles = getPinnedBackgroundStyles(pinnedSelectedBackgroundColor);
+  const pinnedSelectedHoverBackgroundColor = blendFn(pinnedBackground, selectedHoverBackground, selectedHoverOpacity);
+  const pinnedSelectedHoverStyles = getPinnedBackgroundStyles(pinnedSelectedHoverBackgroundColor);
   const selectedStyles = {
     backgroundColor: selectedBackground,
     '&:hover': {
@@ -624,24 +638,15 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
       position: 'sticky',
       zIndex: 3,
-      background: 'var(--DataGrid-pinnedBackground)'
+      background: 'var(--DataGrid-pinnedBackground)',
+      '&.Mui-selected': {
+        backgroundColor: pinnedSelectedBackgroundColor
+      }
     },
     [`& .${_gridClasses.gridClasses.virtualScrollerContent} .${_gridClasses.gridClasses.row}`]: {
-      '&:hover': {
-        [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
-          backgroundColor: pinnedHoverBackground
-        }
-      },
-      [`&.Mui-selected`]: {
-        [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
-          backgroundColor: pinnedSelectedBackground
-        },
-        '&:hover': {
-          [`& .${_gridClasses.gridClasses['cell--pinnedLeft']}, & .${_gridClasses.gridClasses['cell--pinnedRight']}`]: {
-            backgroundColor: pinnedSelectedHoverBackground
-          }
-        }
-      }
+      '&:hover': pinnedHoverStyles,
+      '&.Mui-selected': pinnedSelectedStyles,
+      '&.Mui-selected:hover': pinnedSelectedHoverStyles
     },
     [`& .${_gridClasses.gridClasses.cellOffsetLeft}`]: {
       flex: '0 0 auto',
@@ -754,4 +759,8 @@ function blend(background, overlay, opacity, gamma = 1) {
     type: 'rgb',
     values: rgb
   });
+}
+const removeOpacity = color => `rgb(from ${color} r g b / 1)`;
+function blendCssVars(background, overlay, opacity) {
+  return `color-mix(in srgb,${background}, ${removeOpacity(overlay)} calc(${opacity} * 100%))`;
 }

package/node/components/containers/GridToolbarContainer.js

@@ -52,7 +52,7 @@ const GridToolbarContainer = exports.GridToolbarContainer = /*#__PURE__*/React.f
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridToolbarContainerRoot, (0, _extends2.default)({
     ref: ref,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other, {
     children: children

package/node/components/menu/GridMenu.js

@@ -93,7 +93,7 @@ function GridMenu(props) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridMenuRoot, (0, _extends2.default)({
     as: rootProps.slots.basePopper,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps,
     open: open,
     anchorEl: target,

package/node/components/panel/GridPanel.js

@@ -92,7 +92,7 @@ const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref)
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelRoot, (0, _extends2.default)({
     ref: ref,
     placement: "bottom-start",
-    className: (0, _clsx.default)(className, classes.panel),
+    className: (0, _clsx.default)(classes.panel, className),
     ownerState: rootProps,
     anchorEl: anchorEl,
     modifiers: modifiers

package/node/components/panel/GridPanelContent.js

@@ -45,7 +45,7 @@ function GridPanelContent(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelContentRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/node/components/panel/GridPanelFooter.js

@@ -45,7 +45,7 @@ function GridPanelFooter(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelFooterRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/node/components/panel/GridPanelHeader.js

@@ -43,7 +43,7 @@ function GridPanelHeader(props) {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const classes = useUtilityClasses(rootProps);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelHeaderRoot, (0, _extends2.default)({
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     ownerState: rootProps
   }, other));
 }

package/node/components/panel/GridPanelWrapper.js

@@ -56,7 +56,7 @@ const GridPanelWrapper = exports.GridPanelWrapper = /*#__PURE__*/React.forwardRe
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPanelWrapperRoot, (0, _extends2.default)({
       ref: ref,
       tabIndex: -1,
-      className: (0, _clsx.default)(className, classes.root),
+      className: (0, _clsx.default)(classes.root, className),
       ownerState: rootProps
     }, other))
   }));

package/node/components/toolbar/GridToolbarQuickFilter.js

@@ -101,7 +101,7 @@ function GridToolbarQuickFilter(props) {
     variant: "standard",
     value: searchValue,
     onChange: handleSearchValueChange,
-    className: (0, _clsx.default)(className, classes.root),
+    className: (0, _clsx.default)(classes.root, className),
     placeholder: apiRef.current.getLocaleText('toolbarQuickFilterPlaceholder'),
     "aria-label": apiRef.current.getLocaleText('toolbarQuickFilterLabel'),
     type: "search"

package/node/components/virtualization/GridBottomContainer.js

@@ -12,6 +12,9 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _system = require("@mui/system");
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _gridClasses = require("../../constants/gridClasses");
+var _gridDimensionsSelectors = require("../../hooks/features/dimensions/gridDimensionsSelectors");
+var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
+var _useGridSelector = require("../../hooks/utils/useGridSelector");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = () => {
   const slots = {
@@ -26,8 +29,22 @@ const Element = (0, _system.styled)('div')({
 });
 function GridBottomContainer(props) {
   const classes = useUtilityClasses();
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const {
+    viewportOuterSize,
+    minimumSize,
+    hasScrollX,
+    scrollbarSize
+  } = (0, _useGridSelector.useGridSelector)(apiRef, _gridDimensionsSelectors.gridDimensionsSelector);
+  const scrollHeight = hasScrollX ? scrollbarSize : 0;
+  const offset = Math.max(viewportOuterSize.height - minimumSize.height -
+  // Subtract scroll height twice to account for GridVirtualScrollerFiller and horizontal scrollbar
+  2 * scrollHeight, 0);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
-    className: (0, _clsx.default)(classes.root, props.className, _gridClasses.gridClasses['container--bottom']),
+    className: (0, _clsx.default)(classes.root, _gridClasses.gridClasses['container--bottom']),
+    style: {
+      transform: `translateY(${offset}px)`
+    },
     role: "presentation"
   }));
 }

package/node/components/virtualization/GridMainContainer.js

@@ -24,7 +24,9 @@ const Element = (0, _system.styled)('div', {
 })({
   flexGrow: 1,
   position: 'relative',
-  overflow: 'hidden'
+  overflow: 'hidden',
+  display: 'flex',
+  flexDirection: 'column'
 });
 const GridMainContainer = exports.GridMainContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
   const rootProps = (0, _useGridRootProps.useGridRootProps)();

package/node/components/virtualization/GridTopContainer.js

@@ -27,7 +27,7 @@ const Element = (0, _system.styled)('div')({
 function GridTopContainer(props) {
   const classes = useUtilityClasses();
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Element, (0, _extends2.default)({}, props, {
-    className: (0, _clsx.default)(classes.root, props.className, _gridClasses.gridClasses['container--top']),
+    className: (0, _clsx.default)(classes.root, _gridClasses.gridClasses['container--top']),
     role: "presentation"
   }));
 }

package/node/components/virtualization/GridVirtualScrollbar.js

@@ -28,9 +28,6 @@ const Scrollbar = (0, _system.styled)('div')({
   position: 'absolute',
   display: 'inline-block',
   zIndex: 6,
-  '& > div': {
-    display: 'inline-block'
-  },
   // In macOS Safari and Gnome Web, scrollbars are overlaid and don't affect the layout. So we consider
   // their size to be 0px throughout all the calculations, but the floating scrollbar container does need
   // to appear and have a real size. We set it to 14px because it seems like an acceptable value and we
@@ -62,9 +59,6 @@ const ScrollbarHorizontal = (0, _system.styled)(Scrollbar)({
   },
   bottom: '0px'
 });
-const Content = (0, _system.styled)('div')({
-  display: 'inline-block'
-});
 const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.forwardRef(function GridVirtualScrollbar(props, ref) {
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -134,7 +128,7 @@ const GridVirtualScrollbar = exports.GridVirtualScrollbar = /*#__PURE__*/React.f
     className: classes.root,
     tabIndex: -1,
     "aria-hidden": "true",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Content, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: contentRef,
       className: classes.content
     })

package/node/components/virtualization/GridVirtualScroller.js

@@ -45,6 +45,7 @@ const Scroller = (0, _system.styled)('div', {
 })({
   position: 'relative',
   height: '100%',
+  flexGrow: 1,
   overflow: 'scroll',
   scrollbarWidth: 'none' /* Firefox */,
   '&::-webkit-scrollbar': {

package/node/components/virtualization/GridVirtualScrollerFiller.js

@@ -51,10 +51,9 @@ function GridVirtualScrollerFiller({
     leftPinnedWidth,
     rightPinnedWidth
   } = (0, _useGridSelector.useGridSelector)(apiRef, _dimensions.gridDimensionsSelector);
-  const scrollbarHeight = hasScrollX ? scrollbarSize : 0;
-  const expandedHeight = viewportOuterSize.height - minimumSize.height - scrollbarHeight;
-  const height = Math.max(scrollbarHeight, expandedHeight);
-  if (height === 0) {
+  const height = hasScrollX ? scrollbarSize : 0;
+  const needsLastRowBorder = viewportOuterSize.height - minimumSize.height > 0;
+  if (height === 0 && !needsLastRowBorder) {
     return null;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Filler, {

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -61,7 +61,7 @@ const useGridColumnHeaders = props => {
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const columnsLookup = (0, _utils.useGridSelector)(apiRef, _columns.gridColumnLookupSelector);
-  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, isRtl, pinnedColumns.left.length);
+  const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, pinnedColumns.left.length);
   const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
@@ -91,7 +91,6 @@ const useGridColumnHeaders = props => {
   const getColumnsToRender = params => {
     const {
       renderContext: currentContext = renderContext,
-      // TODO: `minFirstColumn` is not used anymore, could be refactored out.
       maxLastColumn = visibleColumns.length
     } = params || {};
     const firstColumnToRender = currentContext.firstColumnIndex;
@@ -131,16 +130,22 @@ const useGridColumnHeaders = props => {
     computedWidth
   }) => {
     let style;
-    if (pinnedPosition === 'left' || pinnedPosition === 'right') {
+    const isLeftPinned = pinnedPosition === _columns.GridPinnedColumnPosition.LEFT;
+    const isRightPinned = pinnedPosition === _columns.GridPinnedColumnPosition.RIGHT;
+    if (isLeftPinned || isRightPinned) {
       const pinnedOffset = (0, _getPinnedCellOffset.getPinnedCellOffset)(pinnedPosition, computedWidth, columnIndex, columnPositions, dimensions);
+      let side = isLeftPinned ? 'left' : 'right';
+      if (isRtl) {
+        side = isLeftPinned ? 'right' : 'left';
+      }
       if (pinnedPosition === 'left') {
         style = {
-          left: pinnedOffset
+          [side]: pinnedOffset
         };
       }
       if (pinnedPosition === 'right') {
         style = {
-          right: pinnedOffset
+          [side]: pinnedOffset
         };
       }
     }
@@ -199,18 +204,15 @@ const useGridColumnHeaders = props => {
       children: [leftRenderContext && getColumnHeaders({
         position: _columns.GridPinnedColumnPosition.LEFT,
         renderContext: leftRenderContext,
-        minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
       }), getColumnHeaders({
         renderContext,
-        minFirstColumn: pinnedColumns.left.length,
         maxLastColumn: visibleColumns.length - pinnedColumns.right.length
       }), rightRenderContext && getColumnHeaders({
         position: _columns.GridPinnedColumnPosition.RIGHT,
         renderContext: rightRenderContext,
-        minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       }, {
         disableReorder: true,
@@ -290,7 +292,7 @@ const useGridColumnHeaders = props => {
         depth: depth,
         isLastColumn: headerInfo.colIndex === visibleColumns.length - headerInfo.fields.length,
         maxDepth: headerGroupingMaxDepth,
-        height: dimensions.headerHeight,
+        height: dimensions.groupHeaderHeight,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
@@ -317,7 +319,6 @@ const useGridColumnHeaders = props => {
           params: {
             position: _columns.GridPinnedColumnPosition.LEFT,
             renderContext: leftRenderContext,
-            minFirstColumn: leftRenderContext.firstColumnIndex,
             maxLastColumn: leftRenderContext.lastColumnIndex
           }
         }), getColumnGroupHeaders({
@@ -330,7 +331,6 @@ const useGridColumnHeaders = props => {
           params: {
             position: _columns.GridPinnedColumnPosition.RIGHT,
             renderContext: rightRenderContext,
-            minFirstColumn: rightRenderContext.firstColumnIndex,
             maxLastColumn: rightRenderContext.lastColumnIndex
           }
         })]

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

@@ -311,13 +311,13 @@ const useGridColumnResize = (apiRef, props) => {
     }
     refs.groupHeaderElements = (0, _domUtils.findGroupHeaderElementsFromField)(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
     refs.cellElements = (0, _domUtils.findGridCellElementsFromCol)(refs.columnHeaderElement, apiRef.current);
-    refs.fillerLeft = (0, _domUtils.findGridElement)(apiRef.current, 'filler--pinnedLeft');
-    refs.fillerRight = (0, _domUtils.findGridElement)(apiRef.current, 'filler--pinnedRight');
+    refs.fillerLeft = (0, _domUtils.findGridElement)(apiRef.current, isRtl ? 'filler--pinnedRight' : 'filler--pinnedLeft');
+    refs.fillerRight = (0, _domUtils.findGridElement)(apiRef.current, isRtl ? 'filler--pinnedLeft' : 'filler--pinnedRight');
     const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
-    refs.leftPinnedCellsAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedCellsAfterCol)(apiRef.current, refs.columnHeaderElement);
-    refs.rightPinnedCellsBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedCellsBeforeCol)(apiRef.current, refs.columnHeaderElement);
-    refs.leftPinnedHeadersAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedHeadersAfterCol)(apiRef.current, refs.columnHeaderElement);
-    refs.rightPinnedHeadersBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedHeadersBeforeCol)(apiRef.current, refs.columnHeaderElement);
+    refs.leftPinnedCellsAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedCellsAfterCol)(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.rightPinnedCellsBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedCellsBeforeCol)(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.leftPinnedHeadersAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedHeadersAfterCol)(apiRef.current, refs.columnHeaderElement, isRtl);
+    refs.rightPinnedHeadersBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedHeadersBeforeCol)(apiRef.current, refs.columnHeaderElement, isRtl);
     resizeDirection.current = getResizeDirection(separator, isRtl);
     initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
   };

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -11,6 +11,7 @@ exports.getFirstNonSpannedColumnToRender = getFirstNonSpannedColumnToRender;
 exports.getTotalHeaderHeight = getTotalHeaderHeight;
 exports.hydrateColumnsWidth = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _resolveProps = _interopRequireDefault(require("@mui/utils/resolveProps"));
 var _colDef = require("../../../colDef");
 var _gridColumnsSelector = require("./gridColumnsSelector");
 var _utils = require("../../../utils/utils");
@@ -289,9 +290,9 @@ const createColumnsState = ({
         }
       }
     });
-    columnsState.lookup[field] = (0, _extends2.default)({}, existingState, newColumn, {
+    columnsState.lookup[field] = (0, _resolveProps.default)(existingState, (0, _extends2.default)({}, newColumn, {
       hasBeenResized
-    });
+    }));
   });
   if (keepOnlyColumnsToUpsert && !isInsideStateInitializer) {
     Object.keys(columnsState.lookup).forEach(field => {

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -38,6 +38,7 @@ const EMPTY_DIMENSIONS = {
   hasScrollY: false,
   scrollbarSize: 0,
   headerHeight: 0,
+  groupHeaderHeight: 0,
   headerFilterHeight: 0,
   rowWidth: 0,
   rowHeight: 0,
@@ -65,6 +66,7 @@ function useGridDimensions(apiRef, props) {
   const densityFactor = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityFactorSelector);
   const rowHeight = Math.floor(props.rowHeight * densityFactor);
   const headerHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const groupHeaderHeight = Math.floor((props.columnGroupHeaderHeight ?? props.columnHeaderHeight) * densityFactor);
   const headerFilterHeight = Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor);
   const columnsTotalWidth = roundToDecimalPlaces((0, _columns.gridColumnsTotalWidthSelector)(apiRef), 6);
   const headersTotalHeight = (0, _gridColumnsUtils.getTotalHeaderHeight)(apiRef, props);
@@ -185,6 +187,7 @@ function useGridDimensions(apiRef, props) {
       hasScrollY,
       scrollbarSize,
       headerHeight,
+      groupHeaderHeight,
       headerFilterHeight,
       rowWidth,
       rowHeight,
@@ -201,7 +204,7 @@ function useGridDimensions(apiRef, props) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newDimensions.viewportInnerSize);
     }
     apiRef.current.updateRenderContext?.();
-  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
+  }, [apiRef, setDimensions, props.scrollbarSize, props.autoHeight, rowsMeta.currentPageTotalHeight, rowHeight, headerHeight, groupHeaderHeight, headerFilterHeight, columnsTotalWidth, headersTotalHeight, leftPinnedWidth, rightPinnedWidth]);
   const apiPublic = {
     resize,
     getRootDimensions

package/node/hooks/features/editing/useGridCellEditing.js

@@ -20,6 +20,7 @@ var _keyboardUtils = require("../../../utils/keyboardUtils");
 var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _utils2 = require("../../../utils/utils");
 var _gridEditCellParams = require("../../../models/params/gridEditCellParams");
+var _utils3 = require("./utils");
 const _excluded = ["id", "field"],
   _excluded2 = ["id", "field"];
 const useGridCellEditing = (apiRef, props) => {
@@ -75,7 +76,7 @@ const useGridCellEditing = (apiRef, props) => {
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === _gridEditRowModel.GridCellModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
-      // TODO: `event.which` is deprecated but this is a temporary workaround
+      // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
       if (event.which === 229) {
         return;
       }
@@ -257,24 +258,7 @@ const useGridCellEditing = (apiRef, props) => {
     } = params;
     let newValue = apiRef.current.getCellValue(id, field);
     if (deleteValue) {
-      const fieldType = apiRef.current.getColumn(field).type;
-      switch (fieldType) {
-        case 'boolean':
-          newValue = false;
-          break;
-        case 'date':
-        case 'dateTime':
-        case 'number':
-          newValue = undefined;
-          break;
-        case 'singleSelect':
-          newValue = null;
-          break;
-        case 'string':
-        default:
-          newValue = '';
-          break;
-      }
+      newValue = (0, _utils3.getDefaultCellValue)(apiRef.current.getColumn(field));
     } else if (initialValue) {
       newValue = initialValue;
     }

package/node/hooks/features/editing/useGridRowEditing.js

@@ -22,6 +22,7 @@ var _gridRowsSelector = require("../rows/gridRowsSelector");
 var _utils2 = require("../../../utils/utils");
 var _gridRowParams = require("../../../models/params/gridRowParams");
 var _colDef = require("../../../colDef");
+var _utils3 = require("./utils");
 const _excluded = ["id"],
   _excluded2 = ["id"];
 const useGridRowEditing = (apiRef, props) => {
@@ -117,7 +118,7 @@ const useGridRowEditing = (apiRef, props) => {
   const handleCellKeyDown = React.useCallback((params, event) => {
     if (params.cellMode === _gridEditRowModel.GridRowModes.Edit) {
       // Wait until IME is settled for Asian languages like Japanese and Chinese
-      // TODO: `event.which` is deprecated but this is a temporary workaround
+      // TODO: to replace at one point. See https://github.com/mui/material-ui/pull/39713#discussion_r1381678957.
       if (event.which === 229) {
         return;
       }
@@ -327,7 +328,11 @@ const useGridRowEditing = (apiRef, props) => {
       }
       let newValue = apiRef.current.getCellValue(id, field);
       if (fieldToFocus === field && (deleteValue || initialValue)) {
-        newValue = deleteValue ? '' : initialValue;
+        if (deleteValue) {
+          newValue = (0, _utils3.getDefaultCellValue)(apiRef.current.getColumn(field));
+        } else if (initialValue) {
+          newValue = initialValue;
+        }
       }
       acc[field] = {
         value: newValue,

package/node/hooks/features/editing/utils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultCellValue = void 0;
+const getDefaultCellValue = colDef => {
+  switch (colDef.type) {
+    case 'boolean':
+      return false;
+    case 'date':
+    case 'dateTime':
+    case 'number':
+      return undefined;
+    case 'singleSelect':
+      return null;
+    case 'string':
+    default:
+      return '';
+  }
+};
+exports.getDefaultCellValue = getDefaultCellValue;

package/node/hooks/features/export/useGridPrintExport.js

@@ -46,6 +46,7 @@ function buildPrintWindow(title) {
  * @requires useGridParamsApi (method)
  */
 const useGridPrintExport = (apiRef, props) => {
+  const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridPrintExport');
   const doc = React.useRef(null);
   const previousGridState = React.useRef(null);
@@ -54,7 +55,7 @@ const useGridPrintExport = (apiRef, props) => {
   const previousVirtualizationState = React.useRef();
   React.useEffect(() => {
     doc.current = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);
-  }, [apiRef]);
+  }, [apiRef, hasRootReference]);
 
   // Returns a promise because updateColumns triggers state update and
   // the new state needs to be in place before the grid can be sized correctly

package/node/hooks/features/focus/useGridFocus.js

@@ -43,6 +43,7 @@ exports.focusStateInitializer = focusStateInitializer;
 const useGridFocus = (apiRef, props) => {
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridFocus');
   const lastClickedCell = React.useRef(null);
+  const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const publishCellFocusOut = React.useCallback((cell, event) => {
     if (cell) {
       // The row might have been deleted
@@ -389,7 +390,7 @@ const useGridFocus = (apiRef, props) => {
     return () => {
       doc.removeEventListener('mouseup', handleDocumentClick);
     };
-  }, [apiRef, handleDocumentClick]);
+  }, [apiRef, hasRootReference, handleDocumentClick]);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderBlur', handleBlur);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellDoubleClick', handleCellDoubleClick);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'cellMouseDown', handleCellMouseDown);